// Hero — 3 tweakable variations: Showtime / Recipe / Live Studio

const HEROES = {};

// Shared neon chef-hat SVG
function ChefHatNeon({ size = 56 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none">
      <defs>
        <filter id="neon-glow">
          <feGaussianBlur stdDeviation="2.5" result="blur" />
          <feMerge>
            <feMergeNode in="blur" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>
      <g filter="url(#neon-glow)">
        {/* hat body */}
        <path d="M14 38 C 8 38, 6 28, 14 25 C 14 17, 24 14, 32 18 C 40 14, 50 17, 50 25 C 58 28, 56 38, 50 38 L 50 48 L 14 48 Z"
              stroke="#FFD23F" strokeWidth="2.2" fill="none" strokeLinejoin="round" />
        {/* circuit dots */}
        <circle cx="22" cy="32" r="1.6" fill="#4FB3FF" />
        <circle cx="32" cy="28" r="1.6" fill="#FFD23F" />
        <circle cx="42" cy="32" r="1.6" fill="#4FB3FF" />
        <path d="M22 32 L 32 28 L 42 32" stroke="#4FB3FF" strokeWidth="1" fill="none" />
        {/* hat band */}
        <line x1="14" y1="48" x2="50" y2="48" stroke="#FFD23F" strokeWidth="2.2" />
      </g>
    </svg>
  );
}

// Common CTA button block
function HeroCTA({ primary = "Užsiregistruoti į bendruomenę", secondary = "Sužinoti daugiau" }) {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 32 }}>
      <a href="#registracija" className="btn btn-primary">
        {primary}
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
          <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>
      <a href="#apie" className="btn btn-ghost">{secondary}</a>
    </div>
  );
}

// Floating ingredient/AI particles for hero (visual flavor)
function FloatingParticles() {
  const particles = [
    { x: 8, y: 18, size: 36, delay: 0, kind: "🌿" },
    { x: 88, y: 22, size: 32, delay: 1.2, kind: "✦" },
    { x: 12, y: 78, size: 28, delay: 2.4, kind: "•" },
    { x: 92, y: 72, size: 30, delay: 0.6, kind: "✦" },
  ];
  return (
    <>
      {particles.map((p, i) => (
        <div key={i} className="float-y" style={{
          position: "absolute",
          left: `${p.x}%`, top: `${p.y}%`,
          fontSize: p.size,
          color: p.kind === "✦" ? "var(--neon-cyan)" : "var(--neon-yellow)",
          opacity: 0.4,
          animationDelay: `${p.delay}s`,
          pointerEvents: "none",
          filter: "drop-shadow(0 0 8px currentColor)",
        }}>{p.kind}</div>
      ))}
    </>
  );
}

// ───────────────────────────────────────────────────────────
// VARIATION 1: SHOWTIME — full bleed photo + neon overlay
// ───────────────────────────────────────────────────────────
HEROES.showtime = function HeroShowtime() {
  return (
    <section className="hero hero-showtime" style={{ paddingTop: 48, paddingBottom: 0 }}>
      <div className="container-wide">
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 18, marginBottom: 40 }}>
          <span className="eyebrow"><span className="dot"></span>Tiesiogiai · Kiekvieną savaitę</span>
          <h1 style={{ maxWidth: 980 }}>
            Jeigu AI tau skamba kaip <span className="script" style={{ color: "var(--neon-yellow)", fontSize: "1.15em", display: "inline-block", transform: "rotate(-2deg)" }}>užsienio kalba</span> — esi ten, kur reikia.
          </h1>
          <p className="text-muted" style={{ maxWidth: 620, fontSize: 19 }}>
            Praktiniai AI mokymai be IT žargono.<br />
            Receptai iš proto — skonis iš širdies.
          </p>
          <div style={{ display: "flex", columnGap: 24, rowGap: 8, marginTop: 8, color: "var(--text-dim)", fontSize: 14, flexWrap: "wrap", justifyContent: "center" }}>
            <span>✓ 1 val. per savaitę</span>
            <span>✓ Gyvai + įrašai</span>
            <span>✓ Uždara bendruomenė</span>
          </div>
        </div>

        <div style={{
          position: "relative",
          borderRadius: "var(--radius-xl)",
          overflow: "hidden",
          margin: "0 auto",
          maxWidth: 1280,
          boxShadow: "0 0 0 1px rgba(255,210,63,.25), 0 30px 80px rgba(0,0,0,.5)",
        }}>
          <img src="assets/hero-hosts.png" alt="Aurimas Levickas ir Rytis Zdanavičius AI Virtuvėje" style={{ width: "100%", display: "block" }} />
        </div>

        {/* CTA — below photo, never overlapping */}
        <div style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          gap: 14,
          flexWrap: "wrap",
          marginTop: 36,
          padding: "0 16px",
        }}>
          <a href="#registracija" className="btn btn-primary">
            NORIU prisijungti
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
              <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
          <a href="#apie" className="btn btn-ghost">Sužinoti daugiau</a>
        </div>
      </div>
    </section>
  );
};

// ───────────────────────────────────────────────────────────
// VARIATION 2: RECIPE CARD — split, image in TV-screen frame
// ───────────────────────────────────────────────────────────
HEROES.recipe = function HeroRecipe() {
  const ingredients = [
    "Trūksta aiškumo apie AI",
    "Nori mokytis be teorijos",
    "Nenori atsilikti",
    "Turi 1 val. per savaitę",
  ];
  return (
    <section className="hero hero-recipe" style={{ paddingTop: 48 }}>
      <div className="container-wide">
        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 1fr)",
          gap: 64,
          alignItems: "center",
        }} className="hero-recipe-grid">
          <div>
            <span className="eyebrow"><span className="dot"></span>Tiesioginė bendruomenė</span>
            <h1 style={{ marginTop: 20 }}>
              Pagaminkite <span className="script" style={{ color: "var(--neon-yellow)", fontSize: "1.15em" }}>aiškumą</span> iš AI baimės.
            </h1>
            <p className="text-muted" style={{ marginTop: 20, fontSize: 19, maxWidth: 540 }}>
              Praktiniai AI mokymai be IT žargono — visiems, kurie nori suprasti, ne tik išgirsti. Aurimas ir Rytis veda tiesiogines pamokas kiekvieną savaitę — kaip TV laida, tik tu renkiesi temą.
            </p>

            {/* Ingredient checklist */}
            <div style={{
              marginTop: 28,
              padding: "22px 24px",
              background: "var(--surface)",
              border: "1px dashed var(--line-2)",
              borderRadius: "var(--radius)",
              maxWidth: 480,
            }}>
              <div className="tag-mono text-yellow" style={{ marginBottom: 12 }}>📋 Šios programos sudėtinės dalys:</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                {ingredients.map((it, i) => (
                  <li key={i} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 15 }}>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                      <rect x="3" y="3" width="18" height="18" rx="4" stroke="var(--neon-yellow)" strokeWidth="2"/>
                      <path d="M7 12.5l3.5 3.5L17 8.5" stroke="var(--neon-yellow)" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                    {it}
                  </li>
                ))}
              </ul>
            </div>

            <HeroCTA />
          </div>

          {/* TV-screen framed image */}
          <div style={{ position: "relative" }}>
            <div style={{
              position: "relative",
              padding: 14,
              background: "linear-gradient(145deg, #1a2456, #0d1740)",
              border: "1px solid var(--line-2)",
              borderRadius: 28,
              boxShadow: "0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06)",
            }}>
              {/* TV bezel top dots */}
              <div style={{ position: "absolute", top: 18, left: "50%", transform: "translateX(-50%)", display: "flex", gap: 6, zIndex: 2 }}>
                <span style={{ width: 6, height: 6, borderRadius: 3, background: "var(--neon-yellow)", boxShadow: "0 0 6px var(--neon-yellow)" }}></span>
                <span style={{ width: 24, height: 6, borderRadius: 3, background: "rgba(255,255,255,.1)" }}></span>
              </div>
              <div style={{
                position: "relative",
                borderRadius: 18,
                overflow: "hidden",
                aspectRatio: "16/10",
                background: "#000",
              }}>
                <img src="assets/hero-hosts.png" alt="Aurimas Levickas ir Rytis Zdanavičius" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center" }} />
                {/* Scanlines */}
                <div style={{
                  position: "absolute", inset: 0,
                  background: "repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.08) 2px 3px)",
                  pointerEvents: "none",
                  mixBlendMode: "multiply",
                }}></div>
                <span className="live-badge" style={{ position: "absolute", top: 12, left: 12 }}>● LIVE</span>
                <div style={{
                  position: "absolute", bottom: 12, right: 12,
                  fontFamily: "var(--font-mono)", fontSize: 11,
                  color: "white", background: "rgba(0,0,0,.5)",
                  padding: "3px 8px", borderRadius: 4,
                }}>
                  CH 12 · 19:00
                </div>
              </div>
            </div>
            {/* Floating chef hat */}
            <div className="float-y neon-flicker" style={{
              position: "absolute", top: -32, right: -16,
              background: "var(--bg-2)", borderRadius: "50%",
              padding: 14, border: "1px solid var(--line-2)",
            }}>
              <ChefHatNeon size={44} />
            </div>
            {/* Floating sticker note */}
            <div style={{
              position: "absolute", bottom: -24, left: -20,
              background: "var(--neon-yellow)", color: "#0A1230",
              padding: "12px 18px", borderRadius: 14,
              fontFamily: "var(--font-script)", fontSize: 22, fontWeight: 600,
              transform: "rotate(-6deg)",
              boxShadow: "0 12px 32px rgba(255,210,63,.25)",
            }}>
              receptai iš proto ✦
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .hero-recipe-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
      `}</style>
    </section>
  );
};

// ───────────────────────────────────────────────────────────
// VARIATION 3: LIVE STUDIO — TV broadcast chrome
// ───────────────────────────────────────────────────────────
HEROES.studio = function HeroStudio() {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 1000);
    return () => clearInterval(id);
  }, []);

  const now = new Date();
  const timeStr = now.toLocaleTimeString("lt-LT", { hour: "2-digit", minute: "2-digit", second: "2-digit" });

  const tickerItems = [
    "ŠIANDIEN: Kaip parašyti laišką su ChatGPT",
    "REZULTATAI: 247 dalyviai aktyviai mokosi",
    "ARTIMIAUSIA TRANSLIACIJA: antradienį 19:00",
    "NAUJIENA: Pridėtas Gemini modulis",
  ];

  return (
    <section className="hero hero-studio" style={{ paddingTop: 32, paddingBottom: 60 }}>
      <div className="container-wide">
        <div style={{ textAlign: "center", maxWidth: 880, margin: "0 auto 32px" }}>
          <span className="eyebrow"><span className="dot"></span>Gyvai · Kiekvieną antradienį 19:00</span>
          <h1 style={{ marginTop: 18 }}>
            <span className="script" style={{ color: "var(--neon-yellow)", display: "inline-block", transform: "rotate(-2deg)", fontSize: "1.1em" }}>Įjunkite</span> savo AI virtuvę.
          </h1>
          <p className="text-muted" style={{ marginTop: 16, fontSize: 19 }}>
            Tiesioginė bendruomenė. Praktiniai mokymai. Be paslapčių.
          </p>
        </div>

        {/* Broadcast frame */}
        <div style={{
          position: "relative",
          maxWidth: 1200,
          margin: "0 auto",
          borderRadius: 24,
          overflow: "hidden",
          background: "#000",
          boxShadow: "0 30px 80px rgba(0,0,0,.6)",
          border: "1px solid rgba(255,210,63,.2)",
        }}>
          {/* Studio chrome bar — top */}
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            padding: "12px 18px",
            background: "linear-gradient(to right, rgba(229,62,62,.95), rgba(180,30,30,.95))",
            color: "white",
            fontFamily: "var(--font-mono)",
            fontSize: 13,
            letterSpacing: "0.08em",
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                <span style={{ width: 10, height: 10, borderRadius: "50%", background: "white", animation: "pulse-dot 1.4s infinite" }}></span>
                LIVE
              </span>
              <span style={{ opacity: 0.85 }}>AI VIRTUVĖ · S01·EP12</span>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 16, opacity: 0.9 }}>
              <span>● REC</span>
              <span style={{ fontVariantNumeric: "tabular-nums" }}>{timeStr}</span>
            </div>
          </div>

          <div style={{ position: "relative" }}>
            <img src="assets/hero-hosts.png" alt="Aurimas Levickas ir Rytis Zdanavičius" style={{ width: "100%", display: "block" }} />

            {/* Lower third — broadcast graphic */}
            <div style={{
              position: "absolute", left: 24, bottom: 72,
              background: "linear-gradient(to right, rgba(10,18,48,.95), rgba(10,18,48,.7) 80%, transparent)",
              padding: "14px 28px 14px 18px",
              borderLeft: "4px solid var(--neon-yellow)",
              maxWidth: "60%",
            }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--neon-yellow)", letterSpacing: "0.14em" }}>
                ŠEIMININKAI
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600, marginTop: 2 }}>
                Aurimas Levickas <span style={{ color: "var(--text-dim)", fontWeight: 400 }}>·</span> Rytis Zdanavičius
              </div>
            </div>

            {/* Side stat card */}
            <div style={{
              position: "absolute", top: 20, right: 20,
              background: "rgba(10,18,48,.85)",
              backdropFilter: "blur(10px)",
              border: "1px solid var(--line-2)",
              borderRadius: 12,
              padding: "12px 16px",
              minWidth: 180,
            }}>
              <div className="tag-mono text-yellow" style={{ marginBottom: 4 }}>ŽIŪRI DABAR</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 32, fontWeight: 700, fontVariantNumeric: "tabular-nums" }}>
                247
              </div>
              <div style={{ fontSize: 12, color: "var(--text-muted)" }}>aktyvūs mokiniai</div>
            </div>
          </div>

          {/* Ticker */}
          <div style={{
            background: "var(--neon-yellow)",
            color: "#0A1230",
            padding: "10px 0",
            fontFamily: "var(--font-mono)",
            fontSize: 13,
            fontWeight: 600,
            letterSpacing: "0.05em",
            overflow: "hidden",
            position: "relative",
          }}>
            <div style={{
              display: "flex",
              gap: 48,
              whiteSpace: "nowrap",
              animation: "ticker 40s linear infinite",
            }}>
              {[...tickerItems, ...tickerItems, ...tickerItems].map((it, i) => (
                <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
                  <span style={{ color: "#0A1230" }}>◆</span>
                  {it}
                </span>
              ))}
            </div>
          </div>
        </div>

        <div style={{ display: "flex", justifyContent: "center", marginTop: 36 }}>
          <HeroCTA />
        </div>
      </div>

      <style>{`
        @keyframes ticker {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { HEROES, ChefHatNeon, FloatingParticles, HeroCTA });
