/* global React, ReactDOM */
const { useState, useEffect } = React;

/* ---------- Reused atoms ---------- */
function Logo() {
  return (
    <a href="index.html" className="logo" aria-label="VoiderBox">
      <img src="assets/voiderbox-logo.png" alt="VOIDERBOX" />
    </a>
  );
}

function ArrowLeft() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
      <path d="M13 8H3M3 8L7 4M3 8L7 12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function ArrowRight({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 18 18" fill="none">
      <path d="M3 9H15M15 9L10 4M15 9L10 14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function ChainArrow() {
  return (
    <svg width="32" height="14" viewBox="0 0 32 14" fill="none">
      <path d="M1 7H30M30 7L24 2M30 7L24 12" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

/* ---------- Case topbar ---------- */
function CaseTopbar() {
  return (
    <header className="case-topbar">
      <div className="container case-topbar__row">
        <a href="index.html" className="case-topbar__back">
          <ArrowLeft /> Voltar ao portal
        </a>
        <Logo />
        <div className="case-topbar__crumb case-topbar__crumb--study">
          <span className="case-topbar__study">Conceptual Study <span className="sep">·</span> Not Affiliated</span>
          <a href="cases.html" className="case-topbar__crumb-main" style={{textDecoration:"none",color:"inherit"}}>Estudos de caso <span className="sep">·</span> 02</a>
        </div>
        <div className="lang-switch" aria-label="Idioma / Language">
            <span className="lang-switch__opt is-active">PT</span>
            <span className="lang-switch__sep" aria-hidden="true">|</span>
            <a className="lang-switch__opt" href="en/coca-cola.html" hrefLang="en">EN</a>
          </div>
      </div>
    </header>
  );
}

/* ---------- Hero ---------- */
function CaseHero() {
  return (
    <section className="case-hero case-hero--coca" data-screen-label="01 Case Hero">
      <div className="case-hero__bg">
        <img src="assets/coca-after.jpg" alt="A Origem do Som — Coca-Cola Rock in Rio" />
      </div>
      <div className="container case-hero__content">
        <div className="case-hero__meta">
          <span>Coca-Cola</span>
          <span className="dot">/</span>
          <span>Estudo conceitual</span>
          <span className="dot">/</span>
          <span>Direção exploratória</span>
          <span className="dot">/</span>
          <span>2026</span>
        </div>
        <h1 className="case-hero__title">
          Quando uma ativação <em>deixa de ser um stand.</em>
        </h1>
        <p className="case-hero__sub">
          Exploração conceitual inspirada em uma ativação Coca-Cola para Rock in Rio, reinterpretada pelo <strong>VOID</strong> através de uma mudança de contexto estrutural.
        </p>
      </div>
      <div className="case-hero__scroll">
        <span>Scroll</span>
        <span className="case-hero__scroll-line"></span>
      </div>
    </section>
  );
}

/* ---------- Briefing original ---------- */
function Brief() {
  const quotes = [
    { num: "T-01", text: "Energia do festival." },
    { num: "T-02", text: "Refresco imediato." },
    { num: "T-03", text: "Espaço instagramável." },
    { num: "T-04", text: "LED + impacto visual." },
    { num: "T-05", text: "Fluxo circular." },
    { num: "T-06", text: "“O Som do Gás.”" },
  ];
  return (
    <section className="case-section brief" data-screen-label="02 Briefing">
      <div className="container brief__grid">
        <div className="brief__head">
          <div className="case-section__index">
            <span className="num">01 / 09</span> Briefing original
          </div>
          <h2 className="case-section__title">
            O ponto de partida.
          </h2>
          <p className="case-section__intro">
            Trechos de um <em>briefing sintético</em> inspirado em ativações de marca para festivais — território Coca-Cola × Rock in Rio. O ponto de partida era um espaço instagramável, refrescante e energeticamente conectado ao festival.
          </p>
        </div>
        <div className="brief__quotes">
          {quotes.map((q) => (
            <div className="brief__quote" data-num={q.num} key={q.num}>{q.text}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Before (O Sabor do Seu Ritmo) ---------- */
function Before() {
  return (
    <section className="case-section case-visual" data-screen-label="03 Before">
      <div className="container">
        <div className="case-visual__grid">
          <div className="case-visual__media">
            <img src="assets/coca-before.jpg" alt="O Sabor do Seu Ritmo — caminho previsível" />
            <div className="case-visual__media-caption">
              <span className="tag">BEFORE</span> O Sabor do Seu Ritmo
            </div>
          </div>
          <div className="case-visual__copy">
            <div className="case-visual__kicker case-visual__kicker--before">
              <span>02 / 09 &nbsp; O caminho previsível</span>
            </div>
            <h2 className="case-visual__title">
              O Sabor do <em>Seu Ritmo.</em>
            </h2>
            <p className="case-visual__text">
              A primeira direção seguia o território esperado para ativações de grandes marcas em festivais: monumentalidade visual, branding explícito e impacto cenográfico imediato.
            </p>
            <p className="case-visual__text">
              Tecnicamente forte. Visualmente eficiente. Mas ainda operando dentro da <strong style={{color: "var(--gold)", fontWeight: 500}}>média generativa</strong> de ativações de marca em festivais.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Human Decision (3 routes) ---------- */
function HumanDecision() {
  const routes = [
    { id: "C1", label: "Brand Monumental", note: "Previsível", state: "ghost" },
    { id: "C2", label: "Liquid Celebration", note: "Promissor", state: "ghost" },
    { id: "C3", label: "Resonância Estrutural", note: "Escolhida", state: "chosen" },
  ];
  return (
    <section className="case-section human-decision" data-screen-label="03 Human Decision">
      <div className="container">
        <div className="case-section__index">
          <span className="num">03 / 09</span> A decisão humana
        </div>
        <h2 className="case-section__title">
          O humano propõe. <em>O VOID explora.</em>
        </h2>
        <p className="case-section__intro">
          A partir do briefing inicial, o Voider direcionou o sistema para diferentes possibilidades estratégicas. O VOID reorganizou essas decisões em três rotas exploratórias coerentes com o briefing original.
        </p>
        <div className="routes">
          {routes.map((r) => (
            <div key={r.id} className={`route route--${r.state}`}>
              <div className="route__head">
                <span className="route__id">{r.id}</span>
                <span className="route__note">{r.note}</span>
              </div>
              <div className="route__label">{r.label}</div>
            </div>
          ))}
        </div>
        <p className="human-decision__why">
          <span className="human-decision__why-tag">Por que C3?</span>
          <span className="human-decision__why-body">O Voider escolheu explorar <em>C3</em> porque ela transformava o stand em experiência arquitetônica — não apenas em superfície publicitária.</span>
        </p>
      </div>
    </section>
  );
}

/* ---------- Semantic Collision (operator: parametric waves) ---------- */
function Collision() {
  return (
    <section className="case-section collision" data-screen-label="04 Semantic Collision">
      <div className="container">
        <div className="collision__lead">
          <div className="collision__index">04 / 09 &nbsp;·&nbsp; Operador contextual</div>
          <h2 className="collision__title">
            Semantic <span className="ampersand">Collision<span className="tm">™</span></span>
          </h2>
          <p className="collision__sub">
            A ativação deixou de operar apenas como branding de festival e passou a <em>explorar ressonância espacial.</em>
          </p>
        </div>

        <div className="collision__pivot">
          <div className="collision__image">
            <img src="assets/coca-operator.jpg" alt="Estruturas topográficas onduladas — imagem operadora de contexto" />
            <div className="collision__image-frame"></div>
            <div className="collision__image-tag">Operador semiótico · não referência visual</div>
          </div>
          <div className="collision__copy">
            <h3>A ruptura.</h3>
            <p>
              O Voider introduziu uma nova leitura contextual — <em>estruturas topográficas onduladas</em> — como <strong>operador contextual</strong> (Semantic Collision).
            </p>
            <p>
              A imagem <strong>não foi usada como referência estética direta</strong>. Foi injetada como deslocamento conceitual.
            </p>
            <p>
              O VOID então <strong>reorganizou toda a experiência da campanha</strong> em torno desse novo eixo.
            </p>
            <p>
              O stand deixou de ser apenas um espaço promocional. Passou a operar como <em>origem sonora</em> — um núcleo pulsante, uma topografia viva, uma arquitetura de ressonância coletiva.
            </p>
          </div>
        </div>

        <div className="collision__chain" aria-label="Antes, contexto, nova direção">
          <div className="collision__node">
            <span className="collision__node-label">Antes</span>
            <span className="collision__node-text">Stand promocional monumental</span>
          </div>
          <div className="collision__arrow"><ChainArrow /></div>
          <div className="collision__node collision__node--pivot">
            <span className="collision__node-label">Contexto</span>
            <span className="collision__node-text">Ressonância · topografia · núcleo sonoro</span>
          </div>
          <div className="collision__arrow"><ChainArrow /></div>
          <div className="collision__node">
            <span className="collision__node-label">Nova direção</span>
            <span className="collision__node-text">Arquitetura pulsante · “A Origem do Som”</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- After (A Origem do Som) ---------- */
function After() {
  return (
    <section className="case-section case-visual" data-screen-label="05 After">
      <div className="container">
        <div className="case-visual__grid case-visual__grid--reverse">
          <div className="case-visual__media">
            <img src="assets/coca-after.jpg" alt="A Origem do Som — nova direção" />
            <div className="case-visual__media-caption">
              <span className="tag">AFTER</span> A Origem do Som
            </div>
          </div>
          <div className="case-visual__copy">
            <div className="case-visual__kicker case-visual__kicker--after">
              <span>05 / 09 &nbsp; Nova direção</span>
            </div>
            <h2 className="case-visual__title">
              A Origem <em>do Som.</em>
            </h2>
            <p className="case-visual__text">
              A nova direção deixou de falar apenas sobre refrescância e entretenimento. Passou a <em>explorar</em> a Coca-Cola como <strong style={{color: "var(--gold)", fontWeight: 500}}>núcleo vibracional</strong> da experiência coletiva do festival.
            </p>
            <p className="case-visual__text">
              Mesmo território de marca. Mesmo contexto de festival. Um <strong>eixo conceitual</strong> completamente diferente — imediatamente distinguível da média generativa.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Side-by-Side Comparison ---------- */
function Transformation() {
  return (
    <section className="case-section transformation" data-screen-label="06 Transformation">
      <div className="container">
        <div className="case-section__index">
          <span className="num">06 / 09</span> The Transformation
        </div>
        <h2 className="case-section__title">
          Mesmo briefing.<br /><em>Dois mundos distintos.</em>
        </h2>
      </div>
      <div className="split" aria-label="Comparação antes e depois">
        <div className="split__side split__side--before">
          <img src="assets/coca-before.jpg" alt="" />
          <div className="split__label">
            <span className="split__tag">Território previsível</span>
            <span className="split__caption">“O Sabor do Seu Ritmo”</span>
          </div>
        </div>
        <div className="split__divider" aria-hidden="true"></div>
        <div className="split__side split__side--after">
          <img src="assets/coca-after.jpg" alt="" />
          <div className="split__label split__label--right">
            <span className="split__tag split__tag--gold">Nova direção</span>
            <span className="split__caption">“A Origem do Som”</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Video ---------- */
function VideoSection() {
  return (
    <section className="case-section case-video" data-screen-label="07 Video">
      <div className="container">
        <div className="case-video__lead">
          <div className="case-section__index">
            <span className="num">07 / 09</span> Resultado em movimento
          </div>
          <h2 className="case-section__title" style={{margin: "0 auto", maxWidth: "22ch"}}>
            Onde <em>refresca,</em> ressoa.
          </h2>
        </div>
        <div className="case-video__shell">
          <video
            className="case-video__player"
            src="assets/coca-final.mp4"
            controls
            playsInline
            preload="metadata"
            poster=""
          ></video>
        </div>
        <div className="case-video__caption">
          A Origem do Som · <span style={{color: "var(--gold)"}}>Coca-Cola × Rock in Rio</span>
        </div>
      </div>
    </section>
  );
}

/* ---------- What changed ---------- */
function Changes() {
  const items = [
    { label: <>O <span className="muted">eixo</span> espacial</> },
    { label: <>A <span className="muted">percepção</span> arquitetônica</> },
    { label: <>A <span className="muted">relação</span> emocional com o público</> },
    { label: <>A <span className="muted">função</span> simbólica da Coca-Cola dentro do festival</> },
  ];
  return (
    <section className="case-section changes" data-screen-label="08 What changed">
      <div className="container">
        <div className="changes__grid">
          <div>
            <div className="case-section__index">
              <span className="num">08 / 09</span> O que mudou
            </div>
            <p className="changes__lede">
              Não mudou apenas o <em>stand</em>.<br />
              Mudou a lógica da experiência.
            </p>
          </div>
          <ul className="changes__list">
            {items.map((it, i) => (
              <li key={i}>
                <span className="index">{String(i + 1).padStart(2, "0")}</span>
                <span className="label">{it.label}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

/* ---------- Why this matters ---------- */
function WhyMatters() {
  const items = [
    {
      t: "Saiu da linguagem saturada de ativação promocional",
      d: "Rompeu com o vocabulário de stand-pavilhão-LED que toda marca usa em festival.",
    },
    {
      t: "Transformou branding em arquitetura experiencial",
      d: "A presença da marca deixou de ser superfície e passou a ser estrutura habitável.",
    },
    {
      t: "Criou presença simbólica imediatamente distinguível",
      d: "Distinta da média generativa de ativações de festival.",
    },
    {
      t: "Preservou reconhecimento simbólico sob nova reorganização contextual",
      d: "A identidade da marca permanece reconhecível mesmo sob um novo eixo conceitual — coerência sem depender de excesso visual.",
    },
  ];
  return (
    <section className="case-section why-matters" data-screen-label="09 Why Matters">
      <div className="container">
        <div className="why-matters__head">
          <div className="case-section__index">
            <span className="num">09 / 09</span> Por que isso importa
          </div>
          <h2 className="case-section__title">
            Não é apenas cenografia.<br /><em>É reorganização experiencial.</em>
          </h2>
        </div>
        <ul className="why-matters__list">
          {items.map((it, i) => (
            <li key={i}>
              <span className="why-matters__num">{String(i + 1).padStart(2, "0")}</span>
              <div className="why-matters__copy">
                <h3>{it.t}</h3>
                <p>{it.d}</p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

/* ---------- Sticky floating CTA ---------- */
function StickyCTA() {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const onScroll = () => {
      const scrolled = window.scrollY;
      const max = document.documentElement.scrollHeight - window.innerHeight;
      const pct = max > 0 ? scrolled / max : 0;
      setVisible(pct > 0.5 && pct < 0.92);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <a
      className={`sticky-cta ${visible ? "is-visible" : ""}`}
      href="void-studio.html"
      aria-hidden={!visible}
    >
      <span className="sticky-cta__pulse" aria-hidden="true"></span>
      <span className="sticky-cta__text">Quero criar campanhas assim</span>
      <ArrowRight size={16} />
    </a>
  );
}

/* ---------- Final CTA ---------- */
function FinalCTA() {
  return (
    <section className="case-cta" data-screen-label="10 CTA">
      <div className="container case-cta__inner">
        <span className="case-cta__eyebrow">Acesso antecipado</span>
        <h2 className="case-cta__title">
          Reserve acesso ao <em>VOID Studio.</em>
        </h2>
        <p className="case-cta__sub">
          Cases como este nascem de mudanças de contexto. Entre na lista e seja avisado quando os testes do VOID Studio forem liberados.
        </p>
        <a className="case-cta__btn" href="void-studio.html">
          Quero experimentar o VOID Studio <ArrowRight />
        </a>
        <div className="case-cta__note">Acesso antecipado · em breve</div>
        <div className="case-cta__disclaimer">
          *Estudo conceitual independente criado para exploração estratégica e visual. Não afiliado à Coca-Cola ou Rock in Rio.
        </div>
      </div>
    </section>
  );
}

/* ---------- Case-to-case nav ---------- */
function CaseNav() {
  return (
    <nav className="case-nav" aria-label="Próximo case">
      <div className="container case-nav__row">
        <div className="case-nav__label">Próximo estudo de caso</div>
        <a className="case-nav__link" href="vistusen-45.html">
          <span className="case-nav__title">VISTUSEN 45 — Un silence qui déchire l'air</span>
          <ArrowRight />
        </a>
      </div>
    </nav>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer" data-screen-label="11 Footer">
      <div className="container">
        <div className="divider-ornament" aria-hidden="true">
          <span className="line"></span>
          <svg width="10" height="10" viewBox="0 0 10 10"><path d="M5 0L10 5L5 10L0 5Z" fill="currentColor" /></svg>
          <span className="line"></span>
        </div>
        <div className="footer__logo">
          <a href="index.html" className="logo logo--footer" aria-label="VoiderBox">
            <img src="assets/voiderbox-logo.png" alt="VOIDERBOX" />
          </a>
        </div>
        <p className="footer__text">
          VOIDERBOX é o ecossistema criado para expandir a criatividade humana e transformar intenções em obras que deixam marca.
        </p>
        <div className="footer__meta">
          <span>© 2026 VoiderBox</span>
          <nav className="footer__meta-links">
            <a href="#">Privacidade</a>
            <a href="#">Termos</a>
            <a href="#">Contato</a>
          </nav>
        </div>
      </div>
    </footer>
  );
}

/* ---------- App ---------- */
function CaseCoca() {
  return (
    <>
      <CaseTopbar />
      <main>
        <CaseHero />
        <Brief />
        <Before />
        <HumanDecision />
        <Collision />
        <After />
        <Transformation />
        <VideoSection />
        <Changes />
        <WhyMatters />
        <FinalCTA />
        <CaseNav />
      </main>
      <StickyCTA />
      <Footer />
    </>
  );
}

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