// components.jsx — theme-aware homepage sections for saraslot
// Loaded after React + Babel. Exports components on window.

const { useState, useEffect, useRef, useCallback } = React;

/* ─────────────────────────────────────────────────────────────
   ICONS — minimal inline SVG/text for reliability
   ──────────────────────────────────────────────────────────── */
const Icon = ({ name, size = 18, color = "currentColor" }) => {
  const s = size, c = color;
  switch (name) {
    case "soccer": return <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke={c} strokeWidth="2"><circle cx="12" cy="12" r="9"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></svg>;
    case "trophy": return <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke={c} strokeWidth="2"><path d="M7 3h10v4a5 5 0 0 1-10 0V3z"/><path d="M5 5H3v2a3 3 0 0 0 3 3M19 5h2v2a3 3 0 0 1-3 3M10 16h4M12 12v4M8 21h8"/></svg>;
    case "crown": return <svg viewBox="0 0 24 24" width={s} height={s} fill={c}><path d="M3 7l4 4 5-7 5 7 4-4-2 12H5L3 7z"/></svg>;
    case "ticket": return <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke={c} strokeWidth="2"><path d="M3 9a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2a2 2 0 0 0 0 4v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-4V9z"/></svg>;
    case "home": return <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke={c} strokeWidth="2"><path d="M3 11l9-8 9 8M5 10v10h14V10"/></svg>;
    case "history": return <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke={c} strokeWidth="2"><path d="M12 8v5l3 2"/><circle cx="12" cy="12" r="9"/></svg>;
    case "chat": return <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke={c} strokeWidth="2"><path d="M21 12a8 8 0 1 1-3.2-6.4L21 4v6h-6"/></svg>;
    case "settings": return <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke={c} strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.2l2-1.5-2-3.4-2.3.9a7 7 0 0 0-2-1.2L14 3h-4l-.6 2.6a7 7 0 0 0-2 1.2l-2.3-.9-2 3.4 2 1.5A7 7 0 0 0 5 12c0 .4 0 .8.1 1.2L3 14.7l2 3.4 2.3-.9c.6.5 1.3.9 2 1.2L10 21h4l.6-2.6a7 7 0 0 0 2-1.2l2.3.9 2-3.4-2-1.5c.1-.4.1-.8.1-1.2z"/></svg>;
    case "slot": return <svg viewBox="0 0 24 24" width={s} height={s} fill={c}><rect x="3" y="5" width="18" height="14" rx="2"/><rect x="6" y="8" width="3" height="8" fill="#fff" opacity=".95"/><rect x="10.5" y="8" width="3" height="8" fill="#fff" opacity=".95"/><rect x="15" y="8" width="3" height="8" fill="#fff" opacity=".95"/></svg>;
    case "live": return <svg viewBox="0 0 24 24" width={s} height={s} fill={c}><circle cx="12" cy="12" r="3"/><circle cx="12" cy="12" r="7" fill="none" stroke={c} strokeWidth="1.5"/><circle cx="12" cy="12" r="11" fill="none" stroke={c} strokeWidth="1.5" opacity=".4"/></svg>;
    case "esport": return <svg viewBox="0 0 24 24" width={s} height={s} fill={c}><path d="M6 8h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3h-2l-2-2H10l-2 2H6a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3z"/><circle cx="8" cy="12" r="1.2" fill="#0d0b2e"/><circle cx="16" cy="12" r="1.2" fill="#0d0b2e"/></svg>;
    case "lightning": return <svg viewBox="0 0 24 24" width={s} height={s} fill={c}><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z"/></svg>;
    case "menu": return <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke={c} strokeWidth="2"><path d="M4 7h16M4 12h16M4 17h16"/></svg>;
    case "invite": return <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke={c} strokeWidth="2"><circle cx="9" cy="8" r="3"/><path d="M3 20c0-3 3-5 6-5s6 2 6 5"/><path d="M19 8v6M16 11h6"/></svg>;
    case "link": return <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke={c} strokeWidth="2"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 1 0-5.7-5.7L11.5 7"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 1 0 5.7 5.7L12.5 17"/></svg>;
    case "downline": return <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke={c} strokeWidth="2"><circle cx="12" cy="5" r="2.5"/><circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="M12 7v4M12 11l-6 4M12 11l6 4"/></svg>;
    case "gift": return <svg viewBox="0 0 24 24" width={s} height={s} fill={c}><path d="M3 9h18v3H3zM4 12h16v9H4zM12 9V6M9 6a3 3 0 1 1 3-3M15 6a3 3 0 1 0-3-3M11 12h2v9h-2z"/></svg>;
    case "female": return <span style={{ fontSize: s, lineHeight: 1, color: c }}>♀</span>;
    default: return null;
  }
};
window.Icon = Icon;

/* ─────────────────────────────────────────────────────────────
   Logo — theme-specific
   ──────────────────────────────────────────────────────────── */
function Logo({ theme }) {
  if (theme === "jade") {
    return (
      <div className="logo">
        <div className="logo-mark">寶</div>
        <span style={{ fontFamily: "var(--font-display)", color: "var(--text)" }}>
          sara<span style={{ color: "var(--hot-2)" }}>slot</span>
        </span>
      </div>
    );
  }
  if (theme === "neon") {
    return (
      <div className="logo">
        <div className="logo-mark">
          <svg viewBox="0 0 32 32" width="20" height="20"><path d="M6 4 L22 4 L26 8 L26 28 L18 28 L14 24 L6 24 Z" fill="none" stroke="#0d0b2e" strokeWidth="2"/></svg>
        </div>
        <span className="accent-fill">sara<span style={{ WebkitTextFillColor: "white", color: "white" }}>slot</span></span>
      </div>
    );
  }
  return (
    <div className="logo">
      <div className="logo-mark">
        <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
          <path d="M3 8l3 3 6-7 6 7 3-3-2 12H5L3 8z"/>
        </svg>
      </div>
      <span className="accent-fill">sara<span style={{ color: "#fff", WebkitTextFillColor: "white" }}>slot</span></span>
    </div>
  );
}
window.Logo = Logo;

/* ─────────────────────────────────────────────────────────────
   AppDownloadBanner
   ──────────────────────────────────────────────────────────── */
function AppDownloadBanner({ onDismiss }) {
  return (
    <div className="appdl">
      <div className="appdl-icon">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
          <path d="M5 3h10l4 4v14H5z" fill="rgba(0,0,0,.15)"/>
          <path d="M9 7h6M9 11h6M9 15h4" stroke="currentColor" strokeWidth="1.5" fill="none"/>
        </svg>
      </div>
      <div className="appdl-body">
        <div className="appdl-title">App · Download And Play Now!</div>
        <div className="appdl-sub">
          <span className="appdl-stars">★★★★★</span>
          <span>4.9 · 50K+ players</span>
        </div>
      </div>
      <button className="btn btn-primary" type="button">Download</button>
      <button className="appdl-close" type="button" onClick={onDismiss} aria-label="Dismiss">×</button>
    </div>
  );
}
window.AppDownloadBanner = AppDownloadBanner;

/* ─────────────────────────────────────────────────────────────
   Header
   ──────────────────────────────────────────────────────────── */
function Header({ theme, navigate }) {
  const goHome = () => {
    if (navigate) navigate("/");
    else window.location.hash = "/";
  };
  return (
    <header className="hdr">
      <button
        type="button"
        className="header-logo"
        onClick={goHome}
        aria-label="Go to homepage"
      >
        <Logo theme={theme} />
      </button>
      <div className="hdr-actions">
        <button className="btn btn-outline" type="button">Log Masuk</button>
        <button className="btn btn-primary" type="button">Daftar</button>
        <button className="hamburger" type="button" aria-label="Menu">
          <Icon name="menu" size={22} />
        </button>
      </div>
    </header>
  );
}
window.Header = Header;

/* ─────────────────────────────────────────────────────────────
   HeroCarousel
   ──────────────────────────────────────────────────────────── */
const HERO_SLIDES = [
  {
    eyebrow: "Hari Rebate",
    title: "2 HARI REBATE",
    big: "GAO GAO 6%",
    body: "Get Win or Lose — NO TURNOVER! NO ROLLOVER!",
    cta: "Claim Now",
    art: "medal",
  },
  {
    eyebrow: "Welcome Bonus",
    title: "BONUS DAFTAR",
    big: "RM 88 FREE",
    body: "New members only. Instant credit, no deposit needed to start.",
    cta: "Daftar Now",
    art: "coins",
  },
  {
    eyebrow: "Sports Reload",
    title: "EURO 2026",
    big: "150% BOOST",
    body: "Live every match. Bigger odds, faster payouts, zero fees.",
    cta: "Bet Now",
    art: "ball",
  },
];

function MedalArt({ theme }) {
  if (theme === "neon") {
    return (
      <svg className="illus" viewBox="0 0 130 130">
        <defs>
          <radialGradient id="medN" cx=".5" cy=".5" r=".5">
            <stop offset="0" stopColor="#00F0FF"/>
            <stop offset=".6" stopColor="#6B5BFF"/>
            <stop offset="1" stopColor="#FF00C8"/>
          </radialGradient>
        </defs>
        <polygon points="65,8 110,38 110,92 65,122 20,92 20,38" fill="url(#medN)" opacity=".95" />
        <polygon points="65,8 110,38 110,92 65,122 20,92 20,38" fill="none" stroke="#fff" strokeWidth="1.5" opacity=".8"/>
        <polygon points="65,30 92,46 92,84 65,100 38,84 38,46" fill="rgba(13,11,46,.8)"/>
        <text x="65" y="62" textAnchor="middle" fill="#39FF14" fontSize="11" fontFamily="Orbitron" fontWeight="700" letterSpacing="2">REBATE</text>
        <text x="65" y="84" textAnchor="middle" fill="#00F0FF" fontSize="22" fontFamily="Orbitron" fontWeight="800">6%</text>
      </svg>
    );
  }
  if (theme === "jade") {
    return (
      <svg className="illus" viewBox="0 0 130 130">
        <defs>
          <linearGradient id="medJ" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#E8C863"/>
            <stop offset=".55" stopColor="#D4AF37"/>
            <stop offset="1" stopColor="#8a6E1F"/>
          </linearGradient>
        </defs>
        <circle cx="65" cy="65" r="52" fill="url(#medJ)" />
        <circle cx="65" cy="65" r="44" fill="none" stroke="#15110D" strokeWidth="1.5"/>
        <circle cx="65" cy="65" r="36" fill="#15110D"/>
        <text x="65" y="60" textAnchor="middle" fill="#D4AF37" fontSize="11" fontFamily="serif" letterSpacing="1">REBATE</text>
        <text x="65" y="82" textAnchor="middle" fill="#F5F1E8" fontSize="22" fontFamily="serif" fontWeight="700">6%</text>
        <text x="65" y="98" textAnchor="middle" fill="#D4AF37" fontSize="10" letterSpacing="2">福</text>
      </svg>
    );
  }
  return (
    <svg className="illus" viewBox="0 0 130 130">
      <defs>
        <radialGradient id="medG" cx=".4" cy=".35" r=".7">
          <stop offset="0" stopColor="#FFE89A"/>
          <stop offset=".5" stopColor="#FFB800"/>
          <stop offset="1" stopColor="#9C3F00"/>
        </radialGradient>
      </defs>
      {/* Outer 8-point star */}
      <polygon points="65,4 75,28 100,18 92,42 122,52 96,68 116,90 88,86 92,114 65,98 38,114 42,86 14,90 34,68 8,52 38,42 30,18 55,28" fill="url(#medG)" />
      <circle cx="65" cy="62" r="38" fill="#1a0a00" stroke="#FFB800" strokeWidth="2"/>
      <circle cx="65" cy="62" r="34" fill="none" stroke="#E60012" strokeWidth="1.5"/>
      <text x="65" y="58" textAnchor="middle" fill="#FFE89A" fontSize="11" fontFamily="Oswald" fontWeight="700" letterSpacing="2">REBATE</text>
      <text x="65" y="82" textAnchor="middle" fill="#FFB800" fontSize="24" fontFamily="Oswald" fontWeight="800">6%</text>
    </svg>
  );
}

function CoinsArt({ theme }) {
  const coinColors = theme === "neon"
    ? ["#39FF14", "#00F0FF", "#FF00C8"]
    : theme === "jade"
    ? ["#D4AF37", "#C8102E", "#D4AF37"]
    : ["#FFD24A", "#FFB800", "#E60012"];
  return (
    <svg className="illus" viewBox="0 0 130 130">
      {[[24, 22], [80, 18], [44, 50], [86, 60], [18, 78], [70, 92]].map((p, i) => (
        <g key={i} transform={`translate(${p[0]},${p[1]})`}>
          <circle cx="20" cy="20" r={i % 2 ? 18 : 22} fill={coinColors[i % 3]} stroke="rgba(0,0,0,.4)" strokeWidth="1.5"/>
          <text x="20" y={i % 2 ? 26 : 27} textAnchor="middle" fill="#1a0a00" fontWeight="900" fontSize={i % 2 ? 16 : 19} fontFamily="serif">$</text>
        </g>
      ))}
    </svg>
  );
}

function BallArt({ theme }) {
  if (theme === "neon") {
    return (
      <svg className="illus" viewBox="0 0 130 130">
        <defs>
          <radialGradient id="ballN" cx=".4" cy=".35" r=".7">
            <stop offset="0" stopColor="#fff"/>
            <stop offset=".6" stopColor="#00F0FF"/>
            <stop offset="1" stopColor="#1a0a4f"/>
          </radialGradient>
        </defs>
        <circle cx="65" cy="65" r="44" fill="url(#ballN)"/>
        <path d="M65 25 L80 50 L75 75 L55 75 L50 50 Z" fill="rgba(13,11,46,.85)" stroke="#39FF14" strokeWidth="1.2"/>
        <path d="M35 50 L50 50 M95 50 L80 50 M50 90 L40 100 M80 90 L90 100 M65 25 L65 15" stroke="#39FF14" strokeWidth="1.2" fill="none"/>
        <circle cx="65" cy="65" r="44" fill="none" stroke="#FF00C8" strokeWidth="1" opacity=".4"/>
      </svg>
    );
  }
  return (
    <svg className="illus" viewBox="0 0 130 130">
      <defs>
        <radialGradient id="ballG" cx=".4" cy=".35" r=".7">
          <stop offset="0" stopColor="#fff"/>
          <stop offset=".5" stopColor="#eee"/>
          <stop offset="1" stopColor="#777"/>
        </radialGradient>
      </defs>
      <circle cx="65" cy="65" r="46" fill="url(#ballG)"/>
      <path d="M65 25 L82 48 L75 75 L55 75 L48 48 Z" fill={theme === "jade" ? "#0F2E1F" : "#1a0a00"}/>
      <path d="M35 50 L48 48 M95 50 L82 48 M50 88 L40 100 M80 88 L90 100 M65 25 L65 15" stroke={theme === "jade" ? "#0F2E1F" : "#1a0a00"} strokeWidth="2.5" fill="none"/>
    </svg>
  );
}

function HeroArtBySlide({ slide, theme }) {
  if (slide.art === "coins") return <CoinsArt theme={theme} />;
  if (slide.art === "ball") return <BallArt theme={theme} />;
  return <MedalArt theme={theme} />;
}

function HeroCarousel({ theme }) {
  const [idx, setIdx] = useState(0);
  const pausedRef = useRef(false);
  const total = HERO_SLIDES.length;

  useEffect(() => {
    const t = setInterval(() => {
      if (!pausedRef.current) setIdx((i) => (i + 1) % total);
    }, 5000);
    return () => clearInterval(t);
  }, [total]);

  const slide = HERO_SLIDES[idx];

  return (
    <div className="hero"
      onTouchStart={() => { pausedRef.current = true; }}
      onTouchEnd={() => { pausedRef.current = false; }}
      onMouseEnter={() => { pausedRef.current = true; }}
      onMouseLeave={() => { pausedRef.current = false; }}
    >
      <div className="hero-slide" key={idx}>
        <div className="hero-bg bg-1" />
        <div className="hero-content">
          <div>
            <span className="hero-eyebrow">{slide.eyebrow}</span>
            <h1>{slide.title}</h1>
            <h2 className="accent-fill">{slide.big}</h2>
            <p>{slide.body}</p>
          </div>
          <button className="btn btn-primary hero-cta" type="button">
            {slide.cta} ›
          </button>
        </div>
        <div className="hero-art">
          <div className="hero-medal">
            <HeroArtBySlide slide={slide} theme={theme} />
          </div>
        </div>
      </div>
      <div className="hero-dots">
        {HERO_SLIDES.map((_, i) => (
          <span key={i} className={i === idx ? "active" : ""} onClick={() => setIdx(i)} />
        ))}
      </div>
      <div className="brand-strip">
        Malaysia's <span className="accent">Trusted</span> Online Gaming Platform
      </div>
    </div>
  );
}
window.HeroCarousel = HeroCarousel;

/* ─────────────────────────────────────────────────────────────
   Marquee
   ──────────────────────────────────────────────────────────── */
const MARQUEE_ITEMS = [
  "Trusted Across Asia",
  "10+ Years of Operation",
  "Stable System",
  "Smooth Transactions",
  "24/7 Live Support",
  "Instant Payout",
  "Licensed & Audited",
];

function MarqueeStrip() {
  const content = (
    <span>
      {MARQUEE_ITEMS.map((t, i) => (
        <React.Fragment key={i}>
          <span>{t}</span>
          <span className="dot">·</span>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">
        {content}
        {content}
      </div>
    </div>
  );
}
window.MarqueeStrip = MarqueeStrip;

/* ─────────────────────────────────────────────────────────────
   FeatureCardRow
   ──────────────────────────────────────────────────────────── */
const FEATURE_CARDS = [
  { key: "soccer", title: "Soccer", sub: "Make Your Predictions Now", icon: "⚽" },
  { key: "leader", title: "Leaderboard", sub: "Mega Win, Are You In?", icon: "📣" },
  { key: "rank", title: "Ranking", sub: "Become Top 30 Hero List!", icon: "👑" },
  { key: "tourney", title: "Tournament", sub: "Compete Weekly Prizes", icon: "🏆" },
];

function FeatureCardRow({ theme }) {
  return (
    <div className="hscroll-wrap" style={{ marginTop: 14 }}>
      <div className="hscroll">
        {FEATURE_CARDS.map((c) => (
          <div key={c.key} className={`fcard ${c.key}`}>
            <div className="fcard-title">{c.title}</div>
            <div className="fcard-sub">{c.sub}</div>
            <div className="fcard-icon">{c.icon}</div>
          </div>
        ))}
      </div>
    </div>
  );
}
window.FeatureCardRow = FeatureCardRow;

/* ─────────────────────────────────────────────────────────────
   ReferralBar
   ──────────────────────────────────────────────────────────── */
function ReferralBar({ theme }) {
  return (
    <div className="referral">
      <div className="referral-text">
        <div className="referral-title">Referral</div>
        <div className="referral-sub">Share to Earn More!</div>
      </div>
      <div className="referral-actions">
        <button className="ribtn" type="button" title="Invite"><Icon name="invite" size={18}/></button>
        <button className="ribtn" type="button" title="Copy"><Icon name="link" size={18}/></button>
        <button className="ribtn" type="button" title="Downline"><Icon name="downline" size={18}/></button>
        <button className="ribtn featured" type="button" title="Grand Opening"><Icon name="gift" size={18}/></button>
      </div>
    </div>
  );
}
window.ReferralBar = ReferralBar;

Object.assign(window, { Icon, Logo, AppDownloadBanner, Header, HeroCarousel, MarqueeStrip, FeatureCardRow, ReferralBar });