/* 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 />
        <a href="cases.html" className="case-topbar__crumb" style={{textDecoration:"none",color:"inherit"}}>
          Case study <span className="sep">·</span> 01
        </a>
        <div className="lang-switch" aria-label="Idioma / Language">
            <a className="lang-switch__opt" href="../polestar.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" 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>Premium EV</span>
          <span className="dot">/</span>
          <span>VOID direction</span>
          <span className="dot">/</span>
          <span>2026</span>
        </div>
        <h1 className="case-hero__title">
          When a campaign <em>changes direction.</em>
        </h1>
        <p className="case-hero__sub">
          How <strong>VOID</strong> reorganized the positioning of the Polestar&nbsp;4 through a shift in semiotic 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: "Urban silence." },
    { num: "T-02", text: "Premium minimalism." },
    { num: "T-03", text: "Active calm." },
    { num: "T-04", text: "Brutalist architecture." },
    { num: "T-05", text: "Scandinavian sophistication." },
    { num: "T-06", text: "Sensory refuge." },
  ];
  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 the initial briefing — sensory territories associated with the Polestar 4. Consistent vocabulary, aligned with the brand’s current positioning.
          </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 — the predictable path" />
            <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; The predictable path</span>
            </div>
            <h2 className="case-visual__title">
              The <em>Architecture</em> of Silence.
            </h2>
            <p className="case-visual__text">
              The first direction followed an expected territory for premium EVs: minimalist architecture, concrete, silence and Scandinavian sophistication.
            </p>
            <p className="case-visual__text">
              Technically competent. Aesthetically refined. But sitting exactly at the center of the statistical average that generative AI produces when given the term "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; Contextual operator</div>
          <h2 className="collision__title">
            Semantic <span className="ampersand">Collision<span className="tm">™</span></span>
          </h2>
          <p className="collision__sub">
            The campaign stopped talking only about urban silence and began to <em>explore monumental permanence.</em>
          </p>
        </div>

        <div className="collision__pivot">
          <div className="collision__image">
            <img src="../assets/polestar-pyramids.jpg" alt="Pyramids — 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 — the image of the pyramids — as a <em>semiotic operator</em>.
            </p>
            <p>
              The image <strong>was not used as a visual reference</strong>. It was injected as a conceptual displacement.
            </p>
            <p>
              VOID then <strong>reorganized the entire strategic reading</strong> of the campaign around this new axis.
            </p>
            <p>
              The vehicle stopped being merely a minimalist electric SUV. It became a <em>monolith in motion</em>: a geological object, silent and permanent within the urban chaos.
            </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">Urban silence · minimalist architecture</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">Monumental permanence · geological object</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">Monolith in motion · Static precision, kinetic soul</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Human Decision (3 routes) ---------- */
function HumanDecision() {
  const routes = [
    { id: "C1", label: "Performance + Futurism", note: "Predictable", state: "ghost" },
    { id: "C2", label: "Luxury + Serenity", note: "Promising", state: "ghost" },
    { id: "C3", label: "Stillness + Motion", 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 broke the saturated territory without losing coherence with the product.</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">
          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/polestar-before.png" alt="" />
          <div className="split__label">
            <span className="split__tag">Predictable territory</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">New direction</span>
            <span className="split__caption">The Moving Monolith</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Why This Matters ---------- */
function WhyMatters() {
  const items = [
    {
      t: "Moved beyond the saturated territory",
      d: "Broke away from the 'performance tech' category, where every premium EV competes for the same territory.",
    },
    {
      t: "Created a new emotional association",
      d: "Shifted from 'action' to 'contemplation' — recoding how the product is felt.",
    },
    {
      t: "Immediate differentiation from competitors",
      d: "Immediately distinguishable from the generative average produced within the category.",
    },
    {
      t: "Coherence with premium positioning",
      d: "Semiotic disruption without sacrificing brand value — it elevates rather than clashes.",
    },
  ];
  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 aesthetics.<br /><em>It’s strategic repositioning.</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>
  );
}

/* ---------- 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 — new direction" />
            <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; New direction</span>
            </div>
            <h2 className="case-visual__title">
              The Moving <em>Monolith.</em>
            </h2>
            <p className="case-visual__text">
              The campaign stopped talking only about urban silence and began to position the car as a <strong style={{color: "var(--gold)", fontWeight: 500}}>geological object in motion</strong>.
            </p>
            <p className="case-visual__text">
              Same brand. Same product. Same briefing. But a completely different <strong style={{color: "var(--gold)", fontWeight: 500}}>narrative direction</strong> — and immediately distinguishable from the generative average.
            </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> Result in motion
          </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: <>The narrative <span className="muted">axis</span></> },
    { label: <>The symbolic <span className="muted">reading</span></> },
    { label: <>The emotional <span className="muted">positioning</span></> },
    { label: <>The <span className="muted">perception</span> of the product’s permanence and presence</> },
  ];
  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> What changed
            </div>
            <p className="changes__lede">
              It wasn’t just the <em>aesthetics</em> that changed.<br />
              The campaign’s direction 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>
  );
}

/* ---------- 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="coca-cola.html">
          <span className="case-nav__title">Coca-Cola — The Origin of Sound</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">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">
          *Synthetic briefing based on Polestar’s real positioning.
        </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 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 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 />);