/* Patient site — The Science (prescription-only) + Patient FAQ */
const { useState: peS } = React;

/* ---------- The Science — peroxide is prescription-only ---------- */
function Science() {
  return (
    <section id="science" className="section section--light on-light">
      <div className="wrap">
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "baseline",
          flexWrap: "wrap", gap: 16, marginBottom: "clamp(36px, 5vw, 56px)",
        }}>
          <Reveal><span className="eyebrow">— Why nothing else works</span></Reveal>
          <Reveal delay={120}><span className="eyebrow" style={{ color: "var(--accent-deep)" }}>The science, plainly</span></Reveal>
        </div>

        <Reveal delay={60}>
          <h2 className="h-section" style={{
            fontSize: "clamp(44px, 6.4vw, 104px)",
            margin: "0 0 clamp(40px, 5vw, 64px)",
            color: "var(--ink)", maxWidth: 1180,
          }}>
            The ingredient that whitens teeth is <em style={{ color: "var(--accent-deep)" }}>prescription-only.</em>
          </h2>
        </Reveal>

        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.1fr) minmax(0, 0.9fr)",
          gap: "clamp(32px, 5vw, 88px)",
          alignItems: "start",
        }}>
          <div>
            <Reveal delay={120}>
              <p className="lead" style={{ color: "var(--on-light-60)", marginBottom: 20 }}>
                Carbamide peroxide. Hydrogen peroxide. These are the only two substances
                clinically proven to lift tooth shade — they penetrate the enamel and break
                down the compounds that cause discolouration. Nothing else does this.
              </p>
            </Reveal>
            <Reveal delay={200}>
              <p className="lead" style={{ color: "var(--on-light-60)", marginBottom: 20 }}>
                In the UK, any product containing more than 0.1% peroxide can only be supplied
                by a regulated dental professional. The strips you buy online contain so little
                peroxide they are legally prevented from doing the job they claim to do.
              </p>
            </Reveal>
            <Reveal delay={280}>
              <p className="lead" style={{ color: "var(--on-light-60)", margin: 0 }}>
                The influencer kits, the LED lights, the charcoal, the whitening toothpastes —
                they polish surface staining at best. They do not change the colour of your teeth.
                You've been spending money on theatre.
              </p>
            </Reveal>
          </div>

          <Reveal delay={180}>
            <div style={{
              background: "var(--ink)", color: "var(--pearl)",
              borderRadius: 8, padding: "clamp(28px, 3vw, 40px)",
              position: "relative", overflow: "hidden", isolation: "isolate",
            }}>
              <ShatterLines mode="dark" opacity={0.18} />
              <div style={{ position: "relative", zIndex: 1 }}>
                <span style={{ fontFamily: "var(--font-display)", fontSize: 64, color: "var(--accent)", fontStyle: "italic", lineHeight: 0.6, display: "block", height: 30 }}>“</span>
                <p style={{
                  fontFamily: "var(--font-display)", fontWeight: 360,
                  fontSize: "clamp(22px, 2.2vw, 30px)", lineHeight: 1.32,
                  letterSpacing: "-0.01em", color: "var(--pearl)", margin: "0 0 20px",
                  textWrap: "pretty",
                }}>
                  The only whitening that works is dentist-prescribed peroxide, in custom-fit trays,
                  worn consistently. That is it. <em style={{ color: "var(--accent)" }}>There is no shortcut.</em>
                </p>
                <div style={{
                  fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.16em",
                  textTransform: "uppercase", color: "var(--on-dark-60)",
                  paddingTop: 18, borderTop: "1px solid var(--on-dark-15)",
                }}>
                  20 years of clinical whitening · peer-reviewed evidence
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- Patient FAQ ---------- */
function PatientFAQ() {
  const items = [
    { q: "Does it actually work?", a: "Yes — if it's prescribed peroxide in custom trays, worn consistently. That's the only thing that does. The 360 app tracks your shade from day one, so you can see the difference yourself rather than take our word for it." },
    { q: "Will it hurt?", a: "Most people experience no sensitivity at all. Our gel has a built-in desensitiser and a neutral pH, which cuts sensitivity significantly compared to older formulations. If you have concerns, your dentist will choose the right concentration for you." },
    { q: "How long does it take?", a: "A standard 14-day course. Overnight wear with 16% carbamide peroxide, or one hour a day with 6% hydrogen peroxide. The app guides you through each session." },
    { q: "How do I get started?", a: "Give us your postcode. We'll email you the details of your nearest participating practice. They fit your trays, prescribe your gel, and set you up on the app." },
    { q: "What's the app?", a: "It's included free with your kit. It runs your daily routine, tracks your shade with AI analysis of your progress photos, and lets you request a top-up refill from your dentist in one tap when your gel runs low." },
    { q: "Do I need to download anything?", a: "No download needed. The app works in your phone's browser — you can add it to your home screen so it feels like a native app, but there's nothing to install from an app store." },
  ];
  const [open, setOpen] = peS(0);
  return (
    <section id="faq" className="section section--pearl-2 on-light">
      <div className="wrap" style={{
        display: "grid",
        gridTemplateColumns: "minmax(0, 0.7fr) minmax(0, 1.3fr)",
        gap: "clamp(32px, 5vw, 80px)",
      }}>
        <div>
          <Reveal><span className="eyebrow" style={{ display: "block", marginBottom: 24 }}>— Questions, asked</span></Reveal>
          <Reveal delay={120}>
            <h2 className="h-section" style={{ fontSize: "clamp(36px, 4.8vw, 64px)", margin: 0, maxWidth: 360, color: "var(--ink)" }}>
              The bits you actually want to&nbsp;know.
            </h2>
          </Reveal>
        </div>
        <div>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <Reveal key={it.q} delay={i * 60}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: "100%", textAlign: "left", background: "transparent", border: 0,
                  borderTop: "1px solid var(--on-light-15)",
                  borderBottom: i === items.length - 1 ? "1px solid var(--on-light-15)" : 0,
                  padding: "24px 0", display: "flex", justifyContent: "space-between",
                  alignItems: "center", cursor: "pointer", color: "var(--ink)",
                  fontFamily: "var(--font-display)", fontWeight: 360,
                  fontSize: "clamp(19px, 1.6vw, 24px)", letterSpacing: "-0.01em", gap: 24,
                }}>
                  <span style={{ flex: 1 }}>{it.q}</span>
                  <span style={{
                    width: 34, height: 34, borderRadius: 999, flexShrink: 0,
                    border: "1px solid var(--on-light-15)", display: "grid", placeItems: "center",
                    fontFamily: "var(--font-mono)", fontSize: 16, color: "var(--accent-deep)",
                  }}>{isOpen ? "–" : "+"}</span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 320 : 0, overflow: "hidden",
                  transition: "max-height .5s cubic-bezier(.2,.7,.2,1), padding .4s ease",
                  paddingBottom: isOpen ? 22 : 0,
                }}>
                  <p style={{ margin: 0, color: "var(--on-light-60)", fontSize: 15.5, lineHeight: 1.6, maxWidth: 640, paddingRight: 40 }}>{it.a}</p>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Science, PatientFAQ });