// TAROT CARD BACK — Mandala de la cuaternidad
// Misma proporción que TarotRitualCard (320×456).
// Responsive: acepta prop `width` y escala TODO proporcionalmente.

function TarotCardBack({ tone = 'gold', width = 320, lang = 'es' }) {
  const topLabel    = lang === 'en' ? 'TAROT · COMPLEX THINKING' : 'TAROT · PENSAMIENTO COMPLEJO';
  const bottomLabel = lang === 'en' ? '78 CARDS · COMPLETE DECK'  : '78 CARTAS · MAZO COMPLETO';
  const domainsLabel = lang === 'en'
    ? 'CHAOS · INTERACTION · ORDER · ORGANIZATION'
    : 'CAOS · INTERACCIÓN · ORDEN · ORGANIZACIÓN';
  const W = width;
  const H = width * 1.425;
  const k = W / 320;
  const s = (v) => v * k;

  const gold = '#d4af6a';
  const dim  = 'rgba(212,175,106,0.55)';
  const faint = 'rgba(212,175,106,0.18)';

  // Mandala SVG: trabaja en sus propias coords (viewBox 280×280) y escala via width attr.
  const mandalaSize = s(280);

  return (
    <div style={{
      width: W, height: H,
      background: '#000',
      border: `1px solid ${gold}55`,
      position: 'relative',
      boxSizing: 'border-box',
      overflow: 'hidden',
      fontFamily: '"Inter Tight", sans-serif',
      color: gold,
    }}>
      {/* vignette dorada */}
      <div style={{position:'absolute', inset:0, background:`radial-gradient(ellipse at 50% 50%, ${gold}15 0%, transparent 65%)`}}/>

      {/* marco interno con esquinas */}
      <div style={{position:'absolute', inset:s(14), border:`0.5px solid ${gold}44`}}/>
      {['nw','ne','sw','se'].map(corner => {
        const pos = {
          nw: {top:s(10), left:s(10), borderTop:`1px solid ${gold}`, borderLeft:`1px solid ${gold}`},
          ne: {top:s(10), right:s(10), borderTop:`1px solid ${gold}`, borderRight:`1px solid ${gold}`},
          sw: {bottom:s(10), left:s(10), borderBottom:`1px solid ${gold}`, borderLeft:`1px solid ${gold}`},
          se: {bottom:s(10), right:s(10), borderBottom:`1px solid ${gold}`, borderRight:`1px solid ${gold}`},
        }[corner];
        return <div key={corner} style={{position:'absolute', width:s(18), height:s(18), ...pos}}/>;
      })}

      {/* etiqueta superior */}
      <div style={{position:'absolute', top:s(30), left:s(6), right:s(6), textAlign:'center',
        fontSize:s(8), letterSpacing:s(3.5), color:dim, fontFamily:'"JetBrains Mono", monospace',
        whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>
        {topLabel}
      </div>

      {/* mandala central — viewBox 280×280, escalado con width attr */}
      <svg style={{position:'absolute', top:s(74), left:'50%', marginLeft:-mandalaSize/2, width:mandalaSize, height:mandalaSize}} viewBox="0 0 280 280">
        {/* anillos orbitales */}
        <circle cx="140" cy="140" r="128" fill="none" stroke={gold} strokeWidth="0.4" opacity="0.25"/>
        <circle cx="140" cy="140" r="110" fill="none" stroke={gold} strokeWidth="0.7"/>
        <circle cx="140" cy="140" r="80"  fill="none" stroke={gold} strokeWidth="0.4" opacity="0.35"/>
        <circle cx="140" cy="140" r="50"  fill="none" stroke={gold} strokeWidth="0.4" opacity="0.35"/>

        {/* radios cardinales (entre el sol y los glifos) */}
        {[ -90, 0, 90, 180 ].map(deg => {
          const a = deg * Math.PI/180;
          const x1 = 140 + Math.cos(a)*50;
          const y1 = 140 + Math.sin(a)*50;
          const x2 = 140 + Math.cos(a)*98;
          const y2 = 140 + Math.sin(a)*98;
          return <line key={deg} x1={x1} y1={y1} x2={x2} y2={y2} stroke={gold} strokeWidth="0.5" opacity="0.45"/>;
        })}

        {/* radios diagonales (más tenues, dan textura mandálica) */}
        {[ -45, 45, 135, -135 ].map(deg => {
          const a = deg * Math.PI/180;
          const x1 = 140 + Math.cos(a)*50;
          const y1 = 140 + Math.sin(a)*50;
          const x2 = 140 + Math.cos(a)*110;
          const y2 = 140 + Math.sin(a)*110;
          return <line key={deg} x1={x1} y1={y1} x2={x2} y2={y2} stroke={gold} strokeWidth="0.3" opacity="0.25" strokeDasharray="2 3"/>;
        })}

        {/* 4 glifos de dominio en posiciones cardinales del anillo 110 */}
        {[
          { deg:-90,  glyph:'◌', label:'CAOS' },
          { deg:  0,  glyph:'⇄', label:'INTERACCIÓN' },
          { deg: 90,  glyph:'⬡', label:'ORGANIZACIÓN' },
          { deg:180,  glyph:'⊞', label:'ORDEN' },
        ].map((p, i) => {
          const a = p.deg * Math.PI/180;
          const x = 140 + Math.cos(a)*110;
          const y = 140 + Math.sin(a)*110;
          return (
            <g key={i}>
              <circle cx={x} cy={y} r="14" fill="#000" stroke={gold} strokeWidth="1"/>
              <text x={x} y={y+5} textAnchor="middle" fontSize="15" fill={gold} fontFamily="serif">{p.glyph}</text>
            </g>
          );
        })}

        {/* arcos sutiles entre dominios (la rueda como conexión) */}
        {[0,1,2,3].map(i => {
          const a1 = (i*90 - 90) * Math.PI/180;
          const a2 = ((i+1)*90 - 90) * Math.PI/180;
          const r = 110;
          const x1 = 140 + Math.cos(a1)*r, y1 = 140 + Math.sin(a1)*r;
          const x2 = 140 + Math.cos(a2)*r, y2 = 140 + Math.sin(a2)*r;
          return <path key={i} d={`M ${x1} ${y1} A ${r} ${r} 0 0 1 ${x2} ${y2}`} fill="none" stroke={gold} strokeWidth="0.6" opacity="0.5"/>;
        })}

        {/* sol central (principio rector) */}
        <circle cx="140" cy="140" r="28" fill="#000" stroke={gold} strokeWidth="1.4"/>
        <circle cx="140" cy="140" r="22" fill="none" stroke={gold} strokeWidth="0.4" opacity="0.5"/>
        <text x="140" y="151" textAnchor="middle" fontSize="30" fill={gold} fontFamily="serif">☉</text>
        {/* rayos cortos del sol */}
        {Array.from({length:12}).map((_,k2)=>{
          const a = (k2/12)*Math.PI*2;
          const x1 = 140 + Math.cos(a)*30;
          const y1 = 140 + Math.sin(a)*30;
          const x2 = 140 + Math.cos(a)*36;
          const y2 = 140 + Math.sin(a)*36;
          return <line key={k2} x1={x1} y1={y1} x2={x2} y2={y2} stroke={gold} strokeWidth="0.7"/>;
        })}

        {/* puntos triádicos en el anillo exterior (textura, ritmo) */}
        {Array.from({length:24}).map((_,k2)=>{
          const a = (k2/24)*Math.PI*2 - Math.PI/2;
          if (k2 % 6 === 0) return null;
          const x = 140 + Math.cos(a)*128;
          const y = 140 + Math.sin(a)*128;
          return <circle key={k2} cx={x} cy={y} r={k2%3===0?1.2:0.6} fill={gold} opacity={0.6}/>;
        })}
      </svg>

      {/* etiqueta inferior */}
      <div style={{position:'absolute', bottom:s(36), left:s(6), right:s(6), textAlign:'center',
        fontSize:s(8), letterSpacing:s(4), color:dim, fontFamily:'"JetBrains Mono", monospace',
        whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>
        {bottomLabel}
      </div>
      <div style={{position:'absolute', bottom:s(20), left:s(6), right:s(6), textAlign:'center',
        fontSize:s(6.5), letterSpacing:s(1.5), color:faint, fontFamily:'"JetBrains Mono", monospace', fontStyle:'normal',
        whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>
        {domainsLabel}
      </div>
    </div>
  );
}

Object.assign(window, { TarotCardBack });