/* ===== ESTÚDIO 23 — app ===== */
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C40000",
  "displayFont": "Tusker Grotesk 3700",
  "bodyFont": "Poppins",
  "grain": 0.06,
  "bgTone": "#0b0b0b",
  "h1": "Sua marca em padrão de *cinema*"
}/*EDITMODE-END*/;

// ---- data ----
const NAV = [
  { id: "eventos", label: "Eventos" },
  { id: "restaurantes", label: "Restaurantes" },
  { id: "esporte", label: "Esporte" },
  { id: "arte", label: "Arte e música" },
  { id: "perfis", label: "Perfis" },
];

const BRANDS = [
  { src: "uploads/brands/globo.png", alt: "Rede Globo" },
  { src: "uploads/brands/the-town.png", alt: "The Town" },
  { src: "uploads/brands/redbull-bragantino.png", alt: "Red Bull Bragantino" },
  { src: "uploads/brands/joao-rock.png", alt: "João Rock" },
  { src: "uploads/brands/boticario.png", alt: "O Boticário" },
  { src: "uploads/brands/botafogo.png", alt: "Botafogo" },
  { src: "uploads/brands/dhl.png", alt: "DHL" },
];

const NICHES = [
  { idx: "N1", id: "eventos", title: "Eventos", desc: "Cobertura cinematográfica de ponta a ponta, do drone ao detalhe." },
  { idx: "N2", id: "restaurantes", title: "Restaurantes", desc: "Gastronomia em câmera lenta, textura e desejo na tela." },
  { idx: "N3", id: "esporte", title: "Esporte", desc: "Adrenalina, ritmo e a marca no centro da arena." },
  { idx: "N4", id: "arte", title: "Arte e música", desc: "Clipes e shows com a linguagem autoral do Estúdio 23." },
  { idx: "N5", id: "perfis", title: "Perfis", desc: "Social media e formato vertical 9:16 com cara de cinema." },
];

const CASES = [
  {
    idx: "01", niche: "Eventos", client: "The Town",
    desafio: "Traduzir a escala de um festival em poucos segundos de impacto.",
    entrega: "Captação multicâmera + drone, direção de cena e corte cinematográfico.",
    resultado: "Reel de abertura usado em ativação de marca e social.",
    slot: "case-thetown",
  },
  {
    idx: "02", niche: "Restaurantes", client: "Casa / Gastronomia",
    desafio: "Fazer o prato render desejo na primeira meio-segundo de scroll.",
    entrega: "Direção de arte de mesa, macro em câmera lenta e color grade quente.",
    resultado: "Conteúdo vertical para campanha paga e perfil.",
    slot: "case-resto",
  },
  {
    idx: "03", niche: "Esporte", client: "Red Bull Bragantino",
    desafio: "Colocar a marca dentro da intensidade do jogo, não ao lado dela.",
    entrega: "Captação de alta velocidade, motion e vinhetas de programa.",
    resultado: "Pacote audiovisual para clube e patrocinadores.",
    slot: "case-esporte",
  },
  {
    idx: "04", niche: "Arte e música", client: "João Rock",
    desafio: "Capturar a energia hardcore do palco sem perder a autoria visual.",
    entrega: "Direção criativa, captação de show e edição rítmica.",
    resultado: "Aftermovie e cortes para divulgação do festival.",
    slot: "case-joaorock",
  },
  {
    idx: "05", niche: "Perfis", client: "Ana Clara · Atleta",
    desafio: "Construir presença de marca pessoal em formato vertical.",
    entrega: "Direção de cena, captação 9:16 e social media de perfil.",
    resultado: "Linha editorial de vídeos para redes da atleta.",
    slot: "case-perfil",
  },
];

const FOUNDERS = [
  {
    idx: "01", name: "Felix Leonardi", role: "Direção de arte · Direção de cena",
    bio: "Começou filmando casamentos aos 15 e nunca mais parou. Especialista em pegar a marca e transformá-la em produto. Dirige cena como ninguém.",
    creds: ["Red Bull Bragantino", "Botafogo", "O Boticário", "Liga de Vôlei", "Produtora Continente"],
    slot: "founder-felix",
  },
  {
    idx: "02", name: "Jeff Aquino", role: "Direção audiovisual · Motion",
    bio: "Motion designer no Grupo Globo, com vinhetas de programa no currículo. Do drone no Carnaval de rua de SP à direção de cena de atletas.",
    creds: ["Grupo Globo", "The Town", "Gov. de SP", "Carnaval SP", "Alians Park"],
    slot: "founder-jeff",
  },
];

// ---- helpers ----
function Emph({ text }) {
  // *word* -> red
  const parts = String(text).split(/(\*[^*]+\*)/g).filter(Boolean);
  return parts.map((p, i) =>
    p.startsWith("*") && p.endsWith("*")
      ? <span key={i} className="red">{p.slice(1, -1)}</span>
      : <React.Fragment key={i}>{p}</React.Fragment>
  );
}

function CropMarks() {
  return (<>
    <span className="cropmark cm-tl"></span>
    <span className="cropmark cm-tr"></span>
    <span className="cropmark cm-bl"></span>
    <span className="cropmark cm-br"></span>
  </>);
}

function ReelPlaceholder({ label, corner }) {
  return (
    <div className={"reel-ph" + (corner ? " corner" : "")}>
      <div className="bars"></div>
      <div className="grid">{Array.from({ length: 6 }).map((_, i) => <i key={i}></i>)}</div>
      <div className="label">{label}</div>
    </div>
  );
}

function useReveal() { /* reveal is now pure CSS (see .reveal) */ }

const WA_NUMBER = "5511999999999"; // placeholder
const waLink = (msg) => `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(msg)}`;

// ---- sections ----
function Nav({ onMenu, scrolled, openReel }) {
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="nav-links">
        {NAV.map((n) => <a key={n.id} href={"portfolio.html?n=" + n.id}>{n.label}</a>)}
      </div>
      <a href="#top" className="nav-logo-center">
        <img src="uploads/logo-estudio23-crop.png" alt="Estúdio 23" className="nav-logo-img" />
      </a>
      <div className="nav-right">
        <a className="nav-cta" href="#contato">Contato</a>
        <button className="nav-burger" onClick={onMenu} aria-label="Menu"><span></span><span></span><span></span></button>
      </div>
    </nav>
  );
}

function Hero({ t, openReel }) {
  return (
    <header className="hero" id="top">
      <div className="hero-media">
        <video
          autoPlay muted loop playsInline preload="auto"
          poster="uploads/hero-bg-poster.jpg"
          style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
        >
          <source src="uploads/hero-bg.webm" type="video/webm" />
          <source src="uploads/hero-bg.mp4" type="video/mp4" />
        </video>
      </div>

      <div className="hero-content">
        <h1><Emph text={t.h1} /></h1>
        <p className="hero-sub">
          Produção audiovisual completa para empresas: <b>captação, direção e pós-produção</b> com
          estética de cinema. Já rodamos para Globo, The Town, Red Bull Bragantino e João Rock.
        </p>

      </div>
    </header>
  );
}

function Logos() {
  const row = [];
  for (let k = 0; k < 6; k++) row.push(...BRANDS);
  const trackRef = useRef(null);
  const stateRef = useRef({ x: 0, speed: 1.2, targetSpeed: 1.2, raf: 0 });

  useEffect(() => {
    const track = trackRef.current;
    if (!track) return;
    const s = stateRef.current;
    let half = 0;

    const step = () => {
      if (!half) half = track.scrollWidth / 2;
      s.speed += (s.targetSpeed - s.speed) * 0.04;
      s.x += s.speed;
      if (half && s.x >= half) s.x -= half;
      track.style.transform = `translateX(-${s.x.toFixed(2)}px)`;
      s.raf = requestAnimationFrame(step);
    };
    s.raf = requestAnimationFrame(step);

    // recalcula a largura quando os logos terminam de carregar
    const recalc = () => { half = 0; };
    track.querySelectorAll("img").forEach((img) => {
      if (!img.complete) img.addEventListener("load", recalc, { once: true });
    });
    window.addEventListener("resize", recalc);

    const section = track.closest(".logos");
    const onEnter = () => { s.targetSpeed = 0; };
    const onLeave = () => { s.targetSpeed = 1.2; };
    section.addEventListener("mouseenter", onEnter);
    section.addEventListener("mouseleave", onLeave);

    return () => {
      cancelAnimationFrame(s.raf);
      section.removeEventListener("mouseenter", onEnter);
      section.removeEventListener("mouseleave", onLeave);
      window.removeEventListener("resize", recalc);
    };
  }, []);

  return (
    <section className="logos">
      <div className="marquee">
        <div className="track" ref={trackRef}>
          {row.map((b, i) => (
            <img className={"brand-logo" + (b.mono ? " mono" : "")} key={i} src={b.src} alt={b.alt} />
          ))}
        </div>
      </div>
    </section>
  );
}

function Niches() {
  return (
    <section className="sec" id="nichos" style={{ paddingBottom: 0 }}>
      <div className="niches reveal-group">
        {NICHES.map((n) => (
          <a className="niche" key={n.id} href={"portfolio.html?n=" + n.id}>
            <h3>{n.title}</h3>
            <p>{n.desc}</p>
            <span className="arrow">→</span>
          </a>
        ))}
      </div>
    </section>
  );
}

function Cases({ openReel }) {
  const N = CASES.length;
  const MID = N;                 // começa na cópia do meio
  const GP = 30;                 // gap (px) — igual ao --gp
  const DURATION = 5000;         // auto-avanço (ms)
  const loop = [];               // 3 cópias para o loop infinito
  for (let k = 0; k < 3; k++) CASES.forEach((c, ci) => loop.push({ ...c, k, ci }));

  const [index, setIndex] = useState(MID);
  const [anim, setAnim] = useState(false);
  const [paused, setPaused] = useState(false);
  const [hidden, setHidden] = useState(document.hidden);
  const [progress, setProgress] = useState(0);
  const [stageW, setStageW] = useState(0);
  const stageRef = useRef(null);

  // aba oculta pausa o auto-avanço (evita índice fugir sem transitionend)
  useEffect(() => {
    const h = () => setHidden(document.hidden);
    document.addEventListener("visibilitychange", h);
    return () => document.removeEventListener("visibilitychange", h);
  }, []);

  useEffect(() => {
    const measure = () => stageRef.current && setStageW(stageRef.current.clientWidth);
    measure();
    window.addEventListener("resize", measure);
    return () => window.removeEventListener("resize", measure);
  }, []);

  const cw = stageW ? Math.min(620, stageW * 0.84) : 560;
  const tx = stageW ? stageW / 2 - index * (cw + GP) - cw / 2 : 0;

  const go = (dir) => { setAnim(true); setIndex((i) => i + dir); };
  const goTo = (pos) => { setAnim(true); setIndex(pos); };

  // auto-avanço + barra de progresso
  useEffect(() => {
    if (paused || hidden || !stageW) return;
    setProgress(0);
    const start = Date.now();
    const prog = setInterval(() => setProgress(Math.min(1, (Date.now() - start) / DURATION)), 60);
    const t = setTimeout(() => go(1), DURATION);
    return () => { clearInterval(prog); clearTimeout(t); };
  }, [index, paused, stageW]);

  // loop infinito: pula sem animação ao sair da faixa do meio
  const onRest = (e) => {
    if (e.target !== e.currentTarget) return;
    if (index >= MID + N) { setAnim(false); setIndex((i) => i - N); }
    else if (index < MID) { setAnim(false); setIndex((i) => i + N); }
  };
  // segurança: se o transitionend não disparar (aba oculta, reduced motion,
  // volta do bfcache), normaliza o índice de volta para a faixa do meio
  useEffect(() => {
    if (index >= MID && index < MID + N) return;
    const t = setTimeout(() => {
      setAnim(false);
      setIndex(((index % N) + N) % N + MID);
    }, 650);
    return () => clearTimeout(t);
  }, [index]);
  useEffect(() => {
    if (!anim) {
      const id = requestAnimationFrame(() => requestAnimationFrame(() => setAnim(true)));
      return () => cancelAnimationFrame(id);
    }
  }, [anim]);

  const activeReal = ((index % N) + N) % N;

  return (
    <section className="sec cases-sec" id="cases">
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <span className="kicker">Projetos · um por nicho</span>
            <h2 style={{ marginTop: 24 }}>Mostramos.<br />Não só <span className="red">dizemos.</span></h2>
          </div>
          <p className="lead">Cinco cases, um de cada frente. Cada um com contexto, entrega e resultado, para você se reconhecer e saber exatamente onde entra.</p>
        </div>
      </div>
      <div className="cases-carousel reveal" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
        <button className="caro-arrow prev" onClick={() => go(-1)} aria-label="Anterior">‹</button>
        <button className="caro-arrow next" onClick={() => go(1)} aria-label="Próximo">›</button>
        <div className="cases-stage" ref={stageRef} style={{ "--cw": cw + "px", "--gp": GP + "px" }}>
          <div className="cases-track"
               style={{ transform: `translateX(${tx}px)`, transition: anim ? "transform .55s cubic-bezier(.65,0,.2,1)" : "none" }}
               onTransitionEnd={onRest}>
            {loop.map((c, p) => {
              const active = p === index;
              return (
                <article key={c.k + "-" + c.ci}
                         className={"case-card" + (active ? " is-active" : "")}
                         id={c.k === 1 ? NICHES.find((n) => n.title === c.niche)?.id : undefined}
                         onClick={() => { if (!active) goTo(p); }}>
                  <div className="case-media">
                    <image-slot id={c.k === 1 ? c.slot : c.slot + "-c" + c.k} shape="rect" placeholder={`poster do case · ${c.client}`}></image-slot>
                    <span className="rec-tag"><b></b>REC</span>
                    <div className="playbtn" onClick={(e) => { if (active) { e.stopPropagation(); openReel(); } }}>
                      <div className="circ"><span className="play"></span></div>
                    </div>
                  </div>
                  <div className="case-foot">
                    <div className="case-client">{c.client}</div>
                    <p className="case-desc">{c.entrega}</p>
                    <span className="case-niche"><i>{c.idx}</i>{c.niche}</span>
                  </div>
                </article>
              );
            })}
          </div>
        </div>
        <div className="caro-counter" aria-hidden="true">
          <span className="num">{String(activeReal + 1).padStart(2, "0")}</span>
          <span className="bar"><i style={{ width: (progress * 100).toFixed(1) + "%" }}></i></span>
          <span>{String(N).padStart(2, "0")}</span>
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section className="sec about" id="sobre">
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <span className="kicker">Conheça o estúdio</span>
            <h2 style={{ marginTop: 24 }}>Quem está atrás<br />da <span className="red">câmera</span></h2>
          </div>
          <p className="lead">
            Dois diretores de arte audiovisuais que, depois de anos atendendo grandes marcas,
            se uniram para criar a própria produtora. <b>Bagagem e carisma</b>: esse é o diferencial.
          </p>
        </div>
        <div className="founders">
          {FOUNDERS.map((f, i) => (
            <article className={"founder reveal" + (i % 2 ? " flip" : "")} key={f.name}>
              <div className="founder-media">
                <div className="ph">
                  <image-slot id={f.slot} shape="rect" placeholder={`foto ${f.name}`}></image-slot>
                  <CropMarks />
                </div>
              </div>
              <div className="founder-body">
                <div className="f-top">
                  <span className="f-idx">{f.idx}</span>
                  <span className="role">{f.role}</span>
                </div>
                <h3 className="f-name">{f.name}</h3>
                <p className="bio">{f.bio}</p>
                <div className="creds">
                  <span className="creds-cap">Já rodou para</span>
                  {f.creds.map((c, ci) => (
                    <span className="cred" key={c}><i>{String(ci + 1).padStart(2, "0")}</i><span>{c}</span></span>
                  ))}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function CtaFinal() {
  return (
    <section className="cta-final" id="contato">
      <div className="cta-media">
        <video autoPlay muted loop playsInline preload="auto" poster="uploads/cta-bg-poster.jpg">
          <source src="uploads/cta-bg.webm" type="video/webm" />
          <source src="uploads/cta-bg.mp4" type="video/mp4" />
        </video>
      </div>
      <div className="inner wrap reveal">
        <span className="kicker" style={{ justifyContent: "center" }}>Onde você entra</span>
        <h2 style={{ marginTop: 22 }}>Bora trazer o<br /><span className="red">cinema</span> pra sua marca?</h2>
        <p className="sub">Conta pra gente o projeto e quanto pretende investir na produção. A gente volta com uma direção, não com um orçamento genérico.</p>
        <div className="actions">
          <a className="btn btn-primary" href={waLink("Olá, Estúdio 23! Quero conversar sobre um projeto.")} target="_blank" rel="noopener">Chamar no WhatsApp</a>
          <a className="btn btn-ghost" href="mailto:contato@estudio23.com">contato@estudio23.com</a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer" id="footer">
      <div className="wrap">
        <div className="grid">
          <div>
            <div className="logo">ESTÚDIO<span className="n23">23</span></div>
            <p style={{ color: "var(--cream-dim)", maxWidth: "34ch", marginTop: 14, fontSize: 15 }}>
              Produção audiovisual e direção criativa cinematográfica. Trazemos o cinema para as empresas.
            </p>
          </div>
          <div className="col">
            <h4>Frentes</h4>
            {NICHES.map((n) => <a key={n.id} href={"#" + n.id}>{n.title}</a>)}
          </div>
          <div className="col">
            <h4>Contato</h4>
            <a href={waLink("Olá, Estúdio 23!")} target="_blank" rel="noopener">WhatsApp</a>
            <a href="mailto:contato@estudio23.com">contato@estudio23.com</a>
            <a href="#" target="_blank" rel="noopener">Instagram</a>
            <p>São Paulo, BR</p>
          </div>
        </div>
        <div className="legal">
          <span>© 2026 Estúdio 23</span>
          <span>Direção criativa cinematográfica</span>
        </div>
      </div>
    </footer>
  );
}

function BrandStrip() {
  return (
    <div className="brand-strip">
      <img className="bs-logo" src="uploads/logo-23-footer.svg" alt="" aria-hidden="true" />
      <div className="bs-credit">
        <span>Crafted by</span>
        <img src="uploads/logo-growth-design.svg" alt="Growth Design" />
        <span className="bs-num">#23</span>
      </div>
    </div>
  );
}

function ReelModal({ open, onClose }) {
  useEffect(() => {
    const h = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [onClose]);
  return (
    <div className={"modal" + (open ? " open" : "")} onClick={onClose}>
      <div className="frame" onClick={(e) => e.stopPropagation()}>
        <button className="close" onClick={onClose}>Fechar ✕</button>
        <ReelPlaceholder label={"REEL COMPLETO · 01:30\nsolte o vídeo aqui"} />
        <CropMarks />
      </div>
    </div>
  );
}

function WhatsApp() {
  return (
    <a className="wa-float" href={waLink("Olá, Estúdio 23! Vim pelo site.")} target="_blank" rel="noopener" aria-label="WhatsApp">
      <svg viewBox="0 0 32 32" fill="currentColor"><path d="M16 3C9 3 3.5 8.5 3.5 15.5c0 2.4.7 4.6 1.8 6.5L3 29l7.2-2.3c1.8 1 3.8 1.5 5.8 1.5 7 0 12.5-5.5 12.5-12.5S23 3 16 3zm0 22.7c-1.8 0-3.5-.5-5-1.4l-.4-.2-4.3 1.4 1.4-4.2-.2-.4c-1-1.6-1.5-3.4-1.5-5.4C6 9.9 10.5 5.5 16 5.5S26 9.9 26 15.5 21.5 25.7 16 25.7zm5.7-7.2c-.3-.2-1.8-.9-2.1-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.2-1.3-.5-2.5-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.7l.5-.6c.2-.2.2-.3.4-.5.1-.2.1-.4 0-.5l-1-2.4c-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.4.3-.7.3-1.3.2-1.4-.1-.2-.3-.2-.6-.4z"/></svg>
      <span className="lbl">WhatsApp</span>
    </a>
  );
}

// ---- root ----
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [scrolled, setScrolled] = useState(false);
  const [menu, setMenu] = useState(false);
  const [reel, setReel] = useState(false);
  useReveal();

  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", t.accent);
    r.style.setProperty("--grain", String(t.grain));
    r.style.setProperty("--ink", t.bgTone);
    r.style.setProperty("--display", `"${t.displayFont}", Impact, sans-serif`);
    r.style.setProperty("--ui", `"${t.bodyFont}", "Helvetica Neue", Arial, sans-serif`);
  }, [t]);

  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 40);
    h(); window.addEventListener("scroll", h, { passive: true });
    return () => window.removeEventListener("scroll", h);
  }, []);

  useEffect(() => { window.__loaderDone && window.__loaderDone(); }, []);

  useEffect(() => {
    document.body.style.overflow = (menu || reel) ? "hidden" : "";
    const L = window.__lenis;
    if (L) { (menu || reel) ? L.stop() : L.start(); }
  }, [menu, reel]);

  const openReel = () => setReel(true);

  return (
    <>
      <div className="grain"></div>
      <Nav onMenu={() => setMenu(true)} scrolled={scrolled} />
      <div className={"mmenu" + (menu ? " open" : "")}>
        <button className="nav-cta" style={{ position: "absolute", top: 20, right: "var(--pad)" }} onClick={() => setMenu(false)}>Fechar ✕</button>
        {NAV.map((n, i) => (
          <a key={n.id} href={"portfolio.html?n=" + n.id} onClick={() => setMenu(false)}>
            <span className="mi">{String(i + 1).padStart(2, "0")}</span>{n.label}
          </a>
        ))}
        <a href="#contato" onClick={() => setMenu(false)}><span className="mi">→</span>Contato</a>
      </div>

      <Hero t={t} openReel={openReel} />
      <div className="textured">
        <Logos />
        <Cases openReel={openReel} />
        <About />
        <Niches />
      </div>
      <CtaFinal />
      <Footer />
      <BrandStrip />

      <WhatsApp />
      <ReelModal open={reel} onClose={() => setReel(false)} />

      <TweaksPanel>
        <TweakSection label="Cor" />
        <TweakColor label="Destaque" value={t.accent}
          options={["#C40000", "#CCFF00", "#FFFEDC", "#FF4D2E"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSelect label="Fundo" value={t.bgTone}
          options={[{ value: "#0b0b0b", label: "Preto puro" }, { value: "#141414", label: "Quase-preto" }, { value: "#1a1a1a", label: "Carvão" }]}
          onChange={(v) => setTweak("bgTone", v)} />
        <TweakSection label="Tipografia" />
        <TweakSelect label="Display" value={t.displayFont}
          options={[
            { value: "Tusker Grotesk 3700", label: "Tusker 3700 Bold (padrão)" },
            { value: "Tusker Grotesk", label: "Tusker 2700 Bold" },
            { value: "Tusker Grotesk 1700", label: "Tusker 1700 (estreita)" },
            { value: "Tusker Grotesk 4700", label: "Tusker 4700 (média)" },
            { value: "Tusker Grotesk 6700", label: "Tusker 6700 (larga)" },
            { value: "Tusker Grotesk 8700", label: "Tusker 8700 (extra larga)" },
            { value: "Tusker Grotesk 9800 Super", label: "Tusker 9800 Super" },
            "Anton", "Oswald", "Archivo Black", "Bebas Neue",
          ]}
          onChange={(v) => setTweak("displayFont", v)} />
        <TweakSelect label="Corpo" value={t.bodyFont}
          options={["Poppins"]}
          onChange={(v) => setTweak("bodyFont", v)} />
        <TweakSection label="Textura" />
        <TweakSlider label="Grão" value={t.grain} min={0} max={0.16} step={0.01}
          onChange={(v) => setTweak("grain", v)} />
        <TweakSection label="Copy" />
        <TweakText label="H1 (use *palavra* p/ vermelho)" value={t.h1}
          onChange={(v) => setTweak("h1", v)} />
      </TweaksPanel>
    </>
  );
}

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