// Sonq'o Wasi — SPA app

const { useState, useEffect, useMemo, useRef } = React;

// ── Assets ────────────────────────────────────────────────────────
const EMBLEM = "media/emblem.png";
const SPACE = (n) => "media/space/p" + String(n).padStart(2, "0") + ".jpg";

// Curated atmospheric photos of the house — every slot is a UNIQUE photo (no repeats site-wide)
const PHOTOS = {
  homeStrip: 11,
  homeBand: 25,
  events: [41, 46, 51],        // home event posters
  houseOrigin: 43,
  houseGallery: [4, 73, 79],
  weddings: [0, 82],
  posts: [6, 13, 30, 76],      // journal covers
};

// Therapist portrait → cropped from each person's composite card, matched by Instagram handle
const FACE_BY_HANDLE = {
  "@natashallerena": 0, "@somosnossacasa": 1, "@niceemariejourdan": 2,
  "@marianaguimaraes_alquimias": 3, "@sabrinaramosalquimia": 4, "@marinaalmeidamayan": 5,
  "@lucianaportellaterapeuta": 6, "@liviapaesbemestar": 7, "@ecodelica_art": 8,
  "@andreelkind": 10, "@alcirblondet": 11, "@fala.mohana": 12,
  "@alexandraflaviodoutoraufrj": 13, "@frpassarelli": 14, "@du.alecrim": 15,
  "@eu.fernandatelles": 16, "@ginecologianatural": 17, "@bebelclark": 18,
  "@caroljourdan.essencial": 19,
};
const FACE = (h) => h in FACE_BY_HANDLE
  ? "media/faces/f" + String(FACE_BY_HANDLE[h]).padStart(2, "0") + ".jpg"
  : null;

// Therapist filter categories + tags (by handle)
const CATEGORIES = [
  { key: "all",      label: { pt: "Todos", es: "Todas", en: "All" } },
  { key: "corpo",    label: { pt: "Corpo & Movimento", es: "Cuerpo & Movimiento", en: "Body & Movement" } },
  { key: "som",      label: { pt: "Som & Voz", es: "Sonido & Voz", en: "Sound & Voice" } },
  { key: "feminino", label: { pt: "Feminino", es: "Femenino", en: "Feminine" } },
  { key: "alquimia", label: { pt: "Alquimia & Ervas", es: "Alquimia & Hierbas", en: "Alchemy & Herbs" } },
  { key: "ritual",   label: { pt: "Rituais & Medicinas", es: "Rituales & Medicinas", en: "Ritual & Medicine" } },
  { key: "energia",  label: { pt: "Energia & Oráculos", es: "Energía & Oráculos", en: "Energy & Oracles" } },
  { key: "mente",    label: { pt: "Mente & Espírito", es: "Mente & Espíritu", en: "Mind & Spirit" } },
  { key: "casa",     label: { pt: "Casa & Espaço", es: "Casa & Espacio", en: "Home & Space" } },
];
const TAGS_BY_HANDLE = {
  "@somosnossacasa": ["casa"],
  "@natashallerena": ["som"],
  "@sabrinaramosalquimia": ["alquimia"],
  "@niceemariejourdan": ["energia", "mente"],
  "@marianaguimaraes_alquimias": ["alquimia"],
  "@marinaalmeidamayan": ["feminino", "ritual"],
  "@ecodelica_art": ["energia", "ritual"],
  "@lucianaportellaterapeuta": ["som", "feminino", "ritual"],
  "@liviapaesbemestar": ["corpo"],
  "@andreelkind": ["mente"],
  "@alexandraflaviodoutoraufrj": ["mente", "ritual"],
  "@alcirblondet": ["ritual", "corpo", "alquimia"],
  "@fala.mohana": ["corpo"],
  "@eu.fernandatelles": ["corpo", "feminino", "alquimia"],
  "@frpassarelli": ["energia"],
  "@du.alecrim": ["alquimia", "feminino", "energia"],
  "@caroljourdan.essencial": ["feminino", "corpo"],
  "@ginecologianatural": ["feminino"],
  "@bebelclark": ["feminino", "energia", "mente"],
};

// ── Hooks ─────────────────────────────────────────────────────────
function useHashRoute() {
  const [route, setRoute] = useState(() => (window.location.hash.replace("#/", "") || "home"));
  useEffect(() => {
    const handler = () => {
      const next = window.location.hash.replace("#/", "") || "home";
      setRoute(next);
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", handler);
    return () => window.removeEventListener("hashchange", handler);
  }, []);
  return [route, (r) => { window.location.hash = "#/" + r; }];
}

function useLang() {
  const [lang, setLang] = useState(() => localStorage.getItem("sonqo_lang") || "pt");
  useEffect(() => {
    localStorage.setItem("sonqo_lang", lang);
    document.documentElement.lang = lang;
  }, [lang]);
  return [lang, setLang];
}

// ── Atoms ─────────────────────────────────────────────────────────
function Glyph({ size = 24 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <circle cx="12" cy="12" r="6" stroke="currentColor" strokeWidth="0.8" />
      <circle cx="12" cy="12" r="11" stroke="currentColor" strokeWidth="0.5" strokeDasharray="1 3" />
      <path d="M12 2 L12.6 6 L17 5.5 L13.6 8.5 L17 11.5 L12.6 11 L12 15 L11.4 11 L7 11.5 L10.4 8.5 L7 5.5 L11.4 6 Z" fill="currentColor" opacity="0.5" />
    </svg>
  );
}

function Arrow({ size = 14 }) {
  return (
    <svg className="arrow" width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M2 8 L13 8 M9 4 L13 8 L9 12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function WhatsAppIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm5.8 14.13c-.24.68-1.42 1.32-1.96 1.36-.5.04-.98.22-3.3-.69-2.78-1.1-4.55-3.95-4.69-4.13-.14-.18-1.12-1.49-1.12-2.85 0-1.36.71-2.02.97-2.3.24-.26.53-.32.71-.32.18 0 .35 0 .51.01.16.01.39-.06.61.47.24.55.79 1.91.86 2.05.07.14.12.3.02.48-.1.18-.14.29-.28.45-.14.16-.3.36-.42.48-.14.14-.29.29-.12.57.18.28.78 1.29 1.68 2.09 1.15 1.03 2.12 1.35 2.4 1.49.28.14.45.12.61-.07.18-.21.71-.83.9-1.11.18-.28.37-.23.61-.14.24.09 1.55.73 1.81.86.27.14.45.21.51.32.06.11.06.64-.18 1.32Z" />
    </svg>
  );
}
function InstagramIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true">
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="3.6" />
      <circle cx="17.4" cy="6.6" r="1.1" fill="currentColor" stroke="none" />
    </svg>
  );
}

// Ornamental ring echoing the ouroboros of the identity mark
function SerpentRing({ className }) {
  const ticks = Array.from({ length: 72 }, (_, i) => {
    const a = (i / 72) * Math.PI * 2;
    const r2 = i % 6 === 0 ? 80 : 85;
    return (
      <line key={i}
        x1={100 + 89 * Math.cos(a)} y1={100 + 89 * Math.sin(a)}
        x2={100 + r2 * Math.cos(a)} y2={100 + r2 * Math.sin(a)}
        stroke="currentColor" strokeWidth="0.7" />
    );
  });
  return (
    <svg className={className} viewBox="0 0 200 200" fill="none" aria-hidden="true">
      <circle cx="100" cy="100" r="97" stroke="currentColor" strokeWidth="0.5" />
      <circle cx="100" cy="100" r="76" stroke="currentColor" strokeWidth="0.5" strokeDasharray="1 5" />
      {ticks}
    </svg>
  );
}

function Nav({ route, go, lang, setLang }) {
  const t = window.SONQO_I18N[lang];
  const [open, setOpen] = useState(false);
  const items = [
    ["home", t.nav.home],
    ["house", t.nav.house],
    ["manifesto", t.nav.manifesto],
    ["therapists", t.nav.therapists],
    ["events", t.nav.events],
    ["weddings", t.nav.weddings],
    ["join", t.nav.join],
    ["journal", t.nav.journal],
    ["contact", t.nav.contact],
    ["directions", t.nav.directions],
  ];
  // Início lives on the emblem (click → home). Seja Associado stays in the mobile
  // menu + footer; the desktop bar carries a lean 3-left / 4-right split.
  const link = ([key, label]) => (
    <a key={key} href={"#/" + key} className={route === key ? "active" : ""} onClick={() => setOpen(false)}>{label}</a>
  );
  const left = [items[1], items[2], items[3], items[4]]; // A Casa · Manifesto · Terapeutas · Eventos
  const right = [items[5], items[7], items[8], items[9]]; // Casamentos · Diário · Contato · Como Chegar
  return (
    <nav className={"nav nav-centered " + (open ? "nav-mobile-open" : "")}>
      <div className="wrap nav-inner">
        <button className="menu-btn" onClick={() => setOpen(!open)}>
          <span>{open ? "×" : "☰"}</span> {open ? "" : "Menu"}
        </button>
        <div className="nav-side nav-left">{left.map(link)}</div>
        <div className="brand" onClick={() => { go("home"); setOpen(false); }}>
          <img className="brand-emblem" src={EMBLEM} alt="" />
          <div className="brand-text">
            <div className="brand-name">Sonq'<em>o</em> Wasi</div>
            <div className="brand-sub">Espaço de Rezo, Arte &amp; Estudo</div>
          </div>
        </div>
        <div className="nav-side nav-right">{right.map(link)}</div>
        <div className="lang-switch">
          <button className={lang === "pt" ? "active" : ""} onClick={() => setLang("pt")}>PT</button>
          <span className="sep">/</span>
          <button className={lang === "es" ? "active" : ""} onClick={() => setLang("es")}>ES</button>
          <span className="sep">/</span>
          <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
        </div>
        <div className="nav-links">{items.map(link)}</div>
      </div>
    </nav>
  );
}

function PageHero({ crumb, scriptText, serifText, lede, lang }) {
  const t = window.SONQO_I18N[lang];
  return (
    <section className="page-hero">
      <div className="wrap">
        <div className="crumbs">
          <a href="#/home">Sonq'o Wasi</a><span className="sep">/</span><span>{crumb}</span>
        </div>
        <h1>
          <span className="script-line">{scriptText}</span>
          {serifText}
        </h1>
        {lede && <p className="lede">{lede}</p>}
      </div>
    </section>
  );
}

// ── Pages ─────────────────────────────────────────────────────────

function HomePage({ go, lang }) {
  const t = window.SONQO_I18N[lang];
  const events = window.SONQO_EVENTS.slice(0, 3);
  return (
    <main>
      <section className="hero" data-screen-label="01 Home">
        <div className="wrap hero-grid">
          <div>
            <div className="eyebrow wine">{t.home.meta1}</div>
            <h1 className="hero-title" style={{ marginTop: 18 }}>
              <span className="script">{t.home.script}</span>
              <span className="serif-name">{t.home.serif}</span>
            </h1>
            <p className="hero-kicker">{t.home.hero_tagline}</p>
            <p className="hero-sub">{t.home.sub}</p>
            <div className="hero-meta">
              <span>{t.home.meta2}</span>
              <span>{t.home.meta3}</span>
            </div>
            <div className="hero-cta">
              <a className="btn btn-wine" href="#/events">{t.home.cta_primary} <Arrow /></a>
              <a className="btn btn-ghost-light" href="#/therapists">{t.home.cta_secondary}</a>
            </div>
          </div>
          <div className="hero-emblem-wrap">
            <SerpentRing className="hero-ring" />
            <SerpentRing className="hero-ring inner" />
            <img className="hero-emblem" src={EMBLEM} alt="Coração que se transforma em casa — símbolo de Sonq'o Wasi" loading="eager" />
          </div>
        </div>
      </section>

      <section style={{ paddingTop: 40 }}>
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="num">01 / {t.home.pillars_eyebrow}</div>
              <h2>{t.home.pillars_title}</h2>
            </div>
            <p className="lede">{t.home.pillars_lede}</p>
          </div>
          <div className="pillars">
            <div className="pillar">
              <div className="pillar-glyph">i</div>
              <h3>{t.home.pillar1_t}</h3>
              <p>{t.home.pillar1_d}</p>
              <a href="#/therapists" className="event-link">{t.common.learn_more} <Arrow /></a>
            </div>
            <div className="pillar">
              <div className="pillar-glyph">ii</div>
              <h3>{t.home.pillar2_t}</h3>
              <p>{t.home.pillar2_d}</p>
              <a href="#/events" className="event-link">{t.common.learn_more} <Arrow /></a>
            </div>
            <div className="pillar">
              <div className="pillar-glyph">iii</div>
              <h3>{t.home.pillar3_t}</h3>
              <p>{t.home.pillar3_d}</p>
              <a href="#/journal" className="event-link">{t.common.learn_more} <Arrow /></a>
            </div>
          </div>
        </div>
      </section>

      <section className="about-strip">
        <div className="wrap about-strip-grid">
          <div className="about-strip-image"><img src={SPACE(PHOTOS.homeStrip)} alt="Altar à luz de velas em Sonq'o Wasi" loading="lazy" /></div>
          <div>
            <div className="eyebrow wine">02 / {t.home.house_eyebrow}</div>
            <h2 style={{ marginTop: 14 }}>
              {t.home.house_title_a}<br />
              <span className="script-inline">{t.home.house_title_script}</span>
            </h2>
            <p style={{ marginTop: 28, fontSize: 19, color: "var(--green)" }}>{t.home.house_p1}</p>
            <p style={{ marginTop: 18, fontSize: 19, color: "var(--green)" }}>{t.home.house_p2}</p>
            <a className="btn btn-ghost" href="#/house" style={{ marginTop: 32 }}>{t.home.house_cta} <Arrow /></a>
          </div>
        </div>
      </section>

      <section>
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="num">03 / {t.home.events_eyebrow}</div>
              <h2>{t.home.events_title}</h2>
            </div>
            <p className="lede">{t.home.events_lede}</p>
          </div>
          <div className="events-grid">
            {events.map((ev, i) => (
              <a key={i} className="event-card" href="#/events">
                <div className="event-poster">
                  <img src={SPACE(PHOTOS.events[i % PHOTOS.events.length])} alt="" loading="lazy" />
                  <span className="poster-tag">{ev.tag[lang]}</span>
                </div>
                <div className="event-meta">
                  <span>{ev.date.day} {ev.date.month[lang]}</span>
                  <span>{ev.time}</span>
                </div>
                <h3 className="event-title">{ev.title[lang]}</h3>
                <p className="event-desc">{ev.desc[lang]}</p>
                <span className="event-link">{ev.by} · {t.events.ig_link} <Arrow /></span>
              </a>
            ))}
          </div>
          <div style={{ textAlign: "center", marginTop: 56 }}>
            <a className="btn btn-wine" href="#/events">{t.common.see_all} <Arrow /></a>
          </div>
        </div>
      </section>

      <section className="band">
        <img src={SPACE(PHOTOS.homeBand)} alt="Roda à luz de velas em Sonq'o Wasi" loading="lazy" />
        <div className="band-inner">
          <span className="script">{t.home.script} {t.home.serif}</span>
          <p>{t.home.band_tagline}</p>
        </div>
      </section>
    </main>
  );
}

function HousePage({ lang }) {
  const t = window.SONQO_I18N[lang].house;
  const tc = window.SONQO_I18N[lang];
  return (
    <main data-screen-label="02 House">
      <PageHero crumb={t.crumb} scriptText={t.title_script} serifText={t.title_serif} lede={t.lede} lang={lang} />

      <section>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div className="about-strip-image" style={{ aspectRatio: "3/4" }}><img src={SPACE(PHOTOS.houseOrigin)} alt="Interior da casa à luz de velas" loading="lazy" /></div>
          <div>
            <div className="eyebrow wine">{t.origin_eyebrow}</div>
            <h2 style={{ marginTop: 14 }}>
              {t.origin_title_a}<br />
              <span style={{ fontFamily: "var(--f-script)", color: "var(--wine)", fontWeight: 400, fontSize: "1.25em" }}>{t.origin_title_script}</span>
            </h2>
            <p style={{ marginTop: 28, fontSize: 19 }}>{t.origin_body_1}</p>
            <p style={{ marginTop: 18, fontSize: 19 }}>{t.origin_body_2}</p>
            <p style={{ marginTop: 18, fontSize: 19 }}>{t.origin_body_3}</p>
            <p className="tagline-accent">{t.accent_tagline}</p>
          </div>
        </div>
      </section>

      <section style={{ background: "var(--cream)" }}>
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="num">{t.principles_eyebrow}</div>
              <h2>{t.principles_title}</h2>
            </div>
          </div>
          <div className="pillars" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
            {[
              [t.p1_t, t.p1_d], [t.p2_t, t.p2_d], [t.p3_t, t.p3_d], [t.p4_t, t.p4_d]
            ].map(([title, body], i) => (
              <div className="pillar" key={i} style={{ minHeight: 240 }}>
                <div className="pillar-glyph" style={{ fontSize: 14 }}>{["I","II","III","IV"][i]}</div>
                <h3 style={{ fontSize: 22 }}>{title}</h3>
                <p>{body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {PHOTOS.houseGallery.map((n, i) => (
            <div key={i} className="hero-image" style={{ aspectRatio: "1/1" }}>
              <img src={SPACE(n)} alt="" loading="lazy" />
            </div>
          ))}
        </div>
      </section>

      <section style={{ background: "var(--green-deep)", color: "var(--cream)" }}>
        <div className="wrap" style={{ textAlign: "center" }}>
          <div className="eyebrow" style={{ color: "var(--bordo)" }}>{t.visit_eyebrow}</div>
          <h2 style={{ marginTop: 18, color: "var(--cream)", fontSize: "clamp(36px, 5vw, 64px)" }}>{t.visit_title}</h2>
          <p style={{ marginTop: 24, fontSize: 19, opacity: 0.85, maxWidth: 600, marginLeft: "auto", marginRight: "auto" }}>{t.visit_lede}</p>
          <a className="btn btn-wine" href="#/contact" style={{ marginTop: 36 }}>{tc.common.get_in_touch} <Arrow /></a>
        </div>
      </section>
    </main>
  );
}

function ManifestoPage({ lang }) {
  const t = window.SONQO_I18N[lang];
  const m = window.SONQO_MANIFESTO[lang];
  return (
    <main data-screen-label="02b Manifesto">
      <PageHero crumb={m.eyebrow} scriptText={m.title_script} serifText={m.title_serif} lang={lang} />
      <section className="manifesto">
        <div className="wrap">
          <div className="manifesto-inner">
            <div className="divider-orn">✦</div>
            {m.body.map((b, i) => {
              if (b.kind === "lead") return <p key={i} className="lead">{b.text}</p>;
              if (b.kind === "verse") return (
                <div key={i} className="manifesto-verse">
                  {b.lines.map((l, j) => <span key={j}>{l}</span>)}
                </div>
              );
              if (b.kind === "closing") return (
                <div key={i} className="manifesto-closing">
                  {b.lines.map((l, j) => <span key={j}>{l}</span>)}
                </div>
              );
              return <p key={i}>{b.text}</p>;
            })}
          </div>
        </div>
      </section>
      <section style={{ background: "var(--green-deep)", color: "var(--cream)" }}>
        <div className="wrap" style={{ textAlign: "center" }}>
          <h2 style={{ color: "var(--cream)", fontSize: "clamp(32px, 4vw, 48px)" }}>
            {lang === "pt" && "Caminhe conosco"}
            {lang === "es" && "Camina con nosotras"}
            {lang === "en" && "Walk with us"}
          </h2>
          <a className="btn btn-wine" href="#/join" style={{ marginTop: 28 }}>{t.nav.join} <Arrow /></a>
        </div>
      </section>
    </main>
  );
}

function TherapistsPage({ lang }) {
  const t = window.SONQO_I18N[lang].therapists;
  const tc = window.SONQO_I18N[lang];
  const list = window.SONQO_THERAPISTS;
  const [filter, setFilter] = useState("all");

  // only show category chips that actually have someone
  const cats = CATEGORIES.filter(c => c.key === "all" ||
    list.some(th => (TAGS_BY_HANDLE[th.handle] || []).includes(c.key)));
  const shown = list.filter(th => filter === "all" ||
    (TAGS_BY_HANDLE[th.handle] || []).includes(filter));
  const countLabel = {
    pt: shown.length + (shown.length === 1 ? " terapeuta" : " terapeutas"),
    es: shown.length + (shown.length === 1 ? " terapeuta" : " terapeutas"),
    en: shown.length + (shown.length === 1 ? " practitioner" : " practitioners"),
  }[lang];

  return (
    <main data-screen-label="03 Therapists">
      <PageHero crumb={t.crumb} scriptText={t.title_script} serifText={t.title_serif} lede={t.lede} lang={lang} />
      <section>
        <div className="wrap">
          <div className="t-filter">
            {cats.map(c => (
              <button key={c.key}
                className={"t-chip" + (filter === c.key ? " active" : "")}
                onClick={() => setFilter(c.key)}>
                {c.label[lang]}
              </button>
            ))}
          </div>
          <p className="t-filter-count">{countLabel}</p>
          <div className="therapists-grid">
            {shown.map((th, i) => {
              const phoneDigits = th.phone.replace(/\D/g, "");
              const igHandle = th.handle.replace("@", "");
              const initials = th.name.split(" ").map(n => n[0]).slice(0,2).join("");
              const photo = th.photo || FACE(th.handle);
              return (
                <article key={i} className="t-card">
                  <div className="t-card-photo">
                    {photo
                      ? <img src={photo} alt={"Retrato de " + th.name} loading="lazy" />
                      : <div className="photo-initials">{initials}</div>}
                  </div>
                  <div className="t-card-body">
                    <h3 className="t-card-name">{th.name}</h3>
                    <ul className="t-card-services">
                      {th.services[lang].map((s, j) => <li key={j}>{s}</li>)}
                    </ul>
                    <div className="t-card-contact">
                      <a className="tc-btn tc-wa" href={"https://wa.me/55" + phoneDigits} target="_blank" rel="noopener">
                        <WhatsAppIcon /> {tc.common.whatsapp}
                      </a>
                      <a className="tc-btn tc-ig" href={"https://instagram.com/" + igHandle} target="_blank" rel="noopener" aria-label={"Instagram " + th.handle}>
                        <InstagramIcon /> {tc.common.instagram}
                      </a>
                    </div>
                  </div>
                </article>
              );
            })}
          </div>
        </div>
      </section>
    </main>
  );
}

function EventsPage({ lang }) {
  const t = window.SONQO_I18N[lang].events;
  const tc = window.SONQO_I18N[lang];
  const events = window.SONQO_EVENTS;
  const agenda = window.SONQO_AGENDA || [];
  const ig = (window.SONQO_IG || []).slice(0, 8);
  const igLabel = { pt: "Últimas do Instagram", es: "Lo último de Instagram", en: "Latest from Instagram" }[lang];
  const agendaTitle = { pt: "Agenda 2026", es: "Agenda 2026", en: "2026 calendar" }[lang];
  const agendaEyebrow = { pt: "Calendário do ano", es: "Calendario del año", en: "Year calendar" }[lang];
  const agendaLede = {
    pt: "Os encontros fixos da casa ao longo de 2026. As datas mensais exatas são confirmadas a cada mês no Instagram.",
    es: "Los encuentros fijos de la casa a lo largo de 2026. Las fechas mensuales exactas se confirman cada mes en Instagram.",
    en: "The house's recurring gatherings through 2026. Exact monthly dates are confirmed each month on Instagram.",
  }[lang];
  return (
    <main data-screen-label="04 Events">
      <PageHero crumb={t.crumb} scriptText={t.title_script} serifText={t.title_serif} lede={t.lede} lang={lang} />

      <section style={{ paddingBottom: 0 }}>
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="num">{t.cal_eyebrow}</div>
              <h2>{t.cal_title}</h2>
            </div>
            <p className="lede">{t.ig_handle_label}</p>
          </div>
          <div className="cal-list">
            {events.map((ev, i) => (
              <a key={i} className="cal-row" href="https://www.instagram.com/sonqowasi_/" target="_blank" rel="noopener">
                <div className="cal-date">
                  <span className="day">{ev.date.day}</span>
                  <span className="month">{ev.date.month[lang]}{ev.time ? " · " + ev.time : ""}</span>
                </div>
                <div className="cal-info">
                  <h3>{ev.title[lang]}</h3>
                  <div className="by"><span className="tag-pill" style={{ marginRight: 12 }}>{ev.tag[lang]}</span> com <em>{ev.by}</em></div>
                  <p style={{ marginTop: 10, color: "var(--green)" }}>{ev.desc[lang]}</p>
                </div>
                <div className="cal-cta">{t.ig_link} <Arrow /></div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section style={{ paddingTop: 24 }}>
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="num">{agendaEyebrow}</div>
              <h2>{agendaTitle}</h2>
            </div>
            <p className="lede">{agendaLede}</p>
          </div>
          <div className="agenda">
            {agenda.map((group, gi) => (
              <div key={gi} className="agenda-cat">
                <div className="agenda-cat-head">
                  <h3>{group.cat[lang]}</h3>
                  <span className="n">{group.items.length}</span>
                </div>
                {group.items.map((it, ii) => (
                  <div key={ii} className="agenda-row">
                    <div className="agenda-when">{it.w[lang]}</div>
                    <div>
                      <span className="agenda-title">{it.t}</span>
                      {it.note && <span className="agenda-note">{it.note[lang]}</span>}
                    </div>
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </section>

      {ig.length > 0 && (
        <section style={{ paddingTop: 0 }}>
          <div className="wrap">
            <div className="section-head">
              <div>
                <div className="num">Instagram</div>
                <h2>{igLabel}</h2>
              </div>
              <p className="lede">{t.ig_handle_label}</p>
            </div>
            <div className="ig-grid">
              {ig.map((post, i) => (
                <a key={i} className="ig-tile" href={post.permalink} target="_blank" rel="noopener">
                  <img src={post.image} alt="" loading="lazy" />
                  {post.caption && <span className="ig-cap">{post.caption.slice(0, 120)}</span>}
                </a>
              ))}
            </div>
          </div>
        </section>
      )}

      <section>
        <div className="wrap" style={{ background: "var(--cream)", padding: "64px 56px", borderRadius: 4, textAlign: "center" }}>
          <div className="eyebrow wine">{tc.common.instagram}</div>
          <h2 style={{ marginTop: 16 }}>@sonqowasi_</h2>
          <p style={{ marginTop: 18, fontSize: 18, maxWidth: 540, marginLeft: "auto", marginRight: "auto", color: "var(--green)" }}>
            {lang === "pt" && "Os eventos são atualizados primeiro pelo Instagram. Siga para receber lembretes e abrir as inscrições."}
            {lang === "es" && "Los eventos se actualizan primero en Instagram. Síguenos para recibir recordatorios y abrir las inscripciones."}
            {lang === "en" && "Events are updated first on Instagram. Follow to get reminders and open bookings."}
          </p>
          <a className="btn btn-wine" href="https://www.instagram.com/sonqowasi_/" target="_blank" rel="noopener" style={{ marginTop: 28 }}>{t.ig_cta} <Arrow /></a>
        </div>
      </section>
    </main>
  );
}

function WeddingsPage({ lang }) {
  const t = window.SONQO_I18N[lang].weddings;
  const tc = window.SONQO_I18N[lang];
  return (
    <main data-screen-label="05 Weddings">
      <div className="weddings-hero">
        <PageHero crumb={t.crumb} scriptText={t.title_script} serifText={t.title_serif} lede={t.lede} lang={lang} />
      </div>

      <section>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
          <div className="hero-image" style={{ aspectRatio: "1/1" }}><img src={SPACE(PHOTOS.weddings[0])} alt="" loading="lazy" /></div>
          <div className="hero-image" style={{ aspectRatio: "1/1" }}><img src={SPACE(PHOTOS.weddings[1])} alt="" loading="lazy" /></div>
        </div>
      </section>

      <section style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="num">{t.what_eyebrow}</div>
              <h2>{t.what_title}</h2>
            </div>
          </div>
          <div className="pillars" style={{ gridTemplateColumns: "repeat(2, 1fr)" }}>
            {[[t.i1_t, t.i1_d],[t.i2_t, t.i2_d],[t.i3_t, t.i3_d],[t.i4_t, t.i4_d]].map(([title, desc], i) => (
              <div className="pillar" key={i}>
                <div className="pillar-glyph">{["✦","◯","♪","❀"][i]}</div>
                <h3>{title}</h3>
                <p>{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: "var(--green-deep)", color: "var(--cream)" }}>
        <div className="wrap" style={{ textAlign: "center" }}>
          <div className="script" style={{ color: "var(--rose)", fontSize: "clamp(30px, 4vw, 46px)", marginBottom: 18 }}>{t.band_tagline}</div>
          <h2 style={{ color: "var(--cream)", fontSize: "clamp(36px, 5vw, 64px)" }}>{t.cta_t}</h2>
          <p style={{ marginTop: 20, fontSize: 19, opacity: 0.85, maxWidth: 540, marginLeft: "auto", marginRight: "auto" }}>{t.cta_d}</p>
          <a className="btn btn-wine" href="#/contact" style={{ marginTop: 32 }}>{tc.common.get_in_touch} <Arrow /></a>
        </div>
      </section>
    </main>
  );
}

function JoinPage({ lang }) {
  const t = window.SONQO_I18N[lang].join;
  return (
    <main data-screen-label="06 Join">
      <PageHero crumb={t.crumb} scriptText={t.title_script} serifText={t.title_serif} lede={t.lede} lang={lang} />
      <section>
        <div className="wrap">
          <div className="tracks">
            <div className="track">
              <span className="num-corner">i</span>
              <div className="eyebrow wine">{t.track1_label}</div>
              <h3>{t.track1_t}</h3>
              <p style={{ color: "var(--green)" }}>{t.track1_d}</p>
              <ul>
                <li>{t.track1_b1}</li>
                <li>{t.track1_b2}</li>
                <li>{t.track1_b3}</li>
                <li>{t.track1_b4}</li>
              </ul>
              <a className="btn btn-primary" href="#/contact">{t.track1_cta} <Arrow /></a>
            </div>
            <div className="track" style={{ background: "var(--paper-deep)" }}>
              <span className="num-corner">ii</span>
              <div className="eyebrow wine">{t.track2_label}</div>
              <h3>{t.track2_t}</h3>
              <p style={{ color: "var(--green)" }}>{t.track2_d}</p>
              <ul>
                <li>{t.track2_b1}</li>
                <li>{t.track2_b2}</li>
                <li>{t.track2_b3}</li>
                <li>{t.track2_b4}</li>
              </ul>
              <a className="btn btn-wine" href="#/contact">{t.track2_cta} <Arrow /></a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function JournalPage({ lang }) {
  const t = window.SONQO_I18N[lang].journal;
  const posts = window.SONQO_POSTS;
  return (
    <main data-screen-label="07 Journal">
      <PageHero crumb={t.crumb} scriptText={t.title_script} serifText={t.title_serif} lede={t.lede} lang={lang} />
      <section>
        <div className="wrap">
          <div className="posts-grid">
            {posts.map((p, i) => (
              <a key={i} className="post-card" href="#/journal">
                <div className="post-cover">
                  <img src={SPACE(PHOTOS.posts[i % PHOTOS.posts.length])} alt="" loading="lazy" />
                </div>
                <div className="post-meta">{p.tag[lang]} · {p.date[lang]}</div>
                <h3>{p.title[lang]}</h3>
                <p>{p.excerpt[lang]}</p>
                <div style={{ marginTop: 14, fontFamily: "var(--f-sans)", fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--wine)", fontWeight: 600 }}>{t.read}</div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

function ContactPage({ lang }) {
  const t = window.SONQO_I18N[lang].contact;
  const [sent, setSent] = useState(false);
  return (
    <main data-screen-label="08 Contact">
      <PageHero crumb={t.crumb} scriptText={t.title_script} serifText={t.title_serif} lede={t.lede} lang={lang} />
      <section>
        <div className="wrap">
          <div className="contact-split">
            <div>
              <div className="eyebrow wine">{t.direct_eyebrow}</div>
              <h2 style={{ marginTop: 14, marginBottom: 32 }}>{t.direct_title}</h2>
              <div>
                <div className="contact-line"><div className="key">{t.whatsapp_label}</div><div className="val"><a href="https://wa.me/552139503669">{t.whatsapp_value}</a></div></div>
                <div className="contact-line"><div className="key">{t.ig_label}</div><div className="val"><a href="https://www.instagram.com/sonqowasi_/" target="_blank" rel="noopener">{t.ig_value}</a></div></div>
                <div className="contact-line"><div className="key">{t.address_label}</div><div className="val" style={{ whiteSpace: "pre-line" }}>{t.address_value}</div></div>
                <div className="contact-line"><div className="key">{t.hours_label}</div><div className="val">{t.hours_value}</div></div>
              </div>
              <div className="map-frame" style={{ marginTop: 32 }}>
                <iframe src="https://www.openstreetmap.org/export/embed.html?bbox=-43.2401567%2C-22.9676663%2C-43.2331567%2C-22.9632663&layer=mapnik&marker=-22.9654663%2C-43.2366567" loading="lazy" title="Mapa — Sonq'o Wasi, R. Othon Bezerra de Melo 204, Jardim Botânico"></iframe>
              </div>
            </div>
            <div>
              <div className="eyebrow wine">{t.form_eyebrow}</div>
              <h2 style={{ marginTop: 14, marginBottom: 32 }}>{t.form_title}</h2>
              {sent ? (
                <div style={{ background: "var(--cream)", padding: 32, borderRadius: 4, textAlign: "center", fontFamily: "var(--f-display)", fontStyle: "italic", fontSize: 22, color: "var(--green-deep)" }}>{t.sent}</div>
              ) : (
                <form className="form-grid" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                  <div className="field"><label>{t.f_name}</label><input type="text" required /></div>
                  <div className="field"><label>{t.f_email}</label><input type="email" required /></div>
                  <div className="field"><label>{t.f_phone}</label><input type="tel" /></div>
                  <div className="field"><label>{t.f_subject}</label>
                    <select>
                      <option>{t.f_subj_visit}</option>
                      <option>{t.f_subj_session}</option>
                      <option>{t.f_subj_event}</option>
                      <option>{t.f_subj_join}</option>
                      <option>{t.f_subj_other}</option>
                    </select>
                  </div>
                  <div className="field full"><label>{t.f_message}</label><textarea rows="5" required /></div>
                  <div className="full"><button type="submit" className="btn btn-primary">{t.submit} <Arrow /></button></div>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function DirectionsPage({ lang }) {
  const t = window.SONQO_I18N[lang].directions;
  const tc = window.SONQO_I18N[lang].contact;
  const modes = [[t.m1_t, t.m1_d], [t.m2_t, t.m2_d], [t.m3_t, t.m3_d]];
  return (
    <main data-screen-label="09 Directions">
      <PageHero crumb={t.crumb} scriptText={t.title_script} serifText={t.title_serif} lede={t.lede} lang={lang} />
      <section style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="num">{t.ways_eyebrow}</div>
              <h2>{t.ways_title}</h2>
            </div>
          </div>
          <div className="pillars">
            {modes.map(([title, desc], i) => (
              <div className="pillar" key={i}>
                <div className="pillar-glyph">{["⌖", "◷", "❦"][i]}</div>
                <h3>{title}</h3>
                <p>{desc}</p>
              </div>
            ))}
          </div>
          <div className="track" style={{ marginTop: 40, background: "var(--paper-deep)" }}>
            <div className="eyebrow wine">{t.note_t}</div>
            <p style={{ color: "var(--green)", marginTop: 10 }}>{t.note_d}</p>
          </div>
          <div style={{ marginTop: 48 }}>
            <div className="num" style={{ marginBottom: 18 }}>{t.map_title}</div>
            <div className="contact-line" style={{ borderTop: "none", paddingTop: 0 }}>
              <div className="val" style={{ whiteSpace: "pre-line" }}>{tc.address_value}</div>
            </div>
            <div className="map-frame" style={{ marginTop: 20 }}>
              <iframe src="https://www.openstreetmap.org/export/embed.html?bbox=-43.2401567%2C-22.9676663%2C-43.2331567%2C-22.9632663&layer=mapnik&marker=-22.9654663%2C-43.2366567" loading="lazy" title="Mapa — Sonq'o Wasi, Horto, Jardim Botânico"></iframe>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function Footer({ lang, go }) {
  const t = window.SONQO_I18N[lang];
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-brand">
            <img className="footer-emblem" src={EMBLEM} alt="" />
            <span className="script">Sonq'o Wasi</span>
            <p className="tagline">{t.home.footer_tagline}</p>
          </div>
          <div>
            <h4>{t.footer.explore}</h4>
            <ul className="footer-list">
              <li><a href="#/house">{t.nav.house}</a></li>
              <li><a href="#/therapists">{t.nav.therapists}</a></li>
              <li><a href="#/events">{t.nav.events}</a></li>
              <li><a href="#/journal">{t.nav.journal}</a></li>
            </ul>
          </div>
          <div>
            <h4>{t.footer.visit}</h4>
            <ul className="footer-list">
              <li>R. Othon Bezerra de Melo, 204</li>
              <li>Jardim Botânico · Rio de Janeiro</li>
              <li><a href="#/directions">{t.nav.directions}</a></li>
              <li><a href="#/contact">{t.nav.contact}</a></li>
              <li><a href="#/weddings">{t.nav.weddings}</a></li>
            </ul>
          </div>
          <div>
            <h4>{t.footer.follow}</h4>
            <ul className="footer-list">
              <li><a href="https://www.instagram.com/sonqowasi_/" target="_blank" rel="noopener">@sonqowasi_</a></li>
              <li><a href="https://wa.me/552139503669">WhatsApp</a></li>
              <li><a href="#/join">{t.nav.join}</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Sonq'o Wasi · sonqowasi.com.br · {t.footer.rights}</div>
          <div>{t.footer.made_with}</div>
        </div>
      </div>
    </footer>
  );
}

// ── Root App ──────────────────────────────────────────────────────
function App() {
  const [route, go] = useHashRoute();
  const [lang, setLang] = useLang();

  const PageComp = useMemo(() => {
    switch (route) {
      case "house": return HousePage;
      case "manifesto": return ManifestoPage;
      case "therapists": return TherapistsPage;
      case "events": return EventsPage;
      case "weddings": return WeddingsPage;
      case "join": return JoinPage;
      case "journal": return JournalPage;
      case "contact": return ContactPage;
      case "directions": return DirectionsPage;
      case "home":
      default: return HomePage;
    }
  }, [route]);

  return (
    <div key={route + lang} className="fade-in">
      <Nav route={route} go={go} lang={lang} setLang={setLang} />
      <PageComp go={go} lang={lang} />
      <Footer lang={lang} go={go} />
    </div>
  );
}

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