/* 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 /> Back to the 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"}}>Case study <span className="sep">·</span> 03</a>
        </div>
        <div className="lang-switch" aria-label="Idioma / Language">
            <a className="lang-switch__opt" href="../vistusen-45.html" hrefLang="pt-br">PT</a>
            <span className="lang-switch__sep" aria-hidden="true">|</span>
            <span className="lang-switch__opt is-active">EN</span>
          </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>Conceptual study</span>
          <span className="dot">/</span>
          <span>Exploratory direction</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>(A silence that cuts through the air.)</em>
        </h1>
        <p className="case-hero__sub">
          When a fragrance stops being just an object — and begins to cut through space. A conceptual exploration reinterpreted by <strong>VOID</strong> through a shift of context.
        </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: "Premium niche women’s perfume." },
    { num: "B-02", text: "Sensory brutalism." },
    { num: "B-03", text: "Emotional architecture." },
    { num: "B-04", text: "Structural elegance." },
    { num: "B-05", text: "Silent presence." },
    { num: "B-06", text: "Editorial print media." },
    { num: "B-07", text: "Europe · contemporary luxury." },
  ];
  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> Original briefing
          </div>
          <h2 className="case-section__title">
            The starting <em>point.</em>
          </h2>
          <p className="case-section__intro">
            VISTUSEN 45 is born as a conceptual premium women’s fragrance, inspired by sensory brutalism, emotional architecture and contemporary structural elegance.
          </p>
          <p className="case-section__intro" style={{ marginTop: 18 }}>
            The briefing proposed launching the perfume as a symbol of <em style={{ color: "var(--gold)", fontStyle: "italic" }}>silent presence, aesthetic strength and structural sensuality</em>, in a print campaign aimed at Europe’s editorial luxury audience.
          </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">
          The challenge was clear: turn brutalism <em>into desire</em> without losing sophistication.
        </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 — the predictable path" />
            <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; The predictable path</span>
            </div>
            <h2 className="case-visual__title">
              The structure <em>of elegance.</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">(The structure of elegance.)</span>
              </p>
              <p style={{ margin: 0, fontSize: 19, lineHeight: 1.35 }}>
                <span className="fr">«&nbsp;Un manifeste brutaliste.&nbsp;»</span>
                <span className="tr">(A brutalist manifesto.)</span>
              </p>
            </div>
            <p className="case-visual__text">
              The first direction was coherent: the perfume as micro-architecture. Bottle, concrete, heavy glass, geometric light and minimalist composition.
            </p>
            <p className="case-visual__text">
              It was a strong, elegant campaign, technically aligned with the territory of architectural luxury. But it still operated within a predictable axis: the perfume as a motionless object, contemplated, sculptural.
            </p>
            <p className="pull-quote">
              Technically sophisticated. Visually precise. But still <em style={{ color: "var(--gold)", fontStyle: "italic" }}>static.</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">
            The Voider <em>(the human who directs the campaign)</em> introduced a new context image: a cheetah in motion.
          </p>
        </div>

        <div className="collision__pivot">
          <div className="collision__image">
            <img src="../assets/vistusen-operator.jpg" alt="Cheetah in motion — contextual operator" />
            <div className="collision__image-frame"></div>
            <div className="collision__image-tag">Contextual operator · not a literal visual reference</div>
          </div>
          <div className="collision__copy">
            <h3>The disruption.</h3>
            <p>
              The image <strong>was not used to turn the campaign into a campaign about animality.</strong> It was used to displace the campaign’s logic: from <em>motionless object</em> to <em>presence in motion</em>.
            </p>
            <p>
              It didn’t enter as a literal aesthetic reference. It entered as a <em>shift in reading</em> — evidence of the mechanism, not the protagonist of the ad.
            </p>
            <p>
              From <strong>sculpture</strong> to <strong>vector</strong>.<br />
              From <strong>still architecture</strong> to <strong>a trace in the air</strong>.
            </p>
          </div>
        </div>

        <div className="collision__chain" aria-label="Before, context, new reading">
          <div className="collision__node">
            <span className="collision__node-label">Before</span>
            <span className="collision__node-text">Architectural object</span>
          </div>
          <div className="collision__arrow"><ChainArrow /></div>
          <div className="collision__node collision__node--pivot">
            <span className="collision__node-label">Context</span>
            <span className="collision__node-text">Speed · suspension · precision · trace</span>
          </div>
          <div className="collision__arrow"><ChainArrow /></div>
          <div className="collision__node">
            <span className="collision__node-label">New reading</span>
            <span className="collision__node-text">Invisible presence in motion</span>
          </div>
        </div>

        <p style={{ marginTop: 64, textAlign: "center", fontFamily: "var(--vist-serif)", fontStyle: "italic", fontSize: 16, color: "var(--ink-dim)", letterSpacing: "0.01em" }}>
          Cheetah in motion — contextual operator, not a literal visual reference.
        </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: "(The precision of the impulse)",
      type: "Functional route · technical",
      note: "Functional",
      state: "ghost",
    },
    {
      id: "C2",
      fr: "Un silence qui déchire l'air",
      tr: "(A silence that tears the air)",
      type: "Presence · sensory · editorial",
      note: "Chosen route",
      state: "chosen",
    },
    {
      id: "C3",
      fr: "L'impact du vide",
      tr: "(The impact of the void)",
      type: "Extreme route · literal",
      note: "Extreme",
      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> The human decision
        </div>
        <h2 className="case-section__title">
          The human proposes. <em>VOID explores.</em>
        </h2>
        <p className="case-section__intro">
          From this contextual collision, VOID reorganized the briefing into new creative routes. The Voider chose to follow route <em style={{ color: "var(--gold)", fontStyle: "italic" }}>C2</em>, because it preserved luxury, silence, feminine presence and sophistication — without turning the disruption into literal violence.
        </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">Why C2?</span>
          <span className="human-decision__why-body" style={{ fontStyle: "italic", fontFamily: "var(--vist-serif)", fontSize: 19, lineHeight: 1.45, color: "var(--vist-bone)" }}>
            Because it turned the perfume into <em style={{ color: "var(--gold)" }}>presence</em>, not physical impact — keeping the elegance and incorporating movement in a subtle, sensory and editorial way.
          </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 — new direction" />
            <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; New direction</span>
            </div>
            <h2 className="after-headline">
              Un silence qui déchire l'air.
              <span className="tr">(A silence that cuts through the air.)</span>
            </h2>
            <p className="after-sub">
              La fragrance d'une présence foudroyante.
              <span className="tr">(The fragrance of a striking presence.)</span>
            </p>
            <p className="case-visual__text" style={{ marginTop: 12 }}>
              The campaign stops selling only the structure of the bottle and begins to sell the <em style={{ color: "var(--gold)", fontStyle: "italic" }}>invisible action</em> of the fragrance.
            </p>
            <p className="case-visual__text">
              «&nbsp;Un silence qui déchire l'air&nbsp;» doesn’t just describe a woman in motion. It describes the very sensation of the perfume: something invisible, silent and precise, that cuts through the air and alters the tension of the space.
            </p>
            <div className="after-stack">
              <span>The perfume stops being just an object.</span>
              <span>It becomes a trace.</span>
              <span>It becomes presence.</span>
              <span>It becomes a silent cut.</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">
          Same briefing.<br /><em>Two distinct worlds.</em>
        </h2>
      </div>
      <div className="split" aria-label="Before and after comparison">
        <div className="split__side split__side--before">
          <img src="../assets/vistusen-before.jpg" alt="" />
          <div className="split__label">
            <span className="split__tag">Before</span>
            <span className="split__caption">
              «&nbsp;La structure de l'élégance.&nbsp;»
              <span className="split__territory">Bottle · concrete · micro-architecture · contemplation</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">After</span>
            <span className="split__caption">
              «&nbsp;Un silence qui déchire l'air.&nbsp;»
              <span className="split__territory">Presence · trace · motion · air</span>
            </span>
          </div>
        </div>
      </div>
      <div className="container">
        <p className="transformation__closer">
          The change was not <em>merely aesthetic.</em><br />
          It was a shift in <em>perceptual axis.</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> Result in motion
          </div>
          <h2 className="case-section__title" style={{ margin: "0 auto", maxWidth: "24ch" }}>
            From motionless object <em>to striking presence.</em>
          </h2>
          <p className="case-section__intro" style={{ margin: "28px auto 0", maxWidth: "56ch" }}>
            The video shows the transition between the initial campaign, the contextual operator and the new direction. The cheetah appears as a point of disruption: not as the final character, but as an image capable of displacing the reading of the campaign.
          </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">
          The fragrance doesn’t <em>occupy</em> the space.<br />
          It <em>cuts through.</em>
        </p>
      </div>
    </section>
  );
}

/* ---------- 08 / 09 — O que mudou (4 cards) ---------- */
function Changes() {
  const items = [
    { from: "From the bottle as architecture", to: "to the perfume as presence." },
    { from: "From static contemplation", to: "to tension in motion." },
    { from: "From concrete as a set", to: "to air as a sensory field." },
    { from: "From structural elegance", to: "to a silence that cuts through space." },
  ];
  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> What changed
            </div>
            <p className="changes__lede">
              It wasn’t just the <em>ad</em> that changed.<br />
              The <em>logic of presence</em> changed.
            </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: "Left the object / bottle / contemplation axis",
      d: "The campaign stopped relying only on the product’s beauty.",
    },
    {
      t: "Entered the presence / trace / motion axis",
      d: "The fragrance came to be perceived as invisible action in space.",
    },
    {
      t: "Preserved the premium territory",
      d: "The disruption didn’t break the luxury; it only changed its logic.",
    },
    {
      t: "Turned aesthetics into direction",
      d: "The visual change was born from a change of context.",
    },
  ];
  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> Why this matters
          </div>
          <h2 className="case-section__title">
            It’s not just <em>visual luxury.</em><br />It’s <em>perceptual</em> reorganization.
          </h2>
          <p className="why-matters__intro">
            The same product, the same media and the same luxury territory began to operate on a different axis. Before, VISTUSEN 45 was presented as a piece of architecture. After, it came to be perceived as an invisible presence in motion.
          </p>
          <p className="why-matters__intro" style={{ marginTop: -32, marginBottom: 56 }}>
            This is where VOID operates: not merely by generating a new image, but by <em style={{ color: "var(--gold)", fontStyle: "italic" }}>shifting the direction</em> of a campaign while preserving coherence.
          </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">I want to create campaigns like this</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">Early access</span>
        <h2 className="case-cta__title">
          Reserve your access to <em>VOID Studio.</em>
        </h2>
        <p className="case-cta__sub">
          Cases like this are born from context shifts. Join the list and be notified when VOID Studio testing opens.
        </p>
        <a className="case-cta__btn" href="void-studio.html">
          I want to try VOID Studio <ArrowRight />
        </a>
        <div className="case-cta__note">Early access · coming soon</div>
        <div className="case-cta__disclaimer">
          *Independent conceptual study featuring a fictional fragrance brand, created for strategic and visual exploration.
        </div>
      </div>
    </section>
  );
}

/* ---------- Case-to-case nav ---------- */
function CaseNav() {
  return (
    <nav className="case-nav" aria-label="Next case">
      <div className="container case-nav__row">
        <div className="case-nav__label">Next case study</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 is an ecosystem designed to expand human creativity and turn intentions into work that leaves a mark.
        </p>
        <div className="footer__meta">
          <span>© 2026 VoiderBox</span>
          <nav className="footer__meta-links">
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Contact</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 />);
