const { Logo, MicroText, KinoTape, tapeAdvance } = window.DASKINODesignSystem_5a312e;
const { EdRule, EdHead, EdFolio, EdBody } = window;

const FOOT = [["estudio", "Estúdio"], ["trabalhos", "Trabalhos"], ["stills", "Stills"], ["contato", "Contato"]];

/* A palavra cortada pela borda inferior da página — a assinatura do v1,
   preservada intacta. */
function FootWord({ text = "DAS KINO" }) {
  const [w, setW] = React.useState(1200);
  React.useEffect(() => {
    const read = () => setW(document.documentElement.clientWidth);
    read(); window.addEventListener("resize", read);
    return () => window.removeEventListener("resize", read);
  }, []);
  const adv = (typeof tapeAdvance === "function" ? tapeAdvance(text) : text.length * 0.72);
  const cap = Math.max(60, (w - 40) / adv);
  return (
    <div style={{ overflow: "hidden", height: cap * 0.62, display: "flex", justifyContent: "center" }}>
      <KinoTape cut="crepe" cap={cap} text={text} style={{ display: "block", flex: "none" }} />
    </div>
  );
}

function App() {
  const [route, setRoute] = React.useState("home");
  const [slug, setSlug] = React.useState(window.FILMS[0].slug);
  const go = (r, s) => { if (s) setSlug(s); setRoute(r); window.scrollTo(0, 0); };
  return (
    <div style={{ fontFamily: "var(--font-mono)", minHeight: "100vh", display: "flex", flexDirection: "column" }}>
      <window.SiteNav route={route} go={go} />
      <main style={{ flex: 1 }}>
        {route === "home" && <window.V2Home go={go} />}
        {route === "trabalhos" && <window.V2Work go={go} />}
        {route === "projeto" && <window.V2Project slug={slug} go={go} />}
        {route === "stills" && <window.SiteStills />}
        {route === "estudio" && <window.SiteStudio go={go} />}
        {route === "contato" && <window.SiteContact />}
      </main>

      <footer style={{ background: "var(--kino-black)", color: "var(--kino-white)", paddingTop: "clamp(40px,5vw,72px)" }}>
        {/* O rodapé: régua dupla, os destinos em serif, o contato em mono. */}
        <div style={{ padding: "0 clamp(20px,4vw,56px)" }}>
          <EdRule weight="double" style={{ marginBottom: "clamp(22px,2.6vw,36px)" }} />
        </div>
        <div style={{ padding: "0 clamp(20px,4vw,56px)", display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(min(100%,220px),1fr))", gap: "clamp(24px,3vw,48px)", alignItems: "start" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
            {FOOT.map(([id, label]) => (
              <button key={id} onClick={() => go(id)} style={{ background: "none", border: "none", padding: 0, cursor: "pointer", textAlign: "left", fontFamily: "var(--font-editorial)", fontSize: "clamp(21px,2.3vw,30px)", fontWeight: 350, letterSpacing: "var(--tr-editorial)", lineHeight: 1.25, color: "var(--kino-white)" }}>{label}</button>
            ))}
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <EdBody size={14} dim style={{ textAlign: "left", maxWidth: "26ch" }}>Filmes, fotografia, animação, design e conteúdo. Porque o formato muda, mas a busca continua a mesma.</EdBody>
          </div>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 10, textAlign: "right" }}>
            <Logo mark="typographic" tone="light" height={20} />
            <MicroText size="xs" tone="dim">contato@daskino.com.br</MicroText>
            <MicroText size="xs" tone="ghost">CURITIBA — PR</MicroText>
          </div>
        </div>
        <div style={{ padding: "clamp(28px,3.4vw,48px) clamp(20px,4vw,56px) 12px", display: "flex", justifyContent: "space-between", gap: 20, flexWrap: "wrap" }}>
          <MicroText size="xs" tone="ghost">{window.CONF}</MicroText>
          <MicroText size="xs" tone="ghost">© DAS KINO 2026</MicroText>
        </div>
        <div style={{ padding: "clamp(28px,3.4vw,48px) 0 12px" }} />
        <FootWord />
      </footer>
    </div>
  );
}

Object.assign(window, { App, FootWord });