/* hero.jsx — Section 1 */

const heroStyles = `
  .hero { padding-top: clamp(48px, 7vh, 80px); padding-bottom: clamp(64px, 10vh, 120px); position: relative; overflow: hidden; }
  .hero .wrap { position: relative; z-index: 2; }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
  }
  @media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

  .hero h1 .ital { font-style: italic; font-weight: 500; color: var(--ink); }
  .hero h1 .accent { color: var(--terracotta-deep); font-style: italic; font-weight: 500; }
  .hero-sub { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-soft); max-width: 540px; line-height: 1.5; }
  .hero-bullets { color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; }
  .hero-bullets b { color: var(--ink); font-weight: 500; }

  .hero-cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

  .waitlist-meter {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 12px 7px 8px;
    background: color-mix(in oklab, var(--paper) 92%, var(--cream));
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px; color: var(--ink-soft);
  }
  .waitlist-meter .pip {
    width: 10px; height: 10px; border-radius: 50%;
    background: #4FAE7B;
    box-shadow: 0 0 0 4px rgba(79, 174, 123, 0.18);
    animation: pulse 2s ease-in-out infinite;
  }
  .waitlist-meter b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
  .waitlist-bar {
    width: 88px; height: 4px; border-radius: 999px;
    background: var(--line);
    overflow: hidden;
  }
  .waitlist-bar > i {
    display: block; height: 100%; background: var(--terracotta);
    transition: width .6s ease;
  }

  /* Hero visual stage */
  .hero-stage {
    position: relative;
    aspect-ratio: 1 / 1.05;
    border-radius: 28px;
    overflow: hidden;
    background:
      radial-gradient(120% 80% at 20% 10%, color-mix(in oklab, var(--terracotta-soft) 60%, var(--cream)) 0%, transparent 55%),
      radial-gradient(80% 60% at 90% 90%, color-mix(in oklab, var(--moss) 35%, var(--cream)) 0%, transparent 60%),
      linear-gradient(180deg, color-mix(in oklab, var(--terracotta-soft) 45%, var(--cream)) 0%, var(--cream-2) 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 30px 80px -40px rgba(22,36,63,.35);
  }
  .hero-stage::before {
    /* window light beams */
    content: ""; position: absolute; inset: 0;
    background:
      repeating-linear-gradient(120deg, rgba(255,255,255,0.13) 0 30px, transparent 30px 80px);
    mix-blend-mode: soft-light;
    pointer-events: none;
  }
  .hero-stage::after {
    /* film grain */
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(22,36,63,0.08) 1px, transparent 1.4px);
    background-size: 3px 3px;
    opacity: .25; mix-blend-mode: multiply; pointer-events: none;
  }
  .hero-photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }

  /* Abstract room: lamp, plant, window */
  .scene-lamp {
    position: absolute; right: 8%; top: 6%;
    width: 90px; height: 130px;
    color: var(--ink);
  }
  .scene-plant {
    position: absolute; left: 6%; bottom: 8%; width: 110px; height: 160px;
    color: var(--moss);
  }
  .scene-window {
    position: absolute; left: 14%; top: 10%;
    width: 24%; height: 36%;
    border-radius: 90px 90px 6px 6px / 80px 80px 6px 6px;
    border: 2px solid color-mix(in oklab, var(--ink) 70%, transparent);
    background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.0));
  }
  .scene-window::after {
    content: ""; position: absolute; inset: 12px; border-radius: inherit;
    background:
      linear-gradient(90deg, transparent 49%, rgba(22,36,63,0.35) 49.5%, rgba(22,36,63,0.35) 50.5%, transparent 50.5%),
      linear-gradient(0deg, transparent 49%, rgba(22,36,63,0.35) 49.5%, rgba(22,36,63,0.35) 50.5%, transparent 50.5%);
  }

  /* Camera dot — subtle floating disc indicating Sense */
  .scene-cam {
    position: absolute; right: 22%; top: 16%;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--ink);
    box-shadow: 0 12px 24px -10px rgba(22,36,63,.55), 0 0 0 6px rgba(255,255,255,.5);
    display: grid; place-items: center;
  }
  .scene-cam::after {
    content: ""; width: 22px; height: 22px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #46587a 0%, #0c1830 70%);
    border: 2px solid rgba(255,255,255,0.18);
  }
  .scene-cam .ring {
    position: absolute; inset: -10px; border-radius: 50%;
    border: 1.5px dashed color-mix(in oklab, var(--terracotta) 80%, transparent);
    animation: spin 24s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Floating chat bubble — overlay on stage */
  .hero-chat {
    position: absolute;
    left: 8%; right: 8%; bottom: 7%;
    display: flex; flex-direction: column; gap: 10px;
    pointer-events: none;
  }
  .bubble {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 13px 16px;
    font-size: 15px;
    color: var(--ink);
    box-shadow: 0 18px 40px -20px rgba(22,36,63,.35);
    max-width: 80%;
    line-height: 1.45;
  }
  .bubble.user {
    align-self: flex-end;
    background: var(--ink); color: var(--cream);
    border-color: var(--ink);
  }
  .bubble.assist { align-self: flex-start; }
  .bubble .who { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: .55; margin-bottom: 4px; font-weight: 500; }
  .bubble.user .who { color: var(--terracotta-soft); }
  .bubble.assist .who { color: var(--terracotta-deep); }
  .cursor { display: inline-block; width: 7px; height: 1em; background: currentColor; vertical-align: -2px; margin-left: 2px; opacity: .7; animation: blink 1s steps(2,end) infinite; }
  @keyframes blink { 50% { opacity: 0; } }

  /* Pinned label */
  .pinned-label {
    position: absolute; top: 4%; right: 4%;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.78);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 500;
    backdrop-filter: blur(8px);
    white-space: nowrap;
  }

  /* Hero accent corner */
  .hero-noise {
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(60% 50% at 90% 0%, color-mix(in oklab, var(--terracotta-soft) 60%, transparent) 0%, transparent 60%),
      radial-gradient(40% 30% at 0% 100%, color-mix(in oklab, var(--moss) 30%, transparent) 0%, transparent 60%);
    opacity: .55;
    z-index: 1;
  }
`;

function HeroChat({ playKey }) {
  // Single short exchange for hero
  const userText = "Watch the garage but ignore delivery folks.";
  const assistText = "Got it. What time are you usually home? I can be extra alert before then.";
  const u = useTypewriter(userText, { speed: 24, delay: 600 });
  const a = useTypewriter(assistText, { speed: 22, delay: 600 + userText.length * 24 + 700 });
  const userDone = u.length === userText.length;
  const assistStarted = a.length > 0;
  return (
    <div className="hero-chat">
      <div className="bubble user" style={{ opacity: u ? 1 : 0, transform: u ? 'translateY(0)' : 'translateY(8px)', transition: 'all .4s ease' }}>
        <div className="who">You</div>
        {u}{!userDone && <span className="cursor" />}
      </div>
      <div className="bubble assist" style={{ opacity: assistStarted ? 1 : 0, transform: assistStarted ? 'translateY(0)' : 'translateY(8px)', transition: 'all .4s ease' }}>
        <div className="who">Care</div>
        {a}{assistStarted && a.length < assistText.length && <span className="cursor" />}
      </div>
    </div>
  );
}

function WaitlistMeter({ taken, total }) {
  const [n, setN] = React.useState(taken);
  React.useEffect(() => {
    const id = setInterval(() => {
      setN((x) => (x < total - 80 ? x + 1 : x));
    }, 7000 + Math.random() * 8000);
    return () => clearInterval(id);
  }, [total]);
  const pct = (n / total) * 100;
  return (
    <div className="waitlist-meter" role="status" aria-live="polite">
      <span className="pip" aria-hidden />
      <span><b>{n}</b> of {total} early access spots taken</span>
      <span className="waitlist-bar" aria-hidden><i style={{ width: `${pct}%` }} /></span>
    </div>
  );
}

function HeroStage({ productName }) {
  return (
    <Reveal className="hero-stage" delay={120}>
      <img className="hero-photo" src="images/hero-cam.jpg?v=12" alt={`The ${productName} camera`} />
      <div className="pinned-label">Live · chat with your camera</div>
      <HeroChat />
    </Reveal>
  );
}

function HeroSection({ productName, showCounter }) {
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="hero-noise" aria-hidden />
      <div className="wrap">
        <div className="hero-grid">
          <Reveal className="stack" style={{ gap: 28 }}>
            <div className="chip" style={{ alignSelf: 'flex-start' }}>
              <span className="chip-dot" />
              Built by a team from public-safety&nbsp;AI
            </div>
            <h1>
              Your camera <span className="ital">finally</span><br />
              understands <span className="accent">what matters.</span>
            </h1>
            <p className="hero-sub">
              Tell it what you care about in plain language.<br />
              It asks the right questions, learns your routine, and only alerts you when something actually matters.
            </p>
            <div className="hero-bullets">
              <b>No drawing zones.</b><br />
              <b>No false alarms about red cars.</b><br />
              <b>No tweaking sensitivity sliders.</b>
            </div>
            <div className="hero-cta-row">
              <a href="#survey" className="btn accent">
                Request beta access
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </a>
              {showCounter && <WaitlistMeter taken={412} total={500} />}
            </div>
          </Reveal>
          <HeroStage productName={productName} />
        </div>
      </div>
      <style dangerouslySetInnerHTML={{ __html: heroStyles }} />
    </section>
  );
}

Object.assign(window, { HeroSection });