// Hero — supports 4 hero copy variants; default B (most concrete).
const HERO_VARIANTS = {
  A: {
    eyebrow: 'For small B2B teams ready to grow beyond referrals',
    h1: ['Grow beyond your network', 'with ', 'signal-based outreach.'],
    sub: 'BetterPipe is the AI GTM tool that helps small B2B teams find more clients like their best clients — outside your existing network. Signal-based prospecting, evidence-backed outreach, and every reply in one pipeline.',
  },
  B: {
    eyebrow: 'For small B2B teams selling high-value work',
    h1: ['Go from 0 to', 'full outreach campaign ', 'in 30 minutes.'],
    sub: 'BetterPipe is the AI GTM tool that helps small B2B teams find more clients like their best clients — outside your existing network. Signal-based prospecting, evidence-backed outreach, and every reply in one pipeline.',
  },
  C: {
    eyebrow: 'For teams whose growth ran out of warm intros',
    h1: ['Get more clients', 'like your ', 'best clients.'],
    sub: 'Tell BetterPipe who you serve. It finds similar companies showing real signals, explains why they matter now, and helps you reach out with evidence.',
  },
  D: {
    eyebrow: 'A pipeline tool that helps fill itself',
    h1: ['A pipeline tool', 'that helps ', 'fill itself.'],
    sub: 'BetterPipe finds best-fit companies, turns public buyer signals into outreach, and moves replies into a simple pipeline your team can run.',
  },
};

function HeroH1({ parts }) {
  // parts: [pre, italicMiddle, post] — visually a 3-line hero
  return (
    <h1 className="t-display" style={{
      fontSize: 'clamp(2.6rem, 7.2vw, 6.4rem)',
      fontWeight: 500,
      maxWidth: '14ch',
    }}>
      <span style={{ display: 'block' }}>{parts[0]}</span>
      <span style={{ display: 'block' }}>
        <span className="t-italic" style={{ color: 'var(--signal)' }}>{parts[1].trim()}</span>{' '}
        <span style={{ color: 'var(--fg)' }}>{parts[2]}</span>
      </span>
    </h1>
  );
}

// Animated mini-product: site scan -> targets -> signals -> drafted message
function HeroVisual() {
  const [phase, setPhase] = React.useState(0);
  // 0: scanning, 1: scanned (card 1 done), 2: targets card in, 3: signal highlight, 4: drafted
  React.useEffect(() => {
    const timers = [];
    const cycle = () => {
      setPhase(0);
      timers.push(setTimeout(() => setPhase(1), 1400));      // scanned chip
      timers.push(setTimeout(() => setPhase(2), 2900));      // card 2 in (1.5s after scanned)
      timers.push(setTimeout(() => setPhase(3), 4400));      // signal highlight
      timers.push(setTimeout(() => setPhase(4), 5900));      // card 3 drafted
      timers.push(setTimeout(cycle, 10000));
    };
    cycle();
    return () => timers.forEach(clearTimeout);
  }, []);

  return (
    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
      {/* Floating UI window — input panel */}
      <div className="ui-window" style={{
        position: 'absolute', top: 0, left: 0, width: '70%', maxWidth: 420,
        zIndex: 3,
      }}>
        <div className="ui-bar">
          <div className="dots"><span /><span /><span /></div>
          <div className="url">01&ensp;betterpipe.app · your business</div>
        </div>
        <div style={{ padding: 18 }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '12px 14px', borderRadius: 10,
            border: '1px solid var(--rule-strong)', background: 'var(--bg)',
            fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--fg)',
          }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20"/></svg>
            <span style={{ flex: 1 }}>acmeconsulting.com</span>
            {/* Both always rendered so layout never shifts — only opacity toggles */}
            <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <div className="pulse-dot" style={{ opacity: phase === 0 ? 1 : 0, transition: 'opacity 300ms', position: 'absolute' }} />
              <Chip color="signal" size="sm" style={{ opacity: phase >= 1 ? 1 : 0, transition: 'opacity 300ms', visibility: phase >= 1 ? 'visible' : 'hidden' }}>scanned</Chip>
            </div>
          </div>
          <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            <div style={{ padding: '8px 10px', borderRadius: 8, border: '1px solid var(--rule)', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-mute)' }}>
              <div className="upper-mono" style={{ marginBottom: 2, fontSize: 9 }}>Offer</div>
              <div style={{ color: 'var(--fg)', fontSize: 11 }}>Ops consulting</div>
            </div>
            <div style={{ padding: '8px 10px', borderRadius: 8, border: '1px solid var(--rule)', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-mute)' }}>
              <div className="upper-mono" style={{ marginBottom: 2, fontSize: 9 }}>Best clients</div>
              <div style={{ color: 'var(--fg)', fontSize: 11 }}>Series B SaaS</div>
            </div>
          </div>
        </div>
      </div>

      {/* Targets panel — animates in at phase >= 1 */}
      <div className="ui-window" style={{
        position: 'absolute', top: 182, right: 0, width: '64%', maxWidth: 380,
        zIndex: 4,
        opacity: phase >= 2 ? 1 : 0,
        transform: phase >= 2 ? 'translateY(0)' : 'translateY(16px)',
        transition: 'opacity 600ms var(--ease-out), transform 600ms var(--ease-out)',
      }}>
        <div className="ui-bar">
          <div className="dots"><span /><span /><span /></div>
          <div className="url">02&ensp;betterpipe.app · best-fit companies</div>
        </div>
        <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 6 }}>
          {[
            { name: 'Northwind Logistics', sig: 'Hiring · 4 ops roles', match: 94 },
            { name: 'Veridian Health', sig: 'New COO · 3w ago', match: 91 },
            { name: 'Rivermark Capital', sig: 'Reposted role · 28d', match: 88 },
          ].map((c, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '10px 12px', borderRadius: 8,
              background: phase >= 3 && i === 1 ? 'color-mix(in srgb, var(--signal) 10%, transparent)' : 'var(--bg)',
              border: `1px solid ${phase >= 3 && i === 1 ? 'color-mix(in srgb, var(--signal) 35%, transparent)' : 'var(--rule)'}`,
              transition: 'background 300ms, border-color 300ms',
            }}>
              <div style={{
                width: 22, height: 22, borderRadius: 6,
                background: 'var(--bg-3)', border: '1px solid var(--rule)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-mute)',
              }}>{c.name[0]}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--fg)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.name}</div>
                <div style={{ fontSize: 10, color: 'var(--fg-mute)', fontFamily: 'var(--font-mono)' }}>{c.sig}</div>
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--signal)', fontWeight: 600 }}>{c.match}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Drafted message card — phase >= 3 */}
      <div className="ui-window" style={{
        position: 'absolute', bottom: 0, left: '8%', width: '76%', maxWidth: 440,
        zIndex: 5,
        opacity: phase >= 4 ? 1 : 0,
        transform: phase >= 4 ? 'translateY(0)' : 'translateY(20px)',
        transition: 'opacity 500ms var(--ease-out), transform 500ms var(--ease-out)',
      }}>
        <div className="ui-bar">
          <div className="dots"><span /><span /><span /></div>
          <div className="url">03&ensp;betterpipe.app · drafts</div>
        </div>
        <div style={{ padding: 16, fontSize: 13, lineHeight: 1.55, color: 'var(--fg)' }}>
          <div style={{ color: 'var(--fg-mute)', fontFamily: 'var(--font-mono)', fontSize: 11, marginBottom: 8 }}>To: Sarah Chen · COO</div>
          Hi Sarah — noticed Veridian{' '}
          <span className="ev">just brought you in as COO</span> and is hiring{' '}
          <span className="ev">two implementation leads</span>. That usually points at handoff drag as teams scale. Worth comparing notes?
        </div>
      </div>


    </div>
  );
}

function Hero({ heroVariant = 'B' }) {
  const v = HERO_VARIANTS[heroVariant] || HERO_VARIANTS.B;
  return (
    <section id="top" style={{ padding: '160px 0 100px', position: 'relative', overflow: 'hidden' }}>
      <div className="grain" />
      {/* Soft signal glow */}
      <div style={{
        position: 'absolute', top: '-20%', right: '-10%', width: '60vw', height: '60vw',
        background: 'radial-gradient(ellipse, color-mix(in srgb, var(--signal) 12%, transparent), transparent 60%)',
        pointerEvents: 'none', filter: 'blur(40px)', zIndex: 0,
      }} />

      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.05fr) minmax(0, 1fr)',
          gap: 'clamp(40px, 6vw, 80px)',
          alignItems: 'center',
        }}>
          {/* Left: copy */}
          <div className="hero-copy">
            <Reveal delay={0}>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 32 }}>
                <span className="pulse-dot" />
                <span className="upper-mono">{v.eyebrow}</span>
              </div>
            </Reveal>
            <Reveal delay={120}>
              <HeroH1 parts={v.h1} />
            </Reveal>
            <Reveal delay={260} className="t-lede" style={{ marginTop: 28, maxWidth: '38ch', color: 'var(--fg-mute)' }}>
              {v.sub}
            </Reveal>
            <Reveal delay={380} style={{ marginTop: 36, display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
              <a href="#book" className="btn btn-primary">
                Book a founder demo
                <ArrowRight />
              </a>
              <a href="#how" className="btn btn-ghost">
                See a campaign built
                <ArrowRight />
              </a>
            </Reveal>
            <Reveal delay={500} style={{ marginTop: 48, display: 'flex', alignItems: 'center', gap: 16, color: 'var(--fg-mute)' }}>
              <span className="upper-mono">Founder-led · 30-min demo</span>
              <span style={{ height: 1, width: 40, background: 'var(--rule-strong)' }} />
              <span className="upper-mono">No GTM hire required</span>
            </Reveal>
          </div>

          {/* Right: animated visual */}
          <Reveal delay={300} className="hero-visual" style={{
            position: 'relative', height: 560, minHeight: 380,
          }}>
            <HeroVisual />
          </Reveal>
        </div>
      </div>

      {/* Mobile stacks */}
      <style>{`
        @media (max-width: 900px) {
          #top > .container > div { grid-template-columns: 1fr !important; }
          .hero-visual { height: 420px !important; margin-top: 24px; }
        }
      `}</style>
    </section>
  );
}

window.Hero = Hero;
window.HERO_VARIANTS = HERO_VARIANTS;