/* Dentist site — Header + Hero */
const { useEffect: dhE, useState: dhS } = React;

function Header({ onOpenModal }) {
  const [scrolled, setScrolled] = dhS(false);
  dhE(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: scrolled ? "rgba(246, 239, 227, 0.88)" : "transparent",
      backdropFilter: scrolled ? "blur(14px) saturate(140%)" : "none",
      WebkitBackdropFilter: scrolled ? "blur(14px) saturate(140%)" : "none",
      borderBottom: scrolled ? "1px solid var(--on-light-15)" : "1px solid transparent",
      transition: "background .3s ease, border-color .3s ease",
    }}>
      <div className="wrap" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        height: scrolled ? 64 : 76, transition: "height .3s ease", gap: 18,
      }}>
        <Wordmark />
        <nav className="hdr-nav" style={{ fontSize: 12, letterSpacing: "0.04em", textTransform: "uppercase", whiteSpace: "nowrap" }}>
          {[["Science", "#science"], ["The Kit", "#kit"], ["Commercial", "#commercial"], ["Onboarding", "#onboarding"], ["FAQ", "#faq"]].map(([l, h]) => (
            <a key={l} href={h} style={{ color: "var(--ink)", opacity: 0.72 }}
              onMouseEnter={e => e.currentTarget.style.opacity = 1}
              onMouseLeave={e => e.currentTarget.style.opacity = 0.72}>{l}</a>
          ))}
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
          <a href="index.html" className="hdr-patients" style={{
            fontFamily: "var(--font-mono)", fontSize: 10,
            letterSpacing: "0.18em", textTransform: "uppercase",
            color: "var(--on-light-60)", display: "inline-flex", alignItems: "center", gap: 6,
            paddingRight: 14, borderRight: "1px solid var(--on-light-15)",
            whiteSpace: "nowrap",
          }}>For patients <I.Arrow /></a>
          <button onClick={onOpenModal} className="btn btn--primary" style={{ padding: "11px 18px" }}>
            Request free sample <I.Arrow />
          </button>
        </div>
      </div>
    </header>
  );
}

/* ---------- HERO — Clinical / Confident ----------
   Editorial split. Left: tight serif headline + lead + spec rail at bottom.
   Right: open product render on cream + technical spec sheet column.
*/
function Hero({ onOpenModal }) {
  return (
    <section id="top" style={{ paddingTop: "clamp(56px, 7vw, 88px)", paddingBottom: "clamp(48px, 6vw, 96px)", position: "relative" }}>
      <div className="wrap">
        {/* Top dateline */}
        <Reveal>
          <div style={{
            display: "flex", justifyContent: "space-between",
            alignItems: "center", flexWrap: "wrap", gap: 16,
            padding: "16px 0", borderBottom: "1px solid var(--on-light-15)",
            marginBottom: "clamp(40px, 5vw, 72px)",
          }}>
            <span className="eyebrow">For dental professionals</span>
            <span className="eyebrow" style={{ color: "var(--accent)" }}>
              ★ 20 years' whitening · 5 years our own formula ★
            </span>
            <span className="eyebrow">Free sample kit · Dispatched 48h</span>
          </div>
        </Reveal>

        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 0.95fr)",
          gap: "clamp(32px, 5vw, 80px)",
          alignItems: "stretch",
        }}>
          {/* LEFT */}
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 36, minHeight: 560 }}>
            <Reveal delay={120}>
              <h1 className="h-display" style={{
                fontSize: "clamp(60px, 8vw, 120px)", margin: 0,
              }}>
                Pro-strength<br/>whitening, <em style={{ color: "var(--accent)" }}>finally</em><br/>worth&nbsp;stocking.
              </h1>
            </Reveal>
            <Reveal delay={240}>
              <p className="lead" style={{ maxWidth: 480, margin: 0 }}>
                20 years of whitening experience. Five years of our own formulation. One gel that
                finally hit the brief: the shade lift only custom trays can deliver, near-zero
                sensitivity, and a retention loop through the 360 app that turns a one-off course
                into an ongoing relationship. Every patient you treat gets the app — and the app
                keeps them coming back to you.
              </p>
            </Reveal>
            <Reveal delay={340}>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <button onClick={onOpenModal} className="btn btn--primary btn--big">Request free sample <I.Arrow /></button>
                <a href="#commercial" className="btn btn--ghost btn--big">See the retention story</a>
              </div>
            </Reveal>

            {/* Spec rail */}
            <Reveal delay={460}>
              <div style={{
                paddingTop: 24, marginTop: 16,
                borderTop: "1px solid var(--on-light-15)",
                display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18,
              }}>
                {[
                  ["01", "Gels", "16% CP · 6% HP"],
                  ["02", "Trays", "Lab-made, 5 days"],
                  ["03", "Retention", "Via the 360 app"],
                  ["04", "Trial", "Free, no card"],
                ].map(([n, k, v]) => (
                  <div key={n}>
                    <span className="num">{n}</span>
                    <div style={{
                      fontFamily: "var(--font-display)", fontSize: 22,
                      letterSpacing: "-0.01em", marginTop: 4,
                    }}>{k}</div>
                    <div style={{ fontSize: 12, color: "var(--on-light-60)", marginTop: 2, fontFamily: "var(--font-mono)", letterSpacing: "0.05em" }}>{v}</div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>

          {/* RIGHT — product + spec column */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 0.8fr", gap: 20, alignItems: "stretch", minHeight: 560 }}>
            <Reveal delay={180} style={{ position: "relative", display: "grid", placeItems: "center", overflow: "visible" }}>
              <div style={{
                position: "relative", width: "100%", aspectRatio: "3 / 4",
                display: "grid", placeItems: "center",
                background: "var(--pearl-2)",
                borderRadius: 4, overflow: "hidden",
                isolation: "isolate",
              }}>
                <ShatterLines stroke="rgba(14,11,7,0.07)" lines={24} seed={5} />
                <img src="uploads/002-web.png" alt="360 Whitening kit, open, gel syringes and trays visible"
                  style={{ width: "112%", height: "auto", position: "relative", zIndex: 1,
                    filter: "drop-shadow(0 30px 36px rgba(0,0,0,0.22))" }} />
                <div style={{
                  position: "absolute", left: 14, top: 14, zIndex: 2,
                  fontFamily: "var(--font-mono)", fontSize: 10,
                  letterSpacing: "0.18em", textTransform: "uppercase",
                  color: "var(--on-light-60)",
                }}>FIG.01 — Trial kit, open</div>
              </div>
            </Reveal>
            <Reveal delay={260}>
              <div style={{
                background: "var(--ink)", color: "var(--pearl)",
                borderRadius: 4, padding: "24px 22px",
                height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between",
              }}>
                <div>
                  <div style={{
                    fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.2em",
                    textTransform: "uppercase", color: "var(--on-dark-60)", marginBottom: 18,
                  }}>— Spec sheet</div>
                  <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
                    {[
                      ["Overnight", "16% carbamide"],
                      ["Daytime", "6% hydrogen"],
                      ["pH", "6.9–7.2 (neutral)"],
                      ["Desensitiser", "Built-in"],
                      ["Tray turnaround", "5 working days"],
                      ["Wholesale", "On enquiry"],
                      ["Sensitivity", "Near zero"],
                    ].map(([k, v]) => (
                      <div key={k} style={{
                        display: "grid", gridTemplateColumns: "0.7fr 1fr",
                        gap: 12, padding: "10px 0",
                        borderBottom: "1px solid var(--on-dark-15)",
                      }}>
                        <span style={{
                          fontFamily: "var(--font-mono)", fontSize: 10,
                          letterSpacing: "0.16em", textTransform: "uppercase",
                          color: "var(--on-dark-60)",
                        }}>{k}</span>
                        <span style={{
                          fontFamily: "var(--font-display)", fontSize: 16,
                          letterSpacing: "-0.005em",
                        }}>{v}</span>
                      </div>
                    ))}
                  </div>
                </div>
                <a href="#kit" style={{
                  fontFamily: "var(--font-mono)", fontSize: 10,
                  letterSpacing: "0.2em", textTransform: "uppercase",
                  color: "var(--accent-tint)",
                  display: "inline-flex", alignItems: "center", gap: 8, marginTop: 18,
                }}>Full data sheet <I.Arrow /></a>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

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