// Problem — editorial spread, big pull-quote moment
const Problem = () => {
  const problemStyles = {
    grid: {
      display: 'grid',
      gridTemplateColumns: '1fr',
      gap: 'clamp(40px, 6vw, 80px)',
    },
    head: {
      display: 'grid',
      gridTemplateColumns: 'minmax(120px, 200px) 1fr',
      gap: 'clamp(24px, 5vw, 64px)',
      alignItems: 'baseline',
      marginBottom: 'clamp(40px, 7vh, 96px)',
    },
    body: {
      display: 'grid',
      gridTemplateColumns: 'repeat(12, 1fr)',
      gap: 24,
      rowGap: 56,
    },
    quote: {
      gridColumn: '1 / -1',
      fontFamily: 'var(--serif)',
      fontWeight: 400,
      fontSize: 'clamp(34px, 4.6vw, 76px)',
      lineHeight: 1.05,
      letterSpacing: '-0.015em',
      maxWidth: '32ch',
    },
    statsCol: {
      gridColumn: '1 / span 5',
      borderTop: '1px solid var(--rule)',
      paddingTop: 28,
    },
    proseCol: {
      gridColumn: '7 / -1',
      borderTop: '1px solid var(--rule)',
      paddingTop: 28,
    },
  };

  const stats = [
    { n: '94%', label: 'of side projects never get a landing page' },
    { n: '11×', label: 'longer to launch than to build, on average' },
    { n: '$0', label: 'budget most indie devs have for design' },
  ];

  return (
    <section className="tight" id="problem">
      <div className="container">
        <div style={problemStyles.head}>
          <div className="eyebrow"><span className="dot"></span> 01 — The problem</div>
          <h2 className="display h-l" style={{maxWidth: '22ch'}}>
            You can build it. <span className="it">Launching</span> it is the bit
            that never gets made.
          </h2>
        </div>

        <div style={problemStyles.body}>
          <div style={problemStyles.quote}>
            <span style={{color:'var(--vermillion)'}}>“</span>
            The code is done. The site is a Vercel template. The demo
            video is a screen recording with the cursor visible. The pitch
            deck is bullet points in&nbsp;Notion.
            <span style={{color:'var(--vermillion)'}}>”</span>
          </div>

          <div style={problemStyles.statsCol}>
            <div className="mono" style={{fontSize: 11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--ink-mute)', marginBottom: 24}}>
              The launch tax
            </div>
            <div style={{display:'grid', gap: 28}}>
              {stats.map((s, i) => (
                <div key={i} style={{display:'grid', gridTemplateColumns:'auto 1fr', gap: 20, alignItems:'baseline'}}>
                  <div className="display" style={{fontSize: 'clamp(40px, 5vw, 72px)', lineHeight: 1, color: 'var(--ink)'}}>
                    {s.n}
                  </div>
                  <div className="mono" style={{fontSize: 12, color:'var(--ink-2)', letterSpacing:'0.02em'}}>
                    {s.label}
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div style={problemStyles.proseCol}>
            <div className="mono" style={{fontSize: 11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--ink-mute)', marginBottom: 24}}>
              The shape of the problem
            </div>
            <p style={{fontSize: 17, lineHeight: 1.6, color: 'var(--ink-2)', maxWidth: 52*16}}>
              You shipped the hard part. The product runs, the tests pass, the
              architecture is something you're actually proud of. Then it sits
              there. Because launching well requires{' '}
              <em className="serif italic">a different shaped human</em> — one who can
              hold a tripod, choose a typeface, write a hook, and direct
              motion in After Effects.
            </p>
            <p style={{fontSize: 17, lineHeight: 1.6, color: 'var(--ink-2)', maxWidth: 52*16, marginTop: 18}}>
              pitchkit gives that human to your agent.
            </p>

            <div style={{display:'flex', gap: 10, marginTop: 28, flexWrap:'wrap'}}>
              {['No video editor', 'No Figma', 'No design budget', 'No marketer'].map(t => (
                <span key={t} style={{
                  fontFamily: 'var(--mono)',
                  fontSize: 11,
                  letterSpacing: '0.08em',
                  textTransform: 'uppercase',
                  padding: '6px 12px',
                  border: '1px solid var(--rule)',
                  borderRadius: 999,
                  color: 'var(--ink-2)',
                }}>
                  ✕ {t}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Problem = Problem;