const { MicroText, BearMarks, IconStrip, KinoTape } = window.DASKINODesignSystem_5a312e;

/* ESTÚDIO — o texto do comercial, na íntegra, e os ensaios de foto de verdade.
   A primeira frase é a tese e vem em fita; o resto é leitura corrida em duas
   colunas, que é como um texto de 9 parágrafos se lê sem virar parede. */
function SiteStudio({ go }) {
  return (
    <div data-screen-label="Estúdio">
      <section style={{ padding: "clamp(48px,6vw,96px) clamp(20px,4vw,56px)", borderBottom: "1px solid var(--rule)" }}>
        <window.Head label="ESTÚDIO" right={<BearMarks count={3} numbers={[1,null,2]} size={26} />} />
        <div style={{ maxWidth: 1180, display: "flex", flexDirection: "column", gap: "clamp(30px,4vw,52px)" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <MicroText size="sm" tone="ghost">OLÁ,</MicroText>
            <KinoTape ground="dark" cap={64} text={window.SOBRE[0].toUpperCase()} />
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: "1.5em", maxWidth: "62ch" }}>
            {window.SOBRE.slice(1, -1).map((t, i) => (
              <p key={i} style={{ margin: 0, fontFamily: "var(--font-mono)", fontWeight: 300, fontSize: "clamp(15px,1.35vw,19px)", lineHeight: 1.74, textWrap: "pretty" }}>{t}</p>
            ))}
          </div>
          <p style={{ margin: 0, fontFamily: "var(--font-mono)", fontWeight: 300, fontSize: "clamp(20px,2.3vw,34px)", lineHeight: 1.36, maxWidth: "24ch", textWrap: "pretty", alignSelf: "flex-end", textAlign: "right" }}>{window.SOBRE[window.SOBRE.length - 1]}</p>
        </div>
      </section>

      <section style={{ padding: "clamp(44px,5vw,80px) clamp(20px,4vw,56px)", borderBottom: "1px solid var(--rule)" }}>
        <window.Head label="ENSAIOS" count={window.ENSAIOS.length} right={<IconStrip items={["aperture","hand-film","film-roll"]} size={18} />} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(min(100%,300px),1fr))", gap: "clamp(18px,2vw,28px)" }}>
          {window.ENSAIOS.map((f, i) => (
            <button key={f.slug} onClick={() => go && go("projeto", f.slug)} className={f.uf}
              style={{ background: "none", border: "none", padding: 0, cursor: "pointer", textAlign: "left", display: "flex", flexDirection: "column", gap: 14 }}>
              <window.Shot src={f.cover} idx={i} ratio="4:5" overlay={0.22} />
              <span style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                <i style={{ width: 5, height: 34, background: "var(--ink-accent)", display: "block", flex: "0 0 auto" }} />
                <span style={{ display: "flex", flexDirection: "column", gap: 7, minWidth: 0 }}>
                  <MicroText size="md" weight={700}>{f.word}</MicroText>
                  <MicroText size="xs" tone="ghost">{f.entrega.toUpperCase()} · {f.cat.toUpperCase()}</MicroText>
                  <p style={{ margin: "2px 0 0", fontFamily: "var(--font-mono)", fontWeight: 300, fontSize: 13, lineHeight: 1.62, opacity: 0.84, textWrap: "pretty" }}>{f.sub}</p>
                </span>
              </span>
            </button>
          ))}
        </div>
      </section>

      <section className="kino-paper" style={{ position: "relative", padding: "clamp(48px,6vw,90px) clamp(20px,4vw,56px)" }}>
        <span aria-hidden="true" style={{ position: "absolute", inset: 0, backgroundImage: "url(" + window.A + "/assets/textures/grain-dark.png)", backgroundSize: "320px 320px", opacity: 0.08, mixBlendMode: "multiply", pointerEvents: "none" }}></span>
        <div style={{ position: "relative", maxWidth: 1500, margin: "0 auto" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 48, flexWrap: "wrap", paddingBottom: 14, borderBottom: "1px solid var(--rule)", marginBottom: 40 }}>
            <div style={{ maxWidth: 540 }}>
              <MicroText size="md" tone="dim">TERRITÓRIOS</MicroText>
              <p style={{ margin: "22px 0 0", fontFamily: "var(--font-mono)", fontWeight: 300, fontSize: 16, lineHeight: 1.7 }}>Da travessia de relevos, sotaques e culturas nasceu algo. O nome é alemão, o urso é de Berlim, o sotaque é maranhense. Cada estado tem a sua luz — e cada peça pertence a um só.</p>
            </div>
            <IconStrip items={["globe","plumb","diamond","switchback","starbox"]} size={24} tone="dark" />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(min(100%,210px),1fr))", gap: 1, background: "var(--rule)", border: "1px solid var(--rule)" }}>
            {window.UFS.map(t => (
              <div key={t.uf} className={t.scope} style={{ background: "var(--kino-white)", padding: "28px 22px 34px", display: "flex", flexDirection: "column", gap: 12 }}>
                <i style={{ width: 34, height: 4, background: "var(--ink-accent)", display: "block" }} />
                <MicroText size="lg" weight={700}>{t.uf}</MicroText>
                <MicroText size="sm" tone="dim">{t.bioma}</MicroText>
                <p style={{ margin: "4px 0 0", fontFamily: "var(--font-mono)", fontWeight: 300, fontSize: 12.5, lineHeight: 1.65, opacity: 0.82 }}>{t.nota}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { SiteStudio });