/* 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> 02</a>
        </div>
        <div className="lang-switch" aria-label="Idioma / Language">
            <a className="lang-switch__opt" href="../coca-cola.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--coca" data-screen-label="01 Case Hero">
      <div className="case-hero__bg">
        <img src="../assets/coca-after.jpg" alt="The Origin of Sound — 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>Conceptual study</span>
          <span className="dot">/</span>
          <span>Exploratory direction</span>
          <span className="dot">/</span>
          <span>2026</span>
        </div>
        <h1 className="case-hero__title">
          When an activation <em>stops being a booth.</em>
        </h1>
        <p className="case-hero__sub">
          A conceptual exploration inspired by a Coca-Cola activation for Rock in Rio, reinterpreted by <strong>VOID</strong> through a structural shift in context.
        </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: "Festival energy." },
    { num: "T-02", text: "Instant refreshment." },
    { num: "T-03", text: "Instagrammable space." },
    { num: "T-04", text: "LED + visual impact." },
    { num: "T-05", text: "Circular flow." },
    { num: "T-06", text: "“The Sound of the Fizz.”" },
  ];
  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 point.
          </h2>
          <p className="case-section__intro">
            Excerpts from a <em>synthetic briefing</em> inspired by festival brand activations — within the Coca-Cola × Rock in Rio territory. The starting point was an Instagrammable, refreshing space charged with the energy of the 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="The Taste of Your Rhythm — the predictable path" />
            <div className="case-visual__media-caption">
              <span className="tag">BEFORE</span> The Taste of Your Rhythm
            </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 Taste of <em>Your Rhythm.</em>
            </h2>
            <p className="case-visual__text">
              The first direction followed the expected territory for big-brand festival activations: visual monumentality, explicit branding and immediate scenographic impact.
            </p>
            <p className="case-visual__text">
              Technically strong. Visually efficient. But still operating within the <strong style={{color: "var(--gold)", fontWeight: 500}}>generative average</strong> of festival brand activations.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Human Decision (3 routes) ---------- */
function HumanDecision() {
  const routes = [
    { id: "C1", label: "Brand Monumental", note: "Predictable", state: "ghost" },
    { id: "C2", label: "Liquid Celebration", note: "Promising", state: "ghost" },
    { id: "C3", label: "Structural Resonance", note: "Chosen", 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> The human decision
        </div>
        <h2 className="case-section__title">
          The human proposes. <em>VOID explores.</em>
        </h2>
        <p className="case-section__intro">
          Starting from the initial briefing, the Voider steered the system toward different strategic possibilities. VOID reorganized those decisions into three exploratory routes aligned with the original briefing.
        </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">Why C3?</span>
          <span className="human-decision__why-body">The Voider chose to explore <em>C3</em> because it turned the booth into an architectural experience — not just an advertising surface.</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; Contextual operator</div>
          <h2 className="collision__title">
            Semantic <span className="ampersand">Collision<span className="tm">™</span></span>
          </h2>
          <p className="collision__sub">
            The activation stopped operating only as festival branding and began to <em>explore spatial resonance.</em>
          </p>
        </div>

        <div className="collision__pivot">
          <div className="collision__image">
            <img src="../assets/coca-operator.jpg" alt="Undulating topographic structures — contextual-operator image" />
            <div className="collision__image-frame"></div>
            <div className="collision__image-tag">Semiotic operator · not a visual reference</div>
          </div>
          <div className="collision__copy">
            <h3>The disruption.</h3>
            <p>
              The Voider introduced a new contextual reading — <em>undulating topographic structures</em> — as a <strong>contextual operator</strong> (Semantic Collision™).
            </p>
            <p>
              The image <strong>was not used as a direct aesthetic reference</strong>. It was injected as a conceptual displacement.
            </p>
            <p>
              VOID then <strong>reorganized the entire campaign experience</strong> around this new axis.
            </p>
            <p>
              The booth stopped being merely a promotional space. It began to operate as a <em>sonic origin</em> — a pulsing core, a living topography, an architecture of collective resonance.
            </p>
          </div>
        </div>

        <div className="collision__chain" aria-label="Before, context, new direction">
          <div className="collision__node">
            <span className="collision__node-label">Before</span>
            <span className="collision__node-text">Monumental promotional booth</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">Resonance · topography · sonic core</span>
          </div>
          <div className="collision__arrow"><ChainArrow /></div>
          <div className="collision__node">
            <span className="collision__node-label">New direction</span>
            <span className="collision__node-text">Pulsing architecture · “The Origin of Sound”</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="The Origin of Sound — new direction" />
            <div className="case-visual__media-caption">
              <span className="tag">AFTER</span> The Origin of Sound
            </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="case-visual__title">
              The Origin <em>of Sound.</em>
            </h2>
            <p className="case-visual__text">
              The new direction stopped talking only about refreshment and entertainment. It began to <em>explore</em> Coca-Cola as the <strong style={{color: "var(--gold)", fontWeight: 500}}>vibrational core</strong> of the festival’s collective experience.
            </p>
            <p className="case-visual__text">
              Same brand territory. Same festival context. A completely different <strong>conceptual axis</strong> — immediately distinguishable from the generative average.
            </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">
          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/coca-before.jpg" alt="" />
          <div className="split__label">
            <span className="split__tag">Predictable territory</span>
            <span className="split__caption">“The Taste of Your Rhythm”</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">New direction</span>
            <span className="split__caption">“The Origin of Sound”</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> Result in motion
          </div>
          <h2 className="case-section__title" style={{margin: "0 auto", maxWidth: "22ch"}}>
            Where it <em>refreshes,</em> it resonates.
          </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">
          The Origin of Sound · <span style={{color: "var(--gold)"}}>Coca-Cola × Rock in Rio</span>
        </div>
      </div>
    </section>
  );
}

/* ---------- What changed ---------- */
function Changes() {
  const items = [
    { label: <>The spatial <span className="muted">axis</span></> },
    { label: <>The architectural <span className="muted">perception</span></> },
    { label: <>The emotional <span className="muted">relationship</span> with the audience</> },
    { label: <>Coca-Cola’s symbolic <span className="muted">function</span> within the 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> What changed
            </div>
            <p className="changes__lede">
              It wasn’t just the <em>booth</em> that changed.<br />
              The logic of the experience 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">{it.label}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

/* ---------- Why this matters ---------- */
function WhyMatters() {
  const items = [
    {
      t: "Left behind the saturated language of promotional activation",
      d: "Broke with the booth-pavilion-LED vocabulary every brand uses at festivals.",
    },
    {
      t: "Turned branding into experiential architecture",
      d: "The brand’s presence stopped being a surface and became an inhabitable structure.",
    },
    {
      t: "Created a symbolic presence that’s immediately distinguishable",
      d: "Distinct from the generative average of festival activations.",
    },
    {
      t: "Preserved symbolic recognition within a new contextual framework",
      d: "The brand identity remains recognizable even after a shift in conceptual axis — coherence without relying on visual excess.",
    },
  ];
  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> Why this matters
          </div>
          <h2 className="case-section__title">
            It’s not just set design.<br /><em>It’s experiential reorganization.</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">I want to create campaigns like this</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">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 created for strategic and visual exploration. Not affiliated with Coca-Cola or Rock in Rio.
        </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="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 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 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 />);