// Lumgoals page — same SaaS docs-style layout as /legal and /resources:
// left TOC + content, breadcrumb, nav + footer. Reuses the .legal-* styles.

// Stable slugs for deep-linking (URL hash), independent of language.
// Parallel to the footer's Lumgoals column ([...footAlinks, footContactLink]).
const LUMGOALS_SLUGS = [
  "what-is-manifestation",
  "the-lumgoals-practice",
  "pricing",
  "gift-a-year",
  "updates",
  "contact",
];

const LUMGOALS_COPY = {
  en: {
    eyebrow: "Lumgoals",
    title: "Explore Lumgoals",
    intro: "What manifestation means to us, how the daily practice works, pricing, and how to reach the team. Pick a topic from the menu.",
    home: "Home",
    onThisPage: "On this page",
    updated: "Last updated May 2026",
  },
  es: {
    eyebrow: "Lumgoals",
    title: "Explora Lumgoals",
    intro: "Qué significa manifestar para nosotras, cómo funciona la práctica diaria, precios y cómo contactarnos. Elige un tema del menú.",
    home: "Inicio",
    onThisPage: "En esta página",
    updated: "Última actualización: mayo 2026",
  },
};

// PRICING_COPY / PricingCard / PricingCards are defined in closing.jsx
// (loaded before this script) and shared with the landing's final CTA.

function lumgoalsSlugFromHash() {
  const raw = (window.location.hash || "").replace(/^#/, "").toLowerCase();
  return LUMGOALS_SLUGS.includes(raw) ? raw : LUMGOALS_SLUGS[0];
}

function LumgoalsPage() {
  const t = useT();
  const { lang } = useLang();
  const copy = LUMGOALS_COPY[lang] || LUMGOALS_COPY.en;

  // Localized labels straight from the footer's Lumgoals column.
  const labels = [...t("footAlinks"), t("footContactLink")];
  const [active, setActive] = React.useState(lumgoalsSlugFromHash);

  React.useEffect(() => {
    const onHashChange = () => setActive(lumgoalsSlugFromHash());
    window.addEventListener("hashchange", onHashChange);
    return () => window.removeEventListener("hashchange", onHashChange);
  }, []);

  const activeIndex = Math.max(0, LUMGOALS_SLUGS.indexOf(active));
  const page = footerPageFor(labels[activeIndex]);

  const selectSection = slug => {
    setActive(slug);
    window.location.hash = slug;
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return (
    <>
      <div className="page-bg"/>
      <Nav/>

      <main className="legal-page">
        <div className="container">
          {/* Breadcrumb */}
          <nav className="legal-breadcrumb" aria-label="Breadcrumb">
            <a href="/">{copy.home}</a>
            <span className="legal-breadcrumb-sep">/</span>
            <span className="legal-breadcrumb-current">{copy.eyebrow}</span>
          </nav>

          <header className="legal-header">
            <div className="legal-eyebrow">{copy.eyebrow}</div>
            <h1>{copy.title}</h1>
            <p>{copy.intro}</p>
          </header>

          <div className="legal-layout">
            {/* Left TOC */}
            <aside className="legal-toc" aria-label={copy.onThisPage}>
              <div className="legal-toc-label">{copy.onThisPage}</div>
              <nav>
                {labels.map((label, i) => {
                  const slug = LUMGOALS_SLUGS[i];
                  const isActive = slug === active;
                  return (
                    <a
                      key={slug}
                      href={"#" + slug}
                      className={"legal-toc-link" + (isActive ? " active" : "")}
                      aria-current={isActive ? "page" : undefined}
                      onClick={e => { e.preventDefault(); selectSection(slug); }}
                    >
                      {label}
                    </a>
                  );
                })}
              </nav>
            </aside>

            {/* Content */}
            <article className="legal-content" key={active}>
              <div className="legal-doc-eyebrow">{copy.eyebrow}</div>
              <h2>{page.title}</h2>
              <p className="legal-intro">{page.intro}</p>

              {active === "pricing" ? (
                <PricingCards lang={lang}/>
              ) : (
                page.sections.map((section, i) => (
                  <section key={i} className="legal-section">
                    <h3>{section[0]}</h3>
                    <p>{section[1]}</p>
                  </section>
                ))
              )}

              <div className="legal-updated">{copy.updated}</div>
            </article>
          </div>
        </div>
      </main>

      <PageFooter/>
    </>
  );
}

function LumgoalsApp() {
  return (
    <I18nProvider>
      <ThemeProvider>
        <LumgoalsPage/>
      </ThemeProvider>
    </I18nProvider>
  );
}

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