// Work — portfolio grid with hover effects.
// Six tiles: 2 real (SRLA, Glance) + 4 plausible placeholders.

window.AtWork = () => {
  const [hover, setHover] = React.useState(-1);

  const items = [
    {
      client: 'Hamilton SRLA',
      url: 'srla.hamiltonhs.org',
      year: '2025',
      tag: 'Education',
      desc: 'Hamilton High\'s Students Run LA program — where staff coach and empower students to train for, and run, the Los Angeles Marathon.',
      stack: 'Astro · Sanity · Vercel',
      live: true,
      showDesc: true,
      render: () => (
        <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', background: '#1E3A5F' }}>
          <img src="atelier/assets/srla-screenshot.png" alt="Hamilton SRLA"
            style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center', display: 'block' }} />
        </div>
      ),
      big: true,
    },
    {
      client: 'Glance',
      url: 'glance.guama.dev',
      year: '2024',
      tag: 'Product',
      desc: 'A speed-reading web app that helps you read faster using rapid serial visual presentation (RSVP). Paste text, set your pace, go.',
      stack: 'React · Tailwind · Cloudflare',
      live: true,
      showDesc: true,
      render: () => (
        <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', background: '#0b0b0b' }}>
          <img src="atelier/assets/glance-screenshot.png" alt="Glance"
            style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center', display: 'block' }} />
        </div>
      ),
    },
    {
      client: 'Meridian Dental',
      url: 'meridian-dental.com',
      year: '2024',
      tag: 'Healthcare',
      desc: 'Six-location dental group. Online booking, insurance verification, patient portal.',
      stack: 'Next.js · Postgres · AWS',
      render: () => <PreviewGeneric title="Meridian" kind="Dental Group" base="#E8E4DC" tag="Est. 1998" pattern="dots" url="meridian-dental.com" />,
    },
    {
      client: 'Forge & Fern',
      url: 'forgeandfern.co',
      year: '2023',
      tag: 'E-commerce',
      desc: 'Handmade ironwork shop. Inventory sync, custom-order flow, automated fulfillment emails.',
      stack: 'Shopify · n8n · Klaviyo',
      render: () => <PreviewGeneric title="F&F" kind="Handmade Ironwork" base="#2B2622" tag="Shop" pattern="stripes" url="forgeandfern.co" dark />,
    },
    {
      client: 'Northbound HVAC',
      url: 'northboundhvac.com',
      year: '2023',
      tag: 'Service biz',
      desc: 'Local HVAC. Service-area map, instant-quote form, automated dispatch to technicians.',
      stack: 'Astro · Twilio · GCP',
      render: () => <PreviewGeneric title="Northbound" kind="HVAC Services" base="#D9DEE0" tag="24/7 service" pattern="grid" url="northboundhvac.com" />,
    },
  ];

  return (
    <section id="work" style={{
      background: TC.boneDeep,
      padding: '140px 40px 120px',
      borderTop: `1px solid ${TC.line}`,
      position: 'relative',
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'end', marginBottom: 72 }}>
          <div>
            <Eyebrow>§ 02 — Selected work</Eyebrow>
            <h2 style={{
              fontFamily: TC.serif, fontSize: 'clamp(48px, 6.2vw, 92px)',
              lineHeight: 0.96, letterSpacing: -2.2, fontWeight: 400,
              margin: '24px 0 0', color: TC.ink,
            }}>
              A few recent<br />
              <em style={{ color: TC.terraDeep }}>projects.</em>
            </h2>
          </div>
          <div style={{ justifySelf: 'end', textAlign: 'right' }}>
            <div style={{ fontFamily: TC.mono, fontSize: 11, color: TC.mute,
              letterSpacing: 2, textTransform: 'uppercase', marginBottom: 8 }}>
              52 projects · 2016 — now
            </div>
            <p style={{ fontSize: 16, color: TC.inkSoft, margin: 0, maxWidth: 360, lineHeight: 1.5 }}>
              Here are five we're proud of. Two are still live for you to click around —
              the rest are under NDA or long retired.
            </p>
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(6, 1fr)',
          gridAutoRows: 'auto',
          gap: 24,
        }}>
          {items.map((it, i) => {
            const span = it.big ? 4 : i === 1 ? 2 : i === 4 ? 2 : 2;
            const isHover = hover === i;
            return (
              <a
                key={it.client}
                href={it.live ? `https://${it.url}` : '#'}
                target={it.live ? '_blank' : undefined}
                rel="noopener"
                onMouseEnter={() => setHover(i)}
                onMouseLeave={() => setHover(-1)}
                style={{
                  gridColumn: `span ${span}`,
                  position: 'relative',
                  background: TC.bone,
                  borderRadius: 8,
                  overflow: 'hidden',
                  border: `1px solid ${TC.line}`,
                  textDecoration: 'none',
                  color: 'inherit',
                  transition: 'transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s',
                  transform: isHover ? 'translateY(-4px)' : 'translateY(0)',
                  boxShadow: isHover
                    ? '0 32px 64px -24px rgba(26,22,18,0.25)'
                    : '0 2px 4px rgba(26,22,18,0.03)',
                  display: 'block',
                }}
              >
                {/* preview */}
                <div style={{
                  position: 'relative',
                  aspectRatio: it.big ? '16 / 9' : '4 / 3',
                  overflow: 'hidden',
                }}>
                  <div style={{
                    position: 'absolute', inset: 0,
                    transform: isHover ? 'scale(1.04)' : 'scale(1)',
                    transition: 'transform .6s cubic-bezier(.2,.7,.3,1)',
                  }}>
                    {it.render()}
                  </div>

                  {/* live badge */}
                  {it.live && (
                    <div style={{
                      position: 'absolute', top: 16, left: 16,
                      display: 'inline-flex', alignItems: 'center', gap: 8,
                      padding: '6px 10px', borderRadius: 999,
                      background: 'rgba(26,22,18,0.72)', backdropFilter: 'blur(8px)',
                      color: TC.bone, fontFamily: TC.mono, fontSize: 10,
                      letterSpacing: 1.5, textTransform: 'uppercase',
                    }}>
                      <span style={{ width: 6, height: 6, borderRadius: 3,
                        background: '#7FE08A', animation: 'atPulse 1.6s ease-in-out infinite' }} />
                      Live
                    </div>
                  )}

                  {/* hover arrow */}
                  <div style={{
                    position: 'absolute', top: 16, right: 16,
                    width: 44, height: 44, borderRadius: 22,
                    background: TC.bone, color: TC.ink,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    opacity: isHover ? 1 : 0,
                    transform: isHover ? 'scale(1) rotate(0)' : 'scale(0.6) rotate(-45deg)',
                    transition: 'all .3s cubic-bezier(.2,.7,.3,1)',
                    boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
                  }}>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6">
                      <path d="M4 12L12 4M12 4H6M12 4V10" strokeLinecap="round" />
                    </svg>
                  </div>
                </div>

                {/* info */}
                <div style={{
                  padding: '20px 22px 22px',
                  borderTop: `1px solid ${TC.lineSoft}`,
                }}>
                  <div style={{
                    display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12,
                    marginBottom: 8,
                  }}>
                    <span style={{
                      fontFamily: TC.serif, fontSize: it.big ? 28 : 22,
                      letterSpacing: -0.6, color: TC.ink,
                      whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                      minWidth: 0, flex: '1 1 auto',
                    }}>
                      {it.client}
                    </span>
                    <span style={{
                      fontFamily: TC.mono, fontSize: 11, color: TC.mute,
                      letterSpacing: 1, textTransform: 'uppercase',
                      whiteSpace: 'nowrap', flexShrink: 0,
                    }}>
                      {it.year} · {it.tag}
                    </span>
                  </div>
                  <div style={{
                    fontFamily: TC.mono, fontSize: 11, color: TC.terra,
                    letterSpacing: 0.5, marginBottom: 10,
                  }}>
                    {it.url}
                  </div>
                  {(it.big || it.showDesc) && (
                    <p style={{ fontSize: 14, color: TC.inkSoft, margin: '0 0 10px', lineHeight: 1.5 }}>
                      {it.desc}
                    </p>
                  )}
                  <div style={{ fontFamily: TC.mono, fontSize: 10, color: TC.muteLight, letterSpacing: 0.5 }}>
                    {it.stack}
                  </div>
                </div>
              </a>
            );
          })}
        </div>

        <div style={{ textAlign: 'center', marginTop: 64 }}>
          <a href="#contact" className="at-arrow" style={{ fontSize: 15 }}>
            Want your project on this list?
            <svg width="13" height="13" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.8">
              <path d="M3 9L9 3M9 3H4M9 3V8" strokeLinecap="round" />
            </svg>
          </a>
        </div>
      </div>
    </section>
  );
};