function Services() {
  const [hoveredIdx, setHoveredIdx] = React.useState(null);
  const cards = [
    { tag: '01 · Inbox',    title: 'Triage in one breath.',  body: "genz drafts replies in your voice, archives the noise, and routes anything that needs you to your inbox." },
    { tag: '02 · Threads',  title: 'The 40-message recap.',  body: "A long Slack thread, a 2-hour meeting, a project channel — distilled to what changed and what's next." },
    { tag: '03 · Calendar', title: 'A quieter week.',        body: "Three 30-minute meetings become one async note. genz protects deep-work blocks before you ask." },
  ];

  return (
    <section id="use-cases" style={{ borderTop: '1px solid var(--line)', scrollMarginTop: 80 }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '128px 32px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, marginBottom: 64, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 720 }}>
            <div style={{
              fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 500,
              letterSpacing: '0.12em', textTransform: 'uppercase',
              color: 'var(--fg-subtle)', marginBottom: 20,
            }}>Services</div>
            <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 'clamp(40px, 5vw, 64px)', lineHeight: 1.05, letterSpacing: '-0.02em', color: 'var(--fg)', margin: 0 }}>
              See it work, in 12 seconds.
            </h2>
          </div>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--fg-muted)', maxWidth: 320 }}>
            Hover any card to play the demo. No signup, no waitlist, no fine print.
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {cards.map((c, i) => (
            <ServiceCard
              key={c.tag}
              tag={c.tag}
              title={c.title}
              body={c.body}
              video=""
              hovered={hoveredIdx === i}
              onHover={() => setHoveredIdx(i)}
              onLeave={() => setHoveredIdx(prev => (prev === i ? null : prev))}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ tag, title, body, video, hovered, onHover, onLeave }) {
  const videoRef = React.useRef(null);
  const primary = hovered;

  React.useEffect(() => {
    if (!videoRef.current) return;
    if (hovered) videoRef.current.play?.();
    else { videoRef.current.pause?.(); videoRef.current.currentTime = 0; }
  }, [hovered]);

  return (
    <div
      onMouseEnter={onHover}
      onMouseLeave={onLeave}
      style={{
        background: primary ? 'var(--bg-deep)' : 'var(--bg-elev)',
        color: primary ? 'var(--fg-on-dark)' : 'var(--fg)',
        border: `1px solid ${primary ? 'rgba(234,231,225,0.10)' : 'var(--line)'}`,
        borderRadius: 12,
        display: 'flex', flexDirection: 'column', overflow: 'hidden',
        transition: 'background 320ms cubic-bezier(0.2,0.6,0.2,1), color 320ms cubic-bezier(0.2,0.6,0.2,1), border-color 320ms cubic-bezier(0.2,0.6,0.2,1), transform 320ms cubic-bezier(0.2,0.6,0.2,1)',
        transform: primary ? 'translateY(-2px)' : 'none',
        cursor: 'default',
      }}
    >
      <div style={{
        position: 'relative', aspectRatio: '16 / 10',
        background: primary ? '#0F0D09' : 'var(--bg-sunken)',
        borderBottom: `1px solid ${primary ? 'rgba(234,231,225,0.10)' : 'var(--line)'}`,
        overflow: 'hidden',
        transition: 'background 320ms cubic-bezier(0.2,0.6,0.2,1)',
      }}>
        {video ? (
          <video ref={videoRef} src={video} muted loop playsInline preload="metadata"
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        ) : (
          <DemoPlaceholder primary={primary} title={title} />
        )}
        <div style={{
          position: 'absolute', top: 14, left: 14,
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em',
          color: primary ? 'rgba(234,231,225,0.65)' : 'var(--fg-subtle)',
          background: primary ? 'rgba(15,13,9,0.55)' : 'rgba(234,231,225,0.7)',
          padding: '4px 8px', borderRadius: 4, backdropFilter: 'blur(6px)',
          transition: 'all 320ms cubic-bezier(0.2,0.6,0.2,1)',
        }}>↳ live demo · hover to play</div>
      </div>
      <div style={{ padding: '32px 28px', display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div style={{
          fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 500,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          color: primary ? 'rgba(234,231,225,0.6)' : 'var(--fg-subtle)',
          transition: 'color 320ms cubic-bezier(0.2,0.6,0.2,1)',
        }}>{tag}</div>
        <h3 style={{
          fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 32,
          lineHeight: 1.1, letterSpacing: '-0.015em', margin: 0,
        }}>{title}</h3>
        <p style={{
          fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.6,
          color: primary ? 'rgba(234,231,225,0.78)' : 'var(--fg-muted)', margin: 0,
          transition: 'color 320ms cubic-bezier(0.2,0.6,0.2,1)',
        }}>{body}</p>
        <button style={{
          alignSelf: 'flex-start', marginTop: 8,
          fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500,
          background: primary ? 'var(--accent-yellow)' : 'transparent',
          color: primary ? 'var(--fg-strong)' : 'var(--fg)',
          border: primary ? 'none' : '1px solid var(--line-strong)',
          padding: '10px 18px', borderRadius: 8, cursor: 'pointer',
          transition: 'all 320ms cubic-bezier(0.2,0.6,0.2,1)',
        }}>Watch full demo →</button>
      </div>
    </div>
  );
}

function DemoPlaceholder({ primary, title }) {
  const fg = primary ? '#EAE7E1' : '#162F29';
  const accent = primary ? '#DCCC7B' : '#295B4F';
  const bg = primary ? '#1E1B15' : '#E0DCD4';
  return (
    <div style={{ position: 'absolute', inset: 0, background: bg, display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'background 320ms cubic-bezier(0.2,0.6,0.2,1)' }}>
      <style>{`
        @keyframes genz-typing { 0%,100%{opacity:.25} 50%{opacity:1} }
        @keyframes genz-bar { 0%{width:8%} 50%{width:78%} 100%{width:8%} }
        @keyframes genz-pulse { 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(1.15);opacity:1} }
        .genz-demo-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;background:rgba(127,127,127,0.06);border:1px solid rgba(127,127,127,0.12)}
      `}</style>
      <div style={{ width: '78%', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div className="genz-demo-row">
          <div style={{ width: 8, height: 8, borderRadius: '50%', background: accent, animation: 'genz-pulse 1.4s ease-in-out infinite' }}></div>
          <div style={{ flex: 1, height: 6, borderRadius: 3, background: 'rgba(127,127,127,0.18)', overflow: 'hidden' }}>
            <div style={{ height: '100%', background: accent, animation: 'genz-bar 2.4s ease-in-out infinite' }}></div>
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: fg, opacity: 0.7 }}>{title}</div>
        </div>
        <div className="genz-demo-row">
          <div style={{ display: 'flex', gap: 4 }}>
            {[0, 1, 2].map(i => (
              <div key={i} style={{ width: 5, height: 5, borderRadius: '50%', background: fg, opacity: 0.6, animation: `genz-typing 1.2s ease-in-out infinite`, animationDelay: `${i * 0.15}s` }}></div>
            ))}
          </div>
          <div style={{ flex: 1, height: 4, borderRadius: 2, background: 'rgba(127,127,127,0.14)' }}></div>
        </div>
        <div className="genz-demo-row">
          <div style={{ width: 14, height: 14, borderRadius: 3, background: accent, opacity: 0.85 }}></div>
          <div style={{ flex: 1, height: 4, borderRadius: 2, background: 'rgba(127,127,127,0.14)' }}></div>
          <div style={{ width: 28, height: 4, borderRadius: 2, background: 'rgba(127,127,127,0.22)' }}></div>
        </div>
      </div>
    </div>
  );
}

window.Services = Services;