const companiesV2Styles = {
  wrap: { padding: '120px 0', background: 'var(--ink)', color: 'var(--paper)', position: 'relative' },
  head: { display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'flex-end', marginBottom: 64, paddingBottom: 32, borderBottom: '1px solid rgba(255,255,255,.18)' },
  chapter: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(64px, 8vw, 128px)', lineHeight: 0.88, color: 'var(--paper)', letterSpacing: '-0.045em' },
  chapterLabel: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--yellow)', marginBottom: 14 },
  lede: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 500, fontSize: 'clamp(18px, 2vw, 24px)', lineHeight: 1.5, color: 'rgba(255,255,255,.78)', maxWidth: 600 },

  groupLabel: {
    display: 'flex', alignItems: 'center', gap: 12,
    fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'rgba(255,255,255,.55)',
    marginBottom: 24, marginTop: 24, whiteSpace: 'nowrap',
  },
  groupLine: { flex: 1, height: 1, background: 'rgba(255,255,255,.14)' },

  // Feature row — large cards for live, brand-coloured
  featRow: { display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 20, marginBottom: 20 },
  feat: { position: 'relative', borderRadius: 24, overflow: 'hidden', padding: '32px 32px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 320, border: '1px solid rgba(255,255,255,.08)' },
  featHead: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 },
  liveDot: {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    padding: '6px 10px', borderRadius: 999,
    fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 10.5, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase',
  },
  liveDotInk: {
    width: 8, height: 8, borderRadius: '50%', background: 'currentColor',
    boxShadow: '0 0 0 4px rgba(46,196,241,.0)',
    animation: 'pulse 2.4s ease-in-out infinite',
  },
  featTitle: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(24px, 2.7vw, 34px)', lineHeight: 0.95, letterSpacing: '-0.04em' },
  featObj: { fontSize: 15, lineHeight: 1.55, marginTop: 12, maxWidth: 460 },
  featKpi: { marginTop: 28, paddingTop: 18, borderTop: '1px solid currentColor', opacity: 0.95, display: 'flex', gap: 24, flexWrap: 'wrap' },
  kpiNum: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 26, letterSpacing: '-0.04em', lineHeight: 1 },
  kpiLbl: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.08em', marginTop: 4, fontWeight: 500 },

  // Smaller card
  card: { position: 'relative', borderRadius: 20, padding: '28px 24px', minHeight: 280, border: '1px solid rgba(255,255,255,.13)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', background: 'rgba(255,255,255,.025)', transition: 'background .25s ease, border-color .25s ease' },
  cardStatusLive: { display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 10px', borderRadius: 999, fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 10.5, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', alignSelf: 'flex-start', background: 'rgba(46,196,241,.16)', color: 'var(--helpbnk-1)', border: '1px solid rgba(46,196,241,.35)' },
  cardStatusSoon: { display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 10px', borderRadius: 999, fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 10.5, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', alignSelf: 'flex-start', background: 'rgba(255,214,10,.14)', color: 'var(--yellow)', border: '1px solid rgba(255,214,10,.3)' },
  cardStatusExpl: { display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 10px', borderRadius: 999, fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 10.5, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', alignSelf: 'flex-start', background: 'rgba(255,255,255,.08)', color: 'rgba(255,255,255,.7)', border: '1px solid rgba(255,255,255,.15)' },
  cardTitle: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(24px, 2.7vw, 34px)', lineHeight: 1.05, color: 'var(--paper)', letterSpacing: '-0.035em', marginTop: 16 },
  cardObj: { fontSize: 14, color: 'rgba(255,255,255,.65)', lineHeight: 1.6, marginTop: 12 },
  cardTimeline: { marginTop: 18, paddingTop: 12, borderTop: '1px solid rgba(255,255,255,.12)', fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 12, fontWeight: 600, color: 'rgba(255,255,255,.55)' },

  footnote: { marginTop: 64, fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 500, fontSize: 16, color: 'rgba(255,255,255,.65)', textAlign: 'center', maxWidth: 760, margin: '64px auto 0', lineHeight: 1.6 },
};

const LIVE_FEATURED = [
  {
    name: 'HelpBnk',
    href: 'https://helpbnk.com',
    obj: 'A global community on a mission to help 10 million people start and grow a business, for free. It connects new and existing founders with real entrepreneurs, practical advice and hands-on help, so anyone, whatever their background, money or network, can turn an idea into a business.',
    bg: 'linear-gradient(135deg, var(--helpbnk-1) 0%, var(--helpbnk-2) 100%)',
    fg: '#fff',
    kpis: [['300k+', 'Founders online'], ['Global', 'Accelerators']],
    span: 7,
  },
  {
    name: 'Simon Squibb',
    href: 'https://www.simonsquibb.com',
    obj: 'The trust, audience and distribution engine of the group, and the biggest entrepreneurship audience in the UK.',
    bg: 'var(--yellow)',
    fg: 'var(--ink)',
    kpis: [['22M+', 'Followers']],
    span: 5,
  },
  {
    name: 'DreamMedia',
    obj: 'Original formats, creators and IP that turn the audience into returning fans of every Dream company.',
    bg: '#E11D2A',
    fg: '#fff',
    kpis: [['200-400M+', 'Monthly views'], ['36', 'Owned channels']],
    span: 4,
  },
  {
    name: 'DreamVentures',
    href: 'https://www.simonsquibb.com/investments',
    obj: 'Startups need distribution. DreamVentures puts them in front of millions of their customers, and invests in the tools that power the entrepreneurial economy.',
    bg: '#F97316',
    fg: 'var(--ink)',
    kpis: [['Seed → Series A', 'Investment stage']],
    span: 4,
  },
  {
    name: 'DreamerFund',
    obj: 'Grant funding that helps people chase their dream, built to last. 10% of every Dream company’s profit flows in.',
    bg: '#FFF6D6',
    fg: 'var(--ink)',
    kpis: [['10%', 'Of group profit'], ['Recycled', 'Forever']],
    span: 4,
  },
];

const COMING = [
  {
    name: 'DreamBrew',
    href: 'https://dreambrew.com',
    obj: 'Premium ready-to-drink coffee, co-founded with Rio Ferdinand. Two flavours at launch (Purpose + Focus), and a portion of every can goes back to the DreamerFund.',
    timeline: 'Launching Summer 2026',
    status: 'soon',
  },
  {
    name: 'DreamClothing',
    obj: 'A consumer brand built around the mission. Slow on purpose, built to last.',
    timeline: 'Spring 2027',
    status: 'soon',
  },
  {
    name: 'DreamBanking',
    obj: 'Financial infrastructure for entrepreneurs everywhere. We\'ll launch when the foundations are right.',
    timeline: 'Coming Q3 2027',
    status: 'soon',
  },
];

function CompaniesV2() {
  return (
    <section id="companies" style={companiesV2Styles.wrap}>
      <div className="container">
        <div style={companiesV2Styles.head} className="cv2-head">
          <div>
            <div style={companiesV2Styles.chapterLabel}>● The companies of Dream</div>
            <h2 style={companiesV2Styles.chapter}>One mission.<br/>Many ways to make it happen<span style={{ color: 'var(--yellow)' }}>.</span></h2>
          </div>
          <p style={companiesV2Styles.lede}>
            Dream is an ecosystem of companies united by a single purpose. Each business plays a different role, giving dreamers, partners and investors multiple ways to get involved, contribute and grow.
          </p>
        </div>

        {/* Live & scaling */}
        <div style={companiesV2Styles.groupLabel}>
          <span>● Live &amp; scaling</span>
          <span style={companiesV2Styles.groupLine}></span>
        </div>

        <div style={companiesV2Styles.featRow} className="cv2-feat">
          {LIVE_FEATURED.map((c) => {
            const Tag = c.href ? 'a' : 'div';
            const linkProps = c.href ? { href: c.href, target: '_blank', rel: 'noopener noreferrer' } : {};
            return (
            <Tag key={c.name} {...linkProps} style={{ ...companiesV2Styles.feat, background: c.bg, color: c.fg, gridColumn: `span ${c.span}`, textDecoration: 'none', cursor: c.href ? 'pointer' : 'default' }} className="cv2-feat-card">
              <div style={companiesV2Styles.featHead}>
                <span style={{ ...companiesV2Styles.liveDot, background: c.fg === '#fff' ? 'rgba(255,255,255,.16)' : 'rgba(30,88,100,.12)', color: c.fg }}>
                  <span style={companiesV2Styles.liveDotInk}></span>Live
                </span>
                {c.href ? (
                  <span aria-hidden="true" style={{ ...companiesV2Styles.liveDot, background: c.fg === '#fff' ? 'rgba(255,255,255,.16)' : 'rgba(30,88,100,.12)', color: c.fg }}>Visit →</span>
                ) : null}
              </div>
              <div>
                <h3 style={{ ...companiesV2Styles.featTitle, color: c.fg }}>{c.name}</h3>
                <p style={{ ...companiesV2Styles.featObj, color: c.fg === '#fff' ? 'rgba(255,255,255,.85)' : 'rgba(30,88,100,.78)' }}>{c.obj}</p>
                <div style={{ ...companiesV2Styles.featKpi, borderColor: c.fg === '#fff' ? 'rgba(255,255,255,.25)' : 'rgba(30,88,100,.2)' }}>
                  {c.kpis.map(([n, l]) => (
                    <div key={l}>
                      <div style={{ ...companiesV2Styles.kpiNum, color: c.fg }}>{n}</div>
                      <div style={{ ...companiesV2Styles.kpiLbl, color: c.fg === '#fff' ? 'rgba(255,255,255,.7)' : 'rgba(30,88,100,.65)' }}>{l}</div>
                    </div>
                  ))}
                </div>
              </div>
            </Tag>
            );
          })}

        </div>

        {/* Coming next */}
        <div style={companiesV2Styles.groupLabel}>
          <span>● Coming next</span>
          <span style={companiesV2Styles.groupLine}></span>
        </div>

        <div style={companiesV2Styles.featRow} className="cv2-feat">
          {COMING.map((c) => {
            const Tag = c.href ? 'a' : 'div';
            const linkProps = c.href ? { href: c.href, target: '_blank', rel: 'noopener noreferrer' } : {};
            return (
            <Tag key={c.name} {...linkProps} style={{ ...companiesV2Styles.card, gridColumn: 'span 4', textDecoration: 'none', cursor: c.href ? 'pointer' : 'default' }} className="cv2-card">
              <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
                  <span style={c.status === 'expl' ? companiesV2Styles.cardStatusExpl : companiesV2Styles.cardStatusSoon}>
                    {c.status === 'expl' ? 'In exploration' : 'Coming soon'}
                  </span>
                  {c.href ? (
                    <span aria-hidden="true" style={companiesV2Styles.cardStatusExpl}>Visit →</span>
                  ) : null}
                </div>
                <h4 style={companiesV2Styles.cardTitle}>{c.name}</h4>
                <p style={companiesV2Styles.cardObj}>{c.obj}</p>
              </div>
              <div style={companiesV2Styles.cardTimeline}>● {c.timeline}</div>
            </Tag>
            );
          })}
        </div>

        <p style={companiesV2Styles.footnote}>
          Every Dream company puts <span style={{ color: 'var(--yellow)', fontWeight: 700 }}>10% of its profit</span> into the DreamerFund. Help one dreamer, and the next one gets helped too.
        </p>
      </div>

      <style>{`
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
        .cv2-card:hover { background: rgba(255,255,255,.045) !important; border-color: rgba(255,255,255,.22) !important; }
        .cv2-feat-card:hover { transform: translateY(-2px); transition: transform .2s ease; }
        @media (max-width: 980px) {
          .cv2-head { grid-template-columns: 1fr !important; gap: 32px !important; }
          .cv2-feat > * { grid-column: span 12 !important; }
        }
      `}</style>
    </section>
  );
}