// app.jsx — Aki Reiki one-page site

const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "dusk",
  "headingFont": "Cormorant Garamond",
  "showIntroOffer": true
}/*EDITMODE-END*/;

const PALETTES = {
  cedar: {
    cedar: "#2F4A3D",
    clay: "#9A6B4F",
    sand: "#E8D8C3",
    cream: "#F8F3EA",
    sage: "#8FA99B",
    ochre: "#C88A3D",
    ink: "#1F2A24",
    muted: "#6B7A72",
  },
  lake: {
    cedar: "#324A55",
    clay: "#8C6A55",
    sand: "#E4D7C5",
    cream: "#F6F2EA",
    sage: "#A2B5AE",
    ochre: "#C88A3D",
    ink: "#1E2A30",
    muted: "#6E7C82",
  },
  dusk: {
    cedar: "#3A3A4A",
    clay: "#A67658",
    sand: "#E9D9C5",
    cream: "#F7F2EA",
    sage: "#9AA59E",
    ochre: "#D49250",
    ink: "#241F2A",
    muted: "#74707C",
  },
};

// ── Logo mark (image) ───────────────────────────────────────────────────────
function LogoMark({ size = 28, style }) {
  return (
    <img
      src="assets/logo-mark.png"
      alt=""
      aria-hidden="true"
      width={size}
      height={size}
      style={{ display: "block", width: size, height: size, objectFit: "contain", ...style }}
    />
  );
}

// ── Small UI ────────────────────────────────────────────────────────────────
function Button({ children, variant = "primary", onClick, style }) {
  const base = {
    fontFamily: "Inter, sans-serif",
    fontSize: 15,
    fontWeight: 500,
    letterSpacing: "0.01em",
    padding: "14px 24px",
    borderRadius: 999,
    border: "1px solid transparent",
    cursor: "pointer",
    transition: "all 180ms ease",
    display: "inline-flex",
    alignItems: "center",
    gap: 10,
    lineHeight: 1,
    ...style,
  };
  const variants = {
    primary: { background: "var(--cedar)", color: "var(--cream)", borderColor: "var(--cedar)" },
    ghost: { background: "transparent", color: "var(--cedar)", borderColor: "var(--cedar)" },
    quiet: { background: "transparent", color: "var(--cedar)", borderColor: "rgba(47,74,61,0.18)" },
  };
  const [hover, setHover] = useState(false);
  const hoverStyle = hover
    ? variant === "primary"
      ? { background: "var(--ink)", borderColor: "var(--ink)" }
      : { background: "rgba(47,74,61,0.06)" }
    : {};
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ ...base, ...variants[variant], ...hoverStyle }}
    >
      {children}
    </button>
  );
}

function Eyebrow({ children }) {
  return (
    <div style={{
      fontFamily: "Inter, sans-serif",
      fontSize: 12,
      letterSpacing: "0.18em",
      textTransform: "uppercase",
      color: "var(--clay)",
      fontWeight: 500,
    }}>
      {children}
    </div>
  );
}

function SectionTitle({ eyebrow, title, lead, align = "left" }) {
  return (
    <div style={{ maxWidth: align === "center" ? 640 : 720, textAlign: align, margin: align === "center" ? "0 auto" : undefined }}>
      {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
      <h2 style={{
        fontFamily: "var(--heading-font), serif",
        fontWeight: 400,
        fontSize: "clamp(34px, 4vw, 52px)",
        lineHeight: 1.08,
        letterSpacing: "-0.015em",
        margin: "14px 0 18px",
        color: "var(--ink)",
      }}>
        {title}
      </h2>
      {lead && (
        <p style={{
          fontFamily: "Inter, sans-serif",
          fontSize: 17,
          lineHeight: 1.6,
          color: "var(--muted)",
          margin: 0,
          maxWidth: 580,
          marginLeft: align === "center" ? "auto" : undefined,
          marginRight: align === "center" ? "auto" : undefined,
        }}>
          {lead}
        </p>
      )}
    </div>
  );
}

// ── Nav ─────────────────────────────────────────────────────────────────────
function Nav({ palette, onBook }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => { setScrolled(window.scrollY > 24); setMenuOpen(false); };
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    ["Services", "services"],
    ["What to Expect", "expect"],
    ["About", "about"],
    ["FAQ", "faq"],
  ];
  const go = (id) => {
    setMenuOpen(false);
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 72, behavior: "smooth" });
  };
  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      transition: "background 240ms ease, border-color 240ms ease",
      background: scrolled || menuOpen ? "rgba(248,243,234,0.96)" : "transparent",
      backdropFilter: scrolled || menuOpen ? "blur(14px) saturate(140%)" : "none",
      WebkitBackdropFilter: scrolled || menuOpen ? "blur(14px) saturate(140%)" : "none",
      borderBottom: scrolled || menuOpen ? "1px solid rgba(47,74,61,0.08)" : "1px solid transparent",
    }}>
      <div className="nav-inner" style={{
        maxWidth: 1240, margin: "0 auto",
        padding: "18px 32px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
      }}>
        <a href="#top" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }} style={{
          display: "flex", alignItems: "center", gap: 10, textDecoration: "none", color: "var(--ink)",
        }}>
          <LogoMark size={34} />
          <span style={{
            fontFamily: "var(--heading-font), serif", fontSize: 22, fontWeight: 400, letterSpacing: "-0.01em",
          }}>
            Aki Reiki
          </span>
        </a>
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <div style={{ display: "flex", gap: 4, marginRight: 14 }} className="nav-links">
            {links.map(([label, id]) => (
              <a key={id} href={`#${id}`} onClick={(e) => { e.preventDefault(); go(id); }} style={{
                fontFamily: "Inter, sans-serif", fontSize: 14, color: "var(--ink)",
                textDecoration: "none", padding: "8px 14px", borderRadius: 999,
                transition: "background 160ms",
              }}
                onMouseEnter={(e) => e.currentTarget.style.background = "rgba(47,74,61,0.06)"}
                onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
              >
                {label}
              </a>
            ))}
          </div>
          <Button onClick={onBook} style={{ padding: "10px 18px", fontSize: 14 }}>Book a Session</Button>
          <button
            className="hamburger-btn"
            onClick={() => setMenuOpen(!menuOpen)}
            aria-label={menuOpen ? "Close menu" : "Open menu"}
            style={{
              display: "none", background: "transparent", border: "none", cursor: "pointer",
              padding: "8px", color: "var(--ink)", alignItems: "center", justifyContent: "center",
              marginLeft: 4, borderRadius: 8,
            }}
          >
            {menuOpen ? (
              <svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
                <path d="M4 4L18 18M18 4L4 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
              </svg>
            ) : (
              <svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
                <path d="M3 7h16M3 11h16M3 15h16" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
              </svg>
            )}
          </button>
        </div>
      </div>
      {menuOpen && (
        <div style={{
          borderTop: "1px solid rgba(47,74,61,0.08)",
          padding: "8px 20px 20px",
        }}>
          {links.map(([label, id]) => (
            <button key={id} onClick={() => go(id)} style={{
              display: "block", width: "100%", background: "transparent", border: "none",
              cursor: "pointer", textAlign: "left",
              fontFamily: "Inter, sans-serif", fontSize: 17, color: "var(--ink)",
              padding: "14px 4px", borderBottom: "1px solid rgba(47,74,61,0.06)",
              minHeight: 48,
            }}>
              {label}
            </button>
          ))}
          <div style={{ marginTop: 16 }}>
            <Button onClick={() => { onBook(); setMenuOpen(false); }} style={{ width: "100%", justifyContent: "center" }}>
              Book a Session
            </Button>
          </div>
        </div>
      )}
    </nav>
  );
}

// ── Hero ────────────────────────────────────────────────────────────────────
function Hero({ palette, onBook, onExpect }) {
  return (
    <header id="top" style={{
      position: "relative",
      minHeight: "100vh",
      paddingTop: 100,
      display: "flex",
      alignItems: "center",
      overflow: "hidden",
    }}>
      {/* Soft sunrise gradient background */}
      <div style={{
        position: "absolute", inset: 0, zIndex: 0,
        background: `radial-gradient(120% 70% at 78% 18%, ${palette.sand} 0%, ${palette.cream} 45%, ${palette.cream} 100%)`,
      }} />
      {/* Faint horizon line */}
      <svg style={{ position: "absolute", left: 0, right: 0, bottom: 0, width: "100%", height: 180, zIndex: 0 }} viewBox="0 0 1440 180" preserveAspectRatio="none">
        <path d="M0 140 Q360 100 720 130 T1440 120" stroke={palette.sage} strokeWidth="1" fill="none" opacity="0.55" />
        <path d="M0 160 Q360 130 720 150 T1440 140" stroke={palette.sage} strokeWidth="1" fill="none" opacity="0.3" />
      </svg>

      <div style={{
        position: "relative", zIndex: 1,
        maxWidth: 1240, margin: "0 auto",
        padding: "0 32px",
        display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 64, alignItems: "center", width: "100%",
      }} className="hero-grid">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 28 }}>
            <span style={{ width: 28, height: 1, background: palette.clay }} />
            <Eyebrow>Reiki &amp; Energy Healing · Milwaukee</Eyebrow>
          </div>
          <h1 style={{
            fontFamily: "var(--heading-font), serif",
            fontWeight: 400,
            fontSize: "clamp(44px, 6vw, 76px)",
            lineHeight: 1.02,
            letterSpacing: "-0.02em",
            margin: 0,
            color: "var(--ink)",
          }}>
            Grounded Reiki<br />
            <em style={{ fontStyle: "italic", color: palette.cedar }}>for rest, balance,</em><br />
            and renewal.
          </h1>
          <p style={{
            fontFamily: "Inter, sans-serif",
            fontSize: 19, lineHeight: 1.55,
            color: "var(--muted)",
            marginTop: 28, marginBottom: 36,
            maxWidth: 520,
          }}>
            Aki Reiki offers gentle, earth-rooted Reiki sessions designed to help you
            slow down, release stress, and return to a calmer, more grounded state.
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
            <Button onClick={onBook}>
              Book a Reiki Session
              <span aria-hidden="true" style={{ fontSize: 18, marginTop: -2 }}>→</span>
            </Button>
            <Button variant="ghost" onClick={onExpect}>What to Expect</Button>
          </div>

          <div style={{
            marginTop: 56, display: "flex", gap: 28, flexWrap: "wrap",
            paddingTop: 28, borderTop: `1px solid ${palette.cedar}1A`,
          }}>
            {[
              ["60–90 min", "session length"],
              ["Bay View", "Milwaukee, WI"],
              ["No belief", "system required"],
            ].map(([k, v]) => (
              <div key={k}>
                <div style={{ fontFamily: "var(--heading-font), serif", fontSize: 22, color: "var(--ink)", letterSpacing: "-0.01em" }}>{k}</div>
                <div style={{ fontFamily: "Inter, sans-serif", fontSize: 13, color: "var(--muted)", marginTop: 2 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Visual: layered earth circles */}
        <div className="hero-visual" style={{ position: "relative", aspectRatio: "1/1.05", width: "100%" }}>
          <HeroVisual palette={palette} />
        </div>
      </div>
    </header>
  );
}

function HeroVisual({ palette }) {
  return (
    <div style={{ position: "relative", width: "100%", height: "100%" }}>
      <svg viewBox="0 0 500 520" width="100%" height="100%" style={{ display: "block" }}>
        <defs>
          <linearGradient id="skyG" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={palette.sand} />
            <stop offset="100%" stopColor={palette.cream} />
          </linearGradient>
          <linearGradient id="earthG" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={palette.cedar} stopOpacity="0.92" />
            <stop offset="100%" stopColor={palette.cedar} stopOpacity="1" />
          </linearGradient>
          <radialGradient id="sunG" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor={palette.ochre} stopOpacity="0.9" />
            <stop offset="60%" stopColor={palette.ochre} stopOpacity="0.4" />
            <stop offset="100%" stopColor={palette.ochre} stopOpacity="0" />
          </radialGradient>
        </defs>

        {/* Outer circle */}
        <circle cx="250" cy="250" r="240" fill="url(#skyG)" />

        {/* Sun glow */}
        <circle cx="250" cy="260" r="180" fill="url(#sunG)" />

        {/* Sun */}
        <circle cx="250" cy="270" r="62" fill={palette.ochre} opacity="0.85" />

        {/* Concentric rings */}
        <circle cx="250" cy="250" r="240" fill="none" stroke={palette.cedar} strokeOpacity="0.18" strokeWidth="1" />
        <circle cx="250" cy="250" r="200" fill="none" stroke={palette.cedar} strokeOpacity="0.14" strokeWidth="1" />
        <circle cx="250" cy="250" r="160" fill="none" stroke={palette.cedar} strokeOpacity="0.1" strokeWidth="1" />

        {/* Earth hill */}
        <path d="M 10 380 Q 250 300 490 380 L 490 510 L 10 510 Z" fill="url(#earthG)" />
        {/* Horizon highlight */}
        <path d="M 10 380 Q 250 300 490 380" stroke={palette.sage} strokeWidth="1.2" opacity="0.5" fill="none" />

        {/* Sage foreground tufts */}
        <path d="M 80 400 Q 95 380 110 400" stroke={palette.sage} strokeWidth="1.5" fill="none" opacity="0.6" />
        <path d="M 380 410 Q 395 388 410 410" stroke={palette.sage} strokeWidth="1.5" fill="none" opacity="0.5" />

        {/* Clip mask the whole composition to a circle */}
        <circle cx="250" cy="250" r="240" fill="none" stroke={palette.cream} strokeWidth="20" />
      </svg>

      {/* Floating word */}
      <div style={{
        position: "absolute", bottom: -8, left: "50%", transform: "translateX(-50%)",
        background: palette.cream, padding: "10px 18px", borderRadius: 999,
        border: `1px solid ${palette.cedar}22`,
        fontFamily: "var(--heading-font), serif", fontStyle: "italic", fontSize: 18,
        color: "var(--cedar)", letterSpacing: "0.02em",
        boxShadow: "0 8px 20px rgba(47,74,61,0.08)",
      }}>
        aki · earth
      </div>
    </div>
  );
}

// ── Intro ───────────────────────────────────────────────────────────────────
function Intro({ palette }) {
  return (
    <section id="intro" className="sec" style={{ padding: "120px 32px", background: palette.cream }}>
      <div style={{ maxWidth: 1100, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 80, alignItems: "start" }} className="intro-grid">
        <Eyebrow>A quiet place to land</Eyebrow>
        <div>
          <p style={{
            fontFamily: "var(--heading-font), serif",
            fontWeight: 400,
            fontSize: "clamp(26px, 2.6vw, 36px)",
            lineHeight: 1.3,
            letterSpacing: "-0.01em",
            color: "var(--ink)",
            margin: 0,
          }}>
            Aki Reiki is a calm, grounding space for Reiki and energy healing in Milwaukee — a slow hour built for nervous systems that have been running fast for too long.
          </p>
          <p style={{
            fontFamily: "Inter, sans-serif",
            fontSize: 17, lineHeight: 1.65, color: "var(--muted)",
            marginTop: 28, maxWidth: 580,
          }}>
            Sessions are gentle, fully clothed, and shaped around your pace.
            Whether you're navigating a hard season, recovering from burnout,
            or simply curious — you're welcome here.
          </p>
        </div>
      </div>
    </section>
  );
}

// ── Services ────────────────────────────────────────────────────────────────
function Services({ palette, showIntroOffer, onBook }) {
  const services = [
    {
      name: "60-Minute Reiki Reset",
      price: "$85",
      duration: "60 min",
      desc: "An accessible first or returning session — a full reset for body and mind.",
      featured: false,
    },
    {
      name: "90-Minute Deep Rest Reiki",
      price: "$125",
      duration: "90 min",
      desc: "A longer, more spacious session for deep rest, integration, and quiet recovery.",
      featured: true,
    },
    {
      name: "3-Session Grounding Package",
      price: "$240",
      duration: "3 × 60 min",
      desc: "A short rhythm of sessions — ideal for life transitions, burnout, or building a calmer baseline.",
      featured: false,
    },
  ];
  return (
    <section id="services" className="sec" style={{ padding: "120px 32px", background: palette.cream }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <SectionTitle
          eyebrow="Sessions"
          title="Choose the pace your body is asking for."
          lead="Each session begins with a short check-in and ends with quiet time and water. You stay fully clothed throughout."
        />

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20,
          marginTop: 56,
        }} className="services-grid">
          {services.map((s) => (
            <ServiceCard key={s.name} {...s} palette={palette} onBook={() => onBook(s.name)} />
          ))}
        </div>

        {showIntroOffer && (
          <div style={{
            marginTop: 28,
            background: palette.cedar,
            color: palette.cream,
            borderRadius: 20,
            padding: "32px 36px",
            display: "grid",
            gridTemplateColumns: "auto 1fr auto",
            gap: 32,
            alignItems: "center",
          }} className="intro-offer">
            <div className="intro-offer-logo" style={{
              width: 64, height: 64, borderRadius: 999,
              background: palette.cream,
              display: "flex", alignItems: "center", justifyContent: "center",
              overflow: "hidden",
              boxShadow: `0 0 0 1px ${palette.ochre}66`,
              flexShrink: 0,
            }}>
              <img src="assets/logo-mark.png" alt="" aria-hidden="true" style={{ width: 60, height: 60, objectFit: "contain" }} />
            </div>
            <div>
              <Eyebrow>
                <span style={{ color: palette.ochre }}>Founding client offer</span>
              </Eyebrow>
              <div style={{
                fontFamily: "var(--heading-font), serif",
                fontSize: 26, marginTop: 8, letterSpacing: "-0.01em",
              }}>
                First-Time Reiki Session — $65
              </div>
              <div style={{ fontFamily: "Inter, sans-serif", fontSize: 14, color: `${palette.cream}cc`, marginTop: 6 }}>
                A welcoming intro rate for new clients while founding spots last.
              </div>
            </div>
            <Button variant="primary" onClick={() => onBook("First-Time Reiki Session")} style={{
              background: palette.cream, color: palette.cedar, borderColor: palette.cream,
            }} className="intro-offer-btn">
              Claim intro rate
            </Button>
          </div>
        )}
      </div>
    </section>
  );
}

function ServiceCard({ name, price, duration, desc, featured, palette, onBook }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: featured ? palette.sand : palette.cream,
        border: `1px solid ${featured ? palette.clay + "44" : palette.cedar + "1A"}`,
        borderRadius: 22,
        padding: "32px 28px 28px",
        display: "flex", flexDirection: "column",
        minHeight: 320,
        transition: "transform 220ms ease, box-shadow 220ms ease",
        transform: hover ? "translateY(-4px)" : "none",
        boxShadow: hover ? "0 18px 40px rgba(47,74,61,0.12)" : "0 1px 0 rgba(47,74,61,0.04)",
        position: "relative",
      }}
    >
      {featured && (
        <div style={{
          position: "absolute", top: 16, right: 16,
          fontFamily: "Inter, sans-serif", fontSize: 11, letterSpacing: "0.12em",
          textTransform: "uppercase", color: palette.clay, fontWeight: 600,
        }}>
          Most chosen
        </div>
      )}
      <div style={{ fontFamily: "Inter, sans-serif", fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--clay)" }}>
        {duration}
      </div>
      <h3 style={{
        fontFamily: "var(--heading-font), serif",
        fontWeight: 400, fontSize: 26, lineHeight: 1.15,
        letterSpacing: "-0.01em", margin: "10px 0 14px",
        color: "var(--ink)",
      }}>
        {name}
      </h3>
      <p style={{
        fontFamily: "Inter, sans-serif", fontSize: 15, lineHeight: 1.55,
        color: "var(--muted)", margin: 0, flex: 1,
      }}>
        {desc}
      </p>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginTop: 22, paddingTop: 20, borderTop: `1px solid ${palette.cedar}1A` }}>
        <div style={{ fontFamily: "var(--heading-font), serif", fontSize: 32, color: "var(--ink)", letterSpacing: "-0.01em" }}>{price}</div>
        <button
          onClick={onBook}
          style={{
            background: "transparent", border: "none",
            fontFamily: "Inter, sans-serif", fontSize: 14, fontWeight: 500,
            color: palette.cedar, cursor: "pointer",
            display: "inline-flex", alignItems: "center", gap: 6,
            padding: 0,
          }}
        >
          Book <span aria-hidden="true">→</span>
        </button>
      </div>
    </div>
  );
}

// ── Supports ────────────────────────────────────────────────────────────────
function Supports({ palette }) {
  const items = [
    ["Stress relief", "Soften a body running on alert."],
    ["Deep rest", "A pause your nervous system can actually feel."],
    ["Emotional reset", "Space to settle after big or quiet weeks."],
    ["Grounding", "A slow return to your own pace."],
    ["Life transitions", "Support through change — known or just beginning."],
    ["Burnout support", "Companionship for the long road back."],
    ["Energetic balance", "A quiet recalibration."],
  ];
  return (
    <section id="supports" className="sec" style={{ padding: "120px 32px", background: palette.sand }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <SectionTitle
          eyebrow="What Reiki supports"
          title="A gentle practice for ordinary, human things."
          lead="Reiki is not medical care and we don't make medical claims. It is a slow, supportive practice — most often experienced as deep rest."
        />
        <div style={{
          marginTop: 56,
          display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))",
          gap: 1,
          background: `${palette.cedar}22`,
          borderTop: `1px solid ${palette.cedar}22`,
          borderLeft: `1px solid ${palette.cedar}22`,
        }}>
          {items.map(([k, v], i) => (
            <div key={k} style={{
              background: palette.sand,
              padding: "28px 24px",
              borderRight: `1px solid ${palette.cedar}22`,
              borderBottom: `1px solid ${palette.cedar}22`,
              minHeight: 150,
              display: "flex", flexDirection: "column",
            }}>
              <div style={{
                fontFamily: "Inter, sans-serif", fontSize: 11,
                color: palette.clay, letterSpacing: "0.14em",
                marginBottom: 12,
              }}>
                0{i + 1}
              </div>
              <div style={{
                fontFamily: "var(--heading-font), serif",
                fontSize: 22, lineHeight: 1.15,
                color: "var(--ink)", letterSpacing: "-0.005em",
                marginBottom: 8,
              }}>
                {k}
              </div>
              <div style={{ fontFamily: "Inter, sans-serif", fontSize: 14, lineHeight: 1.5, color: "var(--muted)" }}>
                {v}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── What to expect ──────────────────────────────────────────────────────────
function Expect({ palette }) {
  const steps = [
    {
      n: "01",
      title: "A short check-in",
      desc: "We talk briefly — what brought you here today, what feels tender, anything you'd rather skip. No pressure to share more than feels right.",
    },
    {
      n: "02",
      title: "Settling in, fully clothed",
      desc: "You rest on a comfortable padded table, fully clothed, with a blanket. The room is warm, dim, and quiet.",
    },
    {
      n: "03",
      title: "Hands-on or hands-off",
      desc: "I work with light, still hand placements — or just above the body if you prefer. You can change your mind at any point.",
    },
    {
      n: "04",
      title: "Quiet rest",
      desc: "Most of the session is simply quiet. Many people drift toward sleep. Some feel warmth or tingling; some feel nothing in particular. All of it is fine.",
    },
    {
      n: "05",
      title: "A gentle closing",
      desc: "A short check-in to land, water, and a few minutes of unhurried time before you head back into your day.",
    },
  ];
  const [active, setActive] = useState(0);
  return (
    <section id="expect" className="sec" style={{ padding: "120px 32px", background: palette.cream }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <SectionTitle
          eyebrow="What to expect"
          title="A quiet hour, shaped around you."
          lead="No belief system required. No special preparation. Wear something comfortable and arrive as you are."
        />
        <div style={{
          marginTop: 56,
          display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 56,
          alignItems: "start",
        }} className="expect-grid">
          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {steps.map((s, i) => (
              <button
                key={s.n}
                onClick={() => setActive(i)}
                style={{
                  textAlign: "left", background: "transparent", border: "none", cursor: "pointer",
                  padding: "16px 18px",
                  borderRadius: 14,
                  background: active === i ? palette.sand : "transparent",
                  display: "flex", alignItems: "baseline", gap: 16,
                  transition: "background 180ms",
                  fontFamily: "Inter, sans-serif",
                }}
              >
                <span style={{ fontSize: 12, letterSpacing: "0.14em", color: palette.clay, minWidth: 24 }}>{s.n}</span>
                <span style={{
                  fontFamily: "var(--heading-font), serif",
                  fontSize: 20, color: "var(--ink)",
                  letterSpacing: "-0.005em",
                }}>{s.title}</span>
              </button>
            ))}
          </div>
          <div style={{
            background: palette.sand,
            borderRadius: 22,
            padding: "44px 42px",
            minHeight: 360,
            position: "relative",
            overflow: "hidden",
          }} className="expect-panel">
            <div style={{
              position: "absolute", top: -40, right: -40, width: 200, height: 200,
              borderRadius: "50%", background: `${palette.ochre}22`,
            }} />
            <div style={{
              fontFamily: "var(--heading-font), serif",
              fontSize: 96, lineHeight: 1, color: `${palette.cedar}22`,
              letterSpacing: "-0.04em",
              position: "relative", zIndex: 1,
            }}>
              {steps[active].n}
            </div>
            <h3 style={{
              fontFamily: "var(--heading-font), serif", fontWeight: 400,
              fontSize: 34, lineHeight: 1.15, color: "var(--ink)",
              letterSpacing: "-0.015em",
              margin: "8px 0 18px", position: "relative", zIndex: 1,
            }}>
              {steps[active].title}
            </h3>
            <p style={{
              fontFamily: "Inter, sans-serif", fontSize: 17, lineHeight: 1.6,
              color: "var(--muted)", margin: 0, maxWidth: 520, position: "relative", zIndex: 1,
            }}>
              {steps[active].desc}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── About ───────────────────────────────────────────────────────────────────
function About({ palette }) {
  return (
    <section id="about" className="sec" style={{ padding: "120px 32px", background: palette.cedar, color: palette.cream }}>
      <div style={{ maxWidth: 1100, margin: "0 auto", display: "grid", gridTemplateColumns: "0.8fr 1.2fr", gap: 80, alignItems: "center" }} className="about-grid">
        <div style={{
          aspectRatio: "1/1", borderRadius: "50%",
          background: palette.cream,
          position: "relative", overflow: "hidden",
          display: "flex", alignItems: "center", justifyContent: "center",
          boxShadow: `0 24px 60px rgba(0,0,0,0.18), 0 0 0 8px ${palette.cream}, 0 0 0 9px ${palette.ochre}55`,
        }}>
          <img src="assets/logo-mark.png" alt="Aki Reiki logo" style={{ width: "84%", height: "84%", objectFit: "contain" }} />
        </div>
        <div>
          <Eyebrow>
            <span style={{ color: palette.ochre }}>About the name</span>
          </Eyebrow>
          <h2 style={{
            fontFamily: "var(--heading-font), serif", fontWeight: 400,
            fontSize: "clamp(32px, 3.6vw, 46px)", lineHeight: 1.1,
            letterSpacing: "-0.015em",
            margin: "14px 0 24px",
            color: palette.cream,
          }}>
            <em style={{ fontStyle: "italic" }}>Aki</em> means earth, land, grounding.
          </h2>
          <p style={{
            fontFamily: "Inter, sans-serif", fontSize: 17, lineHeight: 1.65,
            color: `${palette.cream}cc`, margin: "0 0 18px",
            maxWidth: 580,
          }}>
            The name Aki is inspired by Ojibwe language and reflects a connection to
            earth, land, and grounding. Aki Reiki honors this meaning with respect and
            humility, offering sessions rooted in calm, care, and reconnection.
          </p>
          <p style={{
            fontFamily: "Inter, sans-serif", fontSize: 15, lineHeight: 1.65,
            color: `${palette.cream}99`, margin: 0, maxWidth: 580,
            fontStyle: "italic",
          }}>
            The founder has Ojibwe heritage and chose this name as a quiet acknowledgment
            of the land we live on and the slow, ordinary act of returning to it.
          </p>
        </div>
      </div>
    </section>
  );
}

// ── FAQ ─────────────────────────────────────────────────────────────────────
function FAQ({ palette, onBook }) {
  const faqs = [
    {
      q: "What is Reiki?",
      a: "Reiki is a gentle, hands-on (or hands-just-above) practice that supports rest, relaxation, and a felt sense of calm. It's most often described as deeply restful — a quiet hour where your nervous system gets to slow down.",
    },
    {
      q: "Do I need to believe in Reiki?",
      a: "No. You're welcome to be curious, skeptical, neutral, or somewhere in between. No belief system is required to receive a session or to feel its effects.",
    },
    {
      q: "Is Reiki the same as massage?",
      a: "No. There is no manipulation of muscle or tissue. You stay fully clothed, and hand placements are light and still — or just above the body if you prefer hands-off.",
    },
    {
      q: "Can Reiki treat medical conditions?",
      a: "Reiki is not medical care and is not a substitute for medical treatment. It is a complementary practice that supports rest, calm, and a general sense of balance. Please continue to work with your healthcare providers for any medical concerns.",
    },
    {
      q: "What should I wear?",
      a: "Something comfortable you can rest in — soft layers, easy fabrics. You'll stay fully clothed, with a blanket if you'd like one.",
    },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="sec" style={{ padding: "120px 32px", background: palette.cream }}>
      <div style={{ maxWidth: 980, margin: "0 auto" }}>
        <SectionTitle
          eyebrow="Common questions"
          title="A few honest answers."
          align="center"
        />
        <div style={{ marginTop: 56, borderTop: `1px solid ${palette.cedar}22` }}>
          {faqs.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={f.q} style={{ borderBottom: `1px solid ${palette.cedar}22` }}>
                <button
                  className="faq-q"
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: "100%", background: "transparent", border: "none", cursor: "pointer",
                    textAlign: "left", padding: "28px 4px", minHeight: 56,
                    display: "flex", alignItems: "center", justifyContent: "space-between",
                    gap: 24,
                    fontFamily: "var(--heading-font), serif",
                    fontSize: 24, color: "var(--ink)", letterSpacing: "-0.005em",
                  }}
                >
                  <span>{f.q}</span>
                  <span style={{
                    fontFamily: "Inter, sans-serif", fontSize: 24, color: palette.clay,
                    transition: "transform 200ms", transform: isOpen ? "rotate(45deg)" : "rotate(0deg)",
                    lineHeight: 1, fontWeight: 300,
                  }}>+</span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 300 : 0,
                  overflow: "hidden",
                  transition: "max-height 280ms ease, opacity 240ms ease, padding 240ms ease",
                  opacity: isOpen ? 1 : 0,
                  paddingBottom: isOpen ? 28 : 0,
                }}>
                  <p style={{
                    fontFamily: "Inter, sans-serif", fontSize: 17, lineHeight: 1.65,
                    color: "var(--muted)", margin: 0, maxWidth: 740, paddingRight: 40,
                  }}>
                    {f.a}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
        <div style={{ textAlign: "center", marginTop: 64 }}>
          <p style={{ fontFamily: "Inter, sans-serif", fontSize: 15, color: "var(--muted)", marginBottom: 20 }}>
            Have another question? Ask before you book.
          </p>
          <Button onClick={onBook}>Book a Reiki Session</Button>
        </div>
      </div>
    </section>
  );
}

// ── Footer ──────────────────────────────────────────────────────────────────
function Footer({ palette }) {
  return (
    <footer style={{ background: palette.cream, borderTop: `1px solid ${palette.cedar}1A` }}>
      <div className="footer-inner" style={{ maxWidth: 1240, margin: "0 auto", padding: "60px 32px 40px", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 32, alignItems: "end" }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <LogoMark size={30} />
            <span style={{ fontFamily: "var(--heading-font), serif", fontSize: 20, color: "var(--ink)" }}>Aki Reiki</span>
          </div>
          <p style={{ fontFamily: "Inter, sans-serif", fontSize: 13, color: "var(--muted)", margin: "12px 0 0", maxWidth: 360 }}>
            Grounded Reiki for rest, balance, and renewal. Sessions in Bay View, Milwaukee, WI.
          </p>
        </div>
        <div style={{ display: "flex", gap: 48, flexWrap: "wrap", fontFamily: "Inter, sans-serif", fontSize: 13 }}>
          <div>
            <div style={{ color: palette.clay, letterSpacing: "0.14em", textTransform: "uppercase", fontSize: 11, marginBottom: 10 }}>Contact</div>
            <div style={{ color: "var(--ink)" }}>contact@akireiki.com</div>
            <div style={{ color: "var(--muted)", marginTop: 4 }}>By appointment</div>
            <a
              href="https://www.instagram.com/aki_reiki_mke"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Aki Reiki on Instagram"
              style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                marginTop: 14,
                color: "var(--ink)", textDecoration: "none",
                padding: "8px 12px 8px 10px",
                border: `1px solid ${palette.cedar}22`,
                borderRadius: 999,
                fontFamily: "Inter, sans-serif", fontSize: 13,
                transition: "background 160ms, border-color 160ms",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = `${palette.cedar}0D`; e.currentTarget.style.borderColor = `${palette.cedar}44`; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.borderColor = `${palette.cedar}22`; }}
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <rect x="3" y="3" width="18" height="18" rx="5" />
                <circle cx="12" cy="12" r="4" />
                <circle cx="17.5" cy="6.5" r="0.9" fill="currentColor" stroke="none" />
              </svg>
              <span>@aki_reiki_mke</span>
            </a>
          </div>
          <div>
            <div style={{ color: palette.clay, letterSpacing: "0.14em", textTransform: "uppercase", fontSize: 11, marginBottom: 10 }}>Location</div>
            <div style={{ color: "var(--ink)" }}>Bay View</div>
            <div style={{ color: "var(--muted)", marginTop: 4 }}>Milwaukee, Wisconsin</div>
          </div>
        </div>
      </div>
      <div className="footer-bottom" style={{ maxWidth: 1240, margin: "0 auto", padding: "24px 32px", borderTop: `1px solid ${palette.cedar}1A`, display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap", fontFamily: "Inter, sans-serif", fontSize: 12, color: "var(--muted)" }}>
        <div>© {new Date().getFullYear()} Aki Reiki</div>
        <div>Reiki is a complementary practice; not a substitute for medical care.</div>
      </div>
    </footer>
  );
}

// ── Booking Modal ───────────────────────────────────────────────────────────
function fmt12(t) {
  if (!t) return "";
  const [h, m] = t.split(":").map(Number);
  return `${h % 12 || 12}:${String(m).padStart(2, "0")} ${h >= 12 ? "PM" : "AM"}`;
}

function BookingCalendar({ selected, onSelect, palette }) {
  const today = new Date(); today.setHours(0, 0, 0, 0);
  const [view, setView] = useState({ year: today.getFullYear(), month: today.getMonth() });
  const { year, month } = view;

  const firstDay = new Date(year, month, 1).getDay();
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const canPrev = new Date(year, month, 1) > new Date(today.getFullYear(), today.getMonth(), 1);
  const label = new Date(year, month, 1).toLocaleDateString("en-US", { month: "long", year: "numeric" });

  const prevMonth = () => setView(({ year, month }) => month === 0 ? { year: year - 1, month: 11 } : { year, month: month - 1 });
  const nextMonth = () => setView(({ year, month }) => month === 11 ? { year: year + 1, month: 0 } : { year, month: month + 1 });

  const cells = [
    ...Array(firstDay).fill(null),
    ...Array.from({ length: daysInMonth }, (_, i) => new Date(year, month, i + 1)),
  ];

  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
        <button onClick={prevMonth} disabled={!canPrev} style={{
          background: "none", border: "none", cursor: canPrev ? "pointer" : "not-allowed",
          fontSize: 18, color: canPrev ? "var(--cedar)" : "var(--muted)", padding: "4px 8px",
        }}>‹</button>
        <span style={{ fontFamily: "var(--heading-font), serif", fontSize: 17 }}>{label}</span>
        <button onClick={nextMonth} style={{
          background: "none", border: "none", cursor: "pointer", fontSize: 18, color: "var(--cedar)", padding: "4px 8px",
        }}>›</button>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 3, textAlign: "center" }}>
        {["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(d => (
          <div key={d} style={{ fontSize: 11, color: "var(--muted)", padding: "4px 0", fontWeight: 500 }}>{d}</div>
        ))}
        {cells.map((d, i) => {
          if (!d) return <div key={`e${i}`} />;
          const isPast = d < today;
          const sel = selected && d.toDateString() === selected.toDateString();
          return (
            <button key={d.toISOString()} onClick={() => !isPast && onSelect(d)} disabled={isPast} style={{
              padding: "9px 2px", borderRadius: 9, cursor: isPast ? "default" : "pointer",
              border: `1px solid ${sel ? palette.cedar : "transparent"}`,
              background: sel ? palette.cedar : "transparent",
              color: sel ? palette.cream : isPast ? `${palette.cedar}44` : "var(--ink)",
              fontFamily: "Inter, sans-serif", fontSize: 13,
              transition: "all 120ms",
            }}>{d.getDate()}</button>
          );
        })}
      </div>
    </div>
  );
}

function BookingModal({ open, onClose, palette }) {
  const [step, setStep] = useState(0);
  const [sessionTypes, setSessionTypes] = useState([]);
  const [selectedType, setSelectedType] = useState(null);
  const [date, setDate] = useState(null);
  const [slots, setSlots] = useState([]);
  const [slotsLoading, setSlotsLoading] = useState(false);
  const [time, setTime] = useState(null);
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [note, setNote] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState("");
  const [bookingId, setBookingId] = useState(null);

  useEffect(() => {
    if (open) {
      setStep(0); setSelectedType(null); setDate(null); setSlots([]); setTime(null);
      setName(""); setEmail(""); setPhone(""); setNote(""); setSubmitError(""); setBookingId(null);
      document.body.style.overflow = "hidden";
      fetch("/api/session-types").then(r => r.json()).then(setSessionTypes).catch(() => setSessionTypes([]));
    } else {
      document.body.style.overflow = "";
    }
  }, [open]);

  useEffect(() => {
    if (!date || !selectedType) return;
    setTime(null); setSlots([]); setSlotsLoading(true);
    const dateStr = date.toISOString().slice(0, 10);
    fetch(`/api/slots?date=${dateStr}&type_id=${selectedType.id}`)
      .then(r => r.json()).then(s => { setSlots(s); setSlotsLoading(false); })
      .catch(() => setSlotsLoading(false));
  }, [date, selectedType]);

  if (!open) return null;

  const fmtDate = (d) => d ? d.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" }) : "";

  const handleSubmit = async () => {
    setSubmitting(true); setSubmitError("");
    try {
      const r = await fetch("/api/appointments", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          type_id: selectedType.id,
          date: date.toISOString().slice(0, 10),
          start_time: time,
          client_name: name,
          client_email: email,
          client_phone: phone || undefined,
          notes: note || undefined,
        }),
      });
      const d = await r.json();
      if (!r.ok) throw new Error(d.error || "Booking failed");
      setBookingId(d.id);
      setStep(4);
    } catch (err) { setSubmitError(err.message); }
    finally { setSubmitting(false); }
  };

  const steps = ["Session", "Date & time", "Your details", "Confirm"];

  const canNext = (
    (step === 0 && !!selectedType) ||
    (step === 1 && date && time) ||
    (step === 2 && name.trim() && /\S+@\S+/.test(email)) ||
    (step === 3)
  );

  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed", inset: 0, zIndex: 100,
        background: "rgba(31, 42, 36, 0.5)",
        backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)",
        display: "flex", alignItems: "center", justifyContent: "center",
        padding: 20, animation: "fadeIn 200ms ease",
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          background: palette.cream,
          width: "100%", maxWidth: 720, maxHeight: "90vh",
          borderRadius: 24, overflow: "hidden",
          display: "flex", flexDirection: "column",
          boxShadow: "0 30px 80px rgba(31,42,36,0.3)",
          animation: "slideUp 280ms cubic-bezier(0.2, 0.8, 0.2, 1)",
        }}
      >
        {/* Header */}
        <div className="modal-header" style={{
          padding: "20px 28px", borderBottom: `1px solid ${palette.cedar}1A`,
          display: "flex", alignItems: "center", justifyContent: "space-between",
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <LogoMark size={26} />
            <span style={{ fontFamily: "var(--heading-font), serif", fontSize: 18, color: "var(--ink)" }}>Book a session</span>
          </div>
          <button onClick={onClose} aria-label="Close" style={{
            background: "transparent", border: "none", cursor: "pointer",
            fontSize: 22, color: "var(--muted)", padding: 4, lineHeight: 1,
          }}>×</button>
        </div>

        {/* Stepper */}
        {step < 4 && (
          <div className="modal-stepper" style={{ padding: "16px 28px", display: "flex", gap: 8, background: palette.sand }}>
            {steps.map((s, i) => (
              <div key={s} style={{ flex: 1, display: "flex", alignItems: "center", gap: 8 }}>
                <div style={{
                  width: 22, height: 22, borderRadius: 999,
                  background: i <= step ? palette.cedar : "transparent",
                  border: `1px solid ${i <= step ? palette.cedar : palette.cedar + "44"}`,
                  color: palette.cream, fontSize: 11,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: "Inter, sans-serif", fontWeight: 600, transition: "all 200ms",
                }}>
                  {i < step ? "✓" : i + 1}
                </div>
                <div className="stepper-label" style={{
                  fontFamily: "Inter, sans-serif", fontSize: 12,
                  color: i <= step ? "var(--ink)" : "var(--muted)",
                  fontWeight: i === step ? 600 : 400,
                }}>{s}</div>
              </div>
            ))}
          </div>
        )}

        {/* Body */}
        <div className="modal-body" style={{ padding: "32px 28px", overflowY: "auto", flex: 1 }}>

          {/* Step 0: Session type */}
          {step === 0 && (
            <div>
              <h3 style={{ fontFamily: "var(--heading-font), serif", fontSize: 26, margin: "0 0 6px", color: "var(--ink)" }}>
                Which session feels right today?
              </h3>
              <p style={{ fontFamily: "Inter, sans-serif", fontSize: 14, color: "var(--muted)", margin: "0 0 24px" }}>
                You can change this anytime before confirming.
              </p>
              {sessionTypes.length === 0 ? (
                <p style={{ color: "var(--muted)", fontSize: 14 }}>Loading sessions…</p>
              ) : (
                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                  {sessionTypes.map(s => {
                    const sel = selectedType?.id === s.id;
                    return (
                      <button key={s.id} onClick={() => setSelectedType(s)} style={{
                        textAlign: "left", cursor: "pointer",
                        background: sel ? palette.sand : palette.cream,
                        border: `1.5px solid ${sel ? palette.cedar : palette.cedar + "22"}`,
                        borderRadius: 16, padding: "18px 20px",
                        display: "flex", alignItems: "center", justifyContent: "space-between",
                        fontFamily: "Inter, sans-serif", transition: "all 160ms",
                      }}>
                        <div>
                          <div style={{ fontFamily: "var(--heading-font), serif", fontSize: 19, color: "var(--ink)" }}>{s.name}</div>
                          <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 4 }}>
                            {s.duration_minutes} min{s.description ? ` · ${s.description}` : ""}
                          </div>
                        </div>
                        <div style={{ fontFamily: "var(--heading-font), serif", fontSize: 22, color: "var(--ink)", flexShrink: 0, marginLeft: 12 }}>
                          ${(s.price_cents / 100).toFixed(0)}
                        </div>
                      </button>
                    );
                  })}
                </div>
              )}
            </div>
          )}

          {/* Step 1: Date & time */}
          {step === 1 && (
            <div>
              <h3 style={{ fontFamily: "var(--heading-font), serif", fontSize: 26, margin: "0 0 6px", color: "var(--ink)" }}>
                Pick a date and time.
              </h3>
              <p style={{ fontFamily: "Inter, sans-serif", fontSize: 14, color: "var(--muted)", margin: "0 0 24px" }}>
                Only real available slots are shown.
              </p>
              <div style={{ marginBottom: 28 }}>
                <BookingCalendar selected={date} onSelect={(d) => setDate(d)} palette={palette} />
              </div>
              {date && (
                <div>
                  <div style={{ fontFamily: "Inter, sans-serif", fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: palette.clay, marginBottom: 10 }}>
                    Available times on {fmtDate(date)}
                  </div>
                  {slotsLoading ? (
                    <p style={{ color: "var(--muted)", fontSize: 14 }}>Loading…</p>
                  ) : slots.length === 0 ? (
                    <p style={{ color: "var(--muted)", fontSize: 14 }}>No availability on this date — try another day.</p>
                  ) : (
                    <div className="slots-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }}>
                      {slots.map(t => {
                        const sel = time === t;
                        return (
                          <button key={t} onClick={() => setTime(t)} style={{
                            padding: "12px 8px", borderRadius: 10, cursor: "pointer",
                            border: `1px solid ${sel ? palette.cedar : palette.cedar + "22"}`,
                            background: sel ? palette.cedar : palette.cream,
                            color: sel ? palette.cream : "var(--ink)",
                            fontFamily: "Inter, sans-serif", fontSize: 14, transition: "all 140ms",
                          }}>{fmt12(t)}</button>
                        );
                      })}
                    </div>
                  )}
                </div>
              )}
            </div>
          )}

          {/* Step 2: Details */}
          {step === 2 && (
            <div>
              <h3 style={{ fontFamily: "var(--heading-font), serif", fontSize: 26, margin: "0 0 6px", color: "var(--ink)" }}>
                A little about you.
              </h3>
              <p style={{ fontFamily: "Inter, sans-serif", fontSize: 14, color: "var(--muted)", margin: "0 0 24px" }}>
                Just the basics — anything else can wait for the check-in.
              </p>
              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <Field label="Your name" value={name} onChange={setName} palette={palette} placeholder="First and last" />
                <Field label="Email" value={email} onChange={setEmail} palette={palette} placeholder="you@email.com" type="email" />
                <Field label="Phone (optional)" value={phone} onChange={setPhone} palette={palette} placeholder="(414) 000-0000" type="tel" />
                <Field label="Anything you'd like me to know (optional)" value={note} onChange={setNote} palette={palette} placeholder="A sentence or two — no pressure to share more." textarea />
              </div>
            </div>
          )}

          {/* Step 3: Confirm */}
          {step === 3 && (
            <div>
              <h3 style={{ fontFamily: "var(--heading-font), serif", fontSize: 26, margin: "0 0 6px", color: "var(--ink)" }}>
                Confirm your booking.
              </h3>
              <p style={{ fontFamily: "Inter, sans-serif", fontSize: 14, color: "var(--muted)", margin: "0 0 24px" }}>
                A confirmation email will be sent to {email}.
              </p>
              <div style={{
                background: palette.sand, borderRadius: 16, padding: "20px 22px",
                fontFamily: "Inter, sans-serif", fontSize: 14, lineHeight: 1.7,
              }}>
                <Row k="Session" v={selectedType?.name} />
                <Row k="Date" v={fmtDate(date)} />
                <Row k="Time" v={fmt12(time)} />
                <Row k="Duration" v={`${selectedType?.duration_minutes} min`} />
                <Row k="Price" v={`$${(selectedType?.price_cents / 100).toFixed(0)}`} />
                <Row k="Name" v={name} />
                <Row k="Email" v={email} />
                {phone && <Row k="Phone" v={phone} />}
                {note && <Row k="Note" v={note} />}
              </div>
              {submitError && (
                <p style={{ color: "#C0392B", fontSize: 13, marginTop: 16 }}>{submitError}</p>
              )}
            </div>
          )}

          {/* Step 4: Done */}
          {step === 4 && (
            <div style={{ textAlign: "center", padding: "20px 0" }}>
              <div style={{
                width: 64, height: 64, borderRadius: 999,
                background: `${palette.sage}33`, color: palette.cedar,
                display: "flex", alignItems: "center", justifyContent: "center",
                margin: "0 auto 20px", fontSize: 28,
              }}>✓</div>
              <h3 style={{ fontFamily: "var(--heading-font), serif", fontSize: 28, margin: "0 0 8px", color: "var(--ink)" }}>
                You're booked.
              </h3>
              <p style={{ fontFamily: "Inter, sans-serif", fontSize: 15, color: "var(--muted)", margin: "0 auto 8px", maxWidth: 380 }}>
                Thank you, {name.split(" ")[0] || "friend"}. A confirmation has been sent to {email}.
              </p>
              <p style={{ fontFamily: "Inter, sans-serif", fontSize: 13, color: `${palette.muted}99`, margin: "0 auto", maxWidth: 380 }}>
                {fmtDate(date)} at {fmt12(time)} · {selectedType?.name}
              </p>
            </div>
          )}
        </div>

        {/* Footer */}
        {step < 4 && (
          <div className="modal-footer" style={{
            padding: "18px 28px", borderTop: `1px solid ${palette.cedar}1A`,
            display: "flex", justifyContent: "space-between", alignItems: "center",
            background: palette.cream,
          }}>
            <button onClick={() => step > 0 ? setStep(step - 1) : onClose()} style={{
              background: "transparent", border: "none", cursor: "pointer",
              fontFamily: "Inter, sans-serif", fontSize: 14, color: "var(--muted)", padding: "8px 12px",
            }}>
              {step === 0 ? "Cancel" : "← Back"}
            </button>
            <Button
              onClick={step === 3 ? handleSubmit : () => canNext && setStep(step + 1)}
              style={{ opacity: canNext ? 1 : 0.4, cursor: canNext ? "pointer" : "not-allowed", padding: "12px 22px", fontSize: 14 }}
            >
              {submitting ? "Booking…" : step === 3 ? "Confirm booking" : "Continue"}
              {!submitting && <span aria-hidden="true"> →</span>}
            </Button>
          </div>
        )}
        {step === 4 && (
          <div style={{ padding: "18px 28px", borderTop: `1px solid ${palette.cedar}1A`, textAlign: "center" }}>
            <Button variant="ghost" onClick={onClose}>Close</Button>
          </div>
        )}
      </div>
    </div>
  );
}

function Row({ k, v }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", gap: 24, padding: "6px 0", borderBottom: "1px dashed rgba(47,74,61,0.12)" }}>
      <span style={{ color: "var(--muted)" }}>{k}</span>
      <span style={{ color: "var(--ink)", textAlign: "right" }}>{v}</span>
    </div>
  );
}

function Field({ label, value, onChange, palette, placeholder, type = "text", textarea }) {
  const C = textarea ? "textarea" : "input";
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <span style={{ fontFamily: "Inter, sans-serif", fontSize: 12, letterSpacing: "0.06em", color: palette.clay, textTransform: "uppercase" }}>
        {label}
      </span>
      <C
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        rows={textarea ? 3 : undefined}
        style={{
          fontFamily: "Inter, sans-serif", fontSize: 15,
          padding: "12px 14px", borderRadius: 12,
          border: `1px solid ${palette.cedar}33`,
          background: palette.cream, color: "var(--ink)",
          outline: "none",
          resize: textarea ? "vertical" : "none",
        }}
        onFocus={(e) => e.target.style.borderColor = palette.cedar}
        onBlur={(e) => e.target.style.borderColor = `${palette.cedar}33`}
      />
    </label>
  );
}

// ── App ─────────────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const palette = PALETTES[t.palette] || PALETTES.cedar;
  const [booking, setBooking] = useState({ open: false, service: null });

  const openBooking = (svc) => setBooking({ open: true, service: typeof svc === "string" ? svc : null });
  const closeBooking = () => setBooking({ open: false, service: null });

  useEffect(() => {
    const root = document.documentElement;
    Object.entries(palette).forEach(([k, v]) => root.style.setProperty(`--${k}`, v));
    root.style.setProperty("--heading-font", t.headingFont);
  }, [palette, t.headingFont]);

  return (
    <div style={{
      background: palette.cream, color: palette.ink,
      fontFamily: "Inter, sans-serif",
      minHeight: "100vh",
    }}>
      <Nav palette={palette} onBook={openBooking} />
      <Hero palette={palette} onBook={openBooking} onExpect={() => {
        const el = document.getElementById("expect");
        if (el) window.scrollTo({ top: el.offsetTop - 72, behavior: "smooth" });
      }} />
      <Intro palette={palette} />
      <Services palette={palette} showIntroOffer={t.showIntroOffer} onBook={openBooking} />
      <Supports palette={palette} />
      <Expect palette={palette} />
      <About palette={palette} />
      <FAQ palette={palette} onBook={openBooking} />
      <Footer palette={palette} />

      <BookingModal
        open={booking.open}
        onClose={closeBooking}
        palette={palette}
      />

      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakRadio
          label="Tone"
          value={t.palette}
          options={["cedar", "lake", "dusk"]}
          onChange={(v) => setTweak("palette", v)}
        />
        <TweakSection label="Type" />
        <TweakSelect
          label="Heading"
          value={t.headingFont}
          options={["Fraunces", "Cormorant Garamond", "DM Serif Display"]}
          onChange={(v) => setTweak("headingFont", v)}
        />
        <TweakSection label="Content" />
        <TweakToggle
          label="Show intro offer"
          value={t.showIntroOffer}
          onChange={(v) => setTweak("showIntroOffer", v)}
        />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
