/* 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 />
        <a href="cases.html" className="case-topbar__crumb" style={{textDecoration:"none",color:"inherit"}}>
          Estudos de caso <span className="sep">·</span> 01
        </a>
        <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/polestar.html" hrefLang="en">EN</a>
          </div>
      </div>
    </header>
  );
}

/* ---------- Hero ---------- */
function CaseHero() {
  return (
    <section className="case-hero" data-screen-label="01 Case Hero">
      <div className="case-hero__bg">
        <img src="assets/polestar-hero.png" alt="The Moving Monolith — Polestar 4" />
      </div>
      <div className="container case-hero__content">
        <div className="case-hero__meta">
          <span>Polestar 4</span>
          <span className="dot">/</span>
          <span>EV Premium</span>
          <span className="dot">/</span>
          <span>Direção VOID</span>
          <span className="dot">/</span>
          <span>2026</span>
        </div>
        <h1 className="case-hero__title">
          Quando uma campanha <em>muda de direção.</em>
        </h1>
        <p className="case-hero__sub">
          Como o <strong>VOID</strong> reorganizou o posicionamento do Polestar&nbsp;4 através de uma mudança de contexto semiótico.
        </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: "Silêncio urbano." },
    { num: "T-02", text: "Minimalismo premium." },
    { num: "T-03", text: "Calma ativa." },
    { num: "T-04", text: "Arquitetura brutalista." },
    { num: "T-05", text: "Sofisticação escandinava." },
    { num: "T-06", text: "Refúgio sensorial." },
  ];
  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 do briefing inicial — territórios sensoriais associados ao Polestar 4. Vocabulário consistente, alinhado ao posicionamento atual da marca.
          </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 (Architecture of Silence) ---------- */
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/polestar-before.png" alt="The Architecture of Silence — caminho previsível" />
            <div className="case-visual__media-caption">
              <span className="tag">BEFORE</span> The Architecture of Silence
            </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">
              The <em>Architecture</em> of Silence.
            </h2>
            <p className="case-visual__text">
              A primeira direção seguia um território esperado para EV premium: arquitetura minimalista, concreto, silêncio e sofisticação escandinava.
            </p>
            <p className="case-visual__text">
              Tecnicamente competente. Esteticamente refinada. Mas inserida exatamente no centro da média estatística que as IAs generativas produzem quando recebem o termo "Polestar".
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Semantic Collision — pyramids pivotal moment ---------- */
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 de contexto</div>
          <h2 className="collision__title">
            Semantic <span className="ampersand">Collision<span className="tm">™</span></span>
          </h2>
          <p className="collision__sub">
            A campanha deixou de falar apenas sobre silêncio urbano e passou a <em>explorar permanência monumental.</em>
          </p>
        </div>

        <div className="collision__pivot">
          <div className="collision__image">
            <img src="assets/polestar-pyramids.jpg" alt="Pirâmides — 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 — a imagem das pirâmides — como <em>operador semiótico</em>.
            </p>
            <p>
              A imagem <strong>não foi usada como referência visual</strong>. Foi injetada como deslocamento conceitual.
            </p>
            <p>
              O VOID então <strong>reorganizou toda a leitura estratégica</strong> da campanha em torno desse novo eixo.
            </p>
            <p>
              O veículo deixou de ser apenas um SUV elétrico minimalista. Passou a ser tratado como um <em>monólito em movimento</em>: um objeto geológico, silencioso e permanente dentro do caos urbano.
            </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">Silêncio urbano · arquitetura minimalista</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">Permanência monumental · objeto geológico</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">Monólito em movimento · Static precision, kinetic soul</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Human Decision (3 routes) ---------- */
function HumanDecision() {
  const routes = [
    { id: "C1", label: "Performance + Futurismo", note: "Previsível", state: "ghost" },
    { id: "C2", label: "Luxury + Serenity", note: "Promissor", state: "ghost" },
    { id: "C3", label: "Stillness + Motion", 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 rompia o território saturado sem perder coerência com o produto.</span>
        </p>
      </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/polestar-before.png" alt="" />
          <div className="split__label">
            <span className="split__tag">Território previsível</span>
            <span className="split__caption">The Architecture of Silence</span>
          </div>
        </div>
        <div className="split__divider" aria-hidden="true"></div>
        <div className="split__side split__side--after">
          <img src="assets/polestar-after.png" alt="" />
          <div className="split__label split__label--right">
            <span className="split__tag split__tag--gold">Nova direção</span>
            <span className="split__caption">The Moving Monolith</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Why This Matters ---------- */
function WhyMatters() {
  const items = [
    {
      t: "Saiu do território saturado",
      d: "Rompeu com a categoria 'performance tech' onde toda EV premium se aglomera.",
    },
    {
      t: "Criou nova associação emocional",
      d: "Mudou de 'ação' para 'contemplação' — recodifica como o produto é sentido.",
    },
    {
      t: "Diferenciação imediata vs. concorrentes",
      d: "Imediatamente distinguível da média generativa produzida dentro da categoria.",
    },
    {
      t: "Coerência com posicionamento premium",
      d: "Ruptura semiótica sem perder valor de marca — eleva, não destoa.",
    },
  ];
  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 estética.<br /><em>É reposicionamento.</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>
  );
}

/* ---------- After (The Moving Monolith) ---------- */
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/polestar-after.png" alt="The Moving Monolith — nova direção" />
            <div className="case-visual__media-caption">
              <span className="tag">AFTER</span> The Moving Monolith
            </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">
              The Moving <em>Monolith.</em>
            </h2>
            <p className="case-visual__text">
              A campanha deixou de falar apenas sobre silêncio urbano e passou a posicionar o carro como um <strong style={{color: "var(--gold)", fontWeight: 500}}>objeto geológico em movimento</strong>.
            </p>
            <p className="case-visual__text">
              Mesma marca. Mesmo produto. Mesmo briefing. Mas uma <strong style={{color: "var(--gold)", fontWeight: 500}}>direção narrativa</strong> completamente diferente — e imediatamente distinguível da média generativa.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Video ---------- */
function VideoSection() {
  return (
    <section className="case-section case-video" data-screen-label="06 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: "20ch"}}>
            <em>Static precision,</em> kinetic soul.
          </h2>
        </div>
        <div className="case-video__shell">
          <video
            className="case-video__player"
            src="assets/polestar-final.mp4"
            controls
            playsInline
            preload="metadata"
            poster=""
          ></video>
        </div>
        <div className="case-video__caption">
          The Moving Monolith · <span style={{color: "var(--gold)"}}>Polestar 4</span>
        </div>
      </div>
    </section>
  );
}

/* ---------- What changed ---------- */
function Changes() {
  const items = [
    { label: <>O <span className="muted">eixo</span> narrativo</> },
    { label: <>A <span className="muted">leitura</span> simbólica</> },
    { label: <>O <span className="muted">posicionamento</span> emocional</> },
    { label: <>A <span className="muted">percepção</span> de permanência e presença do produto</> },
  ];
  return (
    <section className="case-section changes" data-screen-label="07 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 a <em>estética</em>.<br />
              Mudou a direção da campanha.
            </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>
  );
}

/* ---------- 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="coca-cola.html">
          <span className="case-nav__title">Coca-Cola — A Origem do Som</span>
          <ArrowRight />
        </a>
      </div>
    </nav>
  );
}

/* ---------- Final CTA ---------- */
function FinalCTA() {
  return (
    <section className="case-cta" data-screen-label="08 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">
          *Briefing sintético baseado em posicionamento real da Polestar.
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer (simplified) ---------- */
function Footer() {
  return (
    <footer className="footer" data-screen-label="09 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 CasePolestar() {
  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(<CasePolestar />);