/* global React, useApp, useReveal, COPY */
const { useState, useEffect, useRef } = React;

function Nav() {
  const { t, locale, setLocale } = useApp();
  const locales = ["pl","en","de"];
  return (
    <nav className="lx-nav" data-screen-label="Navigation">
      <div className="lx-nav-inner">
        <div className="lx-nav-logo">
          <span className="dot"></span>
          <span>LUMAFLEX</span>
        </div>
        <div className="lx-nav-links">
          <a href="#products">{t.nav.products}</a>
          <a href="#science">{t.nav.science}</a>
          <a href="#compare">{t.nav.compare}</a>
          <a href="#faq">{t.nav.faq}</a>
        </div>
        <div className="lx-nav-right">
          <div style={{display:"inline-flex", gap:2, padding:2, borderRadius:10, background:"rgba(255,255,255,0.06)"}}>
            {locales.map(l => (
              <button key={l} onClick={() => setLocale(l)}
                style={{
                  padding:"6px 10px", borderRadius:8, border:0, cursor:"pointer",
                  background: locale === l ? "rgba(229,9,20,0.2)" : "transparent",
                  color: locale === l ? "#fff" : "rgba(255,255,255,0.6)",
                  fontFamily:"inherit", fontSize:12, fontWeight:600, letterSpacing:"0.04em",
                  transition:"all 200ms",
                }}>{l.toUpperCase()}</button>
            ))}
          </div>
          <a href="#products" className="lx-btn lx-btn-primary" style={{padding:"8px 18px", fontSize:13}}>{t.nav.buy}</a>
        </div>
      </div>
    </nav>
  );
}

function Hero() {
  const { t } = useApp();
  const [scene, setScene] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setScene((s) => (s + 1) % 3), 3800);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="lx-hero" id="top" data-screen-label="Hero">
      <HeroUnderwater theme="dark" />
      <HeroSceneOverlay scene={scene} />

      <div className="lx-container-wide" style={{position:"relative", zIndex: 2, flex:1, display:"flex", flexDirection:"column", justifyContent:"center", paddingTop:60, paddingBottom:60}}>
        <div className="lx-pill" style={{alignSelf:"center", marginBottom:20}}>
          <span className="pulse"></span>
          {t.hero.eyebrow}
        </div>

        <h1 className="lx-display" style={{textAlign:"center", maxWidth: 900, margin:"0 auto"}}>
          <SceneCopy scene={scene} t={t} />
        </h1>

        <div style={{display:"flex", gap:14, justifyContent:"center", marginTop:40, flexWrap:"wrap"}}>
          <a href="#products" className="lx-btn lx-btn-primary" style={{padding:"14px 26px", fontSize:15}}>{t.hero.cta}</a>
          <a href="#science" className="lx-btn lx-btn-ghost on-dark" style={{padding:"14px 26px", fontSize:15}}>{t.hero.ghost}</a>
        </div>

        <div style={{display:"flex", gap:8, justifyContent:"center", marginTop:56}}>
          {[0,1,2].map((i) => (
            <button key={i} onClick={() => setScene(i)} aria-label={`Scene ${i+1}`}
              style={{
                width: i === scene ? 28 : 8,
                height: 8, borderRadius:8, border:0, cursor:"pointer", padding:0,
                background: i === scene ? "var(--lx-red)" : "rgba(255,255,255,0.25)",
                transition: "all 400ms cubic-bezier(0.28,0,0.22,1)",
                boxShadow: i === scene ? "0 0 12px 2px rgba(var(--lx-red-glow), 0.6)" : "none",
              }} />
          ))}
        </div>
      </div>

      <div style={{position:"absolute", bottom:24, left:"50%", transform:"translateX(-50%)", zIndex:3, fontSize:10, letterSpacing:"0.24em", opacity:0.5}}>
        {t.hero.scroll} ↓
      </div>
    </section>
  );
}

function SceneCopy({scene, t}) {
  const copies = [t.hero.sceneA, t.hero.sceneB, t.hero.sceneC];
  const c = copies[scene];
  return (
    <span key={scene} style={{display:"inline-block", animation:"lxFadeUp 800ms cubic-bezier(0.28,0,0.22,1)"}}>
      <span style={{display:"block"}}>{c.k}</span>
      <span style={{display:"block", opacity:0.55, fontWeight:400}}>{c.v}</span>
    </span>
  );
}

/* Scene overlay — narrative beats over HeroUnderwater (rings → beams → cells) */
function HeroSceneOverlay({ scene }) {
  return (
    <div style={{position:"absolute", inset:0, zIndex:1, pointerEvents:"none"}}>
      {/* Scene 0 — pulsing rings around panel */}
      {scene === 0 && [0,1,2].map(i => (
        <div key={i} style={{
          position:"absolute", left:"50%", top:"90%",
          width: 360, height: 360, borderRadius:"50%",
          border: `1px solid rgba(var(--lx-red-glow), ${0.45 - i*0.12})`,
          transform:"translate(-50%,-50%)",
          animation: `lxWave 2.4s cubic-bezier(0.28,0,0.22,1) ${i*0.6}s infinite`,
        }}/>
      ))}
      {/* Scene 1 — descending photon bars toward skin */}
      {scene === 1 && (
        <svg viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice"
          style={{position:"absolute", inset:0, width:"100%", height:"100%", animation:"lxFadeIn 700ms"}}>
          <defs>
            <linearGradient id="hbeam" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor="#ff4a57" stopOpacity="0.9"/>
              <stop offset="60%" stopColor="#e50914" stopOpacity="0.3"/>
              <stop offset="100%" stopColor="#e50914" stopOpacity="0"/>
            </linearGradient>
          </defs>
          {[...Array(10)].map((_, i) => (
            <rect key={i} x={120 + i*108} y="420" width="2" height="280" fill="url(#hbeam)"
              style={{animation:`lxBeamDrop 1.8s cubic-bezier(0.28,0,0.22,1) ${i*0.1}s infinite`}}/>
          ))}
        </svg>
      )}
      {/* Scene 2 — cellular glows scattered */}
      {scene === 2 && (
        <svg viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice"
          style={{position:"absolute", inset:0, width:"100%", height:"100%", animation:"lxFadeIn 700ms"}}>
          <defs>
            <radialGradient id="hcell" cx="0.5" cy="0.5" r="0.5">
              <stop offset="0%" stopColor="#ff4050" stopOpacity="0.9"/>
              <stop offset="100%" stopColor="#e50914" stopOpacity="0"/>
            </radialGradient>
          </defs>
          {[...Array(36)].map((_, i) => {
            const x = (i * 73) % 1200;
            const y = 80 + (i * 47) % 560;
            return (
              <circle key={i} cx={x} cy={y} r="3" fill="url(#hcell)"
                style={{animation:`lxCellPulse 2.6s ease-in-out ${(i%6)*0.2}s infinite`}}/>
            );
          })}
        </svg>
      )}
    </div>
  );
}

/* VARIANT A — photon sequence: red beam → penetrating skin → cellular regeneration */
function HeroSequence({ scene, theme }) {
  return (
    <div style={{position:"absolute", inset:0, zIndex:1, pointerEvents:"none"}}>
      {/* Panel silhouette — stays */}
      <div style={{
        position:"absolute", left:"50%", top:"82%", transform:"translate(-50%,-50%)",
        width: 280, height: 280, opacity: 0.55,
      }}>
        {/* Panel image — Essential (red) */}
        <img src="images/lumaflex/essential-main.webp" alt=""
          style={{
            position:"absolute", inset:0, width:"100%", height:"100%",
            objectFit:"contain",
            filter: theme === "light" ? "none" : "brightness(0.9) contrast(1.1)",
            transition: "transform 1200ms cubic-bezier(0.28,0,0.22,1)",
            transform: `scale(${scene === 0 ? 1 : scene === 1 ? 0.78 : 0.72})`,
            opacity: scene === 2 ? 0.75 : 1,
          }} />
        {/* Glow halo behind panel */}
        <div style={{
          position:"absolute", inset:"-40%", borderRadius:"50%",
          background: "radial-gradient(circle, rgba(var(--lx-red-glow), calc(0.45 * var(--lx-intensity))) 0%, rgba(var(--lx-red-glow),0) 60%)",
          filter:"blur(40px)",
          animation: "lxBreath 4s ease-in-out infinite",
        }}/>
      </div>

      {/* Scene 1: light waves emanating */}
      {scene === 0 && (
        <>
          {[0,1,2].map(i => (
            <div key={i} style={{
              position:"absolute", left:"50%", top:"82%",
              width: 280, height: 280,
              borderRadius:"50%",
              border: `1px solid rgba(var(--lx-red-glow), ${0.5 - i*0.15})`,
              transform:"translate(-50%,-50%)",
              animation: `lxWave 2s cubic-bezier(0.28,0,0.22,1) ${i*0.5}s infinite`,
            }}/>
          ))}
        </>
      )}

      {/* Scene 2: skin layers cross-section */}
      {scene === 1 && (
        <svg viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice"
          style={{position:"absolute", inset:0, width:"100%", height:"100%", animation:"lxFadeIn 700ms"}}>
          <defs>
            <linearGradient id="skinGrad" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor={theme==="light" ? "#f2d7c8" : "#3a1f1c"} stopOpacity="0.6"/>
              <stop offset="50%" stopColor={theme==="light" ? "#d99d88" : "#2a1312"} stopOpacity="0.5"/>
              <stop offset="100%" stopColor={theme==="light" ? "#a06a5b" : "#150808"} stopOpacity="0.4"/>
            </linearGradient>
            <radialGradient id="beam" cx="0.5" cy="0" r="0.8">
              <stop offset="0%" stopColor="#ff3040" stopOpacity="0.9"/>
              <stop offset="60%" stopColor="#e50914" stopOpacity="0.3"/>
              <stop offset="100%" stopColor="#e50914" stopOpacity="0"/>
            </radialGradient>
          </defs>
          <rect x="0" y="440" width="1200" height="360" fill="url(#skinGrad)"/>
          {/* horizontal layer lines */}
          {[480, 540, 620, 720].map((y, i) => (
            <line key={i} x1="0" x2="1200" y1={y} y2={y}
              stroke={theme==="light" ? "rgba(0,0,0,0.08)" : "rgba(255,255,255,0.08)"} strokeDasharray="2 6" />
          ))}
          {/* vertical photon beams */}
          {[...Array(8)].map((_, i) => (
            <g key={i} style={{animation:`lxBeamDrop 1.6s cubic-bezier(0.28,0,0.22,1) ${i*0.12}s infinite`}}>
              <rect x={150 + i*120} y="440" width="2" height="260" fill="url(#beam)" transform="scale(1,1)" />
            </g>
          ))}
        </svg>
      )}

      {/* Scene 3: cellular regeneration — mitochondria dots glowing */}
      {scene === 2 && (
        <svg viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice"
          style={{position:"absolute", inset:0, width:"100%", height:"100%", animation:"lxFadeIn 700ms"}}>
          <defs>
            <radialGradient id="cellGlow" cx="0.5" cy="0.5" r="0.5">
              <stop offset="0%" stopColor="#ff4050" stopOpacity="0.9"/>
              <stop offset="100%" stopColor="#e50914" stopOpacity="0"/>
            </radialGradient>
          </defs>
          {[...Array(40)].map((_, i) => {
            const x = (i * 73) % 1200;
            const y = 100 + (i * 47) % 600;
            const d = (i % 5) * 0.2;
            return (
              <circle key={i} cx={x} cy={y} r="3" fill="url(#cellGlow)"
                style={{animation:`lxCellPulse 2.4s ease-in-out ${d}s infinite`}}/>
            );
          })}
        </svg>
      )}
    </div>
  );
}

/* VARIANT B (unused, reserved for future A/B test) */
function HeroUnderwater({theme}) {
  const isDark = theme !== "light";
  return (
    <div style={{position:"absolute", inset:0, zIndex:1, pointerEvents:"none", overflow:"hidden"}}>
      {/* Cinematic backdrop */}
      <div style={{
        position:"absolute", inset:0,
        background: isDark
          ? "radial-gradient(ellipse at 50% 55%, #2a0810 0%, #0a0406 55%, #000 100%)"
          : "radial-gradient(ellipse at 50% 55%, #f6d8d6 0%, #efe9e8 65%, #e4dfdf 100%)",
      }}/>
      {/* Red halo behind panel */}
      <div style={{
        position:"absolute", left:"50%", top:"90%", transform:"translate(-50%,-50%)",
        width: 480, height: 480, borderRadius:"50%",
        background: `radial-gradient(circle, rgba(var(--lx-red-glow), calc(0.55 * var(--lx-intensity))) 0%, rgba(var(--lx-red-glow), 0) 60%)`,
        filter:"blur(30px)",
        animation: "lxBreath 5s ease-in-out infinite",
      }}/>
      {/* Panel wrapper: slow rotation + float */}
      <div style={{
        position:"absolute", left:"50%", top:"90%",
        transform:"translate(-50%,-50%)",
        width: "min(440px, 52vw)",
        aspectRatio: "1/1",
        perspective: "1200px",
      }}>
        <div style={{
          width:"100%", height:"100%",
          transformStyle: "preserve-3d",
          animation: "lxPanelOrbit 14s cubic-bezier(0.45,0,0.55,1) infinite, lxPanelFloat 6s ease-in-out infinite",
        }}>
          <img src="images/lumaflex/hero-panel-cutout.png" alt=""
            style={{
              width:"100%", height:"100%", objectFit:"contain",
              filter: isDark
                ? "drop-shadow(0 30px 80px rgba(229,9,20,0.6)) drop-shadow(0 0 60px rgba(229,9,20,0.35)) brightness(1.15) contrast(1.05)"
                : "drop-shadow(0 30px 80px rgba(229,9,20,0.35))",
            }}/>
        </div>
      </div>
      {/* Orbital particles */}
      {[...Array(18)].map((_, i) => {
        const angle = (i / 18) * Math.PI * 2;
        const radius = 22 + (i%3)*4;
        return (
          <div key={i} style={{
            position:"absolute",
            left: `${50 + Math.cos(angle) * radius}%`,
            top: `${90 + Math.sin(angle) * radius * 0.4}%`,
            width: 3 + (i%3),
            height: 3 + (i%3),
            borderRadius:"50%",
            background: isDark ? "rgba(255,80,90,0.55)" : "rgba(229,9,20,0.3)",
            boxShadow: isDark ? "0 0 8px rgba(229,9,20,0.9)" : "0 0 4px rgba(229,9,20,0.4)",
            animation: `lxParticle ${8 + (i%5)}s ease-in-out ${i*0.2}s infinite`,
          }}/>
        );
      })}
      {/* Vignette */}
      <div style={{
        position:"absolute", inset:0,
        background: isDark
          ? "radial-gradient(ellipse at 50% 60%, transparent 40%, rgba(0,0,0,0.75) 100%)"
          : "radial-gradient(ellipse at 50% 60%, transparent 45%, rgba(0,0,0,0.12) 100%)",
      }}/>
    </div>
  );
}

/* VARIANT C — three-frame vertical triptych: pain, light, regeneration */
function HeroTriptych({scene, theme}) {
  const frames = [
    { label: "Ból", color: "#1a0a0a", img: null, icon: "×" },
    { label: "Światło", color: "#3a0812", img: "images/lumaflex/essential-main.webp", icon: null },
    { label: "Regeneracja", color: "#0c0604", img: null, icon: "✓" },
  ];
  return (
    <div style={{position:"absolute", inset:0, zIndex:1, display:"flex", pointerEvents:"none"}}>
      {frames.map((f, i) => (
        <div key={i} style={{
          flex: scene === i ? 2 : 1,
          background: f.color,
          transition: "flex 1000ms cubic-bezier(0.28,0,0.22,1)",
          position:"relative",
          borderRight: i < 2 ? "1px solid rgba(255,255,255,0.05)" : "none",
          opacity: scene === i ? 1 : 0.55,
        }}>
          {f.img && (
            <img src={f.img} alt="" style={{
              position:"absolute", inset:0, width:"100%", height:"100%", objectFit:"contain",
              opacity: 0.7,
            }}/>
          )}
          {f.icon && (
            <div style={{
              position:"absolute", left:"50%", top:"55%", transform:"translate(-50%,-50%)",
              fontSize: 180, color: "rgba(255,255,255,0.08)", fontWeight: 200,
            }}>{f.icon}</div>
          )}
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Nav, Hero, HeroSceneOverlay });