// site/tarot.jsx — the working-as-tarot-card. The signature work-card style.

// ─── CORNER BRACKET — small ornamental scrollwork mark ──────────
// A quarter-bracket with a small terminal dot. Rotated to fit each
// corner of a tarot-card frame.
function CornerBracket({ pos, color, size = 14 }) {
  const rot = { tl: 0, tr: 90, br: 180, bl: 270 }[pos];
  const map = {
    tl: { top: 10, left: 10 },
    tr: { top: 10, right: 10 },
    bl: { bottom: 10, left: 10 },
    br: { bottom: 10, right: 10 },
  };
  return (
    <svg width={size} height={size} viewBox="0 0 16 16"
      aria-hidden="true"
      style={{
        position: 'absolute', ...map[pos],
        transform: `rotate(${rot}deg)`,
        color: color || 'var(--card-accent)',
        opacity: 0.75,
      }}>
      <g fill="none" stroke="currentColor" strokeWidth="0.9" strokeLinecap="round">
        <path d="M2 9 L2 5 Q2 2 5 2 L9 2" />
        <circle cx="2" cy="2" r="0.9" fill="currentColor" stroke="none" />
      </g>
    </svg>
  );
}

// ─── CENTER ORNAMENT — small printer's mark on the rule ─────────
function CenterOrnament({ pos = 'top', color }) {
  const map = {
    top:    { top: 5, left: '50%', transform: 'translateX(-50%)' },
    bottom: { bottom: 5, left: '50%', transform: 'translateX(-50%)' },
  };
  return (
    <span aria-hidden="true" style={{
      position: 'absolute', ...map[pos],
      width: 28, height: 10, display: 'flex',
      alignItems: 'center', justifyContent: 'center',
      background: 'var(--ink-200)',
      color: color || 'var(--card-accent)',
      lineHeight: 0,
    }}>
      <svg width="22" height="6" viewBox="0 0 22 6" aria-hidden="true">
        <g fill="none" stroke="currentColor" strokeWidth="0.7" strokeLinecap="round">
          <line x1="1" y1="3" x2="7" y2="3" />
          <path d="M9 3 L11 1 L13 3 L11 5 Z" fill="currentColor" />
          <line x1="15" y1="3" x2="21" y2="3" />
        </g>
      </svg>
    </span>
  );
}

// ─── DECORATIVE FRAME — proper tarot card chrome ────────────────
function TarotFrame({ tone, children, accent = 'moss' }) {
  // tone controls the warm-accent the card lives under: moss / indigo / plum / amber
  const toneMap = {
    moss:   { accent: 'var(--moss)',     glow: 'rgba(150,165,96,0.20)' },
    indigo: { accent: 'var(--indigo-300)', glow: 'rgba(45,78,166,0.28)' },
    plum:   { accent: '#C49ACF',         glow: 'rgba(118,72,131,0.30)' },
    amber:  { accent: 'var(--amber)',    glow: 'rgba(244,175,89,0.24)' },
  };
  const c = toneMap[tone] || toneMap.moss;
  return (
    <div className="kt-tarot-frame" style={{
      position: 'relative',
      background: 'linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-elevated) 100%)',
      border: '1px solid var(--line-strong)',
      borderRadius: 'var(--r-md)',
      padding: '28px 22px 24px',
      display: 'flex', flexDirection: 'column',
      isolation: 'isolate',
      '--card-accent': c.accent,
      '--card-glow':   c.glow,
    }}>
      {/* double-rule inner border with a small gap from the outer */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 7,
        border: '1px solid var(--card-accent)',
        borderRadius: 'var(--r-xs)',
        opacity: 0.35,
        pointerEvents: 'none',
      }} />
      {/* center marks (printer's ornaments) sitting on the rule */}
      <CenterOrnament pos="top" />
      <CenterOrnament pos="bottom" />
      {/* corner brackets */}
      <CornerBracket pos="tl" />
      <CornerBracket pos="tr" />
      <CornerBracket pos="bl" />
      <CornerBracket pos="br" />
      {children}
    </div>
  );
}

// ─── ILLUSTRATIVE THUMB ─────────────────────────────────────────
// A placeholder "plate" that gives each working a unique iconographic
// stamp: a tarot-style framed circle with a giant roman numeral inside.
// In production this would be a hand-drawn illustration per working.
function TarotPlate({ numeral, tone, ratio = '4 / 5' }) {
  const toneBg = {
    moss:   'radial-gradient(circle at 50% 40%, rgba(150,165,96,0.20), rgba(150,165,96,0.04) 70%)',
    indigo: 'radial-gradient(circle at 50% 40%, rgba(45,78,166,0.22), rgba(45,78,166,0.04) 70%)',
    plum:   'radial-gradient(circle at 50% 40%, rgba(118,72,131,0.28), rgba(118,72,131,0.04) 70%)',
    amber:  'radial-gradient(circle at 50% 40%, rgba(244,175,89,0.20), rgba(244,175,89,0.04) 70%)',
  };
  return (
    <div style={{
      position: 'relative', aspectRatio: ratio,
      width: '100%',
      background: 'var(--bg-page)',
      backgroundImage: toneBg[tone] || toneBg.moss,
      border: '1px solid var(--line-soft)',
      borderRadius: 'var(--r-xs)',
      display: 'grid', placeItems: 'center',
      overflow: 'hidden',
    }}>
      {/* thin SVG mandala-ish backdrop */}
      <svg width="100%" height="100%" viewBox="0 0 200 250"
        style={{ position: 'absolute', inset: 0, opacity: 0.22 }}>
        <defs>
          <pattern id={`stripe-${numeral}`} width="14" height="14" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
            <rect width="14" height="14" fill="none"/>
            <line x1="0" y1="0" x2="0" y2="14" stroke="var(--card-accent)" strokeWidth="0.4"/>
          </pattern>
        </defs>
        <rect width="200" height="250" fill={`url(#stripe-${numeral})`} />
        <circle cx="100" cy="100" r="58" fill="none" stroke="var(--card-accent)" strokeWidth="0.6" opacity="0.6" />
        <circle cx="100" cy="100" r="44" fill="none" stroke="var(--card-accent)" strokeWidth="0.4" opacity="0.5" />
        {/* the eye-mark, distilled */}
        <ellipse cx="100" cy="100" rx="36" ry="20"
          fill="none" stroke="var(--card-accent)" strokeWidth="0.8" opacity="0.8"/>
        <ellipse cx="100" cy="100" rx="11" ry="11"
          fill="var(--card-accent)" opacity="0.85"/>
      </svg>
      <span style={{
        position: 'relative',
        fontFamily: '"Ohno Blazeface 72", var(--font-display)',
        fontSize: 92, lineHeight: 0.9, letterSpacing: '0.02em',
        textTransform: 'uppercase', color: 'var(--fg-1)',
        mixBlendMode: 'screen',
        textShadow: '0 2px 8px rgba(0,0,0,0.5)',
      }}>{numeral}</span>
    </div>
  );
}

// ─── TAROT CARD — the canonical work card ───────────────────────
function TarotCard({ working, onClick, compact = false }) {
  const primarySuit = window.KT && KT.suitOf ? KT.suitOf(working.tags[0]) : 'pentacles';
  const { sparkles, fire, clear } = useSparkles();

  return (
    <a href={`#/work/${working.id}`} onClick={onClick}
      className="kt-tarot-card"
      onMouseMove={fire} onMouseLeave={clear}
      style={{ textDecoration: 'none', color: 'inherit', display: 'block', cursor: 'pointer', position: 'relative', overflow: 'visible' }}>
      <SparkleLayer sparkles={sparkles} />
      <TarotFrame tone={working.tone}>
        <div style={{ textAlign: 'center', marginBottom: 18 }}>
          <div style={{
            fontFamily: '"Ohno Blazeface 48", var(--font-display)',
            fontSize: compact ? 30 : 36, lineHeight: 0.95,
            letterSpacing: '0.04em', textTransform: 'uppercase',
            color: 'var(--card-accent)',
          }}>{working.numeral}</div>
        </div>

        {working.featuredImage ? (
          <div style={{ borderRadius: 'var(--r-xs)', overflow: 'hidden', aspectRatio: '4 / 5' }}>
            <img
              src={working.featuredImage}
              alt={working.featuredImageAlt || working.title}
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
            />
          </div>
        ) : (
          <TarotPlate numeral={working.numeral} tone={working.tone} />
        )}

        <div aria-hidden="true" style={{
          display: 'grid', gridTemplateColumns: '1fr auto 1fr',
          alignItems: 'center', gap: 12, margin: '18px 4px 14px',
          color: 'var(--card-accent)',
        }}>
          <span style={{ height: 1, background: 'currentColor', opacity: 0.4 }} />
          <SuitGlyph suit={primarySuit} size={14} color="currentColor" />
          <span style={{ height: 1, background: 'currentColor', opacity: 0.4 }} />
        </div>

        <h3 style={{
          margin: '0 0 12px', textAlign: 'center',
          fontFamily: '"Ohno Blazeface 24", var(--font-display)',
          fontSize: compact ? 22 : 26, lineHeight: 1.05,
          letterSpacing: '0.04em', textTransform: 'uppercase',
          color: 'var(--fg-1)', textWrap: 'balance',
        }}>{working.title}</h3>

        <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 6 }}>
          {working.tags.map((t, i) => (
            <span key={t} style={{
              display: 'inline-flex', alignItems: 'center', gap: 5,
              fontFamily: 'var(--font-body)', fontWeight: 500,
              fontSize: 10, letterSpacing: '0.10em',
              textTransform: 'uppercase', color: 'var(--fg-3)',
            }}>
              {t}
              {i < working.tags.length - 1 && (
                <span style={{ color: 'var(--fg-3)', opacity: 0.5, marginLeft: 4 }}>·</span>
              )}
            </span>
          ))}
        </div>
      </TarotFrame>
    </a>
  );
}

// ─── EDITORIAL CARD — alt style: large image, terse caption ─────
function EditorialCard({ working }) {
  const { sparkles, fire, clear } = useSparkles();
  return (
    <a href={`#/work/${working.id}`}
      onMouseMove={fire} onMouseLeave={clear}
      style={{ textDecoration: 'none', color: 'inherit', display: 'block', position: 'relative', overflow: 'visible' }}>
      <SparkleLayer sparkles={sparkles} />
      <div style={{
        position: 'relative', aspectRatio: '4 / 3',
        background: 'var(--bg-surface)',
        border: '1px solid var(--line-soft)',
        borderRadius: 'var(--r-md)',
        overflow: 'hidden',
      }}>
        {working.featuredImage ? (
          <img
            src={working.featuredImage}
            alt={working.featuredImageAlt || working.title}
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          />
        ) : (
          <TarotPlate numeral={working.numeral} tone={working.tone} ratio="4 / 3" />
        )}
      </div>
      <div style={{ marginTop: 18, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <h3 style={{
          margin: 0, fontFamily: '"Ohno Blazeface 24", var(--font-display)',
          fontSize: 24, lineHeight: 1.05, letterSpacing: '0.02em',
          textTransform: 'uppercase', color: 'var(--fg-1)',
        }}>{working.title}</h3>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)',
        }}>{working.numeral}</span>
      </div>
      <div className="oma-small" style={{ marginTop: 8, color: 'var(--fg-2)' }}>
        {working.summary.split('.')[0]}.
      </div>
    </a>
  );
}

// ─── LIST ROW — alt style: typographic list view ────────────────
function ListRow({ working }) {
  return (
    <a href={`#/work/${working.id}`} className="kt-list-row" style={{
      display: 'grid',
      gridTemplateColumns: 'auto 1fr auto auto',
      gap: 24, alignItems: 'baseline',
      padding: '22px 4px',
      borderBottom: '1px solid var(--line-medium)',
      textDecoration: 'none', color: 'inherit',
      transition: 'background var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out)',
    }}>
      <Rune numeral={working.numeral} size="h5" color="var(--fg-3)" />
      <div>
        <h3 style={{
          margin: 0, fontFamily: '"Ohno Blazeface 36", var(--font-display)',
          fontSize: 'clamp(22px, 3vw, 32px)', lineHeight: 1, letterSpacing: '0.02em',
          textTransform: 'uppercase', color: 'var(--fg-1)',
        }}>{working.title}</h3>
        <div className="oma-small" style={{ marginTop: 6, color: 'var(--fg-2)' }}>
          {working.tags.join(' · ')}
        </div>
      </div>
      <span style={{
        fontFamily: '"Ohno Blazeface 18", var(--font-display)',
        fontSize: 18, letterSpacing: '0.06em', color: 'var(--moss)',
      }}>→</span>
    </a>
  );
}

Object.assign(window, { TarotFrame, TarotPlate, TarotCard, EditorialCard, ListRow });