// Ikigai — Main composition + Área do Sócio router

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "claro",
  "navTone": "claro",
  "kanjiOpacity": 0.045,
  "showKanjiWatermarks": true,
  "socioVariant": "vibrante",
  "socioPerfil": "0054"
}/*EDITMODE-END*/;

function useHashRoute() {
  const [hash, setHash] = React.useState(window.location.hash);
  React.useEffect(() => {
    const on = () => setHash(window.location.hash);
    window.addEventListener("hashchange", on);
    return () => window.removeEventListener("hashchange", on);
  }, []);
  return hash;
}

function IkigaiSite() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const hash = useHashRoute();
  const [legalDoc, setLegalDoc] = React.useState(null); // "privacidade" | "termos" | null

  const heroVariant = t.heroVariant === "escuro" ? "dark" : t.heroVariant === "editorial" ? "editorial" : t.heroVariant === "cinematic" ? "cinematic" : "bright";
  const navTone = (t.heroVariant === "escuro" || t.heroVariant === "cinematic") ? "dark" : "light";

  // Área do Sócio
  const [socioLogged, setSocioLogged] = React.useState(null);

  React.useEffect(() => {
    // se trocar perfil via tweak e já estiver logado, atualizar
    if (socioLogged && t.socioPerfil) {
      const found = SOCIOS.find((s) => s.id === t.socioPerfil);
      if (found && found.id !== socioLogged.id) setSocioLogged(found);
    }
  }, [t.socioPerfil]);

  const isLogin = hash === "#login";
  const isArea = hash.startsWith("#area-socio");
  const isAdmin = hash.startsWith("#admin");

  if (isAdmin) {
    return <AdminApp />;
  }

  if (isLogin) {
    return (
      <LoginScreen onLogin={(s) => {
        setSocioLogged(s);
        setTweak("socioPerfil", s.id);
        window.location.hash = "area-socio/dashboard";
      }} />
    );
  }

  if (isArea) {
    const socio = socioLogged || SOCIOS.find((s) => s.id === t.socioPerfil) || SOCIOS[0];
    return (
      <>
        <AreaSocioShell
          initialSocio={socio}
          variant={t.socioVariant === "minimal" ? "minimal" : "vibrant"}
          onLogout={() => { setSocioLogged(null); window.location.hash = ""; }}
        />
        <TweaksPanel title="Tweaks · Área do Sócio" defaultOpen={false}>
          <TweakSection label="Visual" />
          <TweakRadio
            label="Estilo"
            value={t.socioVariant}
            options={["vibrante", "minimal"]}
            onChange={(v) => setTweak("socioVariant", v)}
          />
          <TweakSection label="Sócio ativo" />
          <TweakSelect
            label="Perfil mock"
            value={socio.id}
            options={SOCIOS.map((s) => ({ value: s.id, label: `${s.id} · ${s.nomeCurto}` }))}
            onChange={(v) => {
              const found = SOCIOS.find((s) => s.id === v);
              if (found) { setSocioLogged(found); setTweak("socioPerfil", v); }
            }}
          />
        </TweaksPanel>
      </>
    );
  }

  return (
    <>
      <KNav tone={navTone} />
      <main>
        <Hero variant={heroVariant} />
        <SectionAbout />
        <SectionSensei />
        <SectionStyles />
        <SectionBelts />
        <SectionSchedule />
        <SectionGallery />
        <SectionEvents />
        <SectionNews />
        <SectionEnroll />
        <SectionContact />
      </main>
      <KFooter onOpenDoc={setLegalDoc} />
      <CookieBanner onOpenDoc={setLegalDoc} />
      {legalDoc && <LegalDoc kind={legalDoc} onClose={() => setLegalDoc(null)} />}
      {/* Floating CTAs */}
      <div style={{ position: "fixed", right: 22, bottom: 22, zIndex: 60, display: "flex", flexDirection: "column", gap: 10, alignItems: "flex-end" }}>
        <a
          href="#admin"
          style={{
            background: "#c63b3b", color: "#fff",
            padding: "10px 16px", borderRadius: 999,
            fontSize: 12.5, fontWeight: 500, letterSpacing: "-0.01em",
            boxShadow: "0 8px 24px rgba(0,0,0,0.18)",
            display: "inline-flex", alignItems: "center", gap: 8,
            textDecoration: "none",
          }}
        >
          🔒 Painel Admin ›
        </a>
        <a
          href="#login"
          style={{
            background: "var(--k-ink)", color: "#fff",
            padding: "12px 20px", borderRadius: 999,
            fontSize: 14, fontWeight: 500, letterSpacing: "-0.01em",
            boxShadow: "0 8px 24px rgba(0,0,0,0.18)",
            display: "inline-flex", alignItems: "center", gap: 8,
            textDecoration: "none",
          }}
        >
          <span style={{ fontFamily: "var(--k-font-jp)" }}>空</span>
          Área do Sócio ›
        </a>
      </div>
      <TweaksPanel title="Tweaks" defaultOpen={false}>
        <TweakSection label="Hero" />
        <TweakRadio
          label="Variante"
          value={t.heroVariant}
          options={["cinematic", "claro", "escuro", "editorial"]}
          onChange={(v) => setTweak("heroVariant", v)}
        />
      </TweaksPanel>
    </>
  );
}

Object.assign(window, { IkigaiSite });

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