// Portfolio section — multiple layout variants
const Portfolio = ({ style = 'editorial', onOpen }) => {
  const [filter, setFilter] = React.useState('All');
  const tags = ['All', 'Web', 'AI', 'Commerce', 'SaaS'];
  const filtered = filter === 'All' ? PORTFOLIO : PORTFOLIO.filter(p => p.tag.toLowerCase().includes(filter.toLowerCase()));

  return (
    <Section
      id="portfolio"
      label="02 / Selected work"
      kicker="Recent builds"
      title="Engineered output, end-to-end."
      subtitle="A slice of what we've shipped. Click into any case study for the build log, decisions, and what we'd do differently."
    >
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:32,flexWrap:'wrap',gap:16}}>
        <div style={{display:'flex',gap:6}}>
          {tags.map(t => (
            <button key={t} onClick={()=>setFilter(t)} style={{
              padding:'7px 14px', borderRadius:999, fontSize:13,
              border:'1px solid', borderColor: filter===t ? 'var(--accent)' : 'var(--line)',
              color: filter===t ? '#0a0a0a' : 'var(--ink-2)',
              background: filter===t ? 'var(--accent)' : 'transparent',
              transition:'all .15s ease'
            }}>{t}</button>
          ))}
        </div>
        <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>
          {PORTFOLIO.length} CASES · 2023–2026
        </span>
      </div>

      {style === 'editorial' && <PortfolioEditorial items={filtered} onOpen={onOpen}/>}
      {style === 'cards' && <PortfolioCards items={filtered} onOpen={onOpen}/>}
      {style === 'list' && <PortfolioList items={filtered} onOpen={onOpen}/>}

      <div style={{marginTop:48,textAlign:'center'}}>
        <button className="btn btn-ghost">All case studies {Icon.arrow()}</button>
      </div>
    </Section>
  );
};

const PortfolioEditorial = ({ items, onOpen }) => (
  <div style={{display:'grid',gridTemplateColumns:'repeat(12,1fr)',gap:24}}>
    {items.map((p, i) => {
      const big = i === 0;
      const span = big ? 12 : (i % 3 === 1 ? 7 : 5);
      return (
        <div key={p.id} onClick={()=>onOpen?.(p)} className="clickable" style={{gridColumn:`span ${span}`}}>
          <CaseCard p={p} big={big}/>
        </div>
      );
    })}
  </div>
);

const CaseCard = ({ p, big }) => (
  <div className="card" style={{padding: big ? 24 : 20, cursor:'pointer'}}>
    <div style={{position:'relative', aspectRatio: big ? '16/7' : '16/10', borderRadius:10, overflow:'hidden', marginBottom:20,
      background:`linear-gradient(135deg, ${p.color}33 0%, #0a0a0a 80%)`, border:'1px solid var(--line)'}}>
      <CaseVisual p={p}/>
      <div style={{position:'absolute',top:12,left:12,display:'flex',gap:6}}>
        <Tag>{p.tag}</Tag>
        {p.featured && <Tag accent>Featured</Tag>}
      </div>
      <div style={{position:'absolute',top:12,right:12}}>
        <span className="mono" style={{fontSize:10,color:'var(--ink-3)',background:'rgba(0,0,0,0.5)',padding:'4px 8px',borderRadius:6,letterSpacing:'0.06em'}}>{p.year}</span>
      </div>
    </div>

    <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:24,marginBottom:14}}>
      <div>
        <h3 style={{fontSize: big ? 32 : 22, letterSpacing:'-0.025em', fontWeight:500, marginBottom:8, lineHeight:1.1}}>{p.name}</h3>
        <p style={{color:'var(--ink-2)', fontSize: big ? 16 : 14, lineHeight:1.5, maxWidth:540}}>{p.summary}</p>
      </div>
      <span style={{
        flexShrink:0, width:36, height:36, borderRadius:8, border:'1px solid var(--line-2)',
        display:'flex',alignItems:'center',justifyContent:'center', color:'var(--ink-2)'
      }}>{Icon.arrow()}</span>
    </div>

    <div style={{display:'flex',gap:24,paddingTop:14,borderTop:'1px solid var(--line)',flexWrap:'wrap'}}>
      <div>
        <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:4}}>{p.metric[0].toUpperCase()}</div>
        <div style={{fontSize:15,color:'var(--accent)',fontWeight:500}}>{p.metric[1]}</div>
      </div>
      <div>
        <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:4}}>ROLE</div>
        <div style={{fontSize:13,color:'var(--ink-2)'}}>{p.role.join(', ')}</div>
      </div>
      <div style={{marginLeft:'auto'}}>
        <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:4}}>STACK</div>
        <div style={{fontSize:13,color:'var(--ink-2)'}}>{p.stack.join(' · ')}</div>
      </div>
    </div>
  </div>
);

const CaseVisual = ({ p }) => {
  // Simple abstract visualization unique per project
  const seed = p.id.charCodeAt(0);
  return (
    <svg style={{position:'absolute',inset:0,width:'100%',height:'100%'}} preserveAspectRatio="xMidYMid slice">
      <defs>
        <pattern id={`g-${p.id}`} width="22" height="22" patternUnits="userSpaceOnUse">
          <circle cx="11" cy="11" r="0.6" fill={p.color} opacity="0.5"/>
        </pattern>
        <linearGradient id={`gr-${p.id}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={p.color} stopOpacity="0.18"/>
          <stop offset="100%" stopColor={p.color} stopOpacity="0"/>
        </linearGradient>
      </defs>
      <rect width="100%" height="100%" fill={`url(#g-${p.id})`}/>
      <circle cx={`${50 + (seed%20)}%`} cy="50%" r="120" fill={`url(#gr-${p.id})`}/>
      <circle cx={`${30 + (seed%30)}%`} cy="40%" r="60" fill={`url(#gr-${p.id})`}/>
      <text x="24" y="92%" fontFamily="JetBrains Mono" fontSize="9" fill={p.color} opacity="0.5" letterSpacing="0.1em">{p.name.toUpperCase()} / {p.id.toUpperCase()}</text>
    </svg>
  );
};

const PortfolioCards = ({ items, onOpen }) => (
  <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(320px,1fr))',gap:24}}>
    {items.map(p => (
      <div key={p.id} onClick={()=>onOpen?.(p)} className="clickable"><CaseCard p={p}/></div>
    ))}
  </div>
);

const PortfolioList = ({ items, onOpen }) => (
  <div style={{border:'1px solid var(--line)', borderRadius:'var(--radius)', overflow:'hidden'}}>
    {items.map((p, i) => (
      <div key={p.id} onClick={()=>onOpen?.(p)} className="clickable" style={{
        display:'grid', gridTemplateColumns:'80px 1.5fr 1.2fr 1fr 60px', gap:24, alignItems:'center',
        padding:'24px 28px', borderTop: i>0 ? '1px solid var(--line)' : 'none',
        transition:'background .2s ease'
      }}
      onMouseEnter={e=>e.currentTarget.style.background='var(--bg-2)'}
      onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
        <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>{String(i+1).padStart(2,'0')} · {p.year}</span>
        <div>
          <div style={{fontSize:18,fontWeight:500,letterSpacing:'-0.01em',marginBottom:4}}>{p.name}</div>
          <div style={{fontSize:13,color:'var(--ink-3)'}}>{p.summary}</div>
        </div>
        <div>
          <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:3}}>{p.metric[0].toUpperCase()}</div>
          <div style={{fontSize:14,color:'var(--accent)'}}>{p.metric[1]}</div>
        </div>
        <div style={{fontSize:12,color:'var(--ink-2)'}}>{p.stack.join(' · ')}</div>
        <span style={{justifySelf:'end',color:'var(--ink-3)'}}>{Icon.arrow()}</span>
      </div>
    ))}
  </div>
);

window.Portfolio = Portfolio;