const venturesStyles = {
  wrap: { padding: '120px 0', background: 'var(--bg)', color: 'var(--ink)', position: 'relative' },
  head: { display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'flex-end', marginBottom: 56, paddingBottom: 32, borderBottom: '1px solid var(--line)' },
  chapterLabel: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--pink)', marginBottom: 14 },
  chapter: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(48px, 7vw, 104px)', lineHeight: 0.9, color: 'var(--ink)', letterSpacing: '-0.045em' },
  lede: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 500, fontSize: 'clamp(18px, 2vw, 23px)', lineHeight: 1.5, color: 'var(--muted)', maxWidth: 560 },

  thesis: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 500, fontSize: 'clamp(17px, 1.8vw, 20px)', lineHeight: 1.62, color: 'var(--ink-soft)', maxWidth: 880, marginBottom: 52 },
  thesisStrong: { color: 'var(--ink)', fontWeight: 700 },

  gridLabel: { display: 'flex', alignItems: 'center', gap: 12, fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--muted)', marginBottom: 22 },
  gridLabelLine: { flex: 1, height: 1, background: 'var(--line)' },

  grid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 },
  card: { background: 'var(--paper)', borderRadius: 22, padding: '32px 28px', border: '1px solid var(--line)', display: 'flex', flexDirection: 'column', minHeight: 240, transition: 'transform .2s ease, box-shadow .2s ease' },
  logoWrap: { height: 40, display: 'flex', alignItems: 'center', marginBottom: 22 },
  logoImg: { maxHeight: 32, width: 'auto', maxWidth: 160, display: 'block' },
  logoText: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 26, letterSpacing: '-0.03em', color: 'var(--ink)' },
  name: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 22, letterSpacing: '-0.03em', color: 'var(--ink)', marginBottom: 8 },
  desc: { fontFamily: 'Inter, sans-serif', fontSize: 14.5, lineHeight: 1.6, color: 'var(--muted)', marginBottom: 'auto' },
  stage: { display: 'inline-flex', alignSelf: 'flex-start', alignItems: 'center', gap: 8, marginTop: 20, padding: '6px 12px', borderRadius: 999, fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 10.5, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', background: 'rgba(30,88,100,.07)', color: 'var(--ink)', border: '1px solid rgba(30,88,100,.14)' },
  stageDot: { width: 7, height: 7, borderRadius: '50%', background: 'var(--pink)' },

  footnote: { marginTop: 40, fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 500, fontSize: 15, color: 'var(--muted)', textAlign: 'center', maxWidth: 720, margin: '40px auto 0', lineHeight: 1.6 },
};

const PORTFOLIO = [
  { name: 'Lovable', logo: 'assets/logos/lovable-logo.png', desc: 'AI app builder that turns plain-English ideas into working software. One of the fastest-growing tools in its space.', stage: 'Portfolio' },
  { name: 'Stan', logo: 'assets/logos/stan-logo.png', desc: 'The creator store. Helps creators turn an audience into a business with digital products and bookings.', stage: 'Portfolio' },
  { name: 'Implement AI', logo: 'assets/logos/implement-ai-logo.svg', desc: 'AI automation that puts agents to work inside real businesses. Practical AI for everyday operators.', stage: 'Portfolio' },
];

function VenturesSection() {
  return (
    <section id="ventures" style={venturesStyles.wrap}>
      <div className="container">
        <div style={venturesStyles.head} className="vent-head">
          <div>
            <div style={venturesStyles.chapterLabel}>● Up close · DreamVentures</div>
            <h2 style={venturesStyles.chapter}>The companies<br/>we back.</h2>
          </div>
          <p style={venturesStyles.lede}>
            Startups need distribution. DreamVentures puts them in front of millions of their customers and invests in the tools that power the entrepreneurial economy. Seed to Series A.
          </p>
        </div>

        <p style={venturesStyles.thesis}>
          Over the coming years, millions of people will be made redundant from corporate careers, and graduates are already struggling to find work in a shrinking market. That will force, and inspire, a global wave of micro-entrepreneurship: one-person businesses, small teams, people replacing their salary by building something of their own. <span style={venturesStyles.thesisStrong}>Entrepreneurship used to look like a path for the 1%. It's becoming a real option for the 99%.</span> We believe in that shift, so we invest in the tools, platforms and companies that make entrepreneurship accessible to everyone: the infrastructure that lets ordinary people start, grow and sustain a small business as a genuine way of life.
        </p>

        <div style={venturesStyles.gridLabel}>
          <span>● A few of the companies we've backed</span>
          <span style={venturesStyles.gridLabelLine}></span>
        </div>

        <div style={venturesStyles.grid} className="vent-grid">
          {PORTFOLIO.map((c) => (
            <div key={c.name} style={venturesStyles.card} className="vent-card">
              <div style={venturesStyles.logoWrap}>
                {c.logo
                  ? <img src={c.logo} alt={c.name} style={venturesStyles.logoImg} />
                  : <span style={venturesStyles.logoText}>{c.name}</span>}
              </div>
              <p style={venturesStyles.desc}>{c.desc}</p>
              <span style={venturesStyles.stage}><span style={venturesStyles.stageDot}></span>{c.stage}</span>
            </div>
          ))}
        </div>

        <p style={venturesStyles.footnote}>
          These are a few examples, not the full portfolio.
        </p>
      </div>

      <style>{`
        .vent-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(30,88,100,.10); }
        @media (max-width: 980px) {
          .vent-head { grid-template-columns: 1fr !important; gap: 28px !important; }
          .vent-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}