/* ===========================================================
   Halvorsen Orthopaedic — Nav + Hero
   =========================================================== */

const Logo = ({ mono = false }) => (
  <a href="#top" aria-label="Dr. Mira Halvorsen, home" style={{ display: "flex", alignItems: "center", gap: 12, textDecoration: "none", color: "inherit" }}>
    <svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true">
      <g fill="none" stroke="currentColor" strokeWidth="1.1">
        <circle cx="14" cy="14" r="13" />
        <path d="M6 14 Q 14 6 22 14 Q 14 22 6 14 Z" />
        <circle cx="14" cy="14" r="2.4" fill="currentColor" />
      </g>
    </svg>
    <div style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
      <span className="serif" style={{ fontSize: 19, letterSpacing: "-0.01em" }}>
        Dr. Mira Halvorsen
      </span>
      {!mono && (
        <span className="mono" style={{ fontSize: 9, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--ink-soft)", marginTop: 4 }}>
          MD · FRCS(Orth) · Est. 2009
        </span>
      )}
    </div>
  </a>
);

const Nav = ({ onBook, onToggleTheme, theme }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const items = [
    ["About", "about"],
    ["Procedures", "procedures"],
    ["Outcomes", "outcomes"],
    ["Journey", "journey"],
    ["Press", "press"],
    ["Locations", "locations"],
  ];

  return (
    <header
      style={{
        position: "fixed",
        inset: "0 0 auto 0",
        zIndex: 50,
        padding: scrolled ? "14px 32px" : "22px 32px",
        backdropFilter: scrolled ? "saturate(140%) blur(18px)" : "none",
        background: scrolled ? "color-mix(in oklab, var(--paper) 78%, transparent)" : "transparent",
        borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent",
        transition: "all 380ms var(--ease)",
      }}
    >
      <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center", gap: 24, maxWidth: 1400, margin: "0 auto" }}>
        <Logo />
        <nav aria-label="Primary">
          <ul style={{ display: "flex", gap: 28, listStyle: "none", margin: 0, padding: 0 }}>
            {items.map(([label, id]) => (
              <li key={id}>
                <a href={`#${id}`} style={{ textDecoration: "none", color: "var(--ink)", fontSize: 13, letterSpacing: "0.01em" }}>
                  {label}
                </a>
              </li>
            ))}
          </ul>
        </nav>
        <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: 12 }}>
          <button
            onClick={onToggleTheme}
            aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
            className="mono"
            style={{
              background: "transparent",
              border: "1px solid var(--line-strong)",
              color: "var(--ink)",
              padding: "8px 12px",
              borderRadius: 999,
              fontSize: 10,
              letterSpacing: "0.2em",
              textTransform: "uppercase",
              cursor: "pointer",
            }}
          >
            {theme === "dark" ? "Light" : "Dark"}
          </button>
          <button onClick={onBook} className="btn btn-primary">
            Request consultation <Arrow />
          </button>
        </div>
      </div>
    </header>
  );
};

/* ===========================================================
   HERO — editorial with portrait plate + sticky parallax label
   =========================================================== */

const Hero = ({ onBook }) => {
  return (
    <section id="top" style={{ position: "relative", padding: "140px 32px 60px", maxWidth: 1400, margin: "0 auto" }}>
      {/* Top meta bar */}
      <div className="reveal" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 56 }}>
        <Chapter num={1} label="Practice" />
        <div className="mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: "var(--ink-soft)" }}>
          ESTAB. 2009 · OSLO · LONDON
        </div>
      </div>

      {/* Name overline — bold introduction */}
      <div className="reveal" style={{ marginBottom: 24, display: "flex", alignItems: "baseline", gap: 18, flexWrap: "wrap" }}>
        <span className="serif" style={{ fontSize: 22, fontStyle: "italic", color: "var(--oxblood)" }}>
          Dr. Mira Halvorsen
        </span>
        <span style={{ flex: 1, height: 1, background: "var(--line-strong)", minWidth: 60 }} />
        <span className="mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: "var(--ink-soft)", textTransform: "uppercase" }}>
          Consultant Orthopaedic Surgeon
        </span>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 56, alignItems: "end" }}>
        {/* LEFT: massive editorial title */}
        <div>
          <h1 className="serif" style={{ margin: 0, fontSize: "clamp(56px, 8.4vw, 142px)", lineHeight: 0.92, letterSpacing: "-0.02em", fontWeight: 400 }}>
            <span className="mask-line"><span>The careful</span></span>
            <span className="mask-line"><span style={{ fontStyle: "italic", color: "var(--oxblood)" }}>repair</span></span>
            <span className="mask-line"><span>of moving</span></span>
            <span className="mask-line"><span>parts.</span></span>
          </h1>

          <div className="reveal reveal-delay-3" style={{ marginTop: 36, maxWidth: 460, fontSize: 17, lineHeight: 1.55, color: "var(--ink-soft)" }}>
            Dr. Halvorsen is a consultant orthopaedic surgeon specialising in joint preservation, sports injury and complex revision. She believes the best surgery is the one a patient never needs — and when they do, that it returns them to the life they had.
          </div>

          {/* Signature */}
          <div className="reveal reveal-delay-3" style={{ marginTop: 28 }}>
            <Signature />
          </div>

          <div className="reveal reveal-delay-4" style={{ marginTop: 36, display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
            <button onClick={onBook} className="btn btn-primary">Request consultation <Arrow /></button>
            <a href="#about" className="btn btn-ghost">Read philosophy <Arrow /></a>
          </div>
        </div>

        {/* RIGHT: portrait plate with metadata */}
        <div className="reveal reveal-delay-2" style={{ position: "relative" }}>
          <Plate ratio="3/4" tone="sand" src={PHOTOS.portrait} label="Portrait · Plate I" sub="Dr. Mira Halvorsen, MD, FRCS(Orth)" />
          {/* Oxblood seal — emotional accent */}
          <div aria-hidden="true" style={{ position: "absolute", top: -18, left: -18, width: 76, height: 76, borderRadius: "50%", border: "1px solid var(--oxblood)", color: "var(--oxblood)", display: "grid", placeItems: "center", background: "var(--paper)", textAlign: "center" }}>
            <div>
              <div className="serif" style={{ fontSize: 13, fontStyle: "italic", lineHeight: 1 }}>est.</div>
              <div className="serif" style={{ fontSize: 22, lineHeight: 1, marginTop: 2 }}>2009</div>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, marginTop: 14, border: "1px solid var(--line)" }}>
            <Stat k="Procedures" v="3,420" sub="2009 — '26" />
            <Stat k="Return-to-sport" v="94%" sub="ACL cohort, 12mo" />
          </div>
        </div>
      </div>

      {/* Bottom marquee of credentials */}
      <div className="reveal reveal-delay-4" style={{ marginTop: 96, paddingTop: 24, borderTop: "1px solid var(--line)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }}>
          <Cred label="Fellowship" v="Hospital for Special Surgery, NY" />
          <Cred label="Member" v="ESSKA · ISAKOS · BOA" />
          <Cred label="Faculty" v="University of Oslo, Visiting RCS" />
          <Cred label="Languages" v="EN · NO · FR" />
        </div>
      </div>

      {/* floating crosshair in negative space */}
      <Crosshair size={28} style={{ position: "absolute", top: 280, right: 560, opacity: 0.4 }} />
    </section>
  );
};

const Stat = ({ k, v, sub }) => (
  <div style={{ padding: "16px 18px", borderRight: "1px solid var(--line)" }}>
    <div className="mono" style={{ fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--ink-soft)" }}>{k}</div>
    <div className="serif" style={{ fontSize: 36, lineHeight: 1, marginTop: 6 }}>{v}</div>
    <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", marginTop: 6 }}>{sub}</div>
  </div>
);

const Cred = ({ label, v }) => (
  <div>
    <div className="mono" style={{ fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--ink-soft)" }}>{label}</div>
    <div style={{ fontSize: 14, marginTop: 6, color: "var(--ink)" }}>{v}</div>
  </div>
);

Object.assign(window, { Logo, Nav, Hero });