/* global React, ReactDOM */
const { useState, useMemo } = React;

/* ---------- Inline SVGs ---------- */
function Logo({ variant = "header" }) {
  return (
    <a href="index.html" className={`logo logo--${variant}`} aria-label="VoiderBox">
      <img src="../assets/voiderbox-logo.png" alt="VOIDERBOX" />
    </a>
  );
}

function MenuIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
      <path d="M3 6H17M3 10H17M3 14H17" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
}

function CloseIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
      <path d="M5 5L15 15M15 5L5 15" stroke="currentColor" strokeWidth="1.5" strokeLinecap="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 CheckIcon() {
  return (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
      <path d="M2.5 6.5L5 9L9.5 3.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function WhatsAppIcon() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="10.5" stroke="currentColor" strokeWidth="1.3" />
      <path d="M8 9.5C8 12.2 9.8 14.5 12.5 15.5L14 14.2L16 15C15.5 16.5 14 17.5 12 17.5C8.7 17.5 6 14.8 6 11.5C6 9.7 7 8.3 8.5 7.5L9.3 9L8 9.5Z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" />
    </svg>
  );
}

function BenefitIcon({ kind }) {
  if (kind === "spark") return (
    <svg className="benefit__icon" viewBox="0 0 32 32" fill="none">
      <path d="M16 2 L18 14 L30 16 L18 18 L16 30 L14 18 L2 16 L14 14 Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
    </svg>
  );
  if (kind === "target") return (
    <svg className="benefit__icon" viewBox="0 0 32 32" fill="none">
      <circle cx="16" cy="16" r="12" stroke="currentColor" strokeWidth="1.5" />
      <circle cx="16" cy="16" r="6" stroke="currentColor" strokeWidth="1.5" />
      <circle cx="16" cy="16" r="1.5" fill="currentColor" />
      <path d="M16 2V6M16 26V30M2 16H6M26 16H30" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
  if (kind === "team") return (
    <svg className="benefit__icon" viewBox="0 0 32 32" fill="none">
      <circle cx="11" cy="12" r="4" stroke="currentColor" strokeWidth="1.5" />
      <circle cx="22" cy="13" r="3" stroke="currentColor" strokeWidth="1.5" />
      <path d="M4 26C4 22 7 19 11 19C15 19 18 22 18 26" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
      <path d="M19 25C19 22 21 20 24 20C26 20 28 22 28 25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
  return null;
}

function OnDemandBrand() {
  return (
    <img className="ondemand__brand-img" src="../assets/void-ondemand.png" alt="VOID On Demand" />
  );
}

/* ---------- Particle field ---------- */
function ParticleField({ count = 80, seed = 1 }) {
  // pseudo-random based on seed so SSR-like determinism
  const particles = useMemo(() => {
    const rand = (i) => {
      const x = Math.sin(i * 9301 + seed * 49297) * 233280;
      return x - Math.floor(x);
    };
    return Array.from({ length: count }, (_, i) => {
      const r = rand(i * 3);
      const r2 = rand(i * 3 + 1);
      const r3 = rand(i * 3 + 2);
      // bias particles around bottom-center (conductor halo)
      const cx = 50 + (r - 0.5) * 90;
      const cy = 50 + (r2 - 0.3) * 70;
      const size = 0.6 + r3 * 2.4;
      const delay = r3 * 4;
      const opacity = 0.3 + r * 0.7;
      return { cx, cy, size, delay, opacity };
    });
  }, [count, seed]);

  return (
    <svg className="media__particles" viewBox="0 0 100 100" preserveAspectRatio="none">
      <defs>
        <radialGradient id="p-grad" cx="50%" cy="60%" r="55%">
          <stop offset="0%" stopColor="oklch(0.85 0.16 75)" stopOpacity="0.5" />
          <stop offset="60%" stopColor="oklch(0.6 0.16 55)" stopOpacity="0.08" />
          <stop offset="100%" stopColor="transparent" />
        </radialGradient>
        <radialGradient id="halo" cx="50%" cy="55%" r="35%">
          <stop offset="0%" stopColor="oklch(0.9 0.18 80)" stopOpacity="0.35" />
          <stop offset="100%" stopColor="transparent" />
        </radialGradient>
      </defs>
      <rect width="100" height="100" fill="url(#p-grad)" />
      <ellipse cx="50" cy="55" rx="36" ry="30" fill="url(#halo)" />
      {/* arc */}
      <path
        d="M 22 58 Q 50 18 78 58"
        fill="none"
        stroke="oklch(0.85 0.16 75)"
        strokeWidth="0.3"
        opacity="0.55"
      />
      {particles.map((p, i) => (
        <circle
          key={i}
          className="particle"
          cx={p.cx}
          cy={p.cy}
          r={p.size * 0.18}
          fill="oklch(0.88 0.16 75)"
          opacity={p.opacity}
          style={{ animationDelay: `${p.delay}s` }}
        />
      ))}
    </svg>
  );
}

function PortalGlow() {
  return (
    <svg viewBox="0 0 320 320" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: "100%", height: "100%" }}>
      <defs>
        <radialGradient id="portal-bg" cx="50%" cy="50%" r="50%">
          <stop offset="40%" stopColor="#000" />
          <stop offset="55%" stopColor="oklch(0.5 0.16 60)" stopOpacity="0.15" />
          <stop offset="75%" stopColor="oklch(0.78 0.16 65)" stopOpacity="0.7" />
          <stop offset="90%" stopColor="oklch(0.6 0.14 55)" stopOpacity="0.1" />
          <stop offset="100%" stopColor="transparent" />
        </radialGradient>
        <radialGradient id="portal-particles" cx="50%" cy="50%" r="60%">
          <stop offset="30%" stopColor="transparent" />
          <stop offset="60%" stopColor="oklch(0.85 0.16 70)" stopOpacity="0.5" />
          <stop offset="100%" stopColor="transparent" />
        </radialGradient>
      </defs>
      <circle className="portal-ring" cx="160" cy="160" r="120" fill="url(#portal-bg)" />
      <circle cx="160" cy="160" r="78" fill="#000" />
      <circle cx="160" cy="160" r="78" fill="none" stroke="oklch(0.78 0.14 65)" strokeWidth="1" opacity="0.6" />

      {/* scatter particles */}
      {Array.from({ length: 60 }, (_, i) => {
        const angle = (i / 60) * Math.PI * 2;
        const distRand = (Math.sin(i * 17.3) + 1) / 2;
        const dist = 95 + distRand * 60;
        const x = 160 + Math.cos(angle) * dist;
        const y = 160 + Math.sin(angle) * dist;
        const r = 0.3 + distRand * 1.4;
        return (
          <circle
            key={i}
            className="particle"
            cx={x}
            cy={y}
            r={r}
            fill="oklch(0.88 0.16 75)"
            opacity={0.4 + distRand * 0.6}
            style={{ animationDelay: `${(i * 0.13) % 4}s` }}
          />
        );
      })}
    </svg>
  );
}

/* ---------- Sections ---------- */
function Header({ onMenuToggle, isMenuOpen }) {
  return (
    <header className="header" data-screen-label="01 Header">
      <div className="container header__row">
        <Logo />
        <nav className="nav" aria-label="Primary">
          <a className="nav__link" href="cases.html">Case studies</a>
          <a className="nav__link" href="void-studio.html">VOID Studio <span className="nav__tag">Coming soon</span></a>
        </nav>
        <div className="header__actions">
          <div className="lang-switch" aria-label="Idioma / Language">
            <a className="lang-switch__opt" href="../index.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>
          <a className="btn btn--ghost" href="quero-ser-um-voider.html">Become a Voider</a>
          <button
            className="iconbtn"
            aria-label={isMenuOpen ? "Close menu" : "Open menu"}
            onClick={onMenuToggle}
          >
            {isMenuOpen ? <CloseIcon /> : <MenuIcon />}
          </button>
        </div>
      </div>
    </header>
  );
}

function MobileMenu({ isOpen, onClose }) {
  return (
    <div className={`mobile-menu ${isOpen ? "is-open" : ""}`} aria-hidden={!isOpen}>
      <a className="nav__link" href="cases.html" onClick={onClose}>Case studies</a>
      <a className="nav__link" href="void-studio.html" onClick={onClose}>VOID Studio <span className="nav__tag">Coming soon</span></a>
      <a className="btn btn--ghost" href="quero-ser-um-voider.html" onClick={onClose}>
        Become a Voider <ArrowRight />
      </a>
    </div>
  );
}

function Hero() {
  const [activeDot, setActiveDot] = useState(2);
  return (
    <section className="hero" data-screen-label="02 Hero">
      <div className="container hero__grid">
        <div className="hero__copy">
          <div className="hero__eyebrow">VoiderBox · Creative direction</div>
          <h1 className="hero__title">
            Where you <span className="accent">direct</span> your creative work.
          </h1>
          <div className="hero__divider" 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>
          <p className="hero__sub">
            Explore possibilities, build strategies, and create <strong>new contexts</strong> to take campaigns beyond the predictable patterns of generative AI.
          </p>
          <ul className="hero__territories" aria-label="Territórios de atuação">
            <li>Marketing</li>
            <li>Campaigns</li>
            <li>Activations</li>
            <li>Events</li>
            <li>Store Design</li>
            <li>Social Media</li>
            <li>Design</li>
            <li>Advertising</li>
          </ul>
          <a className="hero__cta" href="void-studio.html">
            <span className="hero__cta-text">
              <span className="hero__cta-kicker">Reserve your access</span>
              <span className="hero__cta-title">VOID <em>Studio</em></span>
            </span>
            <span className="hero__cta-arrow"><ArrowRight size={20} /></span>
          </a>
          <span className="hero__cta-note">Early access · Coming soon</span>
        </div>

        <div className="media" role="img" aria-label="VOID Studio: conductor leading an orchestra">
          <img className="media__photo" src="../assets/hero-maestro.png" alt="Conductor leading an orchestra with golden particles" />
          <button className="media__play-hit" aria-label="Play video"></button>
          <div className="media__dots-hit" role="tablist">
            {[0, 1, 2, 3, 4].map((i) => (
              <button
                key={i}
                className={`media__dot-hit ${i === activeDot ? "is-active" : ""}`}
                onClick={() => setActiveDot(i)}
                aria-label={`Slide ${i + 1}`}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Benefits() {
  const items = [
    { icon: "spark", title: "Explore your creativity", text: "New ideas, new paths, new possibilities." },
    { icon: "target", title: "Build different strategies", text: "Frame, direct, and turn insights into results." },
    { icon: "team", title: "Execute with direction", text: "Move from concept to execution with clarity, method, and AI support." },
  ];
  return (
    <section className="benefits" data-screen-label="03 Benefits">
      <div className="container benefits__grid">
        {items.map((it) => (
          <div className="benefit" key={it.title}>
            <BenefitIcon kind={it.icon} />
            <h3 className="benefit__title">{it.title}</h3>
            <p className="benefit__text">{it.text}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function Manifesto() {
  return (
    <section className="manifesto" data-screen-label="04 Manifesto">
      <div className="container manifesto__stack">
        <div className="manifesto__box manifesto__inner">
          <span className="manifesto__eyebrow">The VOID concept</span>

          <h2 className="manifesto__headline">
            Generative AI made <span className="manifesto__accent">execution</span> accessible.
          </h2>

          <div className="manifesto__prose">
            <p>But it also created convergence.</p>
            <p>Campaigns increasingly look like variations of the same prompts, the same references, and the same statistical patterns.</p>
            <p><em>VOID exists to break that cycle.</em></p>
            <p className="manifesto__epigram">
              Not by accelerating generation,<br />
              <span className="manifesto__accent">but by reorganizing direction.</span>
            </p>
          </div>
        </div>

        <div className="manifesto__box manifesto__inner">
          <span className="manifesto__eyebrow">How VOID works</span>

          <div className="manifesto__prose">
            <p>The system responds to shifts in context.</p>
            <p>A single change of direction can completely transform the strategic and visual interpretation of a campaign.</p>
            <p className="manifesto__epigram">
              <span className="manifesto__accent">The human decides.</span><br />
              VOID explores the consequences of that decision.
            </p>
          </div>

          <a className="manifesto__cta" href="cases.html">
            View case studies
            <svg width="16" height="16" viewBox="0 0 14 14" fill="none"><path d="M2 7H12M12 7L8 3M12 7L8 11" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </a>
        </div>
      </div>
    </section>
  );
}

function Member() {
  return (
    <section className="member" data-screen-label="05 Voider Member" id="member">
      <div className="container">
        <div className="member__card">
          <div className="member__portal">
            <PortalGlow />
          </div>
          <div className="member__copy">
            <span className="member__eyebrow">Join the VoiderBox ecosystem</span>
            <h2 className="member__title">Become a Voider</h2>
            <p className="member__what">
              Being a Voider is not just about using a tool. It is about <strong>directing campaigns</strong>, building a public body of work, and showing the market the intelligence behind your decisions.
            </p>
            <p className="member__text">
              Join the first generation of Voiders and follow the evolution of the ecosystem from the beginning.
            </p>
            <a className="btn btn--ghost member__cta" href="quero-ser-um-voider.html">
              Become a Voider <ArrowRight />
            </a>
          </div>
          <ul className="member__list">
            <li><span className="member__check"><CheckIcon /></span><span>Early access to <strong>VOID Studio</strong></span></li>
            <li><span className="member__check"><CheckIcon /></span><span>Starter credits at launch</span></li>
            <li><span className="member__check"><CheckIcon /></span><span>Behind-the-scenes case studies</span></li>
            <li><span className="member__check"><CheckIcon /></span><span>Visibility and authority</span></li>
            <li><span className="member__check"><CheckIcon /></span><span>VoiderBox community</span></li>
          </ul>
        </div>
      </div>
    </section>
  );
}

function OnDemand() {
  return (
    <section className="ondemand" data-screen-label="05 On Demand">
      <div className="container">
        <div className="ondemand__row">
          <div className="ondemand__brand">
            <OnDemandBrand />
          </div>
          <div className="ondemand__body">
            <h3 className="ondemand__title">Prefer to commission a project?</h3>
            <p className="ondemand__text">
              Discover VOID On Demand: strategic and creative direction for projects with a defined briefing, scope, and formal proposal.
            </p>
          </div>
          <a className="btn btn--whatsapp" href="https://wa.me/" target="_blank" rel="noreferrer">
            <WhatsAppIcon /> Request a quote via WhatsApp
          </a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer" data-screen-label="06 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">
          <Logo variant="footer" />
        </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 App() {
  const [menuOpen, setMenuOpen] = useState(false);
  return (
    <>
      <Header isMenuOpen={menuOpen} onMenuToggle={() => setMenuOpen((v) => !v)} />
      <MobileMenu isOpen={menuOpen} onClose={() => setMenuOpen(false)} />
      <main>
        <Hero />
        <Benefits />
        <Manifesto />
        <Member />
        <OnDemand />
      </main>
      <Footer />
    </>
  );
}

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