// Hero — three editorial variants. Selected via tweak.
// Variant A · "Editorial index" — section number, oversized Fraunces, three-column meta.
// Variant B · "Stacked statement" — left rule, gigantic statement, mono spec column on right.
// Variant C · "Loom canvas" — mark animates as a backdrop, headline overlays.

function Hero({ variant, onNav }) {
  if (variant === 'B') return <HeroB onNav={onNav} />;
  if (variant === 'C') return <HeroC onNav={onNav} />;
  return <HeroA onNav={onNav} />;
}

function HeroA({ onNav }) {
  const wrap = { padding: '96px clamp(20px,4vw,48px) 80px', maxWidth: 1280, margin: '0 auto' };
  const indexStrip = {
    display: 'grid', gridTemplateColumns: '1fr auto 1fr',
    alignItems: 'center', gap: 24,
    paddingBottom: 28, borderBottom: '1px solid var(--bc-border-subtle)', marginBottom: 56,
  };
  const cap = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bc-fg-secondary)', fontWeight: 500 };
  const headline = { fontFamily: 'var(--bc-font-display)', fontWeight: 300, fontSize: 'clamp(48px, 7.5vw, 104px)', lineHeight: 0.98, letterSpacing: '-0.035em', color: 'var(--bc-fg-primary)', textWrap: 'balance', marginBottom: 56 };
  const accent = { color: 'var(--bc-selvedge)' };
  const metaRow = { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 48, paddingTop: 32, borderTop: '1px solid var(--bc-border-subtle)' };
  const mLabel = { fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bc-fg-tertiary)', fontWeight: 500, marginBottom: 14 };
  const mVal = { fontFamily: 'var(--bc-font-sans)', fontSize: 16, lineHeight: 1.6, color: 'var(--bc-fg-primary)', maxWidth: 360 };

  return (
    <section style={wrap} data-screen-label="01 Hero (Editorial)">
      <div style={indexStrip}>
        <span style={cap}>§ 00 — BuildCraft Labs</span>
        <span style={{ ...cap, color: 'var(--bc-fg-tertiary)' }}>est. 2026 · India</span>
        <span style={{ ...cap, textAlign: 'right' }}>Booking · Q3 2026</span>
      </div>
      <h1 style={headline}>
        We solve problems<br />
        <span style={accent}>before they are felt.</span>
      </h1>
      <div style={metaRow}>
        <div>
          <div style={mLabel}>What we do</div>
          <p style={mVal}>Consulting engagements, our own SaaS products, and AI-driven systems for teams that want something durable.</p>
        </div>
        <div>
          <div style={mLabel}>How we work</div>
          <p style={mVal}>Six-week sprints. Embedded with one team. We document the seams — including the ones that didn't hold.</p>
        </div>
        <div>
          <div style={mLabel}>Where to start</div>
          <p style={mVal}>
            Read the work below, or write to{' '}
            <a onClick={() => onNav('contact')} style={{ color: 'var(--bc-selvedge)', textDecoration: 'none', borderBottom: '1px solid currentColor', cursor: 'pointer' }}>hello@buildcraft.town</a>.
          </p>
        </div>
      </div>
    </section>
  );
}

function HeroB({ onNav }) {
  const wrap = { padding: '64px clamp(20px,4vw,48px) 80px', maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 280px', gap: 64, alignItems: 'start' };
  const left = { borderLeft: '2px solid var(--bc-ink)', paddingLeft: 'clamp(20px,3vw,40px)' };
  const eyebrow = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bc-selvedge)', fontWeight: 500, marginBottom: 32 };
  const stmt = { fontFamily: 'var(--bc-font-display)', fontWeight: 300, fontSize: 'clamp(36px, 5.4vw, 72px)', lineHeight: 1.15, letterSpacing: '-0.03em', color: 'var(--bc-fg-primary)', textWrap: 'balance', marginBottom: 80 };
  const sub = { fontFamily: 'var(--bc-font-sans)', fontSize: 19, lineHeight: 1.55, color: 'var(--bc-fg-secondary)', maxWidth: 620, marginBottom: 40 };
  const ctaRow = { display: 'flex', gap: 16, alignItems: 'center' };
  const ctaPrimary = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, fontWeight: 500, letterSpacing: '0.18em', textTransform: 'uppercase', padding: '14px 22px', whiteSpace: 'nowrap', background: 'var(--bc-ink)', color: 'var(--bc-paper)', border: '1px solid var(--bc-ink)', cursor: 'pointer' };
  const ctaGhost = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, fontWeight: 500, letterSpacing: '0.18em', textTransform: 'uppercase', padding: '14px 22px', whiteSpace: 'nowrap', background: 'transparent', color: 'var(--bc-fg-primary)', border: '1px solid var(--bc-border-default)', cursor: 'pointer' };
  const spec = { display: 'flex', flexDirection: 'column', gap: 28, paddingTop: 12 };
  const specRow = { display: 'flex', flexDirection: 'column', gap: 6 };
  const sLabel = { fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bc-fg-tertiary)', fontWeight: 500 };
  const sVal = { fontFamily: 'var(--bc-font-sans)', fontSize: 14, color: 'var(--bc-fg-primary)' };

  return (
    <section style={wrap} data-screen-label="01 Hero (Stacked)">
      <div style={left}>
        <div style={eyebrow}>BuildCraft Labs · A studio</div>
        <h1 style={stmt}>
          Thoughtful technology. Human-centred design. Built before the problem scales.
        </h1>
        <p style={sub}>
          We design and deliver intuitive, data-driven products and intelligent systems —
          combining speed of insight with depth of thinking.
        </p>
        <div style={ctaRow}>
          <button style={ctaPrimary} onClick={() => onNav('contact')}>Start a project</button>
          <button style={ctaGhost} onClick={() => onNav('work')}>See what we make →</button>
        </div>
      </div>
      <aside style={spec}>
        <div style={{ height: 1, background: 'var(--bc-border-default)' }} />
        <div style={specRow}><span style={sLabel}>Founded</span><span style={sVal}>2026</span></div>
        <div style={specRow}><span style={sLabel}>Team</span><span style={sVal}>Small · 3–8 builders</span></div>
        <div style={specRow}><span style={sLabel}>Engagement</span><span style={sVal}>Six-week sprints</span></div>
        <div style={specRow}><span style={sLabel}>Surfaces</span><span style={sVal}>SaaS · Consulting · AI systems</span></div>
        <div style={specRow}><span style={sLabel}>Based</span><span style={sVal}>India · working globally</span></div>
        <div style={{ height: 1, background: 'var(--bc-border-default)' }} />
        <div style={specRow}><span style={sLabel}>Status</span><span style={{ ...sVal, color: 'var(--bc-selvedge)' }}>Booking · Q3 2026</span></div>
      </aside>
    </section>
  );
}

function HeroC({ onNav }) {
  const wrap = { position: 'relative', overflow: 'hidden', padding: '120px clamp(20px,4vw,48px) 96px', background: 'var(--bc-bg-surface)', borderBottom: '1px solid var(--bc-border-subtle)' };
  const inner = { position: 'relative', zIndex: 2, maxWidth: 1280, margin: '0 auto' };
  const eyebrow = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bc-fg-secondary)', fontWeight: 500, marginBottom: 40 };
  const headline = { fontFamily: 'var(--bc-font-display)', fontWeight: 300, fontSize: 'clamp(56px, 9vw, 132px)', lineHeight: 1.02, letterSpacing: '-0.04em', color: 'var(--bc-fg-primary)', textWrap: 'balance', marginBottom: 80, maxWidth: 1100 };
  const sub = { fontFamily: 'var(--bc-font-display)', fontWeight: 300, fontSize: 'clamp(20px,2vw,28px)', lineHeight: 1.45, letterSpacing: '-0.015em', color: 'var(--bc-fg-secondary)', maxWidth: 720, marginBottom: 56, fontStyle: 'italic' };
  const ctaRow = { display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap' };
  const ctaPrimary = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, fontWeight: 500, letterSpacing: '0.18em', textTransform: 'uppercase', padding: '14px 22px', whiteSpace: 'nowrap', background: 'var(--bc-ink)', color: 'var(--bc-paper)', border: '1px solid var(--bc-ink)', cursor: 'pointer' };
  const ctaText = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, fontWeight: 500, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--bc-fg-primary)', cursor: 'pointer', borderBottom: '1px solid var(--bc-fg-primary)', paddingBottom: 4, whiteSpace: 'nowrap' };

  // Giant weave mark, faded, anchored bottom-right
  const bg = { position: 'absolute', right: '-60px', bottom: '-80px', width: 600, height: 600, color: 'var(--bc-ink)', opacity: 0.05, zIndex: 1 };

  // Bottom rule with three threads
  const rule = { position: 'relative', zIndex: 2, marginTop: 80, paddingTop: 28, borderTop: '1px solid var(--bc-border-default)', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 32, maxWidth: 1280, margin: '80px auto 0' };
  const rNum = { fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bc-selvedge)', marginBottom: 10, fontWeight: 500 };
  const rTxt = { fontFamily: 'var(--bc-font-sans)', fontSize: 14, color: 'var(--bc-fg-secondary)', maxWidth: 320, lineHeight: 1.55 };

  return (
    <section style={wrap} data-screen-label="01 Hero (Loom canvas)">
      <div style={bg}>
        <img src="assets/logo-mark.svg" alt="" style={{ width: '100%', height: '100%' }} />
      </div>
      <div style={inner}>
        <div style={eyebrow}>§ 00 · BuildCraft Labs · 2026 →</div>
        <h1 style={headline}>
          We weave software the way <span style={{ color: 'var(--bc-selvedge)' }}>thread becomes cloth</span>.
        </h1>
        <p style={sub}>
          Six lines, one structure. Three vertical threads — software, services, intelligence.
          Three horizontal threads — customer, simplicity, evidence.
        </p>
        <div style={ctaRow}>
          <button style={ctaPrimary} onClick={() => onNav('contact')}>Start a project</button>
          <a style={ctaText} onClick={() => onNav('about')}>Read the manifesto →</a>
        </div>
      </div>
      <div style={rule}>
        <div><div style={rNum}>I · Software</div><p style={rTxt}>SaaS we build, ship, and operate ourselves.</p></div>
        <div><div style={rNum}>II · Services</div><p style={rTxt}>Six-week consulting sprints embedded with one team.</p></div>
        <div><div style={rNum}>III · Intelligence</div><p style={rTxt}>AI systems wired up end-to-end. Pipelines, not demos.</p></div>
      </div>
    </section>
  );
}

window.Hero = Hero;