/* ShowcasePage.jsx — integrates all 7 interactive editor showcase components */
(function () {
  'use strict';

  const SPC = `
    @keyframes sp-fadein { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
    .sp-row { animation: sp-fadein 0.5s ease both; }
  `;

  const ITEMS = [
    {
      id:'filters',
      tag:'FT-04',
      title:'35+ Video Filters',
      desc:'Browse and preview every filter live on your actual footage — no rendering wait. Search by name, mark favorites, and apply in one click.',
      component:'FilterShowcase',
      accent:'#00FF00',
      flip:false,
    },
    {
      id:'transitions',
      tag:'FT-01',
      title:'22 Transition Types',
      desc:'Pick from crossfade, blur, glitch, cube spin, and more. Every transition previews inline on your timeline clips before you commit.',
      component:'TransitionShowcase',
      accent:'#9933ff',
      flip:true,
    },
    {
      id:'colorgrading',
      tag:'FT-03',
      title:'Professional Color Grading',
      desc:'Curve editor with per-channel control (Master / R / G / B), three color wheels (Lift / Gamma / Gain), and instant before/after split preview.',
      component:'ColorGradingShowcase',
      accent:'#00aaff',
      flip:false,
    },
    {
      id:'timeline',
      tag:'FT-01',
      title:'Multi-Track Timeline',
      desc:'Unlimited video, audio, and text tracks. Drag clips, razor-cut, mute tracks, and scrub the playhead — everything you expect, running entirely on your machine.',
      component:'TimelineShowcase',
      accent:'#00FF00',
      flip:true,
    },
    {
      id:'audio',
      tag:'FT-01',
      title:'Audio Effects Suite',
      desc:'5-band parametric EQ with a live curve, compressor, and reverb. Dial in podcasts, music, or voice-over with per-band sliders and one-click presets.',
      component:'AudioEffectsShowcase',
      accent:'#00ddff',
      flip:false,
    },
    {
      id:'captions',
      tag:'FT-02',
      title:'AI Captions',
      desc:'Local Whisper transcription with word-level timestamps. Edit any word inline, jump to any moment by clicking a segment, and export as SRT or VTT.',
      component:'CaptionsShowcase',
      accent:'#00FF00',
      flip:true,
    },
    {
      id:'keyframes',
      tag:'FT-05',
      title:'Keyframe Animation',
      desc:'Add keyframes at any point on the timeline for position, scale, and opacity. Click the canvas to place control points; the motion path updates in real-time.',
      component:'KeyframeShowcase',
      accent:'#ff8800',
      flip:false,
    },
  ];

  function ShowcaseRow({ item, isMobile, delay }) {
    const [visible, setVisible] = React.useState(false);
    const ref = React.useRef(null);

    React.useEffect(() => {
      const observer = new IntersectionObserver(
        ([entry]) => { if (entry.isIntersecting) { setVisible(true); observer.disconnect(); } },
        { threshold: 0.1 }
      );
      if (ref.current) observer.observe(ref.current);
      return () => observer.disconnect();
    }, []);

    const Comp = window[item.component];

    return (
      <div ref={ref} className="sp-row"
        style={{
          display:'flex', flexDirection: isMobile ? 'column' : (item.flip ? 'row-reverse' : 'row'),
          alignItems:'center', gap: isMobile ? 28 : 48,
          opacity: visible ? 1 : 0,
          animation: visible ? `sp-fadein 0.55s ${delay}ms ease both` : 'none',
          padding: isMobile ? '32px 0' : '40px 0',
          borderBottom:'1px solid #1a1a1a',
        }}>

        {/* ── Copy side ── */}
        <div style={{ flex:'0 0 auto', width: isMobile ? '100%' : 240, minWidth: isMobile ? 0 : 220 }}>
          <div style={{ fontSize:10, color: item.accent, fontWeight:700, letterSpacing:3, textTransform:'uppercase', marginBottom:8 }}>
            {item.tag}
          </div>
          <h3 style={{ margin:'0 0 12px', fontSize: isMobile ? 20 : 22, fontWeight:800, color:'#f5f5f5', lineHeight:1.25 }}>
            {item.title}
          </h3>
          <p style={{ margin:0, fontSize:13, color:'#888', lineHeight:1.7 }}>
            {item.desc}
          </p>
        </div>

        {/* ── Demo side ── */}
        <div style={{ flex:1, minWidth:0, overflowX: isMobile ? 'auto' : 'visible', display:'flex', justifyContent: isMobile ? 'flex-start' : 'center' }}>
          {Comp ? (
            <div style={{ display:'inline-block', maxWidth:'100%', overflowX:'auto' }}>
              <Comp scale={isMobile ? 0.75 : 1}/>
            </div>
          ) : (
            <div style={{ width:480, height:300, background:'#1a1a1a', border:'1px solid #2e2e2e', borderRadius:8, display:'flex', alignItems:'center', justifyContent:'center' }}>
              <span style={{ color:'#555', fontSize:12 }}>Loading {item.component}…</span>
            </div>
          )}
        </div>
      </div>
    );
  }

  function ShowcasePage({ isMobile }) {
    return (
      <div style={{ width:'100%', maxWidth:1100, margin:'0 auto', padding: isMobile ? '0 16px' : '0 32px' }}>
        <style>{SPC}</style>

        {/* Section heading */}
        <div style={{ textAlign:'center', padding: isMobile ? '48px 0 32px' : '64px 0 48px' }}>
          <div style={{ fontSize:10, color:'#00FF00', letterSpacing:4, fontWeight:700, textTransform:'uppercase', marginBottom:12 }}>
            Interactive Demo
          </div>
          <h2 style={{ margin:0, fontSize: isMobile ? 28 : 38, fontWeight:900, color:'#f5f5f5', lineHeight:1.15 }}>
            Every tool. Right here.
          </h2>
          <p style={{ margin:'16px auto 0', fontSize:14, color:'#666', maxWidth:540, lineHeight:1.7 }}>
            These aren't screenshots. Click, drag, and interact with the actual editor controls below.
          </p>
        </div>

        {/* Showcase rows */}
        {ITEMS.map((item, i) => (
          <ShowcaseRow key={item.id} item={item} isMobile={isMobile} delay={0}/>
        ))}

        {/* Bottom CTA */}
        <div style={{ textAlign:'center', padding: isMobile ? '40px 0 32px' : '56px 0 48px' }}>
          <p style={{ margin:'0 0 20px', fontSize:13, color:'#666' }}>
            Ready to try the real thing?
          </p>
          <a href={window.WIN_INSTALLER_URL || '#'}
            style={{ display:'inline-block', background:'#00FF00', color:'#000', fontWeight:800, fontSize:13, letterSpacing:1, textTransform:'uppercase', padding:'12px 32px', borderRadius:4, textDecoration:'none', boxShadow:'0 0 20px rgba(0,255,0,0.3)' }}>
            Download Free
          </a>
        </div>
      </div>
    );
  }

  window.ShowcasePage = ShowcasePage;
})();