// Nav + Hero
const { useState: useState_h, useEffect: useEffect_h } = React;

function Nav({ active, onNav }) {
  const [scrolled, setScrolled] = useState_h(false);
  const [open, setOpen] = useState_h(false);
  useEffect_h(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    { id: "home", label: "Home" },
    { id: "about", label: "About" },
    { id: "services", label: "CBT" },
    { id: "process", label: "How It Works" },
    { id: "fees", label: "Fees" },
    { id: "faq", label: "FAQ" },
    { id: "contact", label: "Contact" },
  ];
  return (
    <div className={`nav-wrap ${scrolled ? "scrolled" : ""}`}>
      <div className="wrap-wide nav-inner">
        <Logo />
        <nav className="nav-links hide-mobile" aria-label="Primary">
          {links.map(l => (
            <a
              key={l.id}
              href={`#${l.id}`}
              className={`nav-link ${active === l.id ? "active" : ""}`}
              onClick={(e) => { e.preventDefault(); onNav(l.id); }}
            >{l.label}</a>
          ))}
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <button
            className="btn btn-primary hide-mobile"
            onClick={() => onNav("booking")}
            style={{ padding: "14px 22px 14px 20px" }}
          >
            <span className="btn-icon-l"><Icon name="calendar" size={16}/></span>
            Book Appointment
          </button>
          <button
            className="hide-mobile-not"
            onClick={() => setOpen(!open)}
            aria-label="Menu"
            style={{
              display: window.innerWidth <= 860 ? "grid" : "none",
              placeItems: "center", width: 44, height: 44, borderRadius: 12,
              background: "var(--purple-50)", color: "var(--purple-deep)", border: 0,
            }}
          ><Icon name={open ? "close" : "menu"} size={22}/></button>
        </div>
      </div>
      {open && (
        <div className="wrap" style={{ marginTop: 14 }}>
          <div className="card" style={{ display: "flex", flexDirection: "column", gap: 4, padding: 16 }}>
            {links.map(l => (
              <a key={l.id} href={`#${l.id}`} className="nav-link"
                 onClick={(e) => { e.preventDefault(); onNav(l.id); setOpen(false); }}>{l.label}</a>
            ))}
            <button className="btn btn-primary" style={{ marginTop: 8 }}
              onClick={() => { onNav("booking"); setOpen(false); }}>
              <span className="btn-icon-l"><Icon name="calendar" size={16}/></span>
              Book Appointment
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

function Hero({ onCTA }) {
  return (
    <section id="home" className="hero" data-screen-label="01 Hero">
      {/* decorative blobs */}
      <div className="blob blob-coral" style={{ width: 320, height: 320, top: -80, right: -60, opacity: .55 }}/>
      <div className="blob blob-yellow" style={{ width: 280, height: 280, top: 220, left: -120, opacity: .5 }}/>
      <div className="blob blob-teal" style={{ width: 220, height: 220, bottom: 80, right: 40, opacity: .35 }}/>

      <SparkleDoodle style={{ top: 80, left: "44%" }}/>
      <HeartDoodle style={{ top: 200, right: "8%", transform: "rotate(14deg)" }}/>
      <SwirlDoodle style={{ bottom: 180, left: "8%" }} color="#A88BFF"/>

      <div className="wrap-wide" style={{ position: "relative", zIndex: 2 }}>
        <div className="hero-grid">
          {/* LEFT */}
          <div>
            <div className="eyebrow" style={{ marginBottom: 26 }}>
              BABCP-accredited · English &amp; Cantonese
              <HeartDoodle style={{ position: "relative", marginLeft: 4, transform: "rotate(8deg)", display: "inline-block" }}/>
            </div>
            <h1 className="h-hero">
              Evidence-Based CBT<br/>
              for Anxiety, Burnout<br/>
              &amp; <span className="script">Confidence.</span>
            </h1>
            <p className="lede" style={{ marginTop: 28, maxWidth: 480 }}>
              Compassionate, structured therapy with Dr. Amelia Hartwell at Lumina Mind Studio — helping you understand your patterns, break unhelpful cycles, and move steadily toward your goals.
            </p>
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 32, alignItems: "center" }}>
              <button className="btn btn-primary" onClick={() => onCTA("booking")}>
                <span className="btn-icon-l"><Icon name="calendar" size={16}/></span>
                Book an Appointment
                <span className="btn-icon-r"><Icon name="arrow-right" size={14}/></span>
              </button>
              <button className="btn btn-secondary" onClick={() => onCTA("services")}>
                Learn About CBT
                <Icon name="arrow-up-right" size={16}/>
              </button>
            </div>

            <div style={{ display: "flex", alignItems: "center", gap: 22, marginTop: 36, flexWrap: "wrap" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span style={{
                  width: 44, height: 44, borderRadius: 12,
                  background: "var(--teal-50)", color: "var(--teal)",
                  display: "grid", placeItems: "center",
                }}><Icon name="shield" size={20}/></span>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 800, color: "var(--ink)" }}>BABCP Accredited</div>
                  <div style={{ fontSize: 11.5, color: "var(--ink-mute)", fontWeight: 600 }}>Gold-standard CBT</div>
                </div>
              </div>
              <span style={{ width: 1, height: 36, background: "var(--line)" }}></span>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span style={{
                  width: 44, height: 44, borderRadius: 12,
                  background: "var(--coral-50)", color: "var(--coral)",
                  display: "grid", placeItems: "center",
                }}><Icon name="globe" size={20}/></span>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 800, color: "var(--ink)" }}>English &amp; Cantonese</div>
                  <div style={{ fontSize: 11.5, color: "var(--ink-mute)", fontWeight: 600 }}>粵語廣東話治療</div>
                </div>
              </div>
            </div>
          </div>

          {/* RIGHT */}
          <div className="hero-media">
            <div className="hero-photo-frame float">
              <image-slot
                id="hero-office"
                shape="rounded"
                radius="44"
                src="assets/dr-hartwell.png"
                placeholder="Drop a photo of your therapy office"
              ></image-slot>

              {/* floating mini-card top-right */}
              <div className="hero-mini-card card glass float-2" style={{
                position: "absolute", top: -24, right: -24, padding: "14px 18px",
                display: "flex", alignItems: "center", gap: 12, borderRadius: 18,
                whiteSpace: "nowrap",
              }}>
                <div style={{ width: 36, height: 36, borderRadius: 12, background: "var(--teal-50)", color: "var(--teal)", display: "grid", placeItems: "center" }}>
                  <Icon name="video" size={18}/>
                </div>
                <div>
                  <div style={{ fontSize: 12.5, fontWeight: 700 }}>Online + In-Person</div>
                  <div style={{ fontSize: 11, color: "var(--ink-mute)", fontWeight: 600 }}>50-min sessions</div>
                </div>
              </div>

              {/* yellow tag bottom-right */}
              <div className="hero-yellow-tag float" style={{
                position: "absolute", right: -16, bottom: 88,
                background: "var(--yellow)", borderRadius: 18, padding: "12px 16px",
                fontFamily: "var(--ff-script)", fontSize: 22, lineHeight: 1.05, color: "var(--ink)",
                boxShadow: "0 18px 36px -10px rgba(255,210,94,.7)",
                transform: "rotate(6deg)", maxWidth: 170, textAlign: "center"
              }}>
                progress, not perfection ♡
              </div>

              <div className="hero-badge">
                You don't have to do this alone.
              </div>
            </div>

            {/* hero stats below */}
            <div className="hero-stats">
              <div className="hero-stat"><b className="accent-purple">£110</b><span>50-min session</span></div>
              <div className="hero-stat"><b className="accent-teal">12+</b><span>Insurers covered</span></div>
              <div className="hero-stat"><b className="accent-coral">W8</b><span>Kensington</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustStrip() {
  const items = [
    { ico: "shield", label: "BABCP-Accredited CBT" },
    { ico: "globe", label: "English & Cantonese" },
    { ico: "video", label: "Online or In-Person" },
    { ico: "lock", label: "Fully Confidential" },
  ];
  return (
    <div className="wrap-wide" style={{ marginTop: 72, position: "relative", zIndex: 3 }}>
      <div className="trust-strip">
        <SwirlDoodle style={{ top: 18, left: 24, opacity: .25 }} color="#FFD25E"/>
        <div style={{ display: "flex", gap: 32, flexWrap: "wrap", flex: 1 }}>
          {items.map(i => (
            <div key={i.label} className="trust-item">
              <span className="ti-ico"><Icon name={i.ico} size={18}/></span>
              <span>{i.label}</span>
            </div>
          ))}
        </div>
        <div className="trust-script">You're one step closer<br/>to feeling better.</div>
      </div>
    </div>
  );
}

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