// Shared components for the main site pages (Home, About, Treatments, What We Treat,
// Patient Info, Contact). Loaded after React/Babel/tweaks-panel; exports nothing —
// each page's own script just uses these as globals from the same Babel scope.

// ─── Reveal animation ─────────────────────────────────────────────────────────
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

const useReveal = (threshold = 0.07) => {
  const ref = React.useRef();
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    if (prefersReduced) {setVisible(true);return;}
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {setVisible(true);obs.disconnect();}
    }, { threshold });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return [ref, visible];
};

const Reveal = ({ children, delay = 0, y = 24 }) => {
  const [ref, visible] = useReveal();
  if (prefersReduced) return <div ref={ref}>{children}</div>;
  return (
    <div ref={ref} style={{ opacity: visible ? 1 : 0, transform: visible ? 'none' : `translateY(${y}px)`, transition: `opacity 0.85s ease ${delay}s, transform 0.85s ease ${delay}s` }}>
      {children}
    </div>);

};

// ─── Tweaks context (defined early so all components can consume it) ─────────
const TWEAK_DEFAULTS_EARLY = { accentColor: "#b07252", blueColor: "#3d5e8c", bgColor: "#EDF0F4", surfaceColor: "#FFFFFF", headingFont: "Cormorant Garamond", bodySize: 15, heroSize: 88, borderRadius: 14, ctaRadius: 6, sectionPadding: 100, showPromoStrip: true, promoText: "50% Off", promoSubtext: "Initial evaluation", promoLabel: "Limited Time Offer", darkMode: false, cardShadow: false };
const TweaksContext = React.createContext({ tweaks: TWEAK_DEFAULTS_EARLY, setTweak: () => {} });
const useTweakValues = () => React.useContext(TweaksContext);

// ─── Shared primitives ────────────────────────────────────────────────────────
const Placeholder = ({ label, ratio = "4/3", height, src, objectPosition, style: s = {} }) =>
<div role="img" aria-label={label} style={{ aspectRatio: ratio, height, background: "var(--blue-light)", borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", position: "relative", ...s }}>
    {src ? (
      <img src={src} alt={label} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: objectPosition || "center" }} />
    ) : (<React.Fragment>
    <svg width="100%" height="100%" style={{ position: "absolute", inset: 0 }} aria-hidden="true">
      <defs><pattern id={`p-${(label || '').replace(/\W/g, '')}`} width="28" height="28" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><line x1="0" y1="0" x2="0" y2="28" stroke="rgba(61,94,140,0.15)" strokeWidth="1.5" /></pattern></defs>
      <rect width="100%" height="100%" fill={`url(#p-${(label || '').replace(/\W/g, '')})`} />
    </svg>
    <span style={{ fontFamily: "monospace", fontSize: 11, color: "rgba(61,94,140,0.5)", position: "relative", zIndex: 1, textAlign: "center", padding: "0 20px", lineHeight: 1.5 }}>{label}</span>
    </React.Fragment>)}
  </div>;


// ─── Photo carousel (click arrows / dots to cycle) ─────────────────────────────
const PhotoCarousel = ({ photos, ratio = "16/9", style: s = {} }) => {
  const [i, setI] = React.useState(0);
  const n = photos.length;
  const go = (dir, e) => { e.stopPropagation(); setI((p) => (p + dir + n) % n); };
  const jump = (idx, e) => { e.stopPropagation(); setI(idx); };
  const arrowBtn = {
    position: "absolute", top: "50%", transform: "translateY(-50%)",
    width: 40, height: 40, borderRadius: "50%", border: "none",
    background: "rgba(255,255,255,0.92)", color: "var(--blue)", cursor: "pointer",
    display: "flex", alignItems: "center", justifyContent: "center",
    boxShadow: "0 2px 10px rgba(26,35,51,0.22)", zIndex: 2, padding: 0 };
  return (
    <div style={{ position: "relative", borderRadius: 8, overflow: "hidden", ...s }}>
      <div role="group" aria-roledescription="carousel" aria-label="Location & parking photos">
        {photos.map((p, idx) =>
        <div key={idx} aria-hidden={i !== idx} style={{ display: i === idx ? "block" : "none" }}>
            <Placeholder label={p.label} src={p.src} objectPosition={p.pos} ratio={ratio} style={{ borderRadius: 0 }} />
          </div>
        )}
      </div>
      {n > 1 &&
      <React.Fragment>
        <button type="button" aria-label="Previous photo" onClick={(e) => go(-1, e)} style={{ ...arrowBtn, left: 12 }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6" /></svg>
        </button>
        <button type="button" aria-label="Next photo" onClick={(e) => go(1, e)} style={{ ...arrowBtn, right: 12 }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M9 18l6-6-6-6" /></svg>
        </button>
        <div style={{ position: "absolute", bottom: 12, left: 0, right: 0, display: "flex", justifyContent: "center", gap: 8, zIndex: 2 }}>
          {photos.map((p, idx) =>
          <button key={idx} type="button" aria-label={`Go to photo ${idx + 1}`} aria-current={i === idx} onClick={(e) => jump(idx, e)}
          style={{ width: i === idx ? 22 : 8, height: 8, borderRadius: 4, border: "none", padding: 0, cursor: "pointer", background: i === idx ? "#fff" : "rgba(255,255,255,0.55)", boxShadow: "0 1px 4px rgba(26,35,51,0.3)", transition: "width 0.2s" }} />
          )}
        </div>
      </React.Fragment>}
    </div>);

};


const CTA = ({ children, href, secondary, style: s = {} }) => {
  const [h, setH] = React.useState(false);
  const bg = secondary ? h ? "var(--blue-light)" : "transparent" : h ? "var(--amber-dark)" : "var(--amber)";
  return (
    <a href={href} style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "DM Sans, sans-serif", fontWeight: 600, fontSize: 13, letterSpacing: "0.08em", textTransform: "uppercase", textDecoration: "none", padding: secondary ? "12px 24px" : "14px 30px", background: bg, border: secondary ? "1.5px solid var(--border)" : "1.5px solid transparent", color: secondary ? "rgb(61, 94, 140)" : "rgb(255, 255, 255)", borderRadius: 3, transition: "all 0.18s", ...s }}
    onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}>{children}</a>);

};

// NOTE: eyebrow label color was originally "var(--blue)" — changed to "var(--amber)" (Book Now color). Revert here if needed.
const EyebrowLabel = ({ children, light }) =>
<p style={{ fontFamily: "DM Sans, sans-serif", fontWeight: 700, letterSpacing: "0.2em", textTransform: "uppercase", color: light ? "rgba(255,255,255,0.55)" : "var(--amber)", marginBottom: 14, fontSize: "20px" }}>{children}</p>;


const LandmarkH2 = ({ children, style: s = {}, light }) =>
<h2 style={{ fontFamily: "var(--hfont)", fontSize: "clamp(48px,5.5vw,76px)", fontWeight: 400, fontStyle: "italic", color: light ? "#f5f7fa" : "var(--text)", lineHeight: 1.06, margin: "0 0 22px", ...s }}>{children}</h2>;


const Rule = ({ blue }) => <div aria-hidden="true" style={{ width: 48, height: 1, background: blue ? "var(--blue)" : "var(--amber)", opacity: 0.7, marginBottom: 28 }} />;

// ─── Trust Bar (Home page only) ────────────────────────────────────────────────
const TrustBar = () => {
  const { tweaks } = useTweakValues();
  const items = [
  { label: "Same or Next-Day\nAppointments", icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--blue)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" /></svg> },
  { label: "1-on-1 With\nYour PT", icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--blue)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="4" /><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" /></svg> },
  { label: "Weekend\nAvailability", icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--blue)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="5" /><line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" /><line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" /><line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" /><line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" /></svg> },
  { label: "No Referral\nNeeded", icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--blue)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><polyline points="14 2 14 8 20 8" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /><polyline points="9 9 10 9 11 9" /></svg> }];

  return (
    <div style={{ width: "100%", height: 90, display: "flex", boxShadow: "0 2px 8px rgba(0,0,0,0.08)", background: "#fff", borderBottom: "1px solid var(--border)" }}>
      {tweaks.showPromoStrip !== false && <>
        <div style={{ background: "linear-gradient(135deg, #b8966a 0%, #9b7a52 60%, #7d5f3e 100%)", flexShrink: 0, width: "clamp(280px, 34vw, 440px)", clipPath: "polygon(0 0, calc(100% - 45px) 0, 100% 50%, calc(100% - 45px) 100%, 0 100%)", display: "flex", alignItems: "center", paddingLeft: "clamp(16px,3vw,40px)", paddingRight: 40 }}>
          <div style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
            <span style={{ fontFamily: "DM Sans, sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.75)", marginBottom: 6 }}>{tweaks.promoLabel || "Limited Time Offer"}</span>
            <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
              <span style={{ fontFamily: "var(--hfont)", fontStyle: "italic", fontSize: 36, fontWeight: 500, color: "#fff", letterSpacing: "-0.01em" }}>{tweaks.promoText || "50% Off"}</span>
              <span style={{ fontFamily: "var(--hfont)", fontStyle: "italic", fontSize: 20, fontWeight: 400, color: "rgba(255,255,255,0.88)" }}>{tweaks.promoSubtext || "Initial evaluation"}</span>
            </div>
          </div>
        </div>
      </>}
      {/* Trust items */}
      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "space-evenly", padding: "0 clamp(10px,2vw,32px)", background: "#fff" }}>
        {items.map((item, i) =>
        <React.Fragment key={i}>
            {i > 0 && <div aria-hidden="true" style={{ width: 1, alignSelf: "stretch", background: "var(--border)", margin: "20px 0", flexShrink: 0 }} />}
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <div style={{ width: 38, height: 38, borderRadius: "50%", border: "1.5px solid var(--blue-light)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, background: "var(--bg)" }}>
                {item.icon}
              </div>
              <span style={{ fontFamily: "var(--hfont)", fontStyle: "italic", color: "var(--text)", lineHeight: 1.3, whiteSpace: "pre-line", fontSize: "20px" }}>{item.label}</span>
            </div>
          </React.Fragment>
        )}
      </div>
    </div>);

};

// ─── Nav ──────────────────────────────────────────────────────────────────────
const Nav = () => {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 50);
    window.addEventListener("scroll", fn);
    return () => window.removeEventListener("scroll", fn);
  }, []);
  const links = [
  ["Home", "/"], ["About", "/about"], ["Treatments", "/treatments"],
  ["What We Treat", "/what-we-treat"], ["Patient Info", "/patient-info"], ["Contact", "/contact"]];

  return (
    <nav aria-label="Main navigation" style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 100, backdropFilter: "blur(12px)", borderBottom: scrolled ? "1px solid var(--border)" : "1px solid transparent", transition: "border-color 0.3s", background: "rgb(250, 248, 244)", overflow: "visible" }}>
      <div style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "flex-end", height: 86, padding: "0 clamp(20px,3vw,48px)", position: "relative" }}>
        <a href="/" style={{ textDecoration: "none", position: "fixed", left: 40, top: 0, height: 86, display: "flex", alignItems: "center", zIndex: 102 }}>
          <img src="/logo-color.png" alt="Diagnostic Edge Physical Therapy" style={{ objectFit: "contain", mixBlendMode: "multiply", width: "260.516px", height: "90px", opacity: "100", imageRendering: "-webkit-optimize-contrast", filter: "contrast(1.08) saturate(1.05)" }} />
        </a>
        <div style={{ display: "flex", gap: 22, alignItems: "center", textAlign: "center", fontSize: "14px" }} className="nav-desktop">
          {links.map(([label, href]) =>
          <a key={label} href={href} style={{ fontFamily: "DM Sans, sans-serif", fontSize: 15, color: "var(--text-muted)", textDecoration: "none", textDecorationColor: "var(--amber)", textUnderlineOffset: "5px", textDecorationThickness: "1.5px", fontWeight: 500, letterSpacing: "0.01em", transition: "color 0.15s" }}
          onMouseEnter={(e) => { e.target.style.color = "var(--amber)"; e.target.style.textDecoration = "underline"; e.target.style.textDecorationColor = "var(--amber)"; }} onMouseLeave={(e) => { e.target.style.color = "var(--text-muted)"; e.target.style.textDecoration = "none"; }}>{label}</a>
          )}
          <CTA href="https://diagnosticedgept.janeapp.com" style={{ fontSize: 11, padding: "10px 22px" }}>Book Now</CTA>
        </div>
        <button onClick={() => setOpen(!open)} aria-label={open ? "Close menu" : "Open menu"} aria-expanded={open} style={{ display: "none", background: "none", border: "none", cursor: "pointer", padding: 6, color: "var(--text)" }} className="nav-hamburger">
          <svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true"><line x1="3" y1="7" x2="21" y2="7" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="17" x2="21" y2="17" /></svg>
        </button>
      </div>
      {open &&
      <div style={{ background: "var(--bg)", borderTop: "1px solid var(--border)", padding: "12px 0 20px" }}>
          {links.map(([label, href]) =>
        <a key={label} href={href} onClick={() => setOpen(false)} style={{ display: "block", padding: "12px clamp(20px,4vw,60px)", fontFamily: "DM Sans, sans-serif", fontSize: 14, fontWeight: 600, letterSpacing: "0.1em", color: "var(--text)", textDecoration: "none" }}>{label}</a>
        )}
          <div style={{ padding: "14px clamp(20px,4vw,60px) 0" }}>
            <CTA href="https://diagnosticedgept.janeapp.com" style={{ width: "100%", justifyContent: "center" }}>Book Now</CTA>
          </div>
        </div>
      }
    </nav>);

};

// ─── Footer ───────────────────────────────────────────────────────────────────
const Footer = () =>
<footer style={{ background: "var(--text)", padding: "48px clamp(20px,4vw,60px) 32px" }}>
    <div style={{ maxWidth: 1400, margin: "0 auto" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", flexWrap: "wrap", gap: 32, paddingBottom: 32, borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
        <div>
          <div style={{ fontFamily: "var(--hfont)", fontSize: 26, fontStyle: "italic", color: "#eef2f8", marginBottom: 4 }}>Diagnostic Edge PT</div>
          <div style={{ fontFamily: "DM Sans, sans-serif", fontSize: 13, color: "rgba(255,255,255,0.38)", fontWeight: 300 }}>4155 El Camino Way, Suite A2<br />Palo Alto, CA 94306</div>
        </div>
        <div style={{ display: "flex", gap: 40, flexWrap: "wrap" }}>
          {[["Call", "650-704-2004", "tel:6507042004"], ["Email", "diagnosticedgept@gmail.com", "mailto:diagnosticedgept@gmail.com"], ["Book Online", "diagnosticedgept.janeapp.com", "https://diagnosticedgept.janeapp.com"]].map(([label, val, href], i) =>
        <div key={i}>
              <div style={{ fontFamily: "DM Sans, sans-serif", fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", marginBottom: 5, letterSpacing: "0.14em", textTransform: "uppercase" }}>{label}</div>
              <a href={href} style={{ fontFamily: "DM Sans, sans-serif", fontSize: 14, color: "rgba(255,255,255,0.65)", textDecoration: "none", fontWeight: 300 }}>{val}</a>
            </div>
        )}
        </div>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16, paddingTop: 24 }}>
        <p style={{ fontFamily: "DM Sans, sans-serif", fontSize: 12, color: "rgba(255,255,255,0.25)", margin: 0, fontWeight: 300 }}>© 2025 Diagnostic Edge Physical Therapy. All rights reserved.</p>
        <p style={{ fontFamily: "DM Sans, sans-serif", fontSize: 12, color: "rgba(255,255,255,0.18)", margin: 0, fontWeight: 300 }}>No referral needed for first 12 visits in CA · Out-of-network · HSA/FSA accepted</p>
      </div>
    </div>
  </footer>;


// ─── Tweaks wiring (kept inert/hidden, same as prototype — see tweaks-panel.jsx) ─
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#b07252",
  "blueColor": "#3d5e8c",
  "bgColor": "#EDF0F4",
  "surfaceColor": "#FFFFFF",
  "headingFont": "Cormorant Garamond",
  "bodySize": 15,
  "heroSize": 88,
  "borderRadius": 14,
  "ctaRadius": 6,
  "sectionPadding": 100,
  "showPromoStrip": true,
  "promoText": "50% Off",
  "promoSubtext": "Initial evaluation",
  "promoLabel": "Limited Time Offer",
  "navBg": "250,248,244",
  "darkMode": false,
  "cardShadow": false,
  "ruleColor": "amber"
} /*EDITMODE-END*/;

const TweaksController = () => {
  const { tweaks, setTweak } = useTweakValues();

  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--amber", tweaks.accentColor);
    r.style.setProperty("--amber-dark", tweaks.accentColor);
    r.style.setProperty("--blue", tweaks.blueColor);
    r.style.setProperty("--blue-dark", tweaks.blueColor);
    r.style.setProperty("--bg", tweaks.bgColor);
    r.style.setProperty("--surface-2", tweaks.surfaceColor);
    r.style.setProperty("--hfont", `"${tweaks.headingFont}", serif`);
    r.style.setProperty("--body-size", tweaks.bodySize + "px");
    r.style.setProperty("--hero-size", tweaks.heroSize + "px");
    r.style.setProperty("--card-radius", tweaks.borderRadius + "px");
    r.style.setProperty("--cta-radius", tweaks.ctaRadius + "px");
    r.style.setProperty("--section-padding", tweaks.sectionPadding + "px");
    if (tweaks.darkMode) {
      r.style.setProperty("--bg", "#111827");
      r.style.setProperty("--bg-alt", "#1a2335");
      r.style.setProperty("--surface", "#1e2d42");
      r.style.setProperty("--surface-2", "#243047");
      r.style.setProperty("--text", "#f0f4fa");
      r.style.setProperty("--text-muted", "#94a8c4");
      r.style.setProperty("--border", "#2d3f5a");
    } else {
      r.style.setProperty("--bg", tweaks.bgColor);
      r.style.setProperty("--bg-alt", "#E4E8EF");
      r.style.setProperty("--surface", "#F5F7FA");
      r.style.setProperty("--surface-2", tweaks.surfaceColor);
      r.style.setProperty("--text", "#1a2333");
      r.style.setProperty("--text-muted", "#4a5870");
      r.style.setProperty("--border", "#c8d0de");
    }
  }, [tweaks]);

  return (
    <TweaksPanel>
      <TweakSection label="Brand Colors">
        <TweakColor label="Accent (amber)" value={tweaks.accentColor} onChange={(v) => setTweak("accentColor", v)} />
        <TweakColor label="Primary blue" value={tweaks.blueColor} onChange={(v) => setTweak("blueColor", v)} />
        <TweakColor label="Page background" value={tweaks.bgColor} onChange={(v) => setTweak("bgColor", v)} />
        <TweakColor label="Card surface" value={tweaks.surfaceColor} onChange={(v) => setTweak("surfaceColor", v)} />
      </TweakSection>
      <TweakSection label="Typography">
        <TweakSelect label="Heading font" value={tweaks.headingFont} options={["Cormorant Garamond", "Playfair Display", "Libre Baskerville", "Georgia", "Lora"]} onChange={(v) => setTweak("headingFont", v)} />
        <TweakSlider label="Body font size" value={tweaks.bodySize} min={12} max={20} step={1} onChange={(v) => setTweak("bodySize", v)} />
        <TweakSlider label="Hero headline size" value={tweaks.heroSize} min={48} max={120} step={4} onChange={(v) => setTweak("heroSize", v)} />
      </TweakSection>
      <TweakSection label="Layout + Shape">
        <TweakSlider label="Card border radius" value={tweaks.borderRadius} min={0} max={32} step={2} onChange={(v) => setTweak("borderRadius", v)} />
        <TweakSlider label="Button border radius" value={tweaks.ctaRadius} min={0} max={40} step={2} onChange={(v) => setTweak("ctaRadius", v)} />
        <TweakSlider label="Section padding (px)" value={tweaks.sectionPadding} min={40} max={180} step={10} onChange={(v) => setTweak("sectionPadding", v)} />
        <TweakToggle label="Card drop shadows" value={tweaks.cardShadow} onChange={(v) => setTweak("cardShadow", v)} />
      </TweakSection>
      <TweakSection label="Promo Strip">
        <TweakToggle label="Show promo strip" value={tweaks.showPromoStrip} onChange={(v) => setTweak("showPromoStrip", v)} />
        <TweakText label="Eyebrow label" value={tweaks.promoLabel} onChange={(v) => setTweak("promoLabel", v)} />
        <TweakText label="Headline" value={tweaks.promoText} onChange={(v) => setTweak("promoText", v)} />
        <TweakText label="Subtext" value={tweaks.promoSubtext} onChange={(v) => setTweak("promoSubtext", v)} />
      </TweakSection>
      <TweakSection label="Appearance">
        <TweakToggle label="Dark mode" value={tweaks.darkMode} onChange={(v) => setTweak("darkMode", v)} />
      </TweakSection>
    </TweaksPanel>);

};

// ─── Page shell — every top-level page wraps its content with this ────────────
// Handles: tweaks context/provider, fade-in on load, Nav, optional TrustBar, Footer.
const PageShell = ({ showTrustBar, children }) => {
  const [tweaks, setTweakState] = React.useState(TWEAK_DEFAULTS_EARLY);
  const setTweak = (k, v) => setTweakState((prev) => ({ ...prev, [k]: v }));
  return (
    <TweaksContext.Provider value={{ tweaks, setTweak }}>
      <TweaksController />
      <Nav />
      <main id="main-content" style={{ paddingTop: 86 }}>
        {showTrustBar && <TrustBar />}
        {children}
      </main>
      <Footer />
    </TweaksContext.Provider>);
};