// HERO — three variants: 'transformation', 'phone', 'typecloud'
// Subtle: numbered top bar, big editorial headline with italic accent,
// quiet ambient grid, live ticker showing "now extracting…"

const { useEffect: _hUE, useRef: _hUR, useState: _hUS, useContext: _hUC, useMemo: _hUM } = React;

function HeroNav() {
  const ctx = _hUC(TweakCtx);
  const navStyle = ctx?.navStyle || 'dark-recolor';
  const isLight = navStyle === 'light';
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 60,
      backdropFilter: isLight ? 'blur(14px)' : 'none',
      background: isLight ? 'rgba(244, 239, 230, 0.92)' : 'rgb(13, 16, 24)',
      borderBottom: isLight ? '1px solid rgba(45, 41, 38, 0.08)' : '1px solid var(--hair-dk)',
      height: 68,
      transition: 'background 0.3s, border-color 0.3s'
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto', height: '100%',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '0 32px'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          {isLight ?
          <img
            src="assets/scrub-logo.png"
            alt="Scrub"
            style={{ height: 36, width: 'auto', display: 'block' }} /> :

          <img
            src="assets/scrub-logo-dark.png"
            alt="Scrub"
            style={{ height: 64, width: 'auto', display: 'block' }} />
          }
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
          {[
          ['How it works', 'how'],
          ['Features', 'features'],
          ['Privacy', 'privacy'],
          ['FAQ', 'faq']].
          map(([label, id]) =>
          <button
            key={id}
            onClick={() => document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })}
            style={{ fontSize: 13.5, color: isLight ? 'rgba(45, 41, 38, 0.7)' : 'var(--ink-mute)', transition: 'color 0.2s' }}
            onMouseEnter={(e) => e.currentTarget.style.color = isLight ? 'rgba(45, 41, 38, 1)' : 'var(--ink)'}
            onMouseLeave={(e) => e.currentTarget.style.color = isLight ? 'rgba(45, 41, 38, 0.7)' : 'var(--ink-mute)'}>
            
              {label}
            </button>
          )}
        </div>

        <button
          onClick={() => document.getElementById('cta')?.scrollIntoView({ behavior: 'smooth' })}
          style={{
            padding: '8px 18px', fontSize: 13, fontWeight: 500,
            background: 'var(--accent)', color: 'white', borderRadius: 8,
            boxShadow: '0 6px 20px rgba(232,112,90,0.32)'
          }}>
          
          Get early access →
        </button>
      </div>
    </nav>);

}

// Live ticker — extracts current 'item' name in monospace
function LiveTicker() {
  const items = [
  'flight DEL→BLR · 14 May',
  'HDFC bill · ₹4,820',
  'Swiggy · ₹485',
  'reply from Anika',
  'Amazon parcel',
  'OTP from ICICI',
  'Netflix · renews 12 May',
  'meeting · Mon 10:00'];

  const [i, setI] = useState(0);
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkMobile = () => setIsMobile(window.innerWidth < 480);
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  useEffect(() => {
    const t = setInterval(() => setI((v) => (v + 1) % items.length), 2200);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="rs-live-ticker" style={{
      display: 'inline-flex', alignItems: 'center', gap: isMobile ? 8 : 12,
      padding: isMobile ? '6px 12px' : '8px 14px', borderRadius: 99,
      background: 'rgba(232,112,90,0.08)',
      border: '1px solid rgba(232,112,90,0.2)',
      fontFamily: 'var(--mono)', fontSize: isMobile ? 10 : 11.5, letterSpacing: '0.04em',
      color: 'var(--ink-mute)',
      maxWidth: '90vw',
      overflow: 'hidden'
    }}>
      <PulseDot size={6} />
      <span style={{ color: 'var(--accent)', flexShrink: 0 }}>extracting</span>
      <span style={{ width: 1, height: 12, background: 'var(--hair-dk-strong)', flexShrink: 0 }} />
      <span style={{
        position: 'relative',
        display: 'inline-block',
        minWidth: isMobile ? 140 : 220,
        height: 16,
        overflow: 'hidden'
      }}>
        {items.map((t, idx) =>
        <span key={idx}
        style={{
          position: 'absolute', left: 0, top: 0, right: 0,
          whiteSpace: 'nowrap',
          opacity: idx === i ? 1 : 0,
          transform: idx === i ? 'translateY(0)' : 'translateY(8px)',
          transition: 'opacity 0.5s, transform 0.5s',
          color: 'var(--ink)'
        }}>{t}</span>
        )}
      </span>
    </div>);

}

// Variant A: Transformation — emails morph into cards (preview)
function HeroTransformation() {
  const { animIntensity } = useContext(TweakCtx);
  const speed = 0.4 + (1 - animIntensity / 100) * 1.2;

  const emails = [
  { from: 'HDFC Bank', subj: 'Your credit card statement for April', tag: 'BILL' },
  { from: 'IndiGo', subj: 'Your boarding pass for 6E-2042', tag: 'FLIGHT' },
  { from: 'Swiggy', subj: 'Order delivered · receipt attached', tag: 'RECEIPT' },
  { from: 'Anika Mehta', subj: 'Re: contract review — needs your eyes', tag: 'REPLY' }];


  const cards = [
  { kicker: 'PAYMENT DUE', title: '₹4,820', sub: 'HDFC · due 17 May', accent: 'var(--accent)' },
  { kicker: 'FLIGHT', title: 'DEL → BLR', sub: 'Tue 14 May · 6:45 am', accent: '#6F7BA8' },
  { kicker: 'RECEIPT', title: '₹485', sub: 'Swiggy · today', accent: '#7CA88B' },
  { kicker: 'REPLY NEEDED', title: 'Anika Mehta', sub: 'overdue · 2 days', accent: 'var(--accent-warm)' }];


  return (
    <div style={{
      position: 'relative', width: '100%', maxWidth: 980,
      margin: '0 auto', padding: '0 24px',
      display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 28, alignItems: 'center'
    }}>
      {/* LEFT — emails */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em',
          color: 'var(--ink-faint)', marginBottom: 6
        }}>INBOX · 2,847 unread</div>
        {emails.map((e, i) =>
        <div key={i}
        style={{
          padding: '12px 14px',
          background: 'rgba(238, 240, 248, 0.04)',
          border: '1px solid var(--hair-dk)',
          borderRadius: 10,
          animation: `drift-y-slow ${speed * 8 + i}s ease-in-out infinite`,
          animationDelay: `${i * 0.4}s`,
          fontSize: 12,
          opacity: 0.7
        }}>
            <div style={{ color: 'var(--ink-mute)', fontWeight: 500, marginBottom: 3, display: 'flex', justifyContent: 'space-between' }}>
              <span>{e.from}</span>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 9, color: 'var(--ink-faint)' }}>{i === 0 ? '4:12p' : i === 1 ? '2:08p' : i === 2 ? '1:44p' : '12:30p'}</span>
            </div>
            <div style={{ color: 'var(--ink-faint)', fontSize: 11, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{e.subj}</div>
          </div>
        )}
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-faint)',
          textAlign: 'center', paddingTop: 4
        }}>+ 2,843 more...</div>
      </div>

      {/* MIDDLE — flow line */}
      <div style={{ position: 'relative', height: 280, width: 80, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <svg width="80" height="280" viewBox="0 0 80 280" style={{ overflow: 'visible' }}>
          <defs>
            <linearGradient id="flowG" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stopColor="rgba(232,112,90,0)" />
              <stop offset="50%" stopColor="rgba(232,112,90,0.8)" />
              <stop offset="100%" stopColor="rgba(232,112,90,0)" />
            </linearGradient>
          </defs>
          {[60, 110, 160, 210].map((y, i) =>
          <g key={i}>
              <path
              d={`M 0 ${y} Q 40 ${y}, 80 ${y - 30 + i * 18}`}
              fill="none"
              stroke="url(#flowG)"
              strokeWidth="1.2"
              opacity="0.6" />
            
              <circle r="2" fill="var(--accent)" opacity="0.9">
                <animateMotion
                dur={`${speed * 4 + i * 0.3}s`}
                repeatCount="indefinite"
                path={`M 0 ${y} Q 40 ${y}, 80 ${y - 30 + i * 18}`} />
              
              </circle>
            </g>
          )}
        </svg>
        <div style={{
          position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
          fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.18em',
          color: 'var(--accent)', whiteSpace: 'nowrap',
          background: 'var(--bg-deep)', padding: '3px 8px', borderRadius: 4,
          border: '1px solid var(--hair-dk-strong)'
        }}>SCRUB</div>
      </div>

      {/* RIGHT — cards */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em',
          color: 'var(--accent)', marginBottom: 6
        }}>WHAT MATTERS · 4</div>
        {cards.map((c, i) =>
        <div key={i}
        style={{
          padding: '12px 14px',
          background: 'linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02))',
          border: `1px solid ${c.accent}40`,
          borderRadius: 10,
          boxShadow: `0 8px 28px ${c.accent}18`,
          animation: `drift-y ${speed * 6 + i * 0.7}s ease-in-out infinite`,
          animationDelay: `${i * 0.3 + 0.6}s`
        }}>
            <div style={{
            fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.18em',
            color: c.accent, marginBottom: 4
          }}>{c.kicker}</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1, marginBottom: 3 }}>{c.title}</div>
            <div style={{ fontSize: 11, color: 'var(--ink-mute)' }}>{c.sub}</div>
          </div>
        )}
        <div style={{ height: 14 }} />
      </div>
    </div>);

}

// Variant B: Phone — floating phone with cards stacked
function HeroPhone() {
  return (
    <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
      <div style={{
        width: 320, height: 600,
        borderRadius: 44,
        background: 'linear-gradient(180deg, #2a2d3a 0%, #15171f 100%)',
        padding: 8,
        boxShadow: '0 40px 100px rgba(0,0,0,0.6), 0 0 80px rgba(232,112,90,0.18), inset 0 0 0 1px rgba(255,255,255,0.06)',
        animation: 'drift-y-slow 6s ease-in-out infinite',
        position: 'relative'
      }}>
        <div style={{
          width: '100%', height: '100%', borderRadius: 36,
          background: 'var(--bg-mid)',
          padding: '32px 16px 16px', overflow: 'hidden',
          position: 'relative'
        }}>
          <div style={{
            position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)',
            width: 100, height: 24, borderRadius: 12, background: '#000'
          }} />
          <div style={{ fontFamily: 'var(--mono)', fontSize: 9, color: 'var(--ink-faint)', letterSpacing: '0.18em', marginBottom: 16, marginTop: 4 }}>TODAY · 14 MAY</div>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 28, marginBottom: 18, lineHeight: 1 }}>4 things <span className="italic" style={{ color: 'var(--accent)' }}>need you</span></div>

          {[
          { k: 'PAYMENT', t: '₹4,820', s: 'HDFC · 17 May', c: 'var(--accent)' },
          { k: 'FLIGHT', t: 'DEL → BLR', s: 'tomorrow · 6:45a', c: '#6F7BA8' },
          { k: 'REPLY', t: 'Anika', s: 'overdue 2d', c: 'var(--accent-warm)' }].
          map((c, i) =>
          <div key={i} style={{
            padding: '10px 12px', borderRadius: 10, marginBottom: 8,
            background: 'rgba(255,255,255,0.04)',
            border: `1px solid ${c.c}30`,
            animation: `drift-y ${5 + i}s ease-in-out infinite`,
            animationDelay: `${i * 0.3}s`
          }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 8, letterSpacing: '0.18em', color: c.c, marginBottom: 3 }}>{c.k}</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 16, lineHeight: 1 }}>{c.t}</div>
              <div style={{ fontSize: 10, color: 'var(--ink-mute)' }}>{c.s}</div>
            </div>
          )}
        </div>
      </div>
      {/* glow */}
      <div style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        width: 500, height: 500, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(232,112,90,0.18) 0%, transparent 60%)',
        filter: 'blur(40px)', zIndex: -1,
        animation: 'ambient-glow 4s ease-in-out infinite'
      }} />
    </div>);

}

// Variant C: Type cloud — categories assembling
function HeroTypeCloud() {
  const { animIntensity } = useContext(TweakCtx);
  const tags = [
  { t: 'Bills', x: 10, y: 20, s: 1.2, c: 'var(--accent)' },
  { t: 'Flights', x: 70, y: 12, s: 1, c: '#6F7BA8' },
  { t: 'Receipts', x: 25, y: 60, s: 0.85, c: 'var(--ink-mute)' },
  { t: 'Subscriptions', x: 60, y: 70, s: 1.1, c: 'var(--accent-warm)' },
  { t: 'OTPs', x: 5, y: 80, s: 0.9, c: 'var(--ink-faint)' },
  { t: 'Replies', x: 80, y: 45, s: 1, c: 'var(--accent)' },
  { t: 'Parcels', x: 40, y: 88, s: 0.85, c: 'var(--ink-mute)' },
  { t: 'Meetings', x: 50, y: 30, s: 1.05, c: '#7CA88B' },
  { t: 'Insurance', x: 15, y: 42, s: 0.85, c: 'var(--ink-faint)' },
  { t: 'Refunds', x: 78, y: 78, s: 0.9, c: 'var(--ink-mute)' },
  { t: 'Newsletters', x: 33, y: 5, s: 0.8, c: 'var(--ink-faint)' },
  { t: 'Documents', x: 88, y: 25, s: 0.9, c: 'var(--cool)' }];

  return (
    <div style={{ position: 'relative', height: 400, maxWidth: 800, margin: '0 auto' }}>
      {tags.map((tag, i) =>
      <div key={i} style={{
        position: 'absolute',
        left: `${tag.x}%`, top: `${tag.y}%`,
        fontFamily: 'var(--serif)', fontStyle: 'italic',
        fontSize: 28 * tag.s, color: tag.c,
        opacity: 0.4 + tag.s * 0.4,
        animation: `drift-y-slow ${5 + i * 0.4}s ease-in-out infinite, appear 1.2s ease-out both`,
        animationDelay: `${i * 0.1}s`,
        transform: 'translate(-50%, -50%)',
        letterSpacing: '-0.02em',
        pointerEvents: 'none',
        textShadow: `0 0 24px ${tag.c}40`
      }}>{tag.t}</div>
      )}
      <div style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        padding: '14px 26px', borderRadius: 12,
        background: 'rgba(232,112,90,0.12)',
        border: '1px solid var(--accent)',
        fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', color: 'var(--accent)',
        backdropFilter: 'blur(8px)'
      }}>
        ALL ORGANIZED · ZERO EFFORT
      </div>
    </div>);

}

function Hero() {
  const { heroVariant } = useContext(TweakCtx);

  return (
    <section style={{
      position: 'relative', minHeight: '100vh',
      paddingTop: 130, paddingBottom: 60,
      background: 'var(--bg-deep)',
      overflow: 'hidden'
    }}>
      <AmbientGrid density={32} dark />

      {/* radial glows */}
      <div style={{
        position: 'absolute', top: '20%', left: '50%', transform: 'translateX(-50%)',
        width: 900, height: 900, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(232,112,90,0.10) 0%, transparent 60%)',
        pointerEvents: 'none', filter: 'blur(20px)'
      }} />
      <div style={{
        position: 'absolute', bottom: 0, right: -200,
        width: 600, height: 600, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(111,123,168,0.08) 0%, transparent 60%)',
        pointerEvents: 'none'
      }} />

      <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto', padding: '0 32px', zIndex: 2 }}>
        {/* top mono row */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 56 }}>
          <SectionMark num="00" label="Private beta" />
        </div>

        {/* HEADLINE */}
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <Reveal as="h1" style={{
            fontFamily: 'var(--serif)',
            fontSize: 'clamp(3.6rem, 9vw, 8.5rem)',
            lineHeight: 0.92,
            letterSpacing: '-0.035em',
            margin: 0,
            color: 'var(--ink)',
            fontWeight: 400,
            textWrap: 'balance'
          }}>
            Never open<br />
            your <span className="italic" style={{
              color: 'var(--accent)',
              fontStyle: 'italic',
              position: 'relative'
            }}>inbox</span> again.
          </Reveal>
        </div>

        <Reveal delay={150} as="p" style={{
          maxWidth: 580, margin: '0 auto 32px', textAlign: 'center',
          fontSize: 18, lineHeight: 1.6, fontWeight: 300,
          color: 'rgb(184, 170, 157)', textWrap: 'pretty'
        }}>
          Scrub analyses what lands in your email —
          and turns it into a calm, actionable feed. The inbox stays closed.{'\n'}You stay ahead.
        </Reveal>

        <Reveal delay={300} style={{ display: 'flex', justifyContent: 'center', marginBottom: 48 }}>
          <LiveTicker />
        </Reveal>

        <Reveal delay={400} style={{ display: 'flex', gap: 12, justifyContent: 'center', marginBottom: 80 }}>
          <PrimaryBtn onClick={() => document.getElementById('cta')?.scrollIntoView({ behavior: 'smooth' })}>
            Join the beta →
          </PrimaryBtn>
          <GhostBtn onClick={() => document.getElementById('how')?.scrollIntoView({ behavior: 'smooth' })}>
            See how it works
          </GhostBtn>
        </Reveal>

        {/* trust strip */}
        <div style={{
          marginTop: 80,
          display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 32,
          paddingTop: 28, borderTop: '1px solid var(--hair-dk)'
        }}>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', color: 'var(--ink-faint)' }}>
            CONNECTS TO
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, opacity: 0.75 }}>
            <img src="assets/gmail-logo.png" alt="Gmail" style={{ height: 16, width: 16, objectFit: 'contain' }} />
            <span style={{ fontSize: 13, color: 'var(--ink-mute)' }}>Gmail</span>
          </div>
          <div style={{ width: 1, height: 14, background: 'var(--hair-dk-strong)' }} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, opacity: 0.75 }}>
            <img src="assets/outlook-logo.png" alt="Outlook" style={{ height: 16, width: 16, objectFit: 'contain' }} />
            <span style={{ fontSize: 13, color: 'var(--ink-mute)' }}>Outlook</span>
          </div>
          <div style={{ width: 1, height: 14, background: 'var(--hair-dk-strong)' }} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, opacity: 0.75 }}>
            <img src="assets/whatsapp-logo.png" alt="WhatsApp" style={{ height: 16, width: 16, objectFit: 'contain' }} />
            <span style={{ fontSize: 13, color: 'var(--ink-mute)' }}>WhatsApp</span>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { HeroNav, Hero });