/* global React, ReactDOM */
// Codartia — App shell (router, nav, footer, tweaks, modal orchestration)
(function () {
  const { useState, useEffect, useCallback } = React;

  const NAV = [
    { id: "home",       pt: "Home",       en: "Home" },
    { id: "produtos",   pt: "Produtos",   en: "Products" },
    { id: "solucoes",   pt: "Soluções",   en: "Solutions" },
    { id: "cases",      pt: "Cases",      en: "Cases" },
    { id: "sobre",      pt: "Sobre",      en: "About" },
    { id: "blog",       pt: "Blog",       en: "Blog" },
    { id: "carreiras",  pt: "Carreiras",  en: "Careers" },
    { id: "contato",    pt: "Contato",    en: "Contact" },
  ];

  const DEFAULTS = /*EDITMODE-BEGIN*/{
    "sunColor": "#A78BFA",
    "orbitSpeed": 1.0,
    "planetCount": 13,
    "starDensity": 1.0,
    "theme": "dark",
    "fontDisplay": "Sora",
    "fontBody": "Sora"
  }/*EDITMODE-END*/;

  function App() {
    const data = window.CODARTIA_DATA;
    const [t, setTweak] = window.useTweaks(DEFAULTS);

    const [route, setRoute] = useState(() => {
      const h = window.location.hash.replace("#", "");
      return NAV.find((n) => n.id === h) ? h : "home";
    });
    const [lang, setLang] = useState(() => {
      const saved = localStorage.getItem("codartia-lang");
      return saved === "en" ? "en" : "pt";
    });
    const [activeProduct, setActiveProduct] = useState(null);
    const [menuOpen, setMenuOpen] = useState(false);

    // Theme: dark / light
    useEffect(() => {
      document.documentElement.dataset.theme = t.theme;
      document.documentElement.style.setProperty("--brand", t.sunColor);
      // derive brand-deep/soft from sunColor via color-mix would be ideal,
      // but we keep deep/soft fixed for UI cohesion.
    }, [t.theme, t.sunColor]);

    // Persist language
    useEffect(() => { localStorage.setItem("codartia-lang", lang); }, [lang]);

    // Hash routing
    useEffect(() => {
      const onHash = () => {
        const h = window.location.hash.replace("#", "");
        if (NAV.find((n) => n.id === h)) setRoute(h);
        else if (h === "") setRoute("home");
      };
      window.addEventListener("hashchange", onHash);
      return () => window.removeEventListener("hashchange", onHash);
    }, []);

    const navigate = useCallback((id) => {
      window.location.hash = id === "home" ? "" : id;
      setRoute(id);
      setMenuOpen(false);
      window.scrollTo({ top: 0, behavior: "smooth" });
    }, []);

    const onSelectProduct = useCallback((product) => {
      setActiveProduct(product);
    }, []);

    // ----- Fonts dynamic load -----
    useEffect(() => {
      const fonts = new Set([t.fontDisplay, t.fontBody]);
      fonts.forEach((f) => {
        const id = `font-${f.replace(/\s+/g, "-")}`;
        if (document.getElementById(id)) return;
        const link = document.createElement("link");
        link.id = id;
        link.rel = "stylesheet";
        link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(f)}:wght@300;400;500;600;700&display=swap`;
        document.head.appendChild(link);
      });
      document.documentElement.style.setProperty("--font-display", `"${t.fontDisplay}", system-ui, sans-serif`);
      document.documentElement.style.setProperty("--font-body", `"${t.fontBody}", system-ui, sans-serif`);
    }, [t.fontDisplay, t.fontBody]);

    const pages = {
      home: <window.HomePage lang={lang} tweaks={t} data={data} onSelectProduct={onSelectProduct} navigate={navigate} />,
      produtos: <window.ProductsPage lang={lang} data={data} onSelectProduct={onSelectProduct} />,
      sobre: <window.AboutPage lang={lang} data={data} />,
      solucoes: <window.SolutionsPage lang={lang} data={data} onSelectProduct={onSelectProduct} />,
      cases: <window.CasesPage lang={lang} data={data} />,
      blog: <window.BlogPage lang={lang} data={data} />,
      carreiras: <window.CareersPage lang={lang} data={data} />,
      contato: <window.ContactPage lang={lang} data={data} />,
    };

    return (
      <>
        <div className="bg-grad"></div>

        <div className="app-root">
          {/* NAV */}
          <nav className="nav" data-screen-label="Nav">
            <div className="wrap nav-inner">
              <a href="#" className="brand" onClick={(e) => { e.preventDefault(); navigate("home"); }}>
                <span className="brand-mark"></span>
                Codartia
              </a>
              <div className="nav-links">
                {NAV.filter((n) => n.id !== "home").map((n) => (
                  <a
                    key={n.id}
                    href={`#${n.id}`}
                    className={`nav-link ${route === n.id ? "active" : ""}`}
                    onClick={(e) => { e.preventDefault(); navigate(n.id); }}
                  >
                    {n[lang]}
                  </a>
                ))}
              </div>
              <div className="nav-cta">
                <div className="lang-toggle">
                  <button className={lang === "pt" ? "on" : ""} onClick={() => setLang("pt")}>PT</button>
                  <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
                </div>
                <a href="#contato" className="btn btn-primary" style={{ padding: "10px 16px", fontSize: 13 }} onClick={(e) => { e.preventDefault(); navigate("contato"); }}>
                  {lang === "pt" ? "Falar agora" : "Get in touch"}
                </a>
                <button className="menu-btn" onClick={() => setMenuOpen(!menuOpen)} aria-label="Menu">
                  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
                    {menuOpen ? <path d="M3 3l10 10M13 3L3 13" /> : (<><path d="M2 4h12" /><path d="M2 8h12" /><path d="M2 12h12" /></>)}
                  </svg>
                </button>
              </div>
            </div>
            <div className={`mobile-menu ${menuOpen ? "open" : ""}`}>
              {NAV.filter((n) => n.id !== "home").map((n) => (
                <a
                  key={n.id}
                  href={`#${n.id}`}
                  onClick={(e) => { e.preventDefault(); navigate(n.id); }}
                >
                  {n[lang]}
                </a>
              ))}
            </div>
          </nav>

          {/* PAGE */}
          <main data-screen-label={route}>
            {pages[route]}
          </main>

          {/* FOOTER */}
          <footer className="footer">
            <div className="wrap">
              <div className="footer-grid">
                <div className="footer-col">
                  <a href="#" className="brand" onClick={(e) => { e.preventDefault(); navigate("home"); }}>
                    <span className="brand-mark"></span>
                    Codartia
                  </a>
                  <p style={{ color: "var(--text-dim)", fontSize: 14, marginTop: 16, maxWidth: "30ch", textWrap: "pretty" }}>
                    {lang === "pt"
                      ? "Software vertical, núcleo comum. Treze órbitas para o seu negócio rodar."
                      : "Vertical software, shared core. Thirteen orbits for your business to run."}
                  </p>
                </div>
                <div className="footer-col">
                  <h5>{lang === "pt" ? "Produtos" : "Products"}</h5>
                  <ul>
                    {data.products.slice(0, 6).map((p) => (
                      <li key={p.id}>
                        <a href="#produtos" onClick={(e) => { e.preventDefault(); onSelectProduct(p); }}>{p.name}</a>
                      </li>
                    ))}
                    <li><a href="#produtos" onClick={(e) => { e.preventDefault(); navigate("produtos"); }}>{lang === "pt" ? "Ver todos →" : "See all →"}</a></li>
                  </ul>
                </div>
                <div className="footer-col">
                  <h5>{lang === "pt" ? "Empresa" : "Company"}</h5>
                  <ul>
                    <li><a href="#sobre" onClick={(e) => { e.preventDefault(); navigate("sobre"); }}>{lang === "pt" ? "Sobre" : "About"}</a></li>
                    <li><a href="#cases" onClick={(e) => { e.preventDefault(); navigate("cases"); }}>{lang === "pt" ? "Cases" : "Cases"}</a></li>
                    <li><a href="#blog" onClick={(e) => { e.preventDefault(); navigate("blog"); }}>Blog</a></li>
                    <li><a href="#carreiras" onClick={(e) => { e.preventDefault(); navigate("carreiras"); }}>{lang === "pt" ? "Carreiras" : "Careers"}</a></li>
                  </ul>
                </div>
                <div className="footer-col">
                  <h5>{lang === "pt" ? "Contato" : "Contact"}</h5>
                  <ul>
                    <li><a href="mailto:contato@codartia.com">contato@codartia.com</a></li>
                    <li><a>+55 11 4042 3120</a></li>
                    <li style={{ color: "var(--text-mute)", fontSize: 13, marginTop: 4 }}>São Paulo, SP · Brasil</li>
                  </ul>
                </div>
              </div>
              <div className="footer-bottom">
                <div>© 2026 CODARTIA TECNOLOGIA LTDA · CNPJ 00.000.000/0001-00</div>
                <div style={{ display: "flex", gap: 24 }}>
                  <a href="#">{lang === "pt" ? "Privacidade" : "Privacy"}</a>
                  <a href="#">{lang === "pt" ? "Termos" : "Terms"}</a>
                  <a href="#">LGPD</a>
                  <a href="#">Status</a>
                </div>
              </div>
            </div>
          </footer>
        </div>

        {/* MODAL */}
        {activeProduct && (
          <window.ProductModal product={activeProduct} lang={lang} onClose={() => setActiveProduct(null)} />
        )}

        {/* TWEAKS */}
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection label={lang === "pt" ? "Sistema solar" : "Solar system"} />
          <window.TweakColor
            label={lang === "pt" ? "Cor do sol" : "Sun color"}
            value={t.sunColor}
            onChange={(v) => setTweak("sunColor", v)}
            options={["#A78BFA", "#FF8A4C", "#FFD24C", "#22C28A", "#3D8BFF", "#FF4D8F"]}
          />
          <window.TweakSlider
            label={lang === "pt" ? "Velocidade da órbita" : "Orbit speed"}
            value={t.orbitSpeed}
            onChange={(v) => setTweak("orbitSpeed", v)}
            min={0} max={3} step={0.1}
          />
          <window.TweakSlider
            label={lang === "pt" ? "Planetas" : "Planets"}
            value={t.planetCount}
            onChange={(v) => setTweak("planetCount", v)}
            min={3} max={13} step={1}
          />
          <window.TweakSlider
            label={lang === "pt" ? "Estrelas" : "Stars"}
            value={t.starDensity}
            onChange={(v) => setTweak("starDensity", v)}
            min={0} max={3} step={0.1}
          />
          <window.TweakSection label={lang === "pt" ? "Aparência" : "Appearance"} />
          <window.TweakRadio
            label={lang === "pt" ? "Tema" : "Theme"}
            value={t.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[
              { value: "dark", label: lang === "pt" ? "Escuro" : "Dark" },
              { value: "light", label: lang === "pt" ? "Claro" : "Light" },
            ]}
          />
          <window.TweakSelect
            label={lang === "pt" ? "Fonte display" : "Display font"}
            value={t.fontDisplay}
            onChange={(v) => setTweak("fontDisplay", v)}
            options={["Sora", "Onest", "Space Grotesk", "Manrope", "Plus Jakarta Sans", "Bricolage Grotesque", "DM Sans"]}
          />
          <window.TweakSelect
            label={lang === "pt" ? "Fonte corpo" : "Body font"}
            value={t.fontBody}
            onChange={(v) => setTweak("fontBody", v)}
            options={["Sora", "Onest", "Inter Tight", "Manrope", "Plus Jakarta Sans", "DM Sans"]}
          />
        </window.TweaksPanel>
      </>
    );
  }

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