// Azlani — Home · Hero + Problem (tightened)

const Hero = () => {
  const [scroll, setScroll] = React.useState(0);
  const [callIdx, setCallIdx] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => setScroll(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => {
    const id = setInterval(() => setCallIdx(i => i + 1), 3200);
    return () => clearInterval(id);
  }, []);
  const op = Math.max(0, 1 - scroll / 600);

  const ticker = [
    { time: '02:14', who: 'J. Smith', tag: 'URGENT', detail: 'Active leak · warehouse' },
    { time: '06:42', who: 'M. Chen', tag: 'NEW', detail: 'Inspection · office bldg' },
    { time: '07:18', who: 'D. Patel', tag: 'NEW', detail: 'Storm damage · 3-prop' },
    { time: '08:31', who: 'Building Co', tag: 'BOOKED', detail: 'Wed 2PM · contract' },
  ];
  const cur = ticker[callIdx % ticker.length];

  return (
    <section style={{ minHeight: '100vh', position: 'relative', display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingTop: 120, paddingBottom: 140, overflow: 'hidden' }}>
      {/* AURORA — animated warm glows */}
      <div aria-hidden style={{
        position: 'absolute', zIndex: 0,
        width: 1100, height: 1100,
        left: '-20%', top: '-30%',
        background: 'radial-gradient(circle at center, rgba(214,90,42,0.22), transparent 60%)',
        filter: 'blur(60px)',
        animation: 'heroAurora1 22s ease-in-out infinite',
        pointerEvents: 'none',
      }}></div>
      <div aria-hidden style={{
        position: 'absolute', zIndex: 0,
        width: 800, height: 800,
        right: '-15%', bottom: '-20%',
        background: 'radial-gradient(circle at center, rgba(243,160,114,0.18), transparent 60%)',
        filter: 'blur(60px)',
        animation: 'heroAurora2 28s ease-in-out infinite',
        pointerEvents: 'none',
      }}></div>
      {/* faint dot grid */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, zIndex: 0,
        backgroundImage: 'radial-gradient(rgba(20,17,13,0.08) 1px, transparent 1px)',
        backgroundSize: '32px 32px',
        maskImage: 'radial-gradient(ellipse at 50% 60%, #000 30%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse at 50% 60%, #000 30%, transparent 75%)',
        pointerEvents: 'none',
      }}></div>

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <FadeUp>
          <div className="eyebrow" style={{ display: 'inline-flex', gap: 14, alignItems: 'center' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--ember)', boxShadow: '0 0 0 0 rgba(214,90,42,0.6)', animation: 'livePulse 1.6s ease-out infinite' }}></span>
              <span style={{ color: 'var(--ember)', fontWeight: 600 }}>LIVE</span>
            </span>
            <span style={{ color: 'var(--muted)' }}>·</span>
            <span>AI front office · for inbound leads</span>
          </div>
        </FadeUp>
        <h1 className="serif" style={{
          fontSize: 'clamp(48px, 7.4vw, 116px)',
          lineHeight: 0.94, letterSpacing: '-0.035em',
          margin: '24px 0 0', fontWeight: 400,
        }}>
          <RevealLines lines={['Never miss']} baseDelay={0.05} />
          <RevealLines lines={['another high-']} baseDelay={0.13} />
          <RevealLines lines={[<span key="l">value <span className="ital" style={{ color: 'var(--ember)' }}>lead.</span></span>]} baseDelay={0.21} />
        </h1>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 40, marginTop: 36, alignItems: 'end' }}>
          <FadeUp delay={0.5} style={{ maxWidth: 560 }}>
            <p style={{ fontSize: 19, lineHeight: 1.5, color: 'var(--ink-2)', margin: 0 }}>
              An AI front office that <strong style={{ color: 'var(--ink)', fontWeight: 600 }}>answers calls, qualifies leads, collects photos, and books inspections</strong> — then sends your team a clean job brief. Built for commercial roofers.
            </p>
          </FadeUp>
          <FadeUp delay={0.6} style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="contact.html" className="btn btn-primary">Book a 10-min demo <span className="arrow">↗</span></a>
          </FadeUp>
        </div>

        {/* LIVE TICKER — floating card, top-right */}
        <FadeUp delay={0.8}>
          <div style={{
            position: 'absolute', right: 32, top: -40,
            background: 'var(--paper)',
            border: '1px solid var(--line)',
            borderRadius: 14,
            padding: '14px 18px',
            boxShadow: '0 30px 60px -20px rgba(0,0,0,0.18), 0 8px 16px -8px rgba(0,0,0,0.08)',
            display: 'flex', flexDirection: 'column', gap: 8,
            minWidth: 280,
            animation: 'tickerFloat 6s ease-in-out infinite',
          }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--muted)', display: 'flex', justifyContent: 'space-between' }}>
              <span>▸ LIVE INTAKE</span>
              <span>{cur.time}</span>
            </div>
            <div key={callIdx} style={{ display: 'flex', alignItems: 'center', gap: 10, animation: 'tickerIn .5s ease' }}>
              <span style={{
                fontSize: 9, fontFamily: 'Geist Mono, monospace', letterSpacing: '0.12em',
                padding: '3px 8px', borderRadius: 100,
                background: cur.tag === 'URGENT' ? 'var(--ember)' : cur.tag === 'BOOKED' ? 'var(--ink)' : 'transparent',
                color: cur.tag === 'BOOKED' ? 'var(--bg)' : cur.tag === 'URGENT' ? 'var(--ink)' : 'var(--ink)',
                border: cur.tag === 'NEW' ? '1px solid var(--line)' : 'none',
              }}>{cur.tag}</span>
              <span className="serif" style={{ fontSize: 16, fontWeight: 500 }}>{cur.who}</span>
            </div>
            <div style={{ fontSize: 12, color: 'var(--muted)', lineHeight: 1.4 }}>{cur.detail}</div>
          </div>
        </FadeUp>
      </div>

      <div style={{ position: 'absolute', bottom: 56, left: '50%', transform: 'translateX(-50%)', opacity: op, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, zIndex: 2 }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--muted)' }}>
          scroll · watch a call become a brief
        </div>
        <svg width="14" height="22" viewBox="0 0 14 22" fill="none" style={{ animation: 'arrowBounce 1.6s ease-in-out infinite' }}>
          <path d="M7 1 L7 19 M1 13 L7 19 L13 13" stroke="var(--ember)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>
      <style>{`
        @keyframes arrowBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
        @keyframes heroAurora1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,40px) scale(1.1); } }
        @keyframes heroAurora2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40px,-30px) scale(1.15); } }
        @keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(214,90,42,0.5); } 70% { box-shadow: 0 0 0 14px rgba(214,90,42,0); } 100% { box-shadow: 0 0 0 0 rgba(214,90,42,0); } }
        @keyframes tickerFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
        @keyframes tickerIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
      `}</style>
    </section>
  );
};

// Marquee unchanged
const BigBreaker = () => (
  <section style={{ padding: '50px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
    <div className="marquee" style={{ border: 'none', padding: 0 }}>
      <div className="marquee-track">
        <span><span>answer</span> <span className="dot"></span> <span className="ital">qualify</span> <span className="dot"></span> <span>collect photos</span> <span className="dot"></span> <span className="ital">book</span> <span className="dot"></span> <span>brief</span> <span className="dot"></span> <span className="ital">follow up</span> <span className="dot"></span></span>
        <span><span>answer</span> <span className="dot"></span> <span className="ital">qualify</span> <span className="dot"></span> <span>collect photos</span> <span className="dot"></span> <span className="ital">book</span> <span className="dot"></span> <span>brief</span> <span className="dot"></span> <span className="ital">follow up</span> <span className="dot"></span></span>
      </div>
    </div>
  </section>
);

// PROBLEM — pinned scrolly scene. 3 stats reveal in sequence as you scroll, like the phone scene.
const Problem = () => {
  const sectionRef = React.useRef(null);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const onScroll = () => {
      if (!sectionRef.current) return;
      const r = sectionRef.current.getBoundingClientRect();
      const total = r.height - window.innerHeight;
      const scrolled = -r.top;
      setProgress(Math.max(0, Math.min(1, scrolled / total)));
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const stats = [
    {
      num: '17%',
      mono: '01 · After-hours calls',
      label: 'of inbound calls go straight to voicemail.',
    },
    {
      num: '5 min',
      mono: '02 · Response window',
      label: 'is the window that wins. After that, conversion drops sharply.',
    },
    {
      num: '78%',
      mono: '03 · First responder advantage',
      label: 'of buyers go with the first to respond. Speed beats price.',
    },
  ];

  // Slot the scroll into 4 phases: intro, stat1, stat2, stat3, then closing.
  // 0.00 - 0.10 → header settle
  // 0.10 - 0.35 → stat 1
  // 0.35 - 0.60 → stat 2
  // 0.60 - 0.85 → stat 3
  // 0.85 - 1.00 → closing line
  const stage = progress < 0.10 ? -1
    : progress < 0.35 ? 0
    : progress < 0.60 ? 1
    : progress < 0.85 ? 2
    : 3; // 3 = closing visible
  const activeStat = Math.max(0, Math.min(2, stage));
  const showClosing = stage >= 3;

  // per-stat reveal progress (0..1) inside its own slot — used for number "count up" feel + sub slide-in
  const slot = (lo, hi) => Math.max(0, Math.min(1, (progress - lo) / (hi - lo)));
  const p0 = slot(0.10, 0.35);
  const p1 = slot(0.35, 0.60);
  const p2 = slot(0.60, 0.85);
  const pc = slot(0.85, 1.00);
  const slotProgress = [p0, p1, p2];

  return (
    <section
      ref={sectionRef}
      id="product"
      className="dark"
      style={{ height: '600vh', position: 'relative', borderBottom: '1px solid var(--line)' }}
    >
      <div style={{ position: 'sticky', top: 0, height: '100vh', overflow: 'hidden', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        {/* faint grid */}
        <div aria-hidden style={{
          position: 'absolute', inset: 0, zIndex: 1,
          backgroundImage: 'linear-gradient(rgba(244,239,230,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(244,239,230,0.04) 1px, transparent 1px)',
          backgroundSize: '80px 80px',
          maskImage: 'radial-gradient(ellipse at center, #000 30%, transparent 75%)',
          WebkitMaskImage: 'radial-gradient(ellipse at center, #000 30%, transparent 75%)',
          pointerEvents: 'none',
        }}></div>

        {/* aurora glow — subtle moving warmth */}
        <div aria-hidden style={{
          position: 'absolute', zIndex: 1,
          width: 900, height: 900,
          left: '-15%', top: '-20%',
          background: 'radial-gradient(circle at center, rgba(214,90,42,0.18), transparent 60%)',
          filter: 'blur(40px)',
          animation: 'auroraDrift 18s ease-in-out infinite',
          pointerEvents: 'none',
        }}></div>
        <div aria-hidden style={{
          position: 'absolute', zIndex: 1,
          width: 700, height: 700,
          right: '-10%', bottom: '-15%',
          background: 'radial-gradient(circle at center, rgba(243,160,114,0.12), transparent 60%)',
          filter: 'blur(40px)',
          animation: 'auroraDrift 22s ease-in-out infinite reverse',
          pointerEvents: 'none',
        }}></div>
        <style>{`@keyframes auroraDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(1.1); } }`}</style>

        <div className="container" style={{ position: 'relative', zIndex: 2, width: '100%' }}>
          {/* Header — pushed down + left, sits closer to stats */}
          <div style={{ marginLeft: 0, maxWidth: 720 }}>
            <div className="eyebrow" style={{ color: 'var(--ember-soft)' }}>
              <span className="dot" style={{ background: 'var(--ember)' }}></span> The problem
            </div>
            <h2 className="serif" style={{
              fontSize: 'clamp(32px, 3.6vw, 52px)',
              lineHeight: 1.05, letterSpacing: '-0.03em',
              margin: '14px 0 28px', fontWeight: 500, color: 'var(--bg)',
              paddingBottom: '0.08em',
              maxWidth: 620,
            }}>
              Good leads die in voicemail.
            </h2>
          </div>

          {/* Stat carousel: numbers slide in vertically; sub label slides from right */}
          <div style={{
            position: 'relative',
            minHeight: 340,
            display: showClosing ? 'none' : 'grid',
            gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 1fr)',
            gap: 'clamp(40px, 6vw, 96px)',
            alignItems: 'center',
            borderTop: '1px solid rgba(244,239,230,0.18)',
            paddingTop: 32,
          }}>
            {/* LEFT — big number, vertical slide */}
            <div style={{ position: 'relative', height: 280, overflow: 'hidden' }}>
              {stats.map((s, i) => {
                const isActive = i === activeStat;
                const isPast = i < activeStat;
                const offset = isActive ? 0 : isPast ? -120 : 120;
                const op = isActive ? 1 : 0;
                return (
                  <div key={i} style={{
                    position: 'absolute', inset: 0,
                    display: 'flex', flexDirection: 'column', justifyContent: 'center',
                    transform: `translateY(${offset}%)`,
                    opacity: op,
                    transition: 'transform .35s cubic-bezier(.7,0,.2,1), opacity .25s ease',
                  }}>
                    <div className="mono" style={{
                      fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
                      color: 'var(--ember-soft)', marginBottom: 18,
                    }}>{s.mono}</div>
                    <div className="serif" style={{
                      fontSize: 'clamp(120px, 16vw, 240px)',
                      lineHeight: 0.85,
                      letterSpacing: '-0.06em',
                      color: 'var(--ember)',
                      fontWeight: 600,
                      paddingBottom: '0.05em',
                    }}>{s.num}</div>
                  </div>
                );
              })}
            </div>

            {/* RIGHT — sub label, arrives with the number */}
            <div style={{ position: 'relative', minHeight: 200 }}>
              {stats.map((s, i) => {
                const isActive = i === activeStat;
                const isPast = i < activeStat;
                const offset = isActive ? 0 : isPast ? -40 : 40;
                const op = isActive ? 1 : 0;
                return (
                  <p key={i} className="serif" style={{
                    position: 'absolute', inset: 0,
                    fontSize: 'clamp(22px, 2.4vw, 36px)',
                    lineHeight: 1.2,
                    letterSpacing: '-0.025em',
                    color: 'var(--bg)',
                    margin: 0,
                    fontWeight: 500,
                    paddingBottom: '0.08em',
                    maxWidth: 480,
                    transform: `translateX(${offset}px)`,
                    opacity: op,
                    transition: 'transform .35s cubic-bezier(.7,0,.2,1), opacity .25s ease',
                  }}>{s.label}</p>
                );
              })}
            </div>
          </div>

          {/* CLOSING — fades in across the dark backdrop */}
          {showClosing && (
            <div style={{
              minHeight: 340,
              borderTop: '1px solid rgba(244,239,230,0.18)',
              paddingTop: 32,
              display: 'flex', flexDirection: 'column', justifyContent: 'center',
              opacity: pc, transition: 'opacity .5s ease',
            }}>
              <p className="serif" style={{
                fontSize: 'clamp(36px, 5vw, 72px)',
                lineHeight: 1.05,
                letterSpacing: '-0.035em',
                color: 'var(--bg)',
                margin: 0,
                fontWeight: 500,
                maxWidth: 1100,
                paddingBottom: '0.08em',
              }}>
                The competitor who picked up <span className="ital" style={{ color: 'var(--ember)' }}>won the inspection.</span>
              </p>
              <div className="mono" style={{ marginTop: 32, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--muted)' }}>
                Sources: BrightLocal · HBR · MIT
              </div>
            </div>
          )}

          {/* progress chrome — same vocabulary as PinnedScene */}
          <div className="mono" style={{ marginTop: 56, fontSize: 12, color: 'var(--muted)', letterSpacing: '0.12em' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: 360 }}>
              <span>{showClosing ? '◼ THE COST' : `▸ STAT ${String(activeStat + 1).padStart(2, '0')}/03`}</span>
              <span>{Math.round(progress * 100).toString().padStart(2, '0')}%</span>
            </div>
            <div style={{ height: 1, background: 'rgba(244,239,230,0.18)', marginTop: 8, position: 'relative', maxWidth: 360 }}>
              <div style={{ position: 'absolute', inset: 0, background: 'var(--ember)', transform: `scaleX(${progress})`, transformOrigin: 'left' }}></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;
window.BigBreaker = BigBreaker;
window.Problem = Problem;