// Video Proof — SVG placeholder thumbnails w/ realistic AI-slot titles

const VIDEOS = [
  { id:'C35FPNFMI9c', title:'The Data Behind the AI Revolution', stat:'+72% ROAS', color:'#00E5A0', rgb:'0,229,160',
    desc:'72% ROAS increase. 29% CPA drop. 14× conversion. The numbers behind AI creative engines.' },
  { id:'m5Rn1E_qO4w', title:'Want a 47% Higher Click-Through Rate?', stat:'+47% CTR', color:'#00E5A0', rgb:'0,229,160',
    desc:"Ad fatigue kills campaigns in real time. Creative velocity is the fix — here's the math." },
  { id:'cDQj9FAY3s0', title:'Is Your Ad Agency Obsolete?', stat:'50+ ads', color:'#F59E0B', rgb:'245,158,11',
    desc:'2 weeks + $10K for 5 stale ads vs 50+ variants before coffee. The velocity gap is widening.' },
  { id:'JRbJFMmFTrI', title:'5 Trends Defining Ads in 2026', stat:'1/10 cost', color:'#F59E0B', rgb:'245,158,11',
    desc:'AI avatars, consistent branding, infinite languages — at 1/10th of traditional production cost.' },
  { id:'d-whs3GP4K0', title:'The Agency Loop Is Killing Your ROI', stat:'3-week lag', color:'#9B6CFF', rgb:'155,108,255',
    desc:"Brief → Draft → Revisions → Approval → Launch. By the time you're done, the trend is already dead." },
  { id:'MPejmwjTJPo', title:'Why Your Ad Costs Are Skyrocketing', stat:'CPA up · CTR down', color:'#9B6CFF', rgb:'155,108,255',
    desc:"Ad fatigue is a predictable crash — not bad luck. And it's 100% preventable with the right stack." },
];

function VideoThumb({ v }) {
  const [failed, setFailed] = useState(false);
  return (
    <>
      {/* Fallback striped backdrop — only used if img fails */}
      <div style={{
        position:'absolute', inset:0,
        background: `
          linear-gradient(135deg, rgba(${v.rgb},0.25) 0%, rgba(2,11,24,0.6) 60%, rgba(${v.rgb},0.15) 100%),
          repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 18px)
        `,
      }}/>
      {!failed && (
        <img
          src={`https://img.youtube.com/vi/${v.id}/hqdefault.jpg`}
          alt={v.title}
          loading="lazy"
          onError={() => setFailed(true)}
          style={{
            position:'absolute', inset:0, width:'100%', height:'100%',
            objectFit:'cover', display:'block',
          }}
        />
      )}
    </>
  );
}

function VideoCard({ v, i }) {
  const [hover, setHover] = useState(false);
  const [ref, vis] = useReveal();
  return (
    <a
      ref={ref}
      href={`https://www.youtube.com/watch?v=${v.id}`}
      target="_blank"
      rel="noopener noreferrer"
      style={{
        display:'block',
        opacity: vis ? 1 : 0,
        transform: vis ? 'translateY(0)' : 'translateY(30px)',
        transition:`opacity .6s ease ${(i%3)*0.08}s, transform .6s ease ${(i%3)*0.08}s`,
        textDecoration:'none',
      }}
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>setHover(false)}
    >
      <div style={{
        position:'relative', overflow:'hidden', borderRadius:12,
        aspectRatio:'16/9', border:`1px solid ${hover ? 'rgba(var(--accent-rgb),0.45)' : 'var(--border)'}`,
        marginBottom:12, transition:'border-color .25s, transform .3s, box-shadow .3s',
        transform: hover ? 'translateY(-2px)' : 'translateY(0)',
        boxShadow: hover ? `0 20px 50px rgba(${v.rgb}, 0.25)` : 'none',
        background:'#0D2137',
      }}>
        <VideoThumb v={v} />

        {/* stat badge */}
        <div style={{
          position:'absolute', top:10, right:10,
          background:`rgba(${v.rgb},0.22)`,
          border:`1px solid rgba(${v.rgb},0.55)`,
          borderRadius:99, padding:'3px 10px',
          fontSize:10.5, fontWeight:700, color:v.color, fontFamily:'var(--font-mono)',
          backdropFilter:'blur(8px)',
          zIndex: 2,
        }}>{v.stat}</div>

        {/* hover overlay */}
        <div style={{
          position:'absolute', inset:0, zIndex: 1,
          background:'rgba(2,11,24,0.55)',
          opacity: hover ? 1 : 0, transition:'opacity .3s',
          display:'flex', alignItems:'center', justifyContent:'center',
        }}>
          <div style={{
            width:58, height:58, borderRadius:'50%',
            background:'var(--accent)',
            display:'flex', alignItems:'center', justifyContent:'center',
            boxShadow:'0 0 calc(26px * var(--glow)) rgba(var(--accent-rgb),0.6)',
            transform: hover ? 'scale(1)' : 'scale(0.85)', transition:'transform .3s',
          }}>
            <svg width="18" height="20" viewBox="0 0 18 20"><path d="M1 1L17 10L1 19V1Z" fill="#020B18"/></svg>
          </div>
        </div>
      </div>

      <h3 style={{ fontSize:14, fontWeight:600, color:'var(--text)', marginBottom:6, lineHeight:1.4 }}>
        {v.title}
      </h3>
      <p style={{ fontSize:13, color:'var(--muted-strong)', lineHeight:1.6 }}>{v.desc}</p>
    </a>
  );
}

function VideoProofSection() {
  return (
    <section id="videos" className="section-full" style={{ background:'var(--bg-alt)' }}>
      <div className="section" style={{ padding:'0 var(--section-px)' }}>
        <SectionHeader
          eyebrow="Proof of Work"
          title={<>Built on the <span style={{ fontStyle:'italic', color:'var(--accent)' }}>same stack</span> I sell.</>}
          sub="These aren't case studies. It's DreamFoxVerse's own channel — produced end-to-end using the exact AI video pipeline I build for clients."
        />
        <div style={{
          display:'grid',
          gridTemplateColumns:'repeat(auto-fill, minmax(280px, 1fr))',
          gap:'var(--gap)',
        }}>
          {VIDEOS.map((v, i) => <VideoCard key={v.id} v={v} i={i} />)}
        </div>
      </div>
    </section>
  );
}

window.VideoProofSection = VideoProofSection;