// Breakdowns — free education page pulling Eric's best YouTube breakdowns
function BreakdownsPage() {
  const videos = [
    { id: 'yySEQwkmSYQ', cat: 'ads',
      title: 'How My Client Generated $136,000 In 7 Days Using Only Video Ads',
      tag: 'Ads' },
    { id: 'acKOddzZT0A', cat: 'scaling',
      title: 'Breakdown: Scaled Video Agency From $70K/mo To $208K/mo in 4 Months',
      tag: 'Scaling' },
    { id: 'rjIlE6G02No', cat: 'retainers',
      title: 'Breakdown: From $450 Real Estate Shoots to $45K In Retainers',
      tag: 'Retainers' },
    { id: 'svLw0hFiOig', cat: 'scaling',
      title: 'He Quit a $70K Church Job and Built a $40K/Month Video Agency',
      tag: 'Case Study' },
    { id: 'nMdEM2eOxww', cat: 'ads',
      title: 'Video Agency Generates $556K in Cash from $10K In Ad Spend — Here\u2019s How',
      tag: 'Ads' },
    { id: 'V4LZqWZzzSs', cat: 'strategy',
      title: 'Don\u2019t Run Ads Until You Watch This (Video Business)',
      tag: 'Strategy' },
    { id: 'rqvWCCseiKM', cat: 'sales',
      title: 'The Exact System Our Client Used to Close $144K in Video Deals',
      tag: 'Sales' },
  ];

  const filters = [
    { key: 'all',       label: 'All' },
    { key: 'ads',       label: 'Ads' },
    { key: 'sales',     label: 'Sales' },
    { key: 'scaling',   label: 'Scaling' },
    { key: 'retainers', label: 'Retainers' },
    { key: 'strategy',  label: 'Strategy' },
  ];

  const [filter, setFilter] = React.useState('all');
  const [active, setActive] = React.useState(null);
  const [modal, setModal] = React.useState(false);

  const shown = filter === 'all' ? videos : videos.filter(v => v.cat === filter);

  React.useEffect(() => {
    if (!active) return;
    const onKey = (e) => { if (e.key === 'Escape') setActive(null); };
    window.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [active]);

  const onCTA = () => setModal(true);

  return (
    <>
      <NavBar onCTA={onCTA}/>
      <main style={{ background: '#0A0608', color: '#fff', minHeight: '100vh' }}>
        <BreakdownsHero total={videos.length} onCTA={onCTA}/>

        <section data-mf="breakdowns-section" style={{
          background: '#0A0608', padding: '64px 44px 120px',
          borderTop: '1px solid rgba(255,255,255,0.06)',
        }}>
          <div style={{ maxWidth: 1280, margin: '0 auto' }}>
            {/* Filter pills */}
            <div data-mf="breakdowns-filters" style={{
              display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 40,
              padding: '14px 18px', borderRadius: 999,
              background: 'rgba(255,255,255,0.03)',
              border: '1px solid rgba(255,255,255,0.08)',
              alignItems: 'center',
            }}>
              <span style={{
                fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
                color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase',
                marginRight: 8,
              }}>Filter</span>
              {filters.map(f => {
                const active = filter === f.key;
                const count = f.key === 'all' ? videos.length : videos.filter(v => v.cat === f.key).length;
                return (
                  <button
                    key={f.key}
                    onClick={() => setFilter(f.key)}
                    style={{
                      background: active ? '#E8123C' : 'rgba(255,255,255,0.04)',
                      border: active ? '1px solid #E8123C' : '1px solid rgba(255,255,255,0.1)',
                      color: '#fff', cursor: 'pointer',
                      padding: '8px 16px', borderRadius: 999,
                      fontFamily: 'Poppins', fontWeight: 600, fontSize: 13,
                      display: 'inline-flex', alignItems: 'center', gap: 8,
                      transition: 'all 180ms ease',
                    }}
                  >
                    {f.label}
                    <span style={{
                      fontSize: 10, fontWeight: 700,
                      opacity: active ? 0.85 : 0.5,
                    }}>{count}</span>
                  </button>
                );
              })}
            </div>

            {/* Grid */}
            <div data-mf="breakdowns-grid" style={{
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22,
            }}>
              {shown.map((v, i) => (
                <BreakdownCard key={v.id} video={v} index={i}
                  onPlay={() => setActive({ videoId: v.id, title: v.title })}/>
              ))}
            </div>

            {shown.length === 0 && (
              <div style={{
                textAlign: 'center', padding: '60px 20px',
                color: 'rgba(255,255,255,0.5)', fontSize: 14,
              }}>No breakdowns match that filter.</div>
            )}
          </div>
        </section>

        <FinalCTA onCTA={onCTA}/>
      </main>
      <Footer/>

      {active && <VideoLightbox active={active} onClose={() => setActive(null)}/>}
      {modal && <IClosedModal onClose={() => setModal(false)}/>}
    </>
  );
}
window.BreakdownsPage = BreakdownsPage;

// ---------- HERO ----------
function BreakdownsHero({ total, onCTA }) {
  return (
    <section data-mf="breakdowns-hero" style={{
      position: 'relative', overflow: 'hidden',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0, zIndex: 0,
        background: `
          radial-gradient(ellipse 65% 55% at 80% 50%, rgba(232,18,60,0.22) 0%, transparent 55%),
          radial-gradient(ellipse 120% 80% at 100% 50%, #5A0A24 0%, #45091E 22%, #1F080D 55%, #120609 90%)
        `,
      }}/>
      <div data-mf="breakdowns-hero-inner" style={{
        position: 'relative', zIndex: 1,
        maxWidth: 1280, margin: '0 auto', padding: '90px 44px 70px',
      }}>
        <Eyebrow tone="red">Free Education</Eyebrow>
        <h1 style={{
          fontFamily: 'Poppins', fontWeight: 800,
          fontSize: 'clamp(52px, 7vw, 112px)',
          lineHeight: 0.98, letterSpacing: '-0.028em',
          margin: '22px 0 20px', color: '#fff', maxWidth: 1080,
        }}>
          <span style={{ color: '#E8123C', textShadow: '0 0 40px rgba(232,18,60,0.4)' }}>Breakdowns.</span>{' '}
          Real agencies. Real numbers.
        </h1>
        <p style={{
          fontFamily: 'Poppins', fontSize: 19, lineHeight: 1.55,
          color: 'rgba(255,255,255,0.78)', maxWidth: 760, margin: '0 0 32px', fontWeight: 400,
        }}>
          Hand-picked breakdowns from Eric's YouTube channel — the ad plays, sales systems, and pricing moves
          that took video agencies from <b style={{ color: '#fff' }}>$450 shoots</b> to{' '}
          <b style={{ color: '#fff' }}>$40K/mo retainers</b>. No fluff. No theory. Just the tape.
        </p>
        <div style={{ display: 'flex', gap: 18, flexWrap: 'wrap', alignItems: 'center' }}>
          <StatChip label="Breakdowns" value={`${total}`}/>
          <StatChip label="Cost" value="Free"/>
          <StatChip label="Source" value="YouTube"/>
          <a href="https://www.youtube.com/@EricDeeran" target="_blank" rel="noopener noreferrer"
            style={{
              marginLeft: 'auto',
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '12px 20px', borderRadius: 999,
              background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.14)',
              color: '#fff', textDecoration: 'none',
              fontFamily: 'Poppins', fontWeight: 600, fontSize: 13,
            }}>
            Subscribe on YouTube →
          </a>
        </div>
      </div>
    </section>
  );
}
window.BreakdownsHero = BreakdownsHero;

function StatChip({ label, value }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'baseline', gap: 10,
      padding: '10px 18px', borderRadius: 999,
      background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)',
    }}>
      <span style={{
        fontFamily: 'Poppins', fontWeight: 800, fontSize: 18,
        letterSpacing: '-0.015em', color: '#fff',
      }}>{value}</span>
      <span style={{
        fontSize: 11, fontWeight: 600, letterSpacing: '0.12em',
        color: 'rgba(255,255,255,0.55)', textTransform: 'uppercase',
      }}>{label}</span>
    </div>
  );
}

// ---------- CARD ----------
function BreakdownCard({ video, index, onPlay }) {
  const [hover, setHover] = React.useState(false);
  // maxresdefault is native 16:9 — no letterbox bars, no zoom hack needed.
  // mqdefault (320x180) is a safe 16:9 fallback if maxres is ever missing.
  const primaryThumb = `https://i.ytimg.com/vi/${video.id}/maxresdefault.jpg`;
  const fallbackThumb = `https://i.ytimg.com/vi/${video.id}/mqdefault.jpg`;
  return (
    <article data-mf="breakdown-card" onClick={onPlay}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: '#120609',
        border: hover ? '1px solid rgba(232,18,60,0.5)' : '1px solid rgba(255,255,255,0.08)',
        borderRadius: 20, overflow: 'hidden',
        cursor: 'pointer',
        display: 'flex', flexDirection: 'column',
        transform: hover ? 'translateY(-3px)' : 'translateY(0)',
        transition: 'all 220ms cubic-bezier(0.22, 1, 0.36, 1)',
      }}>
      {/* Thumbnail */}
      <div style={{
        position: 'relative', aspectRatio: '16/9',
        background: '#000', overflow: 'hidden',
      }}>
        <img
          src={primaryThumb}
          onError={e => { if (e.currentTarget.src !== fallbackThumb) e.currentTarget.src = fallbackThumb; }}
          alt={video.title}
          width={1280} height={720}
          loading={index < 3 ? 'eager' : 'lazy'} decoding="async"
          style={{
            width: '100%', height: '100%', objectFit: 'cover', display: 'block',
            transform: hover ? 'scale(1.04)' : 'scale(1)',
            transformOrigin: 'center center',
            transition: 'transform 320ms cubic-bezier(0.22, 1, 0.36, 1)',
          }}
        />
        {/* Gradient overlay */}
        <div aria-hidden style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(10,6,8,0.0) 55%, rgba(10,6,8,0.8) 100%)',
        }}/>
        {/* Category pill */}
        <div style={{
          position: 'absolute', top: 14, left: 14,
          padding: '5px 12px', borderRadius: 999,
          background: 'rgba(10,6,8,0.7)', border: '1px solid rgba(255,255,255,0.14)',
          fontFamily: 'Poppins', fontSize: 10, fontWeight: 700,
          letterSpacing: '0.14em', textTransform: 'uppercase',
          color: '#fff', backdropFilter: 'blur(8px)',
        }}>{video.tag}</div>
        {/* Play button */}
        <div aria-hidden style={{
          position: 'absolute', top: '50%', left: '50%',
          transform: `translate(-50%, -50%) scale(${hover ? 1.08 : 1})`,
          width: 64, height: 64, borderRadius: '50%',
          background: '#E8123C',
          boxShadow: '0 10px 40px rgba(232,18,60,0.55)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', fontSize: 22,
          transition: 'transform 220ms cubic-bezier(0.22, 1, 0.36, 1)',
        }}>▶</div>
      </div>
      {/* Body */}
      <div style={{
        padding: '20px 22px 24px', display: 'flex', flexDirection: 'column', gap: 8,
      }}>
        <h3 style={{
          fontFamily: 'Poppins', fontWeight: 800, fontSize: 17, lineHeight: 1.3,
          letterSpacing: '-0.01em', color: '#fff', margin: 0,
        }}>{video.title}</h3>
        <div style={{
          marginTop: 4,
          fontSize: 12, fontWeight: 600, color: 'rgba(255,255,255,0.5)',
          display: 'inline-flex', alignItems: 'center', gap: 8,
        }}>
          <span>Watch on site</span>
          <span style={{ color: '#E8123C' }}>→</span>
        </div>
      </div>
    </article>
  );
}
window.BreakdownCard = BreakdownCard;

// ---------- LIGHTBOX ----------
function VideoLightbox({ active, onClose }) {
  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.9)',
      backdropFilter: 'blur(10px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      zIndex: 250, padding: 24,
    }}>
      <button onClick={onClose} aria-label="Close video" style={{
        position: 'absolute', top: 22, right: 24,
        width: 42, height: 42, borderRadius: '50%',
        background: 'rgba(255,255,255,0.08)',
        border: '1px solid rgba(255,255,255,0.18)',
        color: '#fff', fontSize: 22, cursor: 'pointer', lineHeight: 1,
      }}>×</button>
      <div onClick={e => e.stopPropagation()} style={{
        width: 'min(1100px, 100%)', aspectRatio: '16/9',
        borderRadius: 20, overflow: 'hidden',
        boxShadow: '0 40px 120px rgba(0,0,0,0.8), 0 0 80px rgba(232,18,60,0.2)',
        border: '1px solid rgba(255,255,255,0.12)',
        background: '#000',
      }}>
        <iframe
          src={`https://www.youtube-nocookie.com/embed/${active.videoId}?autoplay=1&rel=0&modestbranding=1&playsinline=1`}
          title={active.title}
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowFullScreen
          referrerPolicy="strict-origin-when-cross-origin"
          style={{ width: '100%', height: '100%', border: 0 }}
        />
      </div>
    </div>
  );
}
window.VideoLightbox = VideoLightbox;

// ---------- iClosed modal (scoped to this page) ----------
function IClosedModal({ onClose }) {
  React.useEffect(() => {
    if (!document.querySelector('script[src*="app.iclosed.io/assets/widget.js"]')) {
      const s = document.createElement('script');
      s.src = 'https://app.iclosed.io/assets/widget.js';
      s.async = true;
      document.body.appendChild(s);
    } else if (window.iClosed && typeof window.iClosed.init === 'function') {
      try { window.iClosed.init(); } catch(e) {}
    }
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener('keydown', onKey);
    };
  }, [onClose]);

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.85)',
      display: 'flex', alignItems: 'flex-start', justifyContent: 'center', zIndex: 300,
      backdropFilter: 'blur(8px)', padding: 20,
      overflowY: 'auto', WebkitOverflowScrolling: 'touch',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: 'min(980px, 100%)', margin: 'auto', background: '#1A0A10',
        border: '1px solid rgba(255,255,255,0.1)', borderRadius: 20,
        position: 'relative', overflow: 'hidden',
        boxShadow: '0 40px 120px rgba(0,0,0,0.7)',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '18px 22px', borderBottom: '1px solid rgba(255,255,255,0.08)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{
              width: 8, height: 8, borderRadius: '50%', background: '#E8123C',
              boxShadow: '0 0 8px rgba(232,18,60,0.8)',
            }}/>
            <div style={{
              fontFamily: 'Poppins', fontWeight: 700, fontSize: 14,
              letterSpacing: '0.08em', color: '#fff', textTransform: 'uppercase',
            }}>Schedule Your Roadmap Call</div>
          </div>
          <button onClick={onClose} style={{
            width: 34, height: 34, border: 'none',
            background: 'rgba(255,255,255,0.08)', borderRadius: '50%',
            color: '#fff', fontSize: 18, cursor: 'pointer', lineHeight: 1,
          }}>×</button>
        </div>
        <div
          className="iclosed-widget"
          data-url="https://app.iclosed.io/e/Edeeran/master-filmmaker-roadmap-call"
          title="Apply Now"
          style={{ width: '100%', height: 620 }}
        />

        <div style={{
          padding: '16px 22px 20px',
          borderTop: '1px solid rgba(255,255,255,0.08)',
          fontFamily: 'Poppins', fontSize: '8pt', lineHeight: 1.5,
          color: 'rgba(255,255,255,0.55)',
        }}>
          By submitting your information, you agree to receive marketing calls and text messages (including calls and texts sent using automated technology), and emails from Deeran Films LLC d/b/a Master Filmmaker at the contact information provided. This includes communications about this offer, related products or services, training content, and promotional updates. Consent is not a condition of purchase. Message and data rates may apply. You may unsubscribe from emails at any time by clicking the link in our emails, or opt out of texts by replying STOP. View our{' '}
          <a href="https://www.masterfilmmaker.com/termsofuse" target="_blank" rel="noopener noreferrer"
             style={{ color: 'rgba(255,255,255,0.85)', textDecoration: 'underline' }}>Terms of Use</a>
          {' '}and{' '}
          <a href="https://www.masterfilmmaker.com/terms-of-service" target="_blank" rel="noopener noreferrer"
             style={{ color: 'rgba(255,255,255,0.85)', textDecoration: 'underline' }}>Privacy Policy</a>.
        </div>
      </div>
    </div>
  );
}
window.IClosedModal = IClosedModal;