const { useState } = React;

// ── About Page ────────────────────────────────────────────────────────────────
function AboutPage() {
  useScrollReveal('about');
  return (
    <main className="about-page">
      <div className="page-header">
        <div className="page-header-inner">
          <p className="section-eyebrow">Under The Helmet</p>
          <h1 className="page-title">About <span className="accent">Idol Killer</span></h1>
        </div>
      </div>

      {/* Warren bio */}
      <section className="ik-section">
        <div className="section-inner about-bio">
          <div className="bio-image-wrap reveal">
            <div className="bio-image-placeholder" style={{overflow:'hidden', background:'#111'}}>
              <img src="uploads/warren mcgrew.jpg" alt="Warren McGrew" style={{width:'100%', height:'100%', objectFit:'cover', objectPosition:'center 15%', display:'block'}} />
            </div>
            <div className="bio-image-caption">
              <div className="logo-icon" style={{width:'28px',height:'28px',flexShrink:0}}><img src="uploads/Untitled design (2).png" style={{width:'100%',height:'100%',objectFit:'cover',objectPosition:'right center',filter:'drop-shadow(0 0 6px rgba(204,17,17,0.5))'}} alt="" /></div>
              <span>Warren McGrew · Founder</span>
            </div>
          </div>
          <div className="bio-text">
            <h2 className="section-title reveal">Warren<br /><span className="accent">McGrew</span></h2>
            <p className="section-body reveal">
              Warren McGrew is a Christian content creator, teacher, and debater committed to one
              mission: presenting the Holy, living God of Scripture as He actually is — not as modern
              evangelicalism has reimagined Him.
            </p>
            <p className="section-body reveal">
              Through Idol Killer, Warren produces in-depth video content analyzing theology,
              philosophy, and church history. He challenges popular but unbiblical traditions, engages
              directly with prominent teachers and apologists, and defends a relational, personal
              understanding of God grounded in Scripture and historical Christianity.
            </p>
            <p className="section-body reveal">
              His approach is unapologetically rigorous. If a doctrine can't survive biblical and
              historical scrutiny, it doesn't survive on this channel.
            </p>
            <div className="bio-links reveal">
              <a href="https://youtube.com/@idolkiller" target="_blank" rel="noopener noreferrer" className="ik-btn-primary">Watch on YouTube →</a>
            </div>
          </div>
        </div>
      </section>

      {/* Mission */}
      <section className="ik-section dark-section">
        <div className="section-inner">
          <p className="section-eyebrow reveal">Our Conviction</p>
          <h2 className="section-title reveal">What Makes This<br /><span className="accent">Different</span></h2>
          <div className="mission-grid">
            {[
              { title: 'Scripture First', body: 'Every claim is tested against the text of Scripture — in context, in the original language, without system-imposed presuppositions.' },
              { title: 'Historically Grounded', body: 'The Early Church Fathers are not ignored here. Their testimony matters in how we interpret Scripture and doctrine.' },
              { title: 'Philosophically Rigorous', body: 'Bad theology often hides behind bad logic. We apply philosophical tools to expose incoherent systems and defend a coherent faith.' },
              { title: 'No Sacred Cows', body: 'Calvin, Arminius, Augustine — all are examined fairly and critically. No tradition gets a free pass.' },
              { title: 'The Living God', body: 'Against the static God of Platonism and Classical Theism, we present the relational, responsive, genuinely personal God of the Bible.' },
              { title: 'Accessible Depth', body: 'These topics are hard. We don\'t dumb them down — but we make them comprehensible to anyone willing to think seriously.' },
            ].map(m => (
              <div key={m.title} className="mission-card reveal">
                <div className="mission-accent"></div>
                <h4>{m.title}</h4>
                <p>{m.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Topics overview */}
      <section className="ik-section">
        <div className="section-inner">
          <p className="section-eyebrow reveal">Content Focus</p>
          <h2 className="section-title reveal">Core <span className="accent">Topics</span></h2>
          <div className="topics-list reveal">
            {['Theology & Biblical Exegesis', 'Calvinism & Reformed Theology', 'Original Sin & Human Nature', 'The Atonement', 'Molinism & Middle Knowledge', 'Dynamic Omniscience & Open Theism', 'Church History & the Early Fathers', 'Philosophical Theology', 'Debates & Responses to Popular Teachers'].map(t => (
              <div key={t} className="topic-list-item">
                <span className="topic-list-bullet"></span>
                <span>{t}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </main>
  );
}

// ── Contact Page ──────────────────────────────────────────────────────────────
function ContactPage() {
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ name: '', email: '', subject: '', message: '' });
  useScrollReveal('contact');

  function handleSubmit(e) {
    e.preventDefault();
    setSent(true);
  }

  return (
    <main className="contact-page">
      <div className="page-header">
        <div className="page-header-inner">
          <p className="section-eyebrow">Get In Touch</p>
          <h1 className="page-title">Connect with <span className="accent">Idol Killer</span></h1>
        </div>
      </div>

      <section className="ik-section">
        <div className="section-inner contact-grid">
          {/* Left: form */}
          <div className="contact-form-wrap reveal">
            <h2 className="section-title">Send a <span className="accent">Message</span></h2>
            <p className="section-body">Have a theological question, feedback, or want to propose a debate? Reach out below.</p>
            {sent ? (
              <div className="form-success">
                <span>✓</span>
                <h3>Message Received</h3>
                <p>Thanks for reaching out. Warren will respond when able.</p>
              </div>
            ) : (
              <form className="ik-form" onSubmit={handleSubmit}>
                <div className="form-row">
                  <div className="form-field">
                    <label>Name</label>
                    <input type="text" value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} required placeholder="Your name" />
                  </div>
                  <div className="form-field">
                    <label>Email</label>
                    <input type="email" value={form.email} onChange={e => setForm(f => ({ ...f, email: e.target.value }))} required placeholder="your@email.com" />
                  </div>
                </div>
                <div className="form-field">
                  <label>Subject</label>
                  <input type="text" value={form.subject} onChange={e => setForm(f => ({ ...f, subject: e.target.value }))} placeholder="What's this about?" />
                </div>
                <div className="form-field">
                  <label>Message</label>
                  <textarea value={form.message} onChange={e => setForm(f => ({ ...f, message: e.target.value }))} required rows="5" placeholder="Your message..."></textarea>
                </div>
                <button type="submit" className="ik-btn-primary">Send Message →</button>
              </form>
            )}
          </div>

          {/* Right: links */}
          <div className="contact-links reveal">
            <h3>Find Warren Online</h3>
            <div className="contact-card">
              <div className="contact-card-icon yt-icon">
                <svg width="24" height="17" viewBox="0 0 24 17" fill="none"><path d="M23.5 2.7A3 3 0 0 0 21.4.6C19.5 0 12 0 12 0S4.5 0 2.6.6A3 3 0 0 0 .5 2.7C0 4.6 0 8.5 0 8.5s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1C4.5 17 12 17 12 17s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 12.4 24 8.5 24 8.5s0-3.9-.5-5.8z" fill="#cc1111"/><path d="M9.5 12l6.5-3.5L9.5 5v7z" fill="white"/></svg>
              </div>
              <div>
                <strong>YouTube</strong>
                <a href="https://youtube.com/@idolkiller" target="_blank" rel="noopener noreferrer">youtube.com/@idolkiller</a>
              </div>
            </div>
            <div className="contact-note">
              <p>The best way to engage with Idol Killer is through YouTube — subscribe, comment on videos, and join the conversation under each upload.</p>
            </div>
            <div className="contact-response-note">
              <span className="accent-dot"></span>
              <p>Response times vary. For urgent theological debates, YouTube comments are monitored most actively.</p>
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </main>
  );
}

// ── Music Page ────────────────────────────────────────────────────────────────
function MusicPage() {
  useScrollReveal('music');

  const lanes = [
    {
      num: '01',
      title: 'Polemical Tracks',
      lead: 'Some songs are intentionally sharp.',
      body: 'They engage real theological claims — often the ones that are widely accepted but rarely examined — and push back where they don\'t align with Scripture, reason, or the witness of the early Church. These are focused critiques, not vague statements.',
      points: [
        'Challenging assumptions about doctrines like Original Sin, determinism, and atonement',
        'Calling out internal inconsistencies',
        'Exposing where language sounds biblical but carries something else underneath',
      ],
    },
    {
      num: '02',
      title: 'Scripturally Grounded',
      lead: 'Other songs are built directly from Scripture and the theological vision it presents.',
      body: 'The goal here isn\'t to argue — it\'s to articulate clearly and faithfully.',
      points: [
        'Exploring the character of God as revealed in Scripture',
        'Reflecting on themes like life, death, redemption, and restoration',
        'Drawing from biblical language and imagery',
      ],
    },
    {
      num: '03',
      title: 'Personal and Unfiltered',
      lead: 'Some songs come from personal experience — working through questions, frustration, conviction, and growth.',
      body: 'These are not polished conclusions, but honest moments in process.',
      points: [
        'Wrestling with belief vs. what\'s been taught',
        'The tension between knowing truth and living it',
        'Recognizing personal error and growth',
      ],
    },
  ];

  return (
    <main className="music-page">
      {/* Header */}
      <div className="page-header music-header">
        <div className="page-header-inner">
          <p className="section-eyebrow">Idol Killer</p>
          <h1 className="page-title">MUSIC</h1>
          <p className="music-subtitle">A Different Kind of Christian Music</p>
        </div>
      </div>

      {/* Intro */}
      <section className="ik-section">
        <div className="section-inner music-intro reveal">
          <div className="music-intro-text">
            <p className="music-lead">Faith without compromise.</p>
            <p className="section-body">Some are written to challenge. Some to clarify. Some to expose what doesn't hold up under Scripture. And some come from a place that isn't resolved yet — just honest.</p>
            <p className="section-body">The music connected to Idol Killer follows the same approach as the channel itself: take theology seriously, take Scripture seriously, and refuse to settle for easy answers.</p>
          </div>
          <div className="music-intro-accent" aria-hidden="true">
            <div className="music-accent-line"></div>
            <span>Music as Mission</span>
            <div className="music-accent-line"></div>
          </div>
        </div>
      </section>

      {/* Three Lanes */}
      <section className="ik-section dark-section">
        <div className="section-inner">
          <p className="section-eyebrow reveal">Content</p>
          <h2 className="section-title reveal">Three Lanes,<br /><span className="accent">One Conviction</span></h2>
          <div className="lanes-grid">
            {lanes.map(lane => (
              <div key={lane.num} className="lane-card reveal">
                <div className="lane-num">{lane.num}</div>
                <h3 className="lane-title">{lane.title}</h3>
                <p className="lane-lead">{lane.lead}</p>
                <p className="lane-body">{lane.body}</p>
                <ul className="lane-points">
                  {lane.points.map(pt => (
                    <li key={pt}>
                      <span className="lane-bullet"></span>
                      <span>{pt}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Style Follows Substance */}
      <section className="ik-section">
        <div className="section-inner music-style reveal">
          <div className="music-style-text">
            <p className="section-eyebrow">Approach</p>
            <h2 className="section-title">Style Follows<br /><span className="accent">Substance</span></h2>
            <p className="section-body">There is no single genre. The message determines the sound.</p>
            <p className="section-body">Some tracks are aggressive and confrontational. Others are minimal and restrained. Some build slowly; others hit immediately.</p>
            <p className="section-body">The goal isn't stylistic consistency — it's intentionality.</p>
          </div>
          <div className="style-tags">
            {['Confrontational', 'Minimal', 'Aggressive', 'Restrained', 'Building', 'Direct', 'Theological', 'Honest'].map(tag => (
              <span key={tag} className="style-tag">{tag}</span>
            ))}
          </div>
        </div>
      </section>

      {/* Listen — Streaming Links */}
      <section className="ik-section dark-section">
        <div className="section-inner">
          <p className="section-eyebrow reveal">Listen</p>
          <h2 className="section-title reveal">Find the Music</h2>
          <p className="section-body reveal" style={{marginBottom:'40px'}}>
            Idol Killer music is spread across YouTube, Spotify, Apple Music, Amazon Music, and other streaming services. Find it wherever you listen.
          </p>

          <div className="listen-grid reveal">
            {/* YouTube channels */}
            <div className="listen-group">
              <p className="listen-group-label">YouTube</p>
              <a href="https://www.youtube.com/@IdolKiller2" target="_blank" rel="noopener noreferrer" className="listen-card">
                <div className="listen-icon yt-red">
                  <svg width="22" height="16" viewBox="0 0 24 17" fill="none"><path d="M23.5 2.7A3 3 0 0 0 21.4.6C19.5 0 12 0 12 0S4.5 0 2.6.6A3 3 0 0 0 .5 2.7C0 4.6 0 8.5 0 8.5s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1C4.5 17 12 17 12 17s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 12.4 24 8.5 24 8.5s0-3.9-.5-5.8z" fill="#cc1111"/><path d="M9.5 12l6.5-3.5L9.5 5v7z" fill="white"/></svg>
                </div>
                <div className="listen-card-text">
                  <strong>Idol Killer 2</strong>
                  <span>@IdolKiller2 — Music Channel</span>
                </div>
                <span className="listen-arrow">↗</span>
              </a>
              <a href="https://www.youtube.com/@IdolKiller/releases" target="_blank" rel="noopener noreferrer" className="listen-card">
                <div className="listen-icon yt-red">
                  <svg width="22" height="16" viewBox="0 0 24 17" fill="none"><path d="M23.5 2.7A3 3 0 0 0 21.4.6C19.5 0 12 0 12 0S4.5 0 2.6.6A3 3 0 0 0 .5 2.7C0 4.6 0 8.5 0 8.5s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1C4.5 17 12 17 12 17s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 12.4 24 8.5 24 8.5s0-3.9-.5-5.8z" fill="#cc1111"/><path d="M9.5 12l6.5-3.5L9.5 5v7z" fill="white"/></svg>
                </div>
                <div className="listen-card-text">
                  <strong>Idol Killer — Releases</strong>
                  <span>@IdolKiller/releases</span>
                </div>
                <span className="listen-arrow">↗</span>
              </a>
            </div>

            {/* Streaming */}
            <div className="listen-group">
              <p className="listen-group-label">Streaming</p>
              <a href="https://open.spotify.com/artist/5LutcS4BGu6LJ6jCDCwWqw" target="_blank" rel="noreferrer" className="listen-card">
                <div className="listen-icon spotify">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg>
                </div>
                <div className="listen-card-text">
                  <strong>Spotify</strong>
                  <span>Idol Killer on Spotify</span>
                </div>
                <span className="listen-arrow">↗</span>
              </a>
              <a href="https://music.apple.com/us/artist/idol-killer/1749828301" target="_blank" rel="noreferrer" className="listen-card">
                <div className="listen-icon apple">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/></svg>
                </div>
                <div className="listen-card-text">
                  <strong>Apple Music</strong>
                  <span>Idol Killer on Apple Music</span>
                </div>
                <span className="listen-arrow">↗</span>
              </a>
              <a href="https://music.amazon.com/artists/B0D5WFB1HC/idol-killer" target="_blank" rel="noreferrer" className="listen-card">
                <div className="listen-icon amazon">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M13.958 10.09c0 1.232.029 2.256-.591 3.351-.502.891-1.301 1.438-2.186 1.438-1.214 0-1.922-.924-1.922-2.292 0-2.692 2.415-3.182 4.7-3.182v.685zm3.186 7.705c-.209.189-.512.201-.745.076-1.047-.869-1.234-1.273-1.807-2.101-1.728 1.762-2.952 2.288-5.189 2.288-2.651 0-4.712-1.637-4.712-4.909 0-2.557 1.386-4.298 3.357-5.148 1.709-.75 4.095-.883 5.923-1.089v-.405c0-.745.057-1.625-.381-2.269-.381-.575-1.114-.813-1.761-.813-1.196 0-2.262.614-2.523 1.886-.054.285-.261.567-.547.58l-3.064-.329c-.259-.057-.545-.266-.47-.66C5.57 2.7 8.318 1.8 10.8 1.8c1.265 0 2.921.336 3.919 1.292 1.265 1.181 1.144 2.757 1.144 4.474v4.047c0 1.217.504 1.752 .978 2.409.168.232.204.509-.008.681l-1.689 1.092zm2.671 2.438C17.117 22.23 13.811 24 10.64 24 6.427 24 2.62 22.426.054 19.801c-.203-.202-.022-.479.222-.322 2.777 1.618 6.213 2.593 9.767 2.593 2.394 0 5.026-.496 7.449-1.526.366-.155.674.24.323.667zM21.194 19.467c-.275-.354-1.82-.167-2.514-.084-.209.025-.242-.158-.054-.291 1.232-.867 3.254-.617 3.489-.327.236.292-.062 2.316-1.219 3.281-.178.149-.347.069-.268-.127.26-.65.843-2.098.566-2.452z"/></svg>
                </div>
                <div className="listen-card-text">
                  <strong>Amazon Music</strong>
                  <span>Idol Killer on Amazon Music</span>
                </div>
                <span className="listen-arrow">↗</span>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Why This Exists */}
      <section className="ik-section">
        <div className="section-inner music-why">
          <div className="music-why-inner reveal">
            <p className="section-eyebrow">Purpose</p>
            <h2 className="section-title">Why This<br /><span className="accent">Exists</span></h2>
            <div className="music-why-body">
              <p className="section-body">Music shapes how we think. It can reinforce ideas before we've examined them.</p>
              <p className="section-body">The aim here is alignment — with Scripture, with truth, and with intellectual honesty.</p>
              <p className="section-body">Some songs will resonate immediately. Others may challenge long-held assumptions.</p>
              <p className="section-body music-final">That's intentional.</p>
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </main>
  );
}

// ── Merch Page ────────────────────────────────────────────────────────────────
const SHOP_URL = 'https://shop.idolkiller.com/';
const SHOPIFY_NODE_ID = 'collection-component-1777325068381';

function useShopifyEmbed() {
  React.useEffect(() => {
    function ShopifyBuyInit() {
      var client = window.ShopifyBuy.buildClient({
        domain: 'dc7a09-73.myshopify.com',
        storefrontAccessToken: 'ab222bc975005dc125a0a7b03aebca34',
      });
      window.ShopifyBuy.UI.onReady(client).then(function(ui) {
        var node = document.getElementById(SHOPIFY_NODE_ID);
        if (!node) return;
        node.innerHTML = '';
ui.createComponent('collection', {
  id: '334751629477',
          node: node,
          moneyFormat: '%24%7B%7Bamount%7D%7D',
          options: {
            product: {
              styles: {
                product: {
                  '@media (min-width: 601px)': { 'max-width': 'calc(25% - 20px)', 'margin-left': '20px', 'margin-bottom': '50px', 'width': 'calc(25% - 20px)' },
                  img: { height: 'calc(100% - 15px)', position: 'absolute', left: '0', right: '0', top: '0' },
                  imgWrapper: { 'padding-top': 'calc(75% + 15px)', position: 'relative', height: '0' },
                },
              },
              text: { button: 'Add to cart' },
            },
            productSet: { styles: { products: { '@media (min-width: 601px)': { 'margin-left': '-20px' } } } },
            modalProduct: {
              contents: { img: false, imgWithCarousel: true, button: false, buttonWithQuantity: true },
              styles: { product: { '@media (min-width: 601px)': { 'max-width': '100%', 'margin-left': '0px', 'margin-bottom': '0px' } } },
              text: { button: 'Add to cart' },
            },
            option: {},
            cart: { text: { total: 'Subtotal', button: 'Checkout' } },
            toggle: {},
          },
        });
      });
    }
    if (window.ShopifyBuy && window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      var script = document.createElement('script');
      script.async = true;
      script.src = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
      script.onload = ShopifyBuyInit;
      document.head.appendChild(script);
    }
  }, []);
}

function MerchPage() {
  useScrollReveal('merch');
  useShopifyEmbed();

  return (
    <main className="merch-page">
      {/* Hero */}
      <section className="merch-hero">
        <div className="merch-hero-bg" style={{ backgroundImage: 'url(uploads/Gemini_Generated_Image_fze8jefze8jefze8.png)' }}></div>
        <div className="merch-hero-overlay"></div>
        <div className="merch-hero-content">
          <p className="section-eyebrow">Official Store</p>
          <h1 className="merch-hero-title">Wear What<br /><span className="accent">You Stand For</span></h1>
          <p className="merch-hero-sub">This isn't branding.<br />It's conviction.</p>
          <a href={SHOP_URL} target="_blank" rel="noreferrer" className="ik-btn-primary merch-cta-btn">Shop Merch →</a>
        </div>
      </section>

      {/* Shopify Collection Embed */}
      <section className="ik-section shopify-section">
        <div className="section-inner">
          <p className="section-eyebrow reveal">The Collection</p>
          <h2 className="section-title reveal">Featured <span className="accent">Products</span></h2>
          <div className="shopify-embed-wrap">
            <div id={SHOPIFY_NODE_ID}></div>
          </div>
          <p className="shopify-fallback-note reveal">
            Products not loading? <a href={SHOP_URL} target="_blank" rel="noreferrer">Visit the store directly →</a>
          </p>
        </div>
      </section>

      {/* Brand statement */}
      <section className="ik-section dark-section">
        <div className="section-inner merch-statement reveal">
          <div className="merch-statement-text">
            <h2 className="section-title">Clarity.<br /><span className="accent">Conviction.</span><br />No Compromise.</h2>
            <p className="section-body">The Idol Killer store reflects the same approach as the channel — clarity, conviction, and a refusal to compromise.</p>
            <p className="section-body">No noise. No filler. Just designs that say something.</p>
          </div>
          <div className="merch-statement-mark">
            <img src="uploads/Untitled design (2).png" alt="Idol Killer" />
          </div>
        </div>
      </section>

      {/* Secondary CTA */}
      <section className="merch-cta-section reveal">
        <div className="merch-cta-bg"></div>
        <div className="merch-cta-content">
          <h2>Ready to Browse?</h2>
          <p>Every purchase supports the mission.</p>
          <a href={SHOP_URL} target="_blank" rel="noreferrer" className="ik-btn-primary merch-cta-btn">Browse the Full Store →</a>
        </div>
      </section>

      <Footer />
    </main>
  );
}

Object.assign(window, { AboutPage, ContactPage, MusicPage, MerchPage });