/* Dentist sections — Science, Kit, Pillars, Onboarding, Commercial, Proof */
const { useState: dsS, useEffect: dsE, useRef: dsR } = React;

/* ---------- Section: The Science / The Formulation ---------- */
function Science() {
  const milestones = [
    { v: "v.01", y: "2021", t: "Brief", b: "Outperform the chair brands on shade lift. Match them on safety. Beat them on price." },
    { v: "v.12", y: "2022", t: "First buffer", b: "Reformulated to a neutral pH. Sensitivity complaints fell off a cliff." },
    { v: "v.27", y: "2023", t: "Tray geometry", b: "Custom thermoform spec that holds gel against the labial face without leakage." },
    { v: "v.40", y: "2024", t: "Production", b: "Final formulation locked. Rounds of clinical trial and patient panel testing." },
    { v: "v.40", y: "2026", t: "Launch", b: "Open to UK dental practices. Trial kits available on request." },
  ];
  return (
    <section id="science" className="section section--cream-2">
      <div className="wrap">
        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 0.9fr) minmax(0, 1.1fr)",
          gap: "clamp(32px, 5vw, 80px)",
          alignItems: "start",
        }}>
          <div>
            <Reveal><span className="eyebrow">— The science</span></Reveal>
            <Reveal delay={100}>
              <h2 className="h-section" style={{
                fontSize: "clamp(40px, 5.4vw, 78px)",
                margin: "16px 0 24px",
              }}>
                20 years of whitening.<br/>
                <em style={{ color: "var(--accent)" }}>Five years</em> of our<br/>
                own formula.
              </h2>
            </Reveal>
            <Reveal delay={200}>
              <p className="lead" style={{ maxWidth: 430 }}>
                We've been in whitening since the beginning — every formulation, every trend,
                every sensitivity complaint. Five years ago we started building our own gel.
                The brief: match the chair brands on shade lift, cut sensitivity to near zero,
                and build in a retention mechanism that doesn't rely on patients remembering
                to come back. The 360 app is that mechanism.
              </p>
            </Reveal>
            <Reveal delay={300}>
              <a href="#" className="btn btn--ghost" style={{ marginTop: 32 }}>
                <I.Download /> Download the white paper
              </a>
            </Reveal>
          </div>

          <Reveal delay={180}>
            <div style={{ position: "relative" }}>
              {/* Vertical timeline */}
              <div aria-hidden="true" style={{
                position: "absolute", left: 60, top: 12, bottom: 12,
                width: 1, background: "var(--on-light-15)",
              }} />
              <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
                {milestones.map((m, i) => (
                  <Reveal key={m.v + m.y} delay={i * 80} style={{
                    display: "grid", gridTemplateColumns: "120px 1fr",
                    gap: 24, alignItems: "baseline", position: "relative",
                  }}>
                    <div>
                      <div style={{
                        fontFamily: "var(--font-mono)", fontSize: 11,
                        letterSpacing: "0.18em", color: "var(--accent)",
                      }}>{m.v}</div>
                      <div style={{
                        fontFamily: "var(--font-display)", fontSize: 26,
                        fontStyle: "italic", letterSpacing: "-0.01em",
                        color: "var(--ink)", marginTop: 2,
                        fontVariationSettings: '"opsz" 120, "SOFT" 100, "WONK" 1',
                      }}>{m.y}</div>
                    </div>
                    <div style={{ paddingTop: 4 }}>
                      <div style={{
                        position: "absolute", left: 56, top: 14,
                        width: 9, height: 9, borderRadius: 999,
                        background: i === milestones.length - 1 ? "var(--accent)" : "var(--ink)",
                        boxShadow: "0 0 0 4px var(--pearl-2)",
                      }} />
                      <div style={{ marginLeft: 16 }}>
                        <h3 style={{
                          fontFamily: "var(--font-display)", fontWeight: 380,
                          fontSize: 22, margin: "0 0 6px", letterSpacing: "-0.01em",
                        }}>{m.t}</h3>
                        <p style={{ fontSize: 14.5, color: "var(--on-light-60)", margin: 0, lineHeight: 1.55 }}>{m.b}</p>
                      </div>
                    </div>
                  </Reveal>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- Section: The Kit (detail strip with renders) ---------- */
function TheKit() {
  const items = [
    {
      img: "uploads/002-web.png", scale: "108%", caption: "FIG.02 — Trial kit, open",
      eyebrow: "01 — The kit",
      title: "Everything to run a course on yourself.",
      specs: [["Contents", "4× gel syringes, tray-fit pack, scan QR for guide"], ["Use case", "Self-trial before stocking"], ["Lead time", "48 hours UK"]],
    },
    {
      img: "uploads/007-web.png", scale: "104%", caption: "FIG.03 — Gel syringes",
      eyebrow: "02 — The gels",
      title: "Carbamide and hydrogen peroxide, two protocols.",
      specs: [["Overnight", "16% carbamide peroxide"], ["Daytime", "6% hydrogen peroxide, one hour"], ["pH", "6.9–7.2 (buffered, neutral)"], ["Desensitiser", "Built-in"]],
    },
    {
      img: "uploads/008-web.png", scale: "108%", caption: "FIG.04 — The trays",
      eyebrow: "03 — The trays",
      title: "Custom-fit trays, two protocols.",
      specs: [["Overnight", "16% CP, worn while asleep"], ["Daytime", "6% HP, one-hour wear"], ["Fit", "Lab-made from PVS or STL"]],
    },
  ];
  return (
    <section id="kit" className="section">
      <div className="wrap">
        <div style={{ marginBottom: "clamp(40px, 5vw, 64px)" }}>
          <Reveal>
            <span className="eyebrow">— The kit</span>
          </Reveal>
          <Reveal delay={100}>
            <h2 className="h-section" style={{
              fontSize: "clamp(40px, 5.4vw, 78px)", margin: "16px 0 0", maxWidth: 900,
            }}>
              The whole thing,<br/>
              <em style={{ color: "var(--accent)" }}>photographed end-to-end.</em>
            </h2>
          </Reveal>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: "clamp(56px, 7vw, 96px)" }}>
          {items.map((it, i) => (
            <KitRow key={it.eyebrow} {...it} flip={i % 2 === 1} index={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

function KitRow({ img, scale, caption, eyebrow, title, specs, flip }) {
  return (
    <Reveal>
      <div style={{
        display: "grid",
        gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
        gap: "clamp(32px, 4vw, 64px)",
        alignItems: "center",
      }}>
        <div style={{
          position: "relative", order: flip ? 2 : 1,
          background: "var(--pearl-2)",
          borderRadius: 4, aspectRatio: "5 / 4",
          display: "grid", placeItems: "center",
          overflow: "hidden", isolation: "isolate",
        }}>
          <ShatterLines stroke="rgba(14,11,7,0.06)" lines={20} seed={flip ? 13 : 7} />
          <img src={img} alt="" aria-hidden="true"
            style={{ width: scale, height: "auto", position: "relative", zIndex: 1,
              filter: "drop-shadow(0 24px 30px rgba(0,0,0,0.22))" }} />
          <div style={{
            position: "absolute", left: 14, top: 14, zIndex: 2,
            fontFamily: "var(--font-mono)", fontSize: 10,
            letterSpacing: "0.16em", textTransform: "uppercase",
            color: "var(--on-light-60)",
          }}>{caption}</div>
        </div>
        <div style={{ order: flip ? 1 : 2 }}>
          <span className="eyebrow">{eyebrow}</span>
          <h3 style={{
            fontFamily: "var(--font-display)", fontWeight: 380,
            fontSize: "clamp(32px, 3.4vw, 48px)", margin: "12px 0 24px",
            letterSpacing: "-0.02em", lineHeight: 1.05,
          }}>{title}</h3>
          <div>
            {specs.map(([k, v]) => <SpecRow key={k} k={k} v={v} />)}
          </div>
        </div>
      </div>
    </Reveal>
  );
}

/* ---------- Section: Pillars (compact 4-up text grid) ---------- */
function Pillars() {
  const items = [
    ["Pro-strength gel", "16% carbamide peroxide for overnight wear, 6% hydrogen peroxide for a one-hour daytime protocol. Neutral pH, buffered for stability."],
    ["Lab-made trays", "Custom-fit thermoformed trays from PVS impressions or STL. Made in our UK lab on a 5 working day turnaround."],
    ["Near-zero sensitivity", "Built-in desensitiser and a neutral, buffered pH. We've cut sensitivity complaints significantly versus older formulations."],
    ["Five years in the making", "Five years of formulation and retesting. One gel that finally hit the brief — real shade lift, near-zero sensitivity, no drama."],
  ];
  return (
    <section className="section section--dark on-dark" style={{ overflow: "hidden", position: "relative" }}>
      <ShatterLines stroke="rgba(246,239,227,0.05)" lines={28} seed={9} />
      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "baseline",
          flexWrap: "wrap", gap: 16, marginBottom: "clamp(40px, 5vw, 72px)",
        }}>
          <Reveal><span className="eyebrow">— A studied formula</span></Reveal>
          <Reveal delay={120}><span className="eyebrow" style={{ color: "var(--accent-tint)" }}>Four pillars · One product</span></Reveal>
        </div>
        <Reveal delay={80}>
          <h2 className="h-section" style={{
            fontSize: "clamp(40px, 5.4vw, 84px)", margin: "0 0 clamp(48px, 6vw, 80px)", maxWidth: 1100,
          }}>
            Four things we obsess&nbsp;over<br/>
            so <em style={{ color: "var(--accent-tint)" }}>you don't have to.</em>
          </h2>
        </Reveal>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: "clamp(16px, 2vw, 32px)",
        }}>
          {items.map(([t, b], i) => (
            <Reveal key={t} delay={i * 100} style={{
              borderTop: "1px solid var(--on-dark-15)",
              paddingTop: 24,
            }}>
              <span className="num" style={{ color: "var(--accent-tint)" }}>{String(i + 1).padStart(2, "0")}</span>
              <h3 style={{
                fontFamily: "var(--font-display)", fontWeight: 380,
                fontSize: "clamp(24px, 2.2vw, 32px)", margin: "12px 0 14px",
                letterSpacing: "-0.015em", lineHeight: 1.1, color: "var(--pearl)",
              }}>{t}</h3>
              <p style={{ fontSize: 14.5, color: "var(--on-dark-60)", margin: 0, lineHeight: 1.55 }}>{b}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Science, TheKit, Pillars });