/* global React, C, FONT_DISP, FONT_SANS, Eyebrow, Button, StatCard, useScrollY, useWindowWidth, useReveal, useCountUp */

/* =================================================================
   VARIANT A — Editorial / Calm
   Asymmetric hero, warm background, magazine-like whitespace.
   ================================================================= */
function HeroA({ tagline }) {
  const y = useScrollY();
  const w = useWindowWidth();
  const isMobile = w <= 768;
  const parallax = isMobile ? 0 : Math.min(y * 0.15, 60);
  return (
    <section style={{ background: C.warm, padding: isMobile ? '56px 0 80px' : '80px 0 140px', position: 'relative', overflow: 'hidden' }} id="top">
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: isMobile ? '0 24px' : '0 80px',
        display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '7fr 5fr', gap: isMobile ? 48 : 80, alignItems: 'center',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <Eyebrow>Operational data systems</Eyebrow>
          <h1 style={{
            fontFamily: FONT_DISP, fontWeight: 700,
            fontSize: isMobile ? 40 : 66, lineHeight: isMobile ? '48px' : '72px',
            color: C.navy, margin: 0, letterSpacing: '-0.015em', whiteSpace: 'pre-line',
          }}>{tagline}</h1>
          <p style={{
            fontFamily: FONT_SANS, fontSize: isMobile ? 16 : 19, lineHeight: '30px',
            color: C.muted, margin: 0, maxWidth: 560,
          }}>
            For enterprise teams running critical workflows. Structured, audit-ready, built around how the business operates — not how a BI vendor thinks it should.
          </p>
          <div style={{ display: 'flex', gap: 16, marginTop: 8, flexWrap: 'wrap' }}>
            <Button variant="primary" size="md" href="#contact">Book a 30-min call</Button>
            <Button variant="secondary" size="md" href="#work">See the case study →</Button>
          </div>
        </div>
        <div style={{ transform: `translateY(${-parallax}px)`, transition: 'transform 100ms linear' }}>
          <StatCard />
        </div>
      </div>
    </section>
  );
}

/* =================================================================
   VARIANT B — Ledger / Structured / Numbers-forward
   Visible 12-col ruled hairlines, huge numeral counts up.
   ================================================================= */
function HeroB({ tagline }) {
  const [ref, shown] = useReveal({ threshold: 0.3 });
  const w = useWindowWidth();
  const isMobile = w <= 768;
  const n = useCountUp(142, { active: shown, duration: 1800 });
  const pct = useCountUp(94, { active: shown, duration: 1800 });
  const weeks = useCountUp(6, { active: shown, duration: 1400 });
  return (
    <section id="top" style={{ background: C.white, padding: isMobile ? '48px 0 64px' : '64px 0 96px', position: 'relative' }} ref={ref}>
      {!isMobile && <RuledGrid />}
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: isMobile ? '0 24px' : '0 80px', position: 'relative',
      }}>
        <Eyebrow>Operational data systems · est. 2023</Eyebrow>
        <h1 style={{
          fontFamily: FONT_DISP, fontWeight: 700,
          fontSize: isMobile ? 44 : 92, lineHeight: isMobile ? '52px' : '92px',
          color: C.navy, margin: '20px 0 0',
          letterSpacing: '-0.02em', whiteSpace: 'pre-line', maxWidth: 1100,
        }}>{tagline}</h1>

        <div style={{
          marginTop: isMobile ? 36 : 56, paddingTop: isMobile ? 28 : 40,
          borderTop: `1px solid ${C.borderWarm}`,
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '5fr 7fr',
          gap: isMobile ? 32 : 80, alignItems: 'start',
        }}>
          <p style={{
            fontFamily: FONT_SANS, fontSize: isMobile ? 16 : 19, lineHeight: '30px',
            color: C.muted, margin: 0,
          }}>
            For enterprise teams running critical workflows. Structured, audit-ready, built around how the business operates — not how a BI vendor thinks it should.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: isMobile ? 20 : 40 }}>
            <BigNumber value={n} suffix="hrs" label="Reporting time saved monthly, per client average" />
            <BigNumber value={pct} suffix="%" label="Of deliveries shipped within the agreed scope and window" />
            <BigNumber value={weeks} suffix="wk" label="Typical build, from first call to live system" />
          </div>
        </div>
        <div style={{ display: 'flex', gap: 16, marginTop: isMobile ? 36 : 56, flexWrap: 'wrap' }}>
          <Button variant="primary" size="md" href="#contact">Book a 30-min call</Button>
          <Button variant="secondary" size="md" href="#work">Read the case study →</Button>
        </div>
      </div>
    </section>
  );
}
function BigNumber({ value, suffix, label }) {
  return (
    <div style={{
      display: 'flex', flexDirection: 'column', gap: 10,
      borderLeft: `1px solid ${C.borderWarm}`, paddingLeft: 24,
    }}>
      <div style={{
        fontFamily: FONT_DISP, fontWeight: 700, fontSize: 54, lineHeight: 1,
        color: C.navy, letterSpacing: '-0.02em',
      }}>
        {value}<span style={{ color: C.orange, fontSize: 30, marginLeft: 4 }}>{suffix}</span>
      </div>
      <div style={{ fontFamily: FONT_SANS, fontSize: 13, lineHeight: '20px', color: C.muted, maxWidth: 220 }}>
        {label}
      </div>
    </div>
  );
}
function RuledGrid() {
  /* Twelve vertical hairlines behind the ledger hero */
  const cols = Array.from({ length: 13 });
  return (
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      maxWidth: 1280, margin: '0 auto',
    }}>
      <div style={{
        position: 'relative', height: '100%',
        maxWidth: 1120, margin: '0 80px',
      }}>
        {cols.map((_, i) => (
          <div key={i} style={{
            position: 'absolute', top: 0, bottom: 0,
            left: `${(i / 12) * 100}%`, width: 1,
            background: i === 0 || i === 12 ? 'transparent' : C.borderLight,
          }} />
        ))}
      </div>
    </div>
  );
}

/* =================================================================
   VARIANT C — Eckard-forward / Warm / Human
   Hero is a signed note. Stat card demoted to secondary.
   ================================================================= */
function HeroC({ tagline }) {
  const y = useScrollY();
  const w = useWindowWidth();
  const isMobile = w <= 768;
  const rot = isMobile ? 0 : y * 0.06;
  return (
    <section id="top" style={{ background: C.warm, padding: isMobile ? '48px 0 80px' : '60px 0 120px', position: 'relative', overflow: 'hidden' }}>
      {!isMobile && (
        <div style={{
          position: 'absolute', right: -220, top: 60, width: 720, height: 720,
          transform: `rotate(${rot}deg)`, transition: 'transform 120ms linear',
          opacity: 0.6, pointerEvents: 'none',
        }}>
          <HubMark />
        </div>
      )}
      <div style={{
        maxWidth: 1100, margin: '0 auto', padding: isMobile ? '0 24px' : '0 80px', position: 'relative',
      }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '72px 1fr', gap: 32, marginBottom: 32,
        }}>
          <Portrait />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            <div style={{ fontFamily: FONT_DISP, fontWeight: 700, fontSize: 17, color: C.navy }}>
              Eckard
            </div>
            <div style={{ fontFamily: FONT_SANS, fontSize: 14, color: C.muted }}>
              Founder · Key Metrics · You'll be working with me directly.
            </div>
          </div>
        </div>

        <h1 style={{
          fontFamily: FONT_DISP, fontWeight: 600,
          fontSize: isMobile ? 32 : 56, lineHeight: isMobile ? '42px' : '66px',
          color: C.navy, margin: '0 0 32px', letterSpacing: '-0.01em', maxWidth: 920,
        }}>
          I build decision systems for teams whose reporting has outgrown the spreadsheet but doesn't warrant an in-house data team.
        </h1>

        <p style={{
          fontFamily: FONT_DISP, fontWeight: 500,
          fontSize: isMobile ? 18 : 24, lineHeight: isMobile ? '28px' : '36px',
          color: C.muted, margin: '0 0 40px', maxWidth: 820, letterSpacing: '-0.005em',
        }}>
          <span style={{ color: C.orange }}>{tagline.replace(/\n/g, ' ')}</span> One trusted partner, scoped and fixed. Six weeks to a system your team will actually use.
        </p>

        <div style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
          <Button variant="primary" size="lg" href="#contact">Book a 30-min call</Button>
          <Button variant="ghost" size="md" href="mailto:insights@keymetrics.live">
            or email me directly →
          </Button>
        </div>

        <div style={{
          marginTop: isMobile ? 48 : 80, paddingTop: 32, borderTop: `1px solid ${C.borderWarm}`,
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 20 : 40, maxWidth: 920,
        }}>
          {[
            ['142 hrs', 'saved monthly, last engagement'],
            ['Six weeks', 'spreadsheet to live system'],
            ['One partner', 'from first call to handover'],
          ].map(([big, small], i) => (
            <div key={i}>
              <div style={{ fontFamily: FONT_DISP, fontWeight: 700, fontSize: 24, color: C.navy, letterSpacing: '-0.01em' }}>{big}</div>
              <div style={{ fontFamily: FONT_SANS, fontSize: 14, color: C.muted, marginTop: 4 }}>{small}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
function Portrait() {
  /* SVG placeholder portrait — brand-forward monogram, not emoji or stock */
  return (
    <div style={{
      width: 72, height: 72, borderRadius: '50%', background: C.sageTint,
      border: `1px solid ${C.borderWarm}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: FONT_DISP, fontWeight: 700, fontSize: 26, color: C.navy,
      letterSpacing: '-0.02em',
    }}>E</div>
  );
}
function HubMark() {
  return (
    <svg viewBox="0 0 100 100" width="100%" height="100%">
      <g stroke={C.navy} strokeWidth="0.3" fill="none" opacity="0.4">
        {Array.from({ length: 7 }).map((_, i) => {
          const a = (i / 7) * Math.PI * 2;
          const x = 50 + Math.cos(a) * 36, y = 50 + Math.sin(a) * 36;
          return <line key={i} x1="50" y1="50" x2={x} y2={y} />;
        })}
      </g>
      {Array.from({ length: 7 }).map((_, i) => {
        const a = (i / 7) * Math.PI * 2;
        const x = 50 + Math.cos(a) * 36, y = 50 + Math.sin(a) * 36;
        return <circle key={i} cx={x} cy={y} r="2.6" fill={C.navy} opacity="0.5" />;
      })}
      <circle cx="50" cy="50" r="4" fill={C.orange} />
    </svg>
  );
}

/* =================================================================
   Scroll progress bar (shared)
   ================================================================= */
function ScrollProgress() {
  const y = useScrollY();
  const [max, setMax] = React.useState(1);
  React.useEffect(() => {
    const update = () => setMax(Math.max(1, document.documentElement.scrollHeight - window.innerHeight));
    update();
    window.addEventListener('resize', update);
    return () => window.removeEventListener('resize', update);
  }, []);
  const p = Math.min(1, y / max);
  return (
    <div style={{
      position: 'fixed', top: 0, left: 0, right: 0, height: 2, zIndex: 100,
      background: 'transparent', pointerEvents: 'none',
    }}>
      <div style={{
        height: '100%', width: `${p * 100}%`, background: C.orange,
        transition: 'width 80ms linear',
      }}/>
    </div>
  );
}

Object.assign(window, { HeroA, HeroB, HeroC, ScrollProgress });