const { useState, useEffect, useRef } = React;

// ── Particle spark ───────────────────────────────────────────────────────────
function Sparks() {
  const sparks = Array.from({ length: 18 }, (_, i) => ({
    id: i,
    left: Math.random() * 100,
    delay: Math.random() * 6,
    duration: 3 + Math.random() * 4,
    size: 1.5 + Math.random() * 2.5
  }));
  return (
    <div className="sparks-container" aria-hidden="true">
      {sparks.map((s) =>
      <div
        key={s.id}
        className="spark"
        style={{
          left: `${s.left}%`,
          animationDelay: `${s.delay}s`,
          animationDuration: `${s.duration}s`,
          width: `${s.size}px`,
          height: `${s.size}px`
        }}>
      </div>
      )}
    </div>);

}

// ── Hero ─────────────────────────────────────────────────────────────────────
function Hero() {
  const videoRef = useRef(null);
  const [videoLoaded, setVideoLoaded] = useState(false);

  useEffect(() => {
    if (videoRef.current) {
      videoRef.current.play().catch(() => {});
    }
  }, []);

  return (
    <section className="ik-hero">
      {/* Video background */}
      <video
        ref={videoRef}
        className={`hero-video${videoLoaded ? ' loaded' : ''}`}
        src="uploads/Looping Walk w Explosion.mp4"
        muted
        loop
        playsInline
        autoPlay
        onCanPlay={() => setVideoLoaded(true)}>
      </video>
      {/* Fallback image */}
      <div
        className={`hero-img-fallback${videoLoaded ? ' hidden' : ''}`}
        style={{ backgroundImage: 'url(uploads/Gemini_Generated_Image_fze8jefze8jefze8.png)' }}>
      </div>
      {/* Overlays */}
      <div className="hero-overlay-left"></div>
      <div className="hero-overlay-bottom"></div>
      <div className="hero-vignette"></div>
      <Sparks />
      {/* Content */}
      <div className="hero-content" style={{ alignItems: "stretch", gap: "1px", justifyContent: "flex-start", padding: "70px 48px 0px 177px" }}>
        <div className="hero-eyebrow">
          <span className="hero-eyebrow-line"></span>
          <span>Christian Theology · Apologetics · Church History</span>
        </div>
        <h1 className="hero-title">
          <span className="hero-title-main">IDOL</span>
          <span className="hero-title-accent">KILLER</span>
        </h1>
        <p className="hero-tagline">Destroying Sacred Cows<br />for the Cause of Christ</p>
        <p className="hero-sub">Deep dives into theology, philosophy, and church history — exposing false doctrine and presenting the Holy, living God of Scripture.</p>
        <div className="hero-actions">
          <a href="#/watch" className="ik-btn-primary">Watch Now</a>
          <a href="https://youtube.com/@idolkiller" target="_blank" rel="noopener noreferrer" className="ik-btn-ghost">
            <svg width="20" height="14" viewBox="0 0 20 14" fill="none"><path d="M19.5 2.19A2.5 2.5 0 0 0 17.74.43C16.18 0 10 0 10 0S3.82 0 2.26.43A2.5 2.5 0 0 0 .5 2.19C0 3.75 0 7 0 7s0 3.25.5 4.81a2.5 2.5 0 0 0 1.76 1.76C3.82 14 10 14 10 14s6.18 0 7.74-.43a2.5 2.5 0 0 0 1.76-1.76C20 10.25 20 7 20 7s0-3.25-.5-4.81z" fill="#cc1111" /><path d="M8 10l5-3-5-3v6z" fill="white" /></svg>
            Subscribe on YouTube
          </a>
        </div>
      <div className="ik-stats-row">
  <div className="ik-stat">
    <div className="ik-stat-number">200+</div>
    <div className="ik-stat-label">Videos</div>
  </div>

  <div className="ik-stat">
    <div className="ik-stat-number">Numerous</div>
    <div className="ik-stat-label">Theological Topics</div>
  </div>

 <div className="ik-stat">
  <div className="ik-stat-number">100's of hours</div>
  <div className="ik-stat-label">of Content</div>
</div>
</div>
      </div>
      {/* Scroll indicator */}
      <div className="hero-scroll-hint">
        <span>SCROLL</span>
        <div className="scroll-line"></div>
      </div>
    </section>);

}

// ── What Is Idol Killer ──────────────────────────────────────────────────────
function WhatIsSection() {
  return (
    <section className="ik-section what-is reveal">
      <div className="section-inner">
        <div className="what-is-text">
          <p className="section-eyebrow">The Mission</p>
          <h2 className="section-title">Faithful to Scripture.<br /><span className="accent">Honest with History.</span></h2>
          <p className="section-body">
            Idol Killer is a YouTube channel dedicated to one thing: truth. Warren McGrew produces
            in-depth theological content that challenges comfortable assumptions, exposes false doctrine,
            and presents a biblically grounded, historically informed understanding of God.
          </p>
          <p className="section-body">
            No soft answers. No crowd-pleasing theology. Just Scripture, reason, and the testimony of the Early Church.
          </p>
          <a href="#/about" className="ik-btn-outline">Our Mission →</a>
        </div>
        <div className="what-is-pillars">
          {[
          { icon: '⚡', title: 'Fearless Truth', desc: 'No sacred cows survive scrutiny when measured against Scripture and sound reasoning.' },
          { icon: '📜', title: 'Historical Roots', desc: 'Grounded in Scripture and the Early Church Fathers.' },
          { icon: '🔥', title: 'Intellectual Depth', desc: 'Engaging theology, philosophy, and logic — accessible without being shallow.' }].
          map((p) =>
          <div key={p.title} className="pillar-card">
              <div className="pillar-icon">{p.icon}</div>
              <h4>{p.title}</h4>
              <p>{p.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ── Topics strip ─────────────────────────────────────────────────────────────
function TopicsSection() {
  const topics = [
  { label: 'Calvinism', desc: 'TULIP, predestination, and the Calvinist tradition examined critically.' },
  { label: 'Original Sin', desc: 'Augustine\'s legacy and what Scripture actually says about inherited guilt.' },
  { label: 'Atonement', desc: 'Penal substitution, moral influence, and the theories that matter.' },
  { label: 'Molinism', desc: 'Middle knowledge, counterfactuals, and Molina\'s system under scrutiny.' },
  { label: 'Dynamic Omniscience', desc: 'Does God know future free choices? Open Theism explored.' },
  { label: 'Church History', desc: 'What the Early Fathers really believed — and why it matters today.' },
  { label: 'Debates & Responses', desc: 'Direct engagement with popular teachers, apologists, and theologians.' }];

  return (
    <section className="ik-section topics-section">
      <div className="section-inner">
        <p className="section-eyebrow reveal">Explore by Topic</p>
        <h2 className="section-title reveal">Every Doctrine Examined.<br /><span className="accent">Every Claim Tested.</span></h2>
      </div>
      <div className="topics-grid">
        {topics.map((t, i) =>
        <a key={t.label} href="#/watch" className="topic-card reveal" style={{ animationDelay: `${i * 0.07}s` }}>
            <span className="topic-num">{String(i + 1).padStart(2, '0')}</span>
            <h3>{t.label}</h3>
            <p>{t.desc}</p>
            <span className="topic-arrow">→</span>
          </a>
        )}
      </div>
    </section>);

}

// ── Featured videos ──────────────────────────────────────────────────────────
function FeaturedSection({ videos, onVideoClick }) {
  const featured = videos.slice(0, 4);
  return (
    <section className="ik-section featured-section">
      <div className="section-inner">
        <div className="section-header">
          <div>
            <p className="section-eyebrow reveal">Latest Content</p>
            <h2 className="section-title reveal">Recent <span className="accent">Videos</span></h2>
          </div>
          <a href="#/watch" className="ik-btn-outline reveal">View All →</a>
        </div>
        <div className="featured-grid">
          {featured.map((v) =>
          <VideoCard key={v.id} video={v} onClick={onVideoClick} />
          )}
        </div>
      </div>
    </section>);

}

// ── CTA banner ───────────────────────────────────────────────────────────────
function CtaBanner() {
  return (
    <section className="ik-cta-banner reveal">
      <div className="cta-bg"></div>
      <div className="cta-content">
        <h2>Introducing you to the<br /><span className="accent">Holy and living God of Scripture</span></h2>
        <p>Join thousands on YouTube for weekly deep-dives into theology that actually challenges you.</p>
        <a href="https://youtube.com/@idolkiller" target="_blank" rel="noopener noreferrer" className="ik-btn-primary">
          Subscribe Free →
        </a>
      </div>
    </section>);

}

// ── Home page ─────────────────────────────────────────────────────────────────
function HomePage({ videos, onVideoClick }) {
  useScrollReveal(videos.length);
  return (
    <main>
      <Hero />
      <WhatIsSection />
      <TopicsSection />
      <FeaturedSection videos={videos} onVideoClick={onVideoClick} />
      <CtaBanner />
      <Footer />
    </main>);

}

Object.assign(window, { HomePage });