const Portfolio = ({ onNav }) => {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  const [activeFilter, setActiveFilter] = React.useState('All');
  React.useEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVisible(true); }, { threshold: 0.1 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const cases = [
    { tag: 'AI / Automation', title: 'Intelligent Operations Platform', client: 'Logistics Enterprise', desc: 'Built an AI-driven dispatch and route optimization system that reduced operational overhead by 40% and cut delivery times by 28%.', outcome: '40% cost reduction', category: 'AI' },
    { tag: 'SaaS', title: 'Multi-tenant HR Analytics SaaS', client: 'HR Tech Startup', desc: 'Designed and launched a SaaS platform from zero to first 200 customers — with workforce analytics, payroll automation, and compliance dashboards.', outcome: '200 customers in 6 months', category: 'SaaS' },
    { tag: 'Blockchain', title: 'Tokenized Asset Marketplace', client: 'FinTech Startup', desc: 'Developed a secure, scalable NFT and tokenized real-estate platform on Ethereum with smart contract audits and DeFi yield mechanisms.', outcome: '$2M+ in transactions', category: 'Blockchain' },
    { tag: 'Predictive Analytics', title: 'Retail Demand Forecasting Engine', client: 'E-commerce Company', desc: 'Deployed an ML-powered demand forecasting system integrated with their ERP, reducing excess inventory by 35% and improving margins.', outcome: '35% inventory reduction', category: 'AI' },
    { tag: 'Custom Software', title: 'Healthcare Patient Portal', client: 'Regional Hospital Group', desc: 'Built a HIPAA-compliant patient management platform with telemedicine, appointment scheduling, and integrated lab results.', outcome: '12K+ active patients', category: 'Software' },
    { tag: 'Cloud Infrastructure', title: 'Cloud Migration & DevOps', client: 'Financial Services Firm', desc: 'Migrated a monolithic on-premise system to AWS microservices, reducing infrastructure costs by 55% and achieving 99.97% uptime.', outcome: '55% infra cost cut', category: 'Cloud' },
  ];

  const filters = ['All', 'AI', 'SaaS', 'Blockchain', 'Software', 'Cloud'];
  const filtered = activeFilter === 'All' ? cases : cases.filter(c => c.category === activeFilter);

  return (
    <section id="portfolio" data-screen-label="04 Work" ref={ref} style={{ padding: '100px 0', background: '#f8fafc' }}>
      <div className="inner-wrap" style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px' }}>
        <div className="portfolio-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 44, opacity: visible ? 1 : 0, transform: visible ? 'translateY(0)' : 'translateY(24px)', transition: 'all 0.6s ease' }}>
          <div style={{ maxWidth: 480 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '5px 14px', borderRadius: 100, background: 'rgba(37,99,235,0.07)', border: '1px solid rgba(37,99,235,0.18)', marginBottom: 16 }}>
              <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, fontWeight: 600, color: '#1d4ed8', letterSpacing: '0.07em' }}>CASE STUDIES</span>
            </div>
            <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 'clamp(28px, 3.5vw, 44px)', fontWeight: 700, color: '#0f172a', letterSpacing: '-0.03em', lineHeight: 1.1, margin: 0 }}>
              Projects that moved the needle
            </h2>
          </div>
          <div className="filter-row" style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {filters.map(f => (
              <button key={f} onClick={() => setActiveFilter(f)} style={{
                padding: '6px 16px', borderRadius: 100,
                background: activeFilter === f ? '#1d4ed8' : '#fff',
                border: `1.5px solid ${activeFilter === f ? '#1d4ed8' : 'rgba(0,0,0,0.1)'}`,
                cursor: 'pointer', fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 500,
                color: activeFilter === f ? '#fff' : '#64748b',
                transition: 'all 0.18s', boxShadow: activeFilter === f ? '0 4px 12px rgba(29,78,216,0.25)' : 'none',
              }}
              onMouseEnter={e => { if (activeFilter !== f) { e.currentTarget.style.borderColor = '#2563eb'; e.currentTarget.style.color = '#1d4ed8'; }}}
              onMouseLeave={e => { if (activeFilter !== f) { e.currentTarget.style.borderColor = 'rgba(0,0,0,0.1)'; e.currentTarget.style.color = '#64748b'; }}}>{f}</button>
            ))}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(340px, 1fr))', gap: 20 }}>
          {filtered.map((c, i) => (
            <div key={c.title} style={{
              borderRadius: 14, overflow: 'hidden', background: '#fff',
              border: '1.5px solid rgba(0,0,0,0.07)',
              boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
              transition: 'all 0.25s ease',
              opacity: visible ? 1 : 0,
              transform: visible ? 'translateY(0)' : 'translateY(28px)',
              transitionDelay: `${i * 0.06}s`,
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = '#2563eb'; e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 16px 40px rgba(29,78,216,0.12)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(0,0,0,0.07)'; e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.04)'; }}>
              <div style={{ height: 4, background: 'linear-gradient(to right, #1d4ed8, #3b82f6)' }}/>
              <div style={{ padding: '24px 26px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
                  <span style={{ padding: '3px 10px', borderRadius: 100, background: 'rgba(37,99,235,0.08)', border: '1px solid rgba(37,99,235,0.18)', fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 600, color: '#1d4ed8', letterSpacing: '0.04em' }}>{c.tag}</span>
                  <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: '#94a3b8' }}>{c.client}</span>
                </div>
                <h3 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 17, fontWeight: 600, color: '#0f172a', margin: '0 0 10px', letterSpacing: '-0.01em' }}>{c.title}</h3>
                <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: '#64748b', lineHeight: 1.65, margin: '0 0 18px' }}>{c.desc}</p>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, paddingTop: 14, borderTop: '1px solid rgba(0,0,0,0.06)' }}>
                  <div style={{ width: 22, height: 22, borderRadius: 6, background: 'rgba(37,99,235,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><polyline points="1,9 4,5 7,7 11,2" stroke="#2563eb" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </div>
                  <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 600, color: '#1d4ed8' }}>{c.outcome}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Portfolio });