// Shared tarot card placeholder + cosmic SVG patterns.
// Modern, geometric, NOT classic Rider-Waite illustration.

const CardSymbol = ({ kind, color = '#D4A574', size = 56 }) => {
  // Geometric, abstract glyphs. Always simple shapes — no figurative drawing.
  const s = size;
  switch (kind) {
    case 'fool': // Gã Khờ — sun + path
      return (
        <svg width={s} height={s} viewBox="0 0 60 60" fill="none" stroke={color} strokeWidth="1.2">
          <circle cx="30" cy="22" r="8"/>
          {[0,1,2,3,4,5,6,7].map(i => <line key={i} x1="30" y1="22" x2={30 + 14*Math.cos(i*Math.PI/4)} y2={22 + 14*Math.sin(i*Math.PI/4)}/>)}
          <path d="M12 48 Q30 38 48 48" strokeDasharray="2 3"/>
        </svg>
      );
    case 'magician': // Pháp Sư — infinity + wand
      return (
        <svg width={s} height={s} viewBox="0 0 60 60" fill="none" stroke={color} strokeWidth="1.2">
          <path d="M16 24 C16 18, 24 18, 24 24 C24 30, 16 30, 16 24 Z"/>
          <path d="M36 24 C36 18, 44 18, 44 24 C44 30, 36 30, 36 24 Z"/>
          <line x1="24" y1="24" x2="36" y2="24"/>
          <line x1="30" y1="32" x2="30" y2="48"/>
          <circle cx="30" cy="48" r="2" fill={color}/>
        </svg>
      );
    case 'priestess': // Nữ Tư Tế — moon
      return (
        <svg width={s} height={s} viewBox="0 0 60 60" fill="none" stroke={color} strokeWidth="1.2">
          <path d="M38 12 A18 18 0 1 0 38 48 A14 14 0 1 1 38 12 Z" fill={color} fillOpacity="0.15"/>
          <circle cx="20" cy="30" r="1.4" fill={color}/>
          <circle cx="44" cy="20" r="1" fill={color}/>
          <circle cx="46" cy="40" r="1" fill={color}/>
        </svg>
      );
    case 'empress': // Hoàng Hậu — orbit
      return (
        <svg width={s} height={s} viewBox="0 0 60 60" fill="none" stroke={color} strokeWidth="1.2">
          <ellipse cx="30" cy="30" rx="22" ry="9"/>
          <ellipse cx="30" cy="30" rx="9" ry="22"/>
          <circle cx="30" cy="30" r="3" fill={color}/>
        </svg>
      );
    case 'star': // Ngôi Sao — 8-point star
      return (
        <svg width={s} height={s} viewBox="0 0 60 60" fill="none" stroke={color} strokeWidth="1.2">
          {[0,1,2,3].map(i => (
            <line key={i} x1="30" y1="30" x2={30 + 22*Math.cos(i*Math.PI/4)} y2={30 + 22*Math.sin(i*Math.PI/4)} transform={`rotate(${i*22.5} 30 30)`}/>
          ))}
          <line x1="8" y1="30" x2="52" y2="30"/>
          <line x1="30" y1="8" x2="30" y2="52"/>
          <line x1="14" y1="14" x2="46" y2="46"/>
          <line x1="46" y1="14" x2="14" y2="46"/>
          <circle cx="30" cy="30" r="2.5" fill={color}/>
        </svg>
      );
    case 'moon': // Mặt Trăng — crescent + drop
      return (
        <svg width={s} height={s} viewBox="0 0 60 60" fill="none" stroke={color} strokeWidth="1.2">
          <path d="M40 12 A18 18 0 1 0 40 48 A14 14 0 1 1 40 12 Z"/>
          <line x1="30" y1="50" x2="30" y2="56" strokeDasharray="1 2"/>
        </svg>
      );
    case 'sun': // Mặt Trời
      return (
        <svg width={s} height={s} viewBox="0 0 60 60" fill="none" stroke={color} strokeWidth="1.2">
          <circle cx="30" cy="30" r="10" fill={color} fillOpacity="0.2"/>
          {[0,1,2,3,4,5,6,7,8,9,10,11].map(i => (
            <line key={i} x1={30 + 14*Math.cos(i*Math.PI/6)} y1={30 + 14*Math.sin(i*Math.PI/6)} x2={30 + 22*Math.cos(i*Math.PI/6)} y2={30 + 22*Math.sin(i*Math.PI/6)}/>
          ))}
        </svg>
      );
    case 'world': // Thế Giới — laurel circle
      return (
        <svg width={s} height={s} viewBox="0 0 60 60" fill="none" stroke={color} strokeWidth="1.2">
          <circle cx="30" cy="30" r="18"/>
          <circle cx="30" cy="30" r="12" strokeDasharray="2 3"/>
          <circle cx="30" cy="12" r="2" fill={color}/>
          <circle cx="30" cy="48" r="2" fill={color}/>
          <circle cx="12" cy="30" r="2" fill={color}/>
          <circle cx="48" cy="30" r="2" fill={color}/>
        </svg>
      );
    case 'wheel': // Bánh Xe Vận Mệnh
      return (
        <svg width={s} height={s} viewBox="0 0 60 60" fill="none" stroke={color} strokeWidth="1.2">
          <circle cx="30" cy="30" r="18"/>
          {[0,1,2,3,4,5,6,7].map(i => (
            <line key={i} x1={30 + 6*Math.cos(i*Math.PI/4)} y1={30 + 6*Math.sin(i*Math.PI/4)} x2={30 + 18*Math.cos(i*Math.PI/4)} y2={30 + 18*Math.sin(i*Math.PI/4)}/>
          ))}
          <circle cx="30" cy="30" r="3" fill={color}/>
        </svg>
      );
    case 'tower': // Tháp — bolt
      return (
        <svg width={s} height={s} viewBox="0 0 60 60" fill="none" stroke={color} strokeWidth="1.2">
          <path d="M22 10 L18 28 L26 26 L22 50 L42 24 L34 26 L38 10 Z" strokeLinejoin="round"/>
        </svg>
      );
    case 'death': // Cái Chết — diamond inverted
      return (
        <svg width={s} height={s} viewBox="0 0 60 60" fill="none" stroke={color} strokeWidth="1.2">
          <path d="M30 10 L48 30 L30 50 L12 30 Z"/>
          <path d="M30 18 L40 30 L30 42 L20 30 Z" fill={color} fillOpacity="0.15"/>
        </svg>
      );
    case 'lovers': // Người Yêu — two circles
      return (
        <svg width={s} height={s} viewBox="0 0 60 60" fill="none" stroke={color} strokeWidth="1.2">
          <circle cx="22" cy="30" r="12"/>
          <circle cx="38" cy="30" r="12"/>
          <ellipse cx="30" cy="30" rx="4" ry="9" fill={color} fillOpacity="0.2"/>
        </svg>
      );
    default:
      return (
        <svg width={s} height={s} viewBox="0 0 60 60" fill="none" stroke={color} strokeWidth="1.2">
          <circle cx="30" cy="30" r="14"/>
          <circle cx="30" cy="30" r="20" strokeDasharray="2 4"/>
        </svg>
      );
  }
};

// A modern, minimalist tarot card placeholder.
// Aspect 5:8. Uses navy fill, gold thin border, central glyph, name + roman.
const TarotCard = ({
  kind = 'fool',
  name = 'Gã Khờ',
  roman = '0',
  width = 140,
  variant = 'navy', // navy | ivory | void | outline
  back = false,
  glow = false,
  rotate = 0,
  style = {},
}) => {
  const h = width * 8 / 5;
  const ratio = width / 140;
  const palette = {
    navy:    { bg: 'linear-gradient(180deg, #14224a 0%, #0F1B3D 100%)', border: '#D4A574', text: '#F8F4E3' },
    ivory:   { bg: 'linear-gradient(180deg, #F8F4E3 0%, #efe7cf 100%)', border: '#0F1B3D', text: '#0F1B3D' },
    void:    { bg: 'linear-gradient(180deg, #0A0E27 0%, #0F1B3D 100%)', border: '#D4A574', text: '#F8F4E3' },
    outline: { bg: 'transparent', border: 'rgba(212,165,116,0.5)', text: 'rgba(248,244,227,0.85)' },
  }[variant];

  if (back) {
    return (
      <div style={{
        width, height: h, borderRadius: 12 * ratio,
        background: 'linear-gradient(180deg, #14224a 0%, #0A0E27 100%)',
        border: `1px solid ${palette.border}`,
        boxShadow: glow ? `0 0 30px rgba(212,165,116,0.25), 0 12px 40px rgba(0,0,0,0.5)` : '0 8px 24px rgba(0,0,0,0.35)',
        transform: `rotate(${rotate}deg)`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        position: 'relative', overflow: 'hidden', ...style,
      }}>
        <svg width="60%" height="60%" viewBox="0 0 100 100" fill="none" stroke="#D4A574" strokeWidth="0.6" opacity="0.7">
          <circle cx="50" cy="50" r="36"/>
          <circle cx="50" cy="50" r="28" strokeDasharray="2 3"/>
          <circle cx="50" cy="50" r="18"/>
          <circle cx="50" cy="50" r="4" fill="#D4A574"/>
          {[0,1,2,3,4,5,6,7].map(i => (
            <line key={i} x1={50 + 18*Math.cos(i*Math.PI/4)} y1={50 + 18*Math.sin(i*Math.PI/4)} x2={50 + 36*Math.cos(i*Math.PI/4)} y2={50 + 36*Math.sin(i*Math.PI/4)}/>
          ))}
        </svg>
        <div style={{ position: 'absolute', inset: 6 * ratio, border: `0.5px solid rgba(212,165,116,0.3)`, borderRadius: 8 * ratio, pointerEvents: 'none' }}/>
      </div>
    );
  }

  return (
    <div style={{
      width, height: h, borderRadius: 12 * ratio,
      background: palette.bg,
      border: `1px solid ${palette.border}`,
      boxShadow: glow
        ? `0 0 28px rgba(212,165,116,0.35), 0 18px 50px rgba(0,0,0,0.55)`
        : '0 8px 24px rgba(0,0,0,0.35)',
      transform: `rotate(${rotate}deg)`,
      padding: `${14 * ratio}px ${12 * ratio}px`,
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      color: palette.text,
      position: 'relative', overflow: 'hidden',
      fontFamily: 'Fraunces, serif',
      ...style,
    }}>
      <div style={{ position: 'absolute', inset: 5 * ratio, border: `0.5px solid ${palette.border}`, opacity: 0.35, borderRadius: 8 * ratio, pointerEvents: 'none' }}/>
      <div style={{
        fontFamily: 'JetBrains Mono, monospace', fontSize: 10 * ratio, letterSpacing: 2,
        opacity: 0.7, alignSelf: 'stretch', textAlign: 'center', marginTop: 2 * ratio,
      }}>{roman}</div>
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <CardSymbol kind={kind} color={palette.border} size={Math.round(width * 0.46)}/>
      </div>
      <div style={{
        fontFamily: 'Fraunces, serif', fontSize: 13 * ratio, letterSpacing: 0.4,
        fontStyle: 'italic', textAlign: 'center', marginBottom: 2 * ratio,
      }}>{name}</div>
    </div>
  );
};

// Subtle starfield SVG used as background.
const Starfield = ({ density = 60, withConstellation = true, color = '#F8F4E3', style = {} }) => {
  // Deterministic pseudo-random for stable layout
  const rand = (i) => {
    const x = Math.sin(i * 9999.1234) * 10000;
    return x - Math.floor(x);
  };
  const stars = Array.from({ length: density }, (_, i) => ({
    x: rand(i + 1) * 100,
    y: rand(i + 200) * 100,
    r: 0.3 + rand(i + 400) * 1.4,
    o: 0.2 + rand(i + 600) * 0.7,
  }));
  // Constellation: connect a few stars
  const lines = withConstellation ? [
    [10, 25], [25, 32], [32, 41], [41, 50],
    [3, 18], [18, 27],
  ] : [];
  return (
    <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', ...style }}>
      {lines.map(([a, b], i) => stars[a] && stars[b] && (
        <line key={i} x1={stars[a].x} y1={stars[a].y} x2={stars[b].x} y2={stars[b].y}
          stroke={color} strokeWidth="0.08" opacity="0.4" strokeDasharray="0.3 0.5"/>
      ))}
      {stars.map((s, i) => (
        <circle key={i} cx={s.x} cy={s.y} r={s.r / 4} fill={color} opacity={s.o}/>
      ))}
    </svg>
  );
};

// Dot grid pattern background
const DotGrid = ({ color = 'rgba(248,244,227,0.06)', size = 24, dot = 1, style = {} }) => (
  <div style={{
    position: 'absolute', inset: 0,
    backgroundImage: `radial-gradient(circle, ${color} ${dot}px, transparent ${dot}px)`,
    backgroundSize: `${size}px ${size}px`,
    pointerEvents: 'none',
    ...style,
  }}/>
);

Object.assign(window, { TarotCard, CardSymbol, Starfield, DotGrid });