// Pillars — tilt cards

const PILLARS = [
  {
    num: '01',
    symbol:'⬡',
    color:'#00B4FF',
    rgb:'0,180,255',
    title:'AI Automation Architect',
    desc:'End-to-end intelligent pipelines. Lead qualification, CRM intake, RAG agents, and multi-step orchestration built on Claude + n8n.',
    stats:['Lead qualified in 4 seconds — not 4 days', '5-email nurture that writes and stops itself', 'Competitor intel in your inbox every Monday'],
    tags:['Claude', 'n8n', 'Pinecone', 'API Orchestration'],
  },
  {
    num:'02',
    symbol:'◈',
    color:'#9B6CFF',
    rgb:'155,108,255',
    title:'AI Video & Media',
    desc:'From script to final cut using the full AI stack. Cinematic ad creatives, talking heads, UGC content, and video pipeline automation.',
    stats:['50+ ad variants before lunch (vs 2 wks + $10K)', 'AI avatars at 1/10th of traditional cost', 'Brief → generated → published, same day'],
    tags:['Runway', 'Kling', 'HeyGen', 'ElevenLabs'],
  },
  {
    num:'03',
    symbol:'✦',
    color:'#00E5A0',
    rgb:'0,229,160',
    title:'AI Content Engine',
    desc:'Fully autonomous content operations. Auto blog publishing, 5-part nurture drips, competitor intelligence — zero human input after setup.',
    stats:['3× content per week — no writer, no approvals', 'Nurture that qualifies intent before you speak', 'Competitor movement before Monday standup'],
    tags:['Gemini 2.0', 'Resend', 'Supabase', 'Firecrawl'],
  },
  {
    num:'04',
    symbol:'⟳',
    color:'#F59E0B',
    rgb:'245,158,11',
    title:'Full-Stack Systems',
    desc:'Production-grade web infrastructure. WordPress REST, Firebase Auth, Cloudflare Tunnel, Python deploy scripts — every layer automated.',
    stats:['13+ pages deployed via API — zero WP clicks', 'Firebase auth on paid content in days', 'Cloudflare Tunnel keeping webhooks on'],
    tags:['WordPress', 'Firebase', 'Cloudflare', 'Python'],
  },
];

function PillarCard({ p, i }) {
  const { ref, onMouseMove, onMouseLeave, tilt } = useTilt({ max: 6 });
  const [revealRef, vis] = useReveal();
  return (
    <div
      ref={revealRef}
      style={{
        perspective: 900,
        opacity: vis ? 1 : 0,
        transform: vis ? 'translateY(0)' : 'translateY(40px)',
        transition: `opacity .7s ease ${i*0.08}s, transform .7s ease ${i*0.08}s`,
      }}
    >
      <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',
          minHeight: 380,
          display:'flex', flexDirection:'column',
        }}
      >
        {/* ghost number in back */}
        <div aria-hidden className="mono" style={{
          position:'absolute', top:16, right:20,
          fontSize:64, fontWeight:700, lineHeight:1,
          color:`rgba(${p.rgb}, 0.08)`,
          pointerEvents:'none',
        }}>{p.num}</div>

        {/* icon */}
        <div style={{
          width:48, height:48, borderRadius:12,
          background:`rgba(${p.rgb},0.12)`,
          border:`1px solid rgba(${p.rgb},0.3)`,
          display:'flex', alignItems:'center', justifyContent:'center',
          marginBottom:18,
          boxShadow:`0 0 calc(24px * var(--glow)) rgba(${p.rgb},0.2)`,
        }}>
          <span style={{ color:p.color, fontSize:22 }}>{p.symbol}</span>
        </div>

        <h3 className="serif" style={{ fontSize:22, fontWeight:700, color:'var(--text)', marginBottom:10, letterSpacing:'-0.015em' }}>
          {p.title}
        </h3>
        <p style={{ fontSize:14, color:'var(--muted-strong)', lineHeight:1.7, marginBottom:20 }}>
          {p.desc}
        </p>

        <ul style={{ listStyle:'none', marginBottom:20, display:'flex', flexDirection:'column', gap:7 }}>
          {p.stats.map((s, k) => (
            <li key={k} style={{ display:'flex', alignItems:'flex-start', gap:10, fontSize:12.5, color:'var(--muted-strong)', fontFamily:'var(--font-mono)', lineHeight:1.5 }}>
              <span style={{ color:p.color, marginTop:5, flexShrink:0, fontSize:7 }}>◆</span>
              <span>{s}</span>
            </li>
          ))}
        </ul>

        <div style={{ display:'flex', flexWrap:'wrap', gap:6, marginTop:'auto' }}>
          {p.tags.map(t => (
            <span key={t} style={{
              fontSize:10.5, fontFamily:'var(--font-mono)', color:'var(--muted-strong)',
              background:'rgba(13,33,55,0.7)', border:'1px solid var(--border)',
              borderRadius:6, padding:'3px 9px', letterSpacing:'0.02em',
            }}>{t}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

function PillarsSection() {
  return (
    <section id="services" className="section-full" style={{ background:'var(--bg-alt)' }}>
      <div className="section" style={{ padding:'0 var(--section-px)' }}>
        <SectionHeader
          eyebrow="What I Build"
          title={<span>Four pillars. <span style={{ fontStyle:'italic', color:'var(--accent)' }}>One architect.</span></span>}
          sub="Most freelancers do automation or video. I build both — plus the web infrastructure that ties them together."
        />
        <div style={{
          display:'grid',
          gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))',
          gap:'var(--gap)',
        }}>
          {PILLARS.map((p, i) => <PillarCard key={p.title} p={p} i={i} />)}
        </div>
      </div>
    </section>
  );
}

window.PillarsSection = PillarsSection;