// TAROT STYLE A — RITUAL
// Full bleed, dark, sigil glowing through the field. Title overlay.
// Diseño base: 320×456 px (proporción 89×127 mm @ ~3.6×).
// Ahora responsive: acepta prop `width` y escala TODO proporcionalmente.

const TAROT_W = 320;
const TAROT_H = 456;
const TAROT_RATIO = TAROT_H / TAROT_W; // 1.425

function TarotRitualCard({ card, width = TAROT_W, lang = 'es' }) {
  const suitData = TAROT_SUITS[card.suit];
  const c = suitData.color;
  const isMajor = card.kind === 'major';
  const W = width;
  const H = width * TAROT_RATIO;
  const k = W / TAROT_W;
  const s = (v) => v * k;
  const fontBoost = W < 400 ? 1.18 : 1;
  const sf = (v) => v * k * fontBoost;

  // ─── Resolver textos según lang ──────────────────────────────────────
  const cardName       = lang === 'en' && card.nameEn       ? card.nameEn       : card.name;
  const cardDefinition = lang === 'en' && card.definitionEn ? card.definitionEn : card.definition;
  const cardPrinciple  = lang === 'en' && card.principleEn  ? card.principleEn  : card.principle;
  const suitEs   = lang === 'en' ? suitData.en       : suitData.es;
  const suitDom  = lang === 'en' ? suitData.domainEn : suitData.domain;
  const headerStr = isMajor
    ? (lang === 'en' ? 'ARCHETYPE · GOVERNING PRINCIPLE' : 'ARQUETIPO · PRINCIPIO RECTOR')
    : `${suitEs} · ${suitDom}`;

  const nameSize = cardName.length > 16 ? 17 : cardName.length > 12 ? 22 : 26;
  const nameBoost = W < 400 ? 1.05 : 1;

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

      {/* Header: suit + dominio */}
      <div style={{position:'absolute', top:s(22), left:s(18), right:s(18), textAlign:'center'}}>
        <div style={{fontSize:sf(11.5), letterSpacing:s(2.5), fontFamily:'"JetBrains Mono", monospace', color:c, opacity:0.9, fontWeight:600, lineHeight:1.3}}>
          {headerStr}
        </div>
      </div>

      {/* Sigil */}
      <div style={{position:'absolute', top:s(78), left:s(20), right:s(20), height:s(178)}}>
        <TarotSigil card={card} color={c} size={Math.round(s(300))}/>
      </div>

      {/* Nombre */}
      <div style={{position:'absolute', top:s(256), left:s(14), right:s(14), textAlign:'center'}}>
        <div style={{
          fontSize: s(nameSize) * nameBoost,
          fontWeight:900,
          letterSpacing: cardName.length > 16 ? s(0.3) : s(2),
          lineHeight:1, color:'#fff',
          textShadow:`0 0 ${s(18)}px ${c}aa, 0 0 ${s(4)}px #000`,
          fontFamily:'"Inter Tight", sans-serif',
          textTransform:'uppercase',
        }}>{cardName}</div>
      </div>

      {/* Definición */}
      <div style={{position:'absolute', top:s(308), left:s(20), right:s(20), fontSize:sf(13), lineHeight:1.35, color:'rgba(255,255,255,0.92)', fontFamily:'"Inter Tight", sans-serif', fontWeight:400}}>
        {cardDefinition}
      </div>

      {/* Principio — italic inferior */}
      <div style={{position:'absolute', bottom:s(18), left:s(20), right:s(20)}}>
        <div style={{height:1, background:`linear-gradient(90deg, transparent, ${c}, transparent)`, opacity:0.4, marginBottom:s(8)}}/>
        <div style={{fontSize:sf(14), fontStyle:'italic', fontFamily:'"Inter Tight", sans-serif', fontWeight:500, color:'#fff', lineHeight:1.3, textAlign:'center'}}>
          «{cardPrinciple}»
        </div>
      </div>
    </div>
  );
}

// Hook: ancho óptimo de carta según viewport.
// Desktop ≥1024px → 320 (default visual).
// Mobile/tablet → casi todo el ancho del viewport, máx 400 para no agigantar.
function useResponsiveCardWidth(defaultW = TAROT_W) {
  const [w, setW] = React.useState(() => {
    if (typeof window === 'undefined') return defaultW;
    const vw = window.innerWidth;
    if (vw >= 1024) return defaultW;
    // padding lateral del contenedor ≈ 28-32px en mobile
    return Math.min(400, Math.max(280, vw - 32));
  });
  React.useEffect(() => {
    const onResize = () => {
      const vw = window.innerWidth;
      if (vw >= 1024) setW(defaultW);
      else setW(Math.min(400, Math.max(280, vw - 32)));
    };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, [defaultW]);
  return w;
}

Object.assign(window, { TarotRitualCard, TAROT_W, TAROT_H, TAROT_RATIO, useResponsiveCardWidth });