// Showcase — interactive project cards with filter tabs + tilt

const PROJECTS = [
  { title:'AI Ad Creative Engine', type:'AI Video', cat:'video', color:'#00E5A0', rgb:'0,229,160',
    outcome:'The system behind 72% ROAS lift. Brief → script → AI video → published. One pipeline.',
    tags:['Runway','ElevenLabs','n8n','Gemini'], stat:'+72% ROAS · +47% CTR' },
  { title:'Lead Qualification Engine', type:'Automation', cat:'automation', color:'#00B4FF', rgb:'0,180,255',
    outcome:'Qualifies leads in 4 seconds. Scores, tags, routes. No human in the loop.',
    tags:['Claude','Pinecone RAG','n8n','Gemini'], stat:'4-second qualification' },
  { title:'Psychological Nurture Drip', type:'Marketing', cat:'automation', color:'#9B6CFF', rgb:'155,108,255',
    outcome:'5-email sequence that converts cold leads. Sends itself. Stops when they book.',
    tags:['n8n','Gemini 2.0','Supabase','Resend'], stat:'Zero-touch after setup' },
  { title:'Performance Video Series', type:'AI Video', cat:'video', color:'#F59E0B', rgb:'245,158,11',
    outcome:"6 branded Shorts, scripted and produced by AI. Built for DFV's own growth channel.",
    tags:['Kling','HeyGen','CapCut','Claude'], stat:'6 Shorts · same-day turnaround' },
  { title:'Competitor Intelligence Monitor', type:'Automation', cat:'automation', color:'#00B4FF', rgb:'0,180,255',
    outcome:'Every Monday: what your top 4 competitors did last week, already in your inbox.',
    tags:['Firecrawl','Gemini','n8n','Gmail'], stat:'4 competitors · Monday 9AM' },
  { title:'Free Creative Audit Engine', type:'Pipeline', cat:'automation', color:'#00E5A0', rgb:'0,229,160',
    outcome:'Brief in, audit out, email delivered. 18 nodes, zero manual steps.',
    tags:['n8n','Gemini','Webhook','SMTP'], stat:'18 nodes · always-on' },
  { title:'AI Avatar Brand Campaign', type:'AI Video', cat:'video', color:'#9B6CFF', rgb:'155,108,255',
    outcome:'Consistent brand voice. AI presenter. No studio. No shoot. 1/10th the cost.',
    tags:['HeyGen','Midjourney','ElevenLabs'], stat:'1/10th production cost' },
  { title:'DreamFoxVerse Agency Site', type:'Full-Stack', cat:'web', color:'#F59E0B', rgb:'245,158,11',
    outcome:'13 pages, design system, Firebase auth — deployed via REST. Zero WP clicks.',
    tags:['WordPress','Firebase','Cloudflare','Python'], stat:'13 pages via REST API' },
  { title:'Auto Blog System', type:'Content', cat:'automation', color:'#00E5A0', rgb:'0,229,160',
    outcome:'3 SEO posts/week. Topic research → write → publish. Runs Mon/Wed/Fri at 9am.',
    tags:['Gemini 2.0','n8n','WordPress','Supabase'], stat:'3×/week · zero input' },
];

const FILTERS = [
  { id:'all', label:'All Work' },
  { id:'automation', label:'Automation' },
  { id:'video', label:'AI Video' },
  { id:'web', label:'Full-Stack' },
];

function ProjectCard({ p, i }) {
  const { ref, onMouseMove, onMouseLeave, tilt } = useTilt({ max: 5 });
  const [revealRef, vis] = useReveal();
  return (
    <div
      ref={revealRef}
      style={{
        opacity: vis ? 1 : 0,
        transform: vis ? 'translateY(0)' : 'translateY(40px)',
        transition: `opacity .7s ease ${(i%3)*0.08}s, transform .7s ease ${(i%3)*0.08}s`,
        perspective:900,
      }}
    >
      <div
        ref={ref}
        onMouseMove={onMouseMove}
        onMouseLeave={onMouseLeave}
        className="glass-card"
        style={{
          padding:'var(--card-p)',
          position:'relative', overflow:'hidden',
          transformStyle:'preserve-3d',
          transform:`rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)`,
          transition:'transform .25s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .25s',
          cursor:'pointer',
          minHeight: 300,
          display:'flex', flexDirection:'column',
        }}
        onMouseEnter={e=>{ e.currentTarget.style.borderColor = `rgba(${p.rgb},0.45)`; }}
      >
        {/* accent top bar */}
        <div style={{
          position:'absolute', top:0, left:0, right:0, height:2,
          background:`linear-gradient(90deg, ${p.color}cc, transparent)`,
        }}/>

        <div style={{
          display:'inline-flex', alignItems:'center', gap:8, padding:'4px 11px',
          borderRadius:99, background:`rgba(${p.rgb},0.1)`, border:`1px solid rgba(${p.rgb},0.3)`,
          fontSize:10, fontWeight:600, letterSpacing:'0.12em', textTransform:'uppercase',
          color:p.color, alignSelf:'flex-start', marginBottom:14,
        }}>
          <span style={{ width:5, height:5, borderRadius:'50%', background:p.color }}/>
          {p.type}
        </div>

        <h3 className="serif" style={{ fontSize:20, fontWeight:700, color:'var(--text)', marginBottom:10, letterSpacing:'-0.01em', lineHeight:1.2 }}>
          {p.title}
        </h3>
        <p style={{ fontSize:13.5, color:'var(--muted-strong)', lineHeight:1.65, marginBottom:16 }}>
          {p.outcome}
        </p>

        <div style={{
          padding:'10px 14px', borderRadius:8,
          background:'rgba(13,33,55,0.5)', borderLeft:`2px solid ${p.color}`,
          marginBottom:16,
        }}>
          <span style={{ fontSize:12, fontFamily:'var(--font-mono)', color:p.color, fontWeight:500 }}>
            {p.stat}
          </span>
        </div>

        <div style={{ display:'flex', flexWrap:'wrap', gap:5, marginTop:'auto' }}>
          {p.tags.map(t => (
            <span key={t} style={{
              fontSize:10, fontFamily:'var(--font-mono)', color:'var(--muted-strong)',
              background:'rgba(6,20,34,0.7)', border:'1px solid var(--border)',
              borderRadius:5, padding:'2px 8px',
            }}>{t}</span>
          ))}
        </div>

        <div style={{
          position:'absolute', inset:0, pointerEvents:'none', borderRadius:'inherit',
          background:`radial-gradient(ellipse at top right, rgba(${p.rgb},0.08) 0%, transparent 60%)`,
        }}/>
      </div>
    </div>
  );
}

function ShowcaseSection() {
  const [filter, setFilter] = useState('all');
  const visible = useMemo(
    () => filter === 'all' ? PROJECTS : PROJECTS.filter(p => p.cat === filter),
    [filter]
  );
  return (
    <section id="work" className="section-full">
      <div className="section" style={{ padding:'0 var(--section-px)' }}>
        <div style={{ display:'flex', flexWrap:'wrap', alignItems:'flex-end', justifyContent:'space-between', gap:20, marginBottom:40 }}>
          <div>
            <Pill>Selected Work</Pill>
            <h2 className="display" style={{ fontSize:'clamp(36px, 4.6vw, 58px)', marginTop:16 }}>
              Live systems. <span style={{ fontStyle:'italic', color:'var(--accent)' }}>Real proof.</span>
            </h2>
          </div>
          <div style={{
            display:'flex', gap:4, padding:4, borderRadius:10,
            background:'rgba(6,20,34,0.7)', border:'1px solid var(--border)',
            flexWrap:'wrap',
          }}>
            {FILTERS.map(f => (
              <button
                key={f.id}
                onClick={() => setFilter(f.id)}
                style={{
                  padding:'7px 14px', borderRadius:6, border:'none',
                  background: filter === f.id ? 'rgba(var(--accent-rgb),0.16)' : 'transparent',
                  color: filter === f.id ? 'var(--accent)' : 'var(--muted-strong)',
                  fontSize:12, fontWeight:600, cursor:'pointer',
                  fontFamily:'var(--font-body)', letterSpacing:'0.02em',
                  boxShadow: filter === f.id ? 'inset 0 0 0 1px rgba(var(--accent-rgb),0.3)' : 'none',
                  transition:'all .2s',
                }}
              >{f.label}</button>
            ))}
          </div>
        </div>

        <div style={{
          display:'grid',
          gridTemplateColumns:'repeat(auto-fill, minmax(300px, 1fr))',
          gap:'var(--gap)',
        }}>
          {visible.map((p, i) => <ProjectCard key={p.title} p={p} i={i} />)}
        </div>
      </div>
    </section>
  );
}

window.ShowcaseSection = ShowcaseSection;