/* =====================================================================
   Projects — cards with shader fallback. Filter chips. Responsive.
   ===================================================================== */

const { useEffect: useEffectPj, useRef: useRefPj, useState: useStatePj } = React;

const SAMPLE_PROJECTS = [
  { id: 'p1', title: 'Red Dirt Auto',        summary: '127 used cars online, each with photos and pricing. Their AI helper pre-qualifies financing and books test drives — even at 2am.',                year: 2026, url: '#', stack: ['Listings site', 'AI chat', '48hr launch'],   services: ['ai','web'],  shader: 'gravity' },
  { id: 'p2', title: 'Prairie Hardware Co.', summary: 'A clean one-page site for a Norman contractor. Phone rings less at night — the AI answers routine questions and takes job requests around the clock.',  year: 2026, url: '#', stack: ['Simple website', 'AI helper', 'Local SEO'], services: ['web','ai'],  shader: 'voronoi' },
  { id: 'p3', title: 'Ladder Works',         summary: 'Replaced 11 messy spreadsheets with one clean dashboard for a Tulsa staffing firm. Staff save an hour a day — and nothing falls through the cracks.',      year: 2025, url: '#', stack: ['Custom build', 'Dashboards'],                services: ['tools'],     shader: 'displacement' },
  { id: 'p4', title: 'Foundry Press',        summary: 'A gorgeous marketing site for an OKC publisher. Editors update stories themselves, loads in under a second on any phone, and ranks on page one for their topics.', year: 2025, url: '#', stack: ['Full website', 'Easy editing', 'Fast'],  services: ['web'],       shader: 'metal' },
  { id: 'p5', title: 'Silo Analytics',       summary: 'Live dashboards for grain elevator operators across Oklahoma and Kansas. Prices, inventory, and alerts — at a glance, on any device.',                       year: 2025, url: '#', stack: ['Custom platform', 'Live data'],             services: ['data'],      shader: 'particles' },
  { id: 'p6', title: 'Beltline Credit',      summary: 'Loan applications used to take 34 minutes. An AI helper fills out the paperwork by asking simple questions — now it\u2019s 4 minutes, start to finish.',        year: 2026, url: '#', stack: ['AI form-filler', 'Big time saver'],         services: ['ai'],        shader: 'ascii' },
];

function Projects() {
  const [filter, setFilter] = useStatePj('all');
  const ref = useRefPj(null);
  useReveal(ref);
  const shown = filter === 'all' ? SAMPLE_PROJECTS : SAMPLE_PROJECTS.filter(p => p.services.includes(filter));
  return (
    <section id="work" ref={ref} className="mw-reveal" style={{ padding: 'clamp(64px, 10vh, 100px) clamp(20px, 4vw, 32px) 40px', maxWidth: 1440, margin: '0 auto' }}>
      <SectionHead
        eyebrow="002 / Selected work"
        title={<>Selected projects,<br/><em style={{ fontFamily: 'var(--font-editorial)', fontStyle: 'italic', fontWeight: 400 }}>2024 — present.</em></>}
        kicker="A few projects from across Oklahoma — and beyond. Click any card to read the full story."
        right={
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {[['all','ALL'],['ai','AI'],['web','WEB'],['tools','TOOLS'],['data','DATA']].map(([k,l]) => (
              <button key={k} onClick={() => setFilter(k)} style={{
                padding: '6px 12px', fontFamily: 'var(--font-mono)', fontSize: 10,
                letterSpacing: '0.14em', textTransform: 'uppercase',
                background: filter === k ? 'var(--accent)' : 'transparent',
                color: filter === k ? 'var(--accent-ink)' : 'var(--fg-3)',
                border: '1px solid ' + (filter === k ? 'var(--accent)' : 'var(--border-strong)'),
                cursor: 'pointer', transition: 'all .2s', outlineOffset: 3,
              }}
              onMouseEnter={e => {
                if (filter === k) return;
                e.currentTarget.style.borderColor = 'var(--accent)';
                e.currentTarget.style.color = 'var(--fg-1)';
                e.currentTarget.style.background = 'color-mix(in oklab, var(--accent) 8%, transparent)';
              }}
              onMouseLeave={e => {
                if (filter === k) return;
                e.currentTarget.style.borderColor = 'var(--border-strong)';
                e.currentTarget.style.color = 'var(--fg-3)';
                e.currentTarget.style.background = 'transparent';
              }}>{l}</button>
            ))}
          </div>
        }
      />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 320px), 1fr))', gap: 12 }}>
        {shown.map((p, i) => <ProjectCard key={p.id} project={p} index={i}/>)}
      </div>
    </section>
  );
}

function ProjectCard({ project, index }) {
  const [hover, setHover] = useStatePj(false);
  const shader = {
    gravity: <GravityGrid density={20}/>,
    voronoi: <Voronoi/>,
    displacement: <DisplacementField/>,
    metal: <LiquidMetal/>,
    particles: <ParticleSwarm/>,
    ascii: <AsciiField/>,
  }[project.shader] || <GravityGrid/>;
  return (
    <a href={project.url}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
       style={{
         position: 'relative', display: 'flex', flexDirection: 'column',
         background: 'var(--bg-elev-1)',
         border: '1px solid ' + (hover ? 'var(--accent)' : 'var(--border)'),
         textDecoration: 'none', color: 'inherit', overflow: 'hidden',
         transition: 'border-color .3s, transform .3s var(--ease-out)',
         transform: hover ? 'translateY(-4px)' : 'none',
       }}>
      <div style={{ aspectRatio: '16/10', background: 'var(--ink-100)', borderBottom: '1px solid var(--border)', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, opacity: hover ? 1 : 0.7, transition: 'opacity .4s' }}>{shader}</div>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 40%, color-mix(in oklab, var(--bg) 60%, transparent) 100%)' }}/>
        <div style={{ position: 'absolute', top: 12, left: 12, padding: '4px 8px', background: 'var(--bg)', color: 'var(--fg-1)', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em' }}>{String(index + 1).padStart(2, '0')}</div>
        <div style={{ position: 'absolute', top: 12, right: 12, padding: '4px 8px', background: 'var(--bg)', color: 'var(--fg-3)', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em' }}>{project.year}</div>
        <div style={{ position: 'absolute', bottom: 12, right: 12, fontFamily: 'var(--font-mono)', fontSize: 14, color: hover ? 'var(--accent)' : 'var(--fg-2)', transition: 'color .2s, transform .2s', transform: hover ? 'translate(2px,-2px)' : 'none' }}>↗</div>
      </div>
      <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
        <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, letterSpacing: '-0.025em' }}>{project.title}</h3>
        <p style={{ margin: 0, fontSize: 13, lineHeight: 1.5, color: 'var(--fg-3)' }}>{project.summary}</p>
        <div style={{ display: 'flex', gap: 6, marginTop: 'auto', flexWrap: 'wrap' }}>
          {project.stack.map(s => <Pill key={s}>{s}</Pill>)}
        </div>
      </div>
    </a>
  );
}

Object.assign(window, { Projects });