/* ABOUT VALUES / principles */

function AboutValues() {
  const isMobile = useWindowWidth() < 768;

  const values = [
    { n: '01', t: 'Outcomes, not output',       d: 'We measure success in lift, not deliverables. Every engagement starts with a primary KPI and ends with measurable movement on it.',                                                              visual: 'metric'    },
    { n: '02', t: 'Senior-only execution',       d: 'No juniors silently learning on your account. Every contributor is 7+ years deep in their craft and on no more than three clients at a time.',                                                  visual: 'team'      },
    { n: '03', t: 'Experiments over opinions',   d: 'When in doubt, we test. We\'d rather ship 10 experiments and learn what works than write a 40-page strategy deck nobody reads.',                                                               visual: 'chart'     },
    { n: '04', t: 'Transparent by default',      d: 'You see our timesheets, our test backlog, our live dashboards, our slack. No proprietary black boxes, no monthly mystery invoices.',                                                           visual: 'console'   },
    { n: '05', t: 'Compound, don\'t spike',      d: 'Anyone can buy a one-month spike. We optimize for systems that keep compounding 6, 12, 24 months out — long after the engagement ends.',                                                      visual: 'growth'    },
    { n: '06', t: 'Honest first, sale second',   d: 'If we\'re not the right fit, we say so. We\'ve turned down ~$2M in business that wasn\'t a clean match. Our referral pipeline lives on that.',                                                visual: 'handshake' },
  ];

  return (
    <section data-screen-label="03 Values" style={{ paddingTop: 64, paddingBottom: 64, background: 'var(--bg-2)' }}>
      <div className="container">
        <SectionHeader
          eyebrow="How we work"
          title={<>Six principles. <span className="accent">Non-negotiable.</span></>}
          lead="These aren't aspirations — they're operating rules. If we drift from any of them, our clients call us on it. So far so good."
          align="left"
        />

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 18 }}>
          {values.map((v, i) => (
            <Reveal key={v.n} delay={i * 80} className="card" style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 18, overflow: 'hidden' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--green-deep)', letterSpacing: '0.08em' }}>{v.n}</span>
                <ValueGlyph kind={v.visual} />
              </div>
              <h3 className="h3" style={{ fontSize: 22, fontWeight: 600 }}>{v.t}</h3>
              <p style={{ fontSize: 14, color: 'var(--ink-soft)', margin: 0, lineHeight: 1.55, flex: 1 }}>{v.d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ValueGlyph({ kind }) {
  const c = 'var(--green-deep)';
  if (kind === 'metric')    return <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: c }}>↗ +186%</span>;
  if (kind === 'team')      return (
    <span style={{ display: 'flex' }}>
      {[0, 60, 180].map((h, i) => (
        <span key={h} style={{ marginLeft: i ? -6 : 0, width: 16, height: 16, borderRadius: '50%', border: '1.5px solid white', background: `oklch(0.72 0.07 ${h})`, display: 'inline-block' }}></span>
      ))}
    </span>
  );
  if (kind === 'chart')     return <Sparkline values={[2,3,2,4,3,5,4,6,5,7,6,8]} width={48} height={20} color={c} fill={false} strokeWidth={1.2} />;
  if (kind === 'console')   return <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: c }}>● live</span>;
  if (kind === 'growth')    return <Sparkline values={[1,1.2,1.5,2,2.6,3.5,4.6,6,7.8,10,12.5,15]} width={48} height={20} color={c} fill={false} strokeWidth={1.4} />;
  if (kind === 'handshake') return <span style={{ fontSize: 13, color: c, fontFamily: 'var(--font-mono)' }}>1:1</span>;
  return null;
}

window.AboutValues = AboutValues;