/* EARLY TRACTION — the numbers beat (per the review PDF): MRR bar chart
   (Jul → Sep) beside the gross-margin card, then the guaranteed-contract
   line. The lime of this viewport lives in the bars — the revenue curve is
   the signal. The Aleevia case card follows as the proof behind the curve. */
function EarlyTractionSection() {
  const bars = [
    { month: 'Jul', value: 1.24, label: '1.24k' },
    { month: 'Aug', value: 2.44, label: '2.44k' },
    { month: 'Sep', value: 3.6, label: '3.6k' },
  ];
  const MAX = 4; /* y-axis top, in thousands */
  const gridLines = [4, 3, 2, 1];
  const eyebrowStyle = {
    color: 'var(--cam-text-inactive)', fontSize: 'var(--fs-eyebrow)',
    fontWeight: 'var(--fw-semibold)', textTransform: 'uppercase',
    letterSpacing: 'var(--track-eyebrow)', marginBottom: 'var(--space-4)',
  };
  return (
    <section id="traction" data-screen-label="Early Traction" style={{ background: 'var(--cam-surface-base)', borderTop: '1px solid var(--cam-border-subtle)' }}>
      <div style={{ maxWidth: 'var(--page-max)', margin: '0 auto', padding: 'var(--section-pad) var(--page-gutter)' }}>
        <div className="lp-reveal">
          <div style={eyebrowStyle}>Early Traction</div>
          <h2 className="lp-fit-h2" style={{
            margin: 0, fontSize: 'min(var(--fs-h1), calc(min(72rem, 100vw - 2 * var(--page-gutter)) / 19))', fontWeight: 'var(--fw-black)',
            letterSpacing: 'var(--track-display)', lineHeight: 'var(--lh-snug)',
            color: 'var(--cam-text-primary)', whiteSpace: 'nowrap',
          }}>Proof that the loop is already working.</h2>
        </div>

        <div className="lp-group lp-traction" style={{
          marginTop: 'var(--space-8)', display: 'grid',
          gridTemplateColumns: 'minmax(300px, 1.4fr) minmax(240px, 1fr)',
          gap: 'var(--space-6)', alignItems: 'stretch',
        }}>
          {/* MRR × Month */}
          <div className="lp-item" style={{
            '--d': '0s',
            background: 'var(--cam-surface-card)', border: '1px solid var(--cam-border-subtle)',
            borderRadius: 'var(--radius-card)', padding: 'var(--space-6)',
          }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 'var(--space-5)', flexWrap: 'wrap' }}>
              <span style={{ color: 'var(--cam-text-primary)', fontWeight: 'var(--fw-bold)', fontSize: '1rem', letterSpacing: 'var(--track-text)' }}>MRR × Month</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <span aria-hidden="true" style={{ width: 8, height: 8, borderRadius: 2, background: 'var(--cam-accent-lime)' }} />
                <span style={{ color: 'var(--cam-text-inactive)', fontSize: '11px', letterSpacing: 'var(--track-text)' }}>MRR (USD)</span>
              </span>
            </div>
            <div style={{ marginTop: 'var(--space-5)', display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 'var(--space-3)' }}>
              {/* y-axis */}
              <div aria-hidden="true" style={{ position: 'relative', width: 22, height: 190 }}>
                {gridLines.map((v) => (
                  <span key={v} style={{
                    position: 'absolute', right: 0, top: ((MAX - v) / MAX * 100) + '%',
                    transform: 'translateY(-50%)', color: 'var(--cam-text-inactive)',
                    fontSize: '10px', letterSpacing: 'var(--track-text)',
                  }}>{v}k</span>
                ))}
                <span style={{
                  position: 'absolute', right: 0, bottom: 0, color: 'var(--cam-text-inactive)',
                  fontSize: '10px', letterSpacing: 'var(--track-text)',
                }}>0</span>
              </div>
              {/* plot */}
              <div style={{ position: 'relative', height: 190 }}>
                {gridLines.map((v) => (
                  <span key={v} aria-hidden="true" style={{
                    position: 'absolute', left: 0, right: 0, top: ((MAX - v) / MAX * 100) + '%',
                    borderTop: '1px solid var(--cam-border-subtle)',
                  }} />
                ))}
                <span aria-hidden="true" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, borderTop: '1px solid var(--cam-border-strong)' }} />
                <div style={{
                  position: 'absolute', inset: 0, display: 'flex',
                  alignItems: 'flex-end', justifyContent: 'space-around', gap: 'var(--space-4)',
                }} role="img" aria-label="Monthly recurring revenue in USD: July 1.24 thousand, August 2.44 thousand, September 3.6 thousand">
                  {bars.map((b, i) => (
                    <div key={b.month} className="lp-item" style={{
                      '--d': (0.15 + i * 0.18) + 's', display: 'flex', flexDirection: 'column',
                      alignItems: 'center', justifyContent: 'flex-end', height: '100%', width: 64,
                    }}>
                      <span style={{
                        color: 'var(--cam-text-primary)', fontWeight: 'var(--fw-bold)',
                        fontSize: 'var(--fs-small)', letterSpacing: 'var(--track-text)', marginBottom: 6,
                      }}>{b.label}</span>
                      <span aria-hidden="true" style={{
                        width: '100%', height: (b.value / MAX * 100) + '%',
                        borderRadius: '6px 6px 0 0',
                        background: 'linear-gradient(180deg, var(--cam-accent-lime), var(--cam-accent-olive))',
                      }} />
                    </div>
                  ))}
                </div>
              </div>
              <span aria-hidden="true" />
              <div style={{ display: 'flex', justifyContent: 'space-around', gap: 'var(--space-4)' }}>
                {bars.map((b) => (
                  <span key={b.month} style={{
                    width: 64, textAlign: 'center', color: 'var(--cam-text-auxiliary)',
                    fontSize: '11px', letterSpacing: 'var(--track-text)',
                  }}>{b.month}</span>
                ))}
              </div>
            </div>
          </div>

          {/* Gross margin — dark card in the site palette */}
          <div className="lp-item" style={{
            '--d': '0.2s',
            background: 'var(--cam-surface-card)', border: '1px solid var(--cam-border-subtle)',
            borderRadius: 'var(--radius-card)', padding: 'var(--space-6)',
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
            gap: 'var(--space-4)', textAlign: 'center',
          }}>
            <span style={{
              color: 'var(--cam-text-primary)', fontSize: '1.1rem',
              fontWeight: 'var(--fw-bold)', letterSpacing: 'var(--track-text)',
            }}>Gross Margin</span>
            <span style={{
              fontWeight: 'var(--fw-black)', fontSize: 'clamp(2.8rem, 5vw, 4.2rem)',
              letterSpacing: 'var(--track-display)', lineHeight: 1,
            }}>
              <span style={{ color: 'var(--cam-accent-olive)' }}>&gt;</span>
              <span style={{ color: 'var(--cam-text-primary)' }}> 60%</span>
            </span>
            <span aria-hidden="true" style={{
              width: 88, height: 2, borderRadius: 1, background: 'var(--cam-accent-lime)',
            }} />
          </div>
        </div>

        <p className="lp-reveal" style={{
          margin: 'var(--space-7) 0 0', maxWidth: '56ch',
          fontSize: 'var(--fs-lead)', lineHeight: 1.5, letterSpacing: 'var(--track-text)',
          color: 'var(--cam-text-primary)', fontWeight: 'var(--fw-semibold)',
        }}>And we have 8k guaranteed in the contract.</p>
      </div>
    </section>
  );
}
window.EarlyTractionSection = EarlyTractionSection;