/* global React, ReactDOM, FadingVideo, ArrowUpRight, Play */
const { useState, useEffect, useRef } = React;
const M = window.Motion.motion;
const AnimatePresence = window.Motion.AnimatePresence;

const HERO_VIDEO = "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_080021_d598092b-c4c2-4e53-8e46-94cf9064cd50.mp4";
const CAP_VIDEO = "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_094631_d30ab262-45ee-4b7d-99f3-5d5848c8ef13.mp4";

const ENTER = { filter: "blur(10px)", opacity: 0, y: 20 };
const SHOWN = { filter: "blur(0px)", opacity: 1, y: 0 };
const enter = (delay) => ({
  initial: ENTER,
  animate: SHOWN,
  transition: { duration: 0.5, ease: "easeOut", delay }
});

/* ----------------- Rotating word - slider wipe ------------------- */
const ROT_WORDS = ["profissional", "aesthetic", "premium", "sofisticado", "elegante"];
function RotatingWord() {
  const [i, setI] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setI((p) => (p + 1) % ROT_WORDS.length), 2800);
    return () => clearInterval(t);
  }, []);
  return (
    <AnimatePresence mode="wait" initial={false}>
      <M.span
        key={i}
        className="italic" style={{ display: "inline-block", whiteSpace: "nowrap", color: "var(--accent)" }}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1, transition: { duration: 0.3, ease: "easeOut" } }}
        exit={{ opacity: 0, transition: { duration: 0.12, ease: "easeIn" } }}>
        {ROT_WORDS[i]}
      </M.span>
    </AnimatePresence>
  );
}

const LOGOS = [
  ["assets/logos/logo-capcut.png",    "CapCut"],
  ["assets/logos/logo-premiere.png",  "Premiere"],
  ["assets/logos/logo-davinci.png",   "DaVinci"],
  ["assets/logos/logo-finalcut.png",  "Final Cut"],
  ["assets/logos/logo-filmora.png",   "Filmora"],
  ["assets/logos/logo-vegas.png",     "Vegas"],
  ["assets/logos/logo-vn.png",        "VN"],
  ["assets/logos/logo-blackmagic.png","Blackmagic"],
];

/* ----------------------- App mockup grande ---------------------- */
/* logo da nav: wordmark estático "yugen grade" — "yugen" serif + "grade" como tag pequena.
   Clica = volta ao topo. (animação yugen<->幽玄 removida) */
function NavLogo() {
  return (
    <a href="#topo"
       onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }}
       aria-label="Yugen Grade — início"
       style={{ display: "inline-flex", alignItems: "center", color: "#1a1814", lineHeight: 1, textDecoration: "none" }}>
      <svg width="38" height="38" viewBox="18 33 240 240" fill="none" aria-hidden="true" style={{ flexShrink: 0 }}>
        <defs>
          <linearGradient id="ygNav" x1="105" y1="90" x2="241" y2="255" gradientUnits="userSpaceOnUse">
            <stop offset="0%" stopColor="#D4614A" /><stop offset="22%" stopColor="#C8883A" /><stop offset="44%" stopColor="#B8A84A" /><stop offset="66%" stopColor="#5A9E7A" /><stop offset="84%" stopColor="#4A7EA8" /><stop offset="100%" stopColor="#7A5A9E" />
          </linearGradient>
        </defs>
        <g stroke="url(#ygNav)" strokeWidth="20" strokeLinecap="round" strokeLinejoin="round">
          <path d="M241 90A105 105 0 1 0 241 210" />
          <path d="M241 150L155 150" />
          <path d="M105 90L155 150M205 90L155 150M155 150L155 228" />
        </g>
      </svg>
    </a>
  );
}

/* barra de navegação fixa no topo (desktop) — some no mobile */
function Nav() {
  return (
    <div className="hidden md:block sticky z-40" style={{ top: "38px", background: "var(--bg)", borderBottom: "1px solid #ededeb" }}>
      <div className="max-w-6xl mx-auto px-7 md:px-10 flex items-center justify-between py-4">
        <NavLogo />
        <nav className="flex items-center gap-5 md:gap-10 font-body" style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase" }}>
          <a href="#looks" className="py-2 -my-2 text-[#9a9088] hover:text-[#1a1814] transition-colors">Looks</a>
          <a href="#como-funciona" className="py-2 -my-2 text-[#9a9088] hover:text-[#1a1814] transition-colors hidden sm:inline">Como funciona</a>
          <a href="#sobre" className="py-2 -my-2 text-[#9a9088] hover:text-[#1a1814] transition-colors hidden md:inline">Sobre</a>
          <a href="#comprar" onClick={() => ygTrack("cta_click", { local: "nav" })} className="py-2 -my-2 text-[#1a1814] font-medium">Começar</a>
          <a href="https://app.yugengrade.com" className="nav-entrar">Entrar</a>
        </nav>
      </div>
    </div>
  );
}

/* ----------------------------- Hero ----------------------------- */
function Hero() {
  const [sound, setSound] = useState(false);
  const vref = useRef(null);
  return (
    <section style={{ background: "var(--bg)", position: "relative", overflow: "hidden" }}>
      <div className="max-w-6xl mx-auto px-7 md:px-10">

        {/* hero: texto à esquerda + vídeo à direita */}
        <div className="grid lg:grid-cols-2 gap-8 md:gap-12 lg:gap-16 items-center pt-8 md:pt-16 lg:pt-20 pb-14 md:pb-24">

          {/* coluna esquerda — centralizada no mobile, alinhada à esquerda no desktop */}
          <div className="relative text-center lg:text-left">
            <M.p {...enter(0.1)} className="font-body hidden lg:block" style={{ position: "relative", zIndex: 1, fontSize: 11, fontWeight: 500, letterSpacing: "0.16em", textTransform: "uppercase", color: "#9a9088", margin: 0, marginBottom: 22 }}>
              Yugen Grade · Gerador de LUT
            </M.p>

            <M.h1 {...enter(0.18)} className="font-heading text-[#1a1814]" style={{ position: "relative", zIndex: 1, fontSize: "clamp(2.3rem, 7.5vw, 4rem)", lineHeight: 1.04, letterSpacing: "-0.03em", margin: 0 }}>
              <span style={{ display: "block" }}>Deixe seu vídeo</span>
              <span style={{ display: "block" }}><RotatingWord /></span>
              <span style={{ display: "block" }}>em segundos</span>
            </M.h1>

            <M.p {...enter(0.26)} className="font-body mx-auto lg:mx-0 max-w-[17rem] lg:max-w-[420px]" style={{ position: "relative", zIndex: 1, marginTop: 24, fontSize: "clamp(0.9rem, 3.6vw, 1rem)", lineHeight: 1.4, color: "#2b2b2b" }}>
              A maneira mais simples de transformar uma estética que você admira em um visual que você pode usar no seu conteúdo.
            </M.p>

            <M.div {...enter(0.34)} className="hidden lg:block" style={{ position: "relative", zIndex: 1, marginTop: 36 }}>
              <a href="#comprar" onClick={() => ygTrack("cta_click", { local: "hero" })} className="btn-breathe-gold btn-gold-strong">Quero criar minha estética</a>
            </M.div>
          </div>

          {/* coluna direita: vídeo (autoplay MUDO + loop; toque pra ouvir o pitch com som) */}
          <M.div {...enter(0.3)} className="relative w-full">
            <div className="liquid-glass rounded-[1.5rem] overflow-hidden relative aspect-square">
              <video ref={vref} src="https://pub-76014c6578ed46e2882892c854766863.r2.dev/site/pitch.mp4" poster="assets/pitch-poster.jpg"
                     muted autoPlay loop playsInline preload="metadata"
                     className="absolute inset-0 w-full h-full" style={{ objectFit: "cover", background: "#000" }} />
              {!sound && (
                <button onClick={() => { ygTrack("pitch_play"); const v = vref.current; if (v) { v.muted = false; v.loop = false; v.controls = true; v.currentTime = 0; Promise.resolve(v.play()).catch(()=>{}); } setSound(true); }}
                        aria-label="Tocar com som"
                        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0, padding: 0, cursor: "pointer", background: "rgba(20,16,12,0.16)" }}>
                  <span className="flex items-center gap-2 rounded-full bg-white/95 text-[#1a1814] shadow-lg"
                        style={{ position: "absolute", left: "50%", bottom: 18, transform: "translateX(-50%)", padding: "10px 18px", fontSize: 13, fontWeight: 600, whiteSpace: "nowrap" }}>
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M3 10v4h4l5 5V5L7 10H3zm13.5 2a4.5 4.5 0 00-2.5-4.03v8.06A4.5 4.5 0 0016.5 12z" /></svg>
                    Toque para ouvir
                  </span>
                </button>
              )}
            </div>
          </M.div>

          {/* CTA — no mobile aparece DEPOIS do vídeo (no desktop está na coluna esquerda) */}
          <M.div {...enter(0.34)} className="lg:hidden flex justify-center" style={{ position: "relative", zIndex: 1, marginTop: 28 }}>
            <a href="#comprar" onClick={() => ygTrack("cta_click", { local: "hero_mobile" })} className="btn-breathe-gold btn-gold-strong">Quero criar minha estética</a>
          </M.div>

        </div>
      </div>
    </section>
  );
}

/* ------------------- Logos strip - efeito dock ------------------- */
function LogosStrip() {
  // Logos em ícone PRESERVADOS: array LOGOS[] + assets/logos/*.png seguem salvos no sistema.
  // Para voltar à versão com ícones (dock hover), restaurar pelo histórico do git.
  const EDITORS = ["CapCut", "Premiere", "DaVinci Resolve", "Final Cut", "VN", "BlackMagic Cam"];
  return (
    <div style={{ background: "var(--bg)", borderTop: "1px solid #ededeb", borderBottom: "1px solid #ededeb" }}>
      <div className="max-w-6xl mx-auto px-6 md:px-10">
        <div className="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-8" style={{ paddingTop: 28, paddingBottom: 28 }}>
          <span className="font-body" style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.16em", textTransform: "uppercase", color: "#9a9088", whiteSpace: "nowrap" }}>
            Compatível com
          </span>
          <div className="flex-1 flex flex-wrap items-center gap-x-6 gap-y-2 sm:justify-between">
            {EDITORS.map((n) => (
              <span key={n} className="font-heading no-stroke text-[17px] sm:text-[19px]" style={{ color: "#2b2b2b", letterSpacing: "-0.01em", whiteSpace: "nowrap" }}>{n}</span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ----------------------- Banner de lançamento ----------------------- */
function LaunchBar() {
  return (
    <a href="#comprar" onClick={() => ygTrack("cta_click", { local: "launch_bar" })} className="launch-bar" style={{ textDecoration: "none" }}>
      <span className="launch-dot" />
      <span>
        <b>Preço de lançamento:</b> de <span className="risco-fade risco-fade-red">R$&nbsp;297</span> por <b className="lb-em">R$&nbsp;97</b>. Por tempo limitado.
      </span>
    </a>
  );
}

/* -------------------------- Capability (inativo) -------------------------- */
function App() {
  const { RefToLut, ProblemSolution, HowItWorks, WhatYouGet, Manifesto, LooksGallery, Offer, FAQ, About, SiteFooter } = window;
  return (
    <React.Fragment>
      <LaunchBar />
      <Nav />
      <Hero />
      <LogosStrip />
      <HowItWorks />
      <LooksGallery />
      <ProblemSolution />
      <WhatYouGet />
      <Manifesto />
      <Offer />
      <About />
      <FAQ />
      <SiteFooter />
    </React.Fragment>);

}

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