/* global React, TagChip, LinkRow */
const { useState } = React;

window.ProjectCard = function ProjectCard({ order, slug, headline, body, tags, links, updated, anchor, media }) {
  const [hover, setHover] = useState(false);
  const num = String(order).padStart(2, '0');
  return (
    <article
      id={anchor}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: 'var(--bg-elev)',
        border: '1px solid var(--rule)',
        borderRadius: 'var(--radius-card)',
        padding: 'var(--card-pad, 32px)',
        boxShadow: hover ? 'var(--shadow-card-hover)' : 'var(--shadow-card)',
        transform: hover ? 'translateY(-1px)' : 'translateY(0)',
        transition: 'all 200ms cubic-bezier(0.4,0,0.2,1)',
        position: 'relative',
        overflow: 'hidden',
      }}>
      {/* hover accent strip */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 2,
        background: hover ? 'var(--accent)' : 'transparent',
        transition: 'background 200ms cubic-bezier(0.4,0,0.2,1)',
      }} />

      {/* meta line */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        fontFamily: 'var(--font-mono)', fontSize: 11,
        color: 'var(--ink-2)', letterSpacing: '0.04em',
      }}>
        <span>{num} · {slug}</span>
        <span>updated {updated}</span>
      </div>

      {/* headline */}
      <h2 style={{
        marginTop: 18, marginBottom: 0,
        fontSize: 26, lineHeight: 1.3, fontWeight: 700,
        letterSpacing: '-0.005em',
        textWrap: 'balance',
      }}>{headline}</h2>

      {/* body */}
      <div style={{
        marginTop: 14, fontSize: 15.5, lineHeight: 1.7,
        color: 'var(--ink)',
      }}>{body}</div>

      {/* media strip */}
      {media && media.length > 0 && (
        <div style={{
          marginTop: 18, display: 'grid',
          gridTemplateColumns: media.length === 1 ? '220px' : `repeat(${media.length}, 1fr)`,
          gap: 8,
        }}>
          {media.map((m, i) => (
            <figure key={i} style={{ margin: 0 }}>
              <img src={m.src} alt={m.alt}
                   style={{ width: '100%', aspectRatio: '1 / 1', objectFit: 'cover', borderRadius: 6, display: 'block', border: '1px solid var(--rule)' }} />
              {m.caption && (
                <figcaption style={{
                  marginTop: 6, fontFamily: 'var(--font-mono)', fontSize: 11,
                  color: 'var(--ink-2)', letterSpacing: '0.04em',
                }}>{m.caption}</figcaption>
              )}
            </figure>
          ))}
        </div>
      )}

      {/* tags */}
      {tags && tags.length > 0 && (
        <div style={{ marginTop: 20, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {tags.map(t => <TagChip key={t}>{t}</TagChip>)}
        </div>
      )}

      {/* links */}
      {links && links.length > 0 && (
        <div style={{ marginTop: 18 }}>
          <LinkRow links={links} />
        </div>
      )}
    </article>
  );
};