/* 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> 03</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/vistusen-45.html" hrefLang="en">EN</a>
          </div>
      </div>
    </header>
  );
}

/* ---------- Hero ---------- */
function CaseHero() {
  return (
    <section className="case-hero case-hero--vistusen" data-screen-label="01 Case Hero">
      <div className="case-hero__bg">
        <img src="assets/vistusen-after.jpg" alt="VISTUSEN 45 — Un silence qui déchire l'air" />
      </div>
      <div className="container case-hero__content">
        <div className="case-hero__meta">
          <span>VISTUSEN 45</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 case-hero__title--vistusen">
          <span className="brand">VISTUSEN 45</span>
          <span className="phrase">Un silence qui déchire l'air.</span>
          <em>(Um silêncio que corta o ar.)</em>
        </h1>
        <p className="case-hero__sub">
          Quando uma fragrância deixa de ser apenas objeto — e passa a atravessar o espaço. Exploração conceitual reinterpretada pelo <strong>VOID</strong> através de uma mudança de contexto.
        </p>
      </div>
      <div className="case-hero__scroll">
        <span>Scroll</span>
        <span className="case-hero__scroll-line"></span>
      </div>
    </section>
  );
}

/* ---------- 01 / 09 — Briefing original ---------- */
function Brief() {
  const bullets = [
    { num: "B-01", text: "Perfume feminino niche premium." },
    { num: "B-02", text: "Brutalismo sensorial." },
    { num: "B-03", text: "Arquitetura emocional." },
    { num: "B-04", text: "Elegância estrutural." },
    { num: "B-05", text: "Presença silenciosa." },
    { num: "B-06", text: "Mídia impressa editorial." },
    { num: "B-07", text: "Europa · luxo contemporâneo." },
  ];
  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 <em>de partida.</em>
          </h2>
          <p className="case-section__intro">
            VISTUSEN 45 nasce como uma fragrância feminina premium conceitual, inspirada em brutalismo sensorial, arquitetura emocional e elegância estrutural contemporânea.
          </p>
          <p className="case-section__intro" style={{ marginTop: 18 }}>
            O briefing propunha lançar o perfume como símbolo de <em style={{ color: "var(--gold)", fontStyle: "italic" }}>presença silenciosa, força estética e sensualidade estrutural</em>, em uma campanha de mídia impressa voltada ao público europeu de luxo editorial.
          </p>
        </div>
        <div className="brief__quotes">
          {bullets.map((q) => (
            <div className="brief__quote" data-num={q.num} key={q.num}>{q.text}</div>
          ))}
        </div>
      </div>
      <div className="container">
        <p className="brief__closer">
          O desafio era claro: transformar brutalismo <em>em desejo</em> sem perder sofisticação.
        </p>
      </div>
    </section>
  );
}

/* ---------- 02 / 09 — Caminho previsível (BEFORE) ---------- */
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/vistusen-before.jpg" alt="La structure de l'élégance — caminho previsível" />
            <div className="case-visual__media-caption">
              <span className="tag">BEFORE</span> La structure de l'élégance
            </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">
              A estrutura <em>da elegância.</em>
            </h2>
            <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 4 }}>
              <p style={{ margin: 0, fontSize: 22, lineHeight: 1.3 }}>
                <span className="fr">«&nbsp;La structure de l'élégance.&nbsp;»</span>
                <span className="tr">(A estrutura da elegância.)</span>
              </p>
              <p style={{ margin: 0, fontSize: 19, lineHeight: 1.35 }}>
                <span className="fr">«&nbsp;Un manifeste brutaliste signé Dior.&nbsp;»</span>
                <span className="tr">(Um manifesto brutalista assinado Dior.)</span>
              </p>
            </div>
            <p className="case-visual__text">
              A primeira direção era coerente: o perfume como microarquitetura. Frasco, concreto, vidro pesado, luz geométrica e composição minimalista.
            </p>
            <p className="case-visual__text">
              Era uma campanha forte, elegante e tecnicamente alinhada ao território do luxo arquitetônico. Mas ainda operava dentro de um eixo previsível: o perfume como objeto imóvel, contemplado, escultórico.
            </p>
            <p className="pull-quote">
              Tecnicamente sofisticada. Visualmente precisa. Mas ainda <em style={{ color: "var(--gold)", fontStyle: "italic" }}>estática.</em>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- 03 / 09 — Operador contextual (guepardo) — A ruptura ---------- */
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">03 / 09 &nbsp;·&nbsp; Semantic Collision</div>
          <h2 className="collision__title">
            Semantic <span className="ampersand">Collision<span className="tm">™</span></span>
          </h2>
          <p className="collision__sub">
            O Voider <em>(o humano que dirige a campanha)</em> introduziu uma nova imagem de contexto: um guepardo em deslocamento.
          </p>
        </div>

        <div className="collision__pivot">
          <div className="collision__image">
            <img src="assets/vistusen-operator.jpg" alt="Guepardo em deslocamento — operador contextual" />
            <div className="collision__image-frame"></div>
            <div className="collision__image-tag">Operador contextual · não referência visual literal</div>
          </div>
          <div className="collision__copy">
            <h3>A ruptura.</h3>
            <p>
              A imagem <strong>não foi usada para transformar a campanha em uma campanha sobre animalidade.</strong> Ela foi usada para deslocar a lógica da campanha: de <em>objeto imóvel</em> para <em>presença em movimento</em>.
            </p>
            <p>
              Não entrou como referência estética literal. Entrou como <em>mudança de leitura</em> — evidência do mecanismo, não protagonista do anúncio.
            </p>
            <p>
              De <strong>escultura</strong> para <strong>vetor</strong>.<br />
              De <strong>arquitetura parada</strong> para <strong>rastro no ar</strong>.
            </p>
          </div>
        </div>

        <div className="collision__chain" aria-label="Antes, contexto, nova leitura">
          <div className="collision__node">
            <span className="collision__node-label">Antes</span>
            <span className="collision__node-text">Objeto arquitetônico</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">Velocidade · suspensão · precisão · rastro</span>
          </div>
          <div className="collision__arrow"><ChainArrow /></div>
          <div className="collision__node">
            <span className="collision__node-label">Nova leitura</span>
            <span className="collision__node-text">Presença invisível em deslocamento</span>
          </div>
        </div>

        <p style={{ marginTop: 64, textAlign: "center", fontFamily: "var(--vist-serif)", fontStyle: "italic", fontSize: 16, color: "var(--ink-dim)", letterSpacing: "0.01em" }}>
          Guepardo em movimento — operador contextual, não referência visual literal.
        </p>
      </div>
    </section>
  );
}

/* ---------- 04 / 09 — Decisão humana (3 rotas em francês) ---------- */
function HumanDecision() {
  const routes = [
    {
      id: "C1",
      fr: "La précision de l'élan",
      tr: "(A precisão do impulso)",
      type: "Rota funcional · técnica",
      note: "Funcional",
      state: "ghost",
    },
    {
      id: "C2",
      fr: "Un silence qui déchire l'air",
      tr: "(Um silêncio que corta o ar)",
      type: "Presença · sensorial · editorial",
      note: "Rota escolhida",
      state: "chosen",
    },
    {
      id: "C3",
      fr: "L'impact du vide",
      tr: "(O impacto do vazio)",
      type: "Rota extrema · literal",
      note: "Extrema",
      state: "ghost",
    },
  ];
  return (
    <section className="case-section human-decision" data-screen-label="05 Human Decision">
      <div className="container">
        <div className="case-section__index">
          <span className="num">04 / 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 dessa colisão contextual, o VOID reorganizou o briefing em novas rotas criativas. O Voider escolheu seguir pela rota <em style={{ color: "var(--gold)", fontStyle: "italic" }}>C2</em>, porque ela preservava luxo, silêncio, presença feminina e sofisticação — sem transformar a ruptura em violência literal.
        </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>
                <p className="route__fr">«&nbsp;{r.fr}&nbsp;»</p>
                <span className="route__tr">{r.tr}</span>
              </div>
              <span className="route__type">{r.type}</span>
            </div>
          ))}
        </div>
        <div className="human-decision__why">
          <span className="human-decision__why-tag">Por que C2?</span>
          <span className="human-decision__why-body" style={{ fontStyle: "italic", fontFamily: "var(--vist-serif)", fontSize: 19, lineHeight: 1.45, color: "var(--vist-bone)" }}>
            Porque ela transformava o perfume em <em style={{ color: "var(--gold)" }}>presença</em>, não em impacto físico — mantendo a elegância e incorporando o movimento de forma sutil, sensorial e editorial.
          </span>
        </div>
      </div>
    </section>
  );
}

/* ---------- 05 / 09 — Nova direção (AFTER) ---------- */
function After() {
  return (
    <section className="case-section case-visual" data-screen-label="06 After">
      <div className="container">
        <div className="case-visual__grid case-visual__grid--reverse">
          <div className="case-visual__media">
            <img src="assets/vistusen-after.jpg" alt="Un silence qui déchire l'air — nova direção" />
            <div className="case-visual__media-caption">
              <span className="tag">AFTER</span> Un silence qui déchire l'air
            </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="after-headline">
              Un silence qui déchire l'air.
              <span className="tr">(Um silêncio que corta o ar.)</span>
            </h2>
            <p className="after-sub">
              La fragrance d'une présence foudroyante.
              <span className="tr">(A fragrância de uma presença fulminante.)</span>
            </p>
            <p className="case-visual__text" style={{ marginTop: 12 }}>
              A campanha deixa de vender apenas a estrutura do frasco e passa a vender a <em style={{ color: "var(--gold)", fontStyle: "italic" }}>ação invisível</em> da fragrância.
            </p>
            <p className="case-visual__text">
              «&nbsp;Un silence qui déchire l'air&nbsp;» não descreve apenas uma mulher em movimento. Descreve a própria sensação do perfume: algo invisível, silencioso e preciso, que atravessa o ar e altera a tensão do espaço.
            </p>
            <div className="after-stack">
              <span>O perfume deixa de ser apenas objeto.</span>
              <span>Vira rastro.</span>
              <span>Vira presença.</span>
              <span>Vira corte silencioso.</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- 06 / 09 — The Transformation ---------- */
function Transformation() {
  return (
    <section className="case-section transformation" data-screen-label="07 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/vistusen-before.jpg" alt="" />
          <div className="split__label">
            <span className="split__tag">Antes</span>
            <span className="split__caption">
              «&nbsp;La structure de l'élégance.&nbsp;»
              <span className="split__territory">Frasco · concreto · microarquitetura · contemplação</span>
            </span>
          </div>
        </div>
        <div className="split__divider" aria-hidden="true"></div>
        <div className="split__side split__side--after">
          <img src="assets/vistusen-after.jpg" alt="" />
          <div className="split__label split__label--right">
            <span className="split__tag split__tag--gold">Depois</span>
            <span className="split__caption">
              «&nbsp;Un silence qui déchire l'air.&nbsp;»
              <span className="split__territory">Presença · rastro · deslocamento · ar</span>
            </span>
          </div>
        </div>
      </div>
      <div className="container">
        <p className="transformation__closer">
          A mudança não foi <em>de estética.</em><br />
          Foi de <em>eixo perceptivo.</em>
        </p>
      </div>
    </section>
  );
}

/* ---------- 07 / 09 — Vídeo ---------- */
function VideoSection() {
  return (
    <section className="case-section case-video" data-screen-label="08 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: "24ch" }}>
            Do objeto imóvel <em>à presença fulminante.</em>
          </h2>
          <p className="case-section__intro" style={{ margin: "28px auto 0", maxWidth: "56ch" }}>
            O vídeo mostra a transição entre a campanha inicial, o operador contextual e a nova direção. O guepardo aparece como ponto de ruptura: não como personagem final, mas como imagem capaz de deslocar a leitura da campanha.
          </p>
        </div>
        <div className="case-video__shell">
          <video
            className="case-video__player"
            src="assets/vistusen-final.mp4"
            controls
            playsInline
            preload="metadata"
            poster=""
          ></video>
        </div>
        <p className="video-pullquote">
          A fragrância não <em>ocupa</em> o espaço.<br />
          Ela <em>atravessa.</em>
        </p>
      </div>
    </section>
  );
}

/* ---------- 08 / 09 — O que mudou (4 cards) ---------- */
function Changes() {
  const items = [
    { from: "Do frasco como arquitetura", to: "para o perfume como presença." },
    { from: "Da contemplação estática", to: "para a tensão em movimento." },
    { from: "Do concreto como cenário", to: "para o ar como campo sensorial." },
    { from: "Da elegância estrutural", to: "para um silêncio que corta o espaço." },
  ];
  return (
    <section className="case-section changes" data-screen-label="09 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>anúncio.</em><br />
              Mudou a <em>lógica da presença.</em>
            </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">
                  <span className="changes__from">{it.from}</span>
                  <span className="changes__to">{it.to}</span>
                </span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

/* ---------- 09 / 09 — Por que isso importa ---------- */
function WhyMatters() {
  const items = [
    {
      t: "Saiu do eixo objeto / frasco / contemplação",
      d: "A campanha deixou de depender apenas da beleza do produto.",
    },
    {
      t: "Entrou no eixo presença / rastro / deslocamento",
      d: "A fragrância passou a ser percebida como ação invisível no espaço.",
    },
    {
      t: "Preservou o território premium",
      d: "A ruptura não quebrou o luxo; apenas mudou sua lógica.",
    },
    {
      t: "Transformou estética em direção",
      d: "A mudança visual nasceu de uma mudança de contexto.",
    },
  ];
  return (
    <section className="case-section why-matters" data-screen-label="10 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 <em>luxo visual.</em><br />É reorganização <em>perceptiva.</em>
          </h2>
          <p className="why-matters__intro">
            O mesmo produto, a mesma mídia e o mesmo território de luxo passaram a operar por outro eixo. Antes, VISTUSEN 45 era apresentado como uma peça de arquitetura. Depois, passou a ser percebido como uma presença invisível em deslocamento.
          </p>
          <p className="why-matters__intro" style={{ marginTop: -32, marginBottom: 56 }}>
            É aqui que o VOID atua: não apenas na geração de uma nova imagem, mas na <em style={{ color: "var(--gold)", fontStyle: "italic" }}>mudança de direção</em> de uma campanha mantendo coerência.
          </p>
        </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="11 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 à Dior.
        </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="polestar.html">
          <span className="case-nav__title">Polestar 4 — The Moving Monolith</span>
          <ArrowRight />
        </a>
      </div>
    </nav>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer" data-screen-label="12 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 CaseVistusen() {
  return (
    <>
      <CaseTopbar />
      <main>
        <CaseHero />
        <Brief />
        <Before />
        <Collision />
        <HumanDecision />
        <After />
        <Transformation />
        <VideoSection />
        <Changes />
        <WhyMatters />
        <FinalCTA />
        <CaseNav />
      </main>
      <StickyCTA />
      <Footer />
    </>
  );
}

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