// variations-e.jsx — Converged direction (round 4): #9 deco layout + #2 red/seal
// motif + #10 ensō circle-cat. Two colourways.
// Exports to window: VermilionV15, CinnabarV15b.

(function () {
  if (typeof document === 'undefined' || document.getElementById('mk-var-e-styles')) return;
  const s = document.createElement('style');
  s.id = 'mk-var-e-styles';
  s.textContent = `
  .v15-card{transition:transform .5s cubic-bezier(.2,.8,.25,1);}
  .v15-card:hover{transform:translateY(-8px);}
  .v15-seal{transition:transform .5s cubic-bezier(.2,.8,.25,1);}
  .v15-card:hover .v15-seal{transform:rotate(6deg) scale(1.08);}
  `;
  document.head.appendChild(s);
})();

// A carved seal / chop. chars: array of 1 or 4 CJK glyphs.
function Seal({ chars = ['貓', '麻', '將', '社'], fill, ink, size = 50, rotate = -5, style = {} }) {
  const four = chars.length >= 4;
  return (
    <div style={{ width: size, height: size, background: fill, borderRadius: Math.round(size * 0.12),
      boxShadow: `inset 0 0 0 1.5px ${ink}`, transform: `rotate(${rotate}deg)`,
      display: four ? 'grid' : 'flex', gridTemplateColumns: four ? '1fr 1fr' : undefined,
      alignItems: 'center', justifyItems: 'center', justifyContent: 'center',
      padding: Math.round(size * 0.1), ...style }}>
      {(four ? chars.slice(0, 4) : [chars[0]]).map((c, i) => (
        <span key={i} style={{ fontFamily: '"Noto Serif SC", serif', fontWeight: 700, color: ink,
          fontSize: four ? Math.round(size * 0.32) : Math.round(size * 0.5), lineHeight: 1 }}>{c}</span>
      ))}
    </div>
  );
}

function ParlourSunburst({ color, op = 0.4 }) {
  return (
    <svg viewBox="0 0 200 200" style={{ position: 'absolute', top: '50%', left: '50%', width: 460, height: 460, transform: 'translate(-50%,-50%)', opacity: op, pointerEvents: 'none' }}>
      {Array.from({ length: 48 }).map((_, i) => (
        <line key={i} x1="100" y1="100" x2="100" y2="4" stroke={color} strokeWidth={i % 2 ? 0.5 : 1.2} transform={`rotate(${i * 7.5} 100 100)`} />
      ))}
    </svg>
  );
}

function ParlourEnso({ color }) {
  return (
    <svg viewBox="0 0 400 400" style={{ position: 'absolute', top: '50%', left: '50%', width: 360, height: 360, transform: 'translate(-50%,-50%)', pointerEvents: 'none' }}>
      <path d="M252 64 C150 26 56 108 56 212 C56 322 162 374 244 352 C326 330 366 248 334 172 C314 126 270 104 233 114"
        fill="none" stroke={color} strokeWidth="20" strokeLinecap="round" opacity="0.92" />
      <path d="M233 114 C224 116 216 120 210 126" fill="none" stroke={color} strokeWidth="6.5" strokeLinecap="round" opacity="0.55" />
    </svg>
  );
}

// Deco corner brackets around a region.
function DecoCorners({ color }) {
  return (
    <>
      {[['top', 'left'], ['top', 'right'], ['bottom', 'left'], ['bottom', 'right']].map(([v, h], i) => (
        <div key={i} style={{ position: 'absolute', [v]: 18, [h]: 18, width: 26, height: 26,
          [`border${v[0].toUpperCase() + v.slice(1)}`]: `2px solid ${color}`,
          [`border${h[0].toUpperCase() + h.slice(1)}`]: `2px solid ${color}`, opacity: 0.7 }} />
      ))}
    </>
  );
}

function ParlourHome({ bg, accent, soft, ensoColor, sealFill, sealInk, tileBody, tileInk, brandSubtle, titleFont, bodyFont, brackets = true }) {
  const tFont = titleFont || F.playfair;
  const bFont = bodyFont || F.jost;
  return (
    <div style={{ width: 1280, fontFamily: bFont, background: bg, color: accent, position: 'relative', overflow: 'hidden' }}>
      {brackets && <DecoCorners color={accent} />}
      {/* nav */}
      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', padding: '34px 64px 0' }}>
        <div style={{ display: 'flex', gap: 30, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: soft }}>
          <a className="v1-link" href="#" style={{ color: 'inherit' }}>Collection</a>
          <a className="v1-link" href="#" style={{ color: 'inherit' }}>The Parlour</a>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <Seal chars={['貓']} fill={sealFill} ink={sealInk} size={32} rotate={-6} />
          <div style={{ fontSize: 14, letterSpacing: '0.4em', fontWeight: 500, paddingLeft: '0.4em' }}>MAGICAL KITTEN</div>
        </div>
        <div style={{ display: 'flex', gap: 30, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', justifyContent: 'flex-end', color: soft }}>
          <a className="v1-link" href="#" style={{ color: 'inherit' }}>Bespoke</a>
          <a className="v1-link" href="#" style={{ color: 'inherit' }}>Bag · 0</a>
        </div>
      </div>

      {/* hero */}
      <div style={{ position: 'relative', textAlign: 'center', padding: '52px 64px 26px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16, color: accent, marginBottom: 22 }}>
          <span style={{ height: 1, width: 64, background: accent, opacity: 0.6 }} />
          <span style={{ fontSize: 11, letterSpacing: '0.4em', textTransform: 'uppercase', opacity: 0.85 }}>Est. 1924 · Reissued 2026</span>
          <span style={{ height: 1, width: 64, background: accent, opacity: 0.6 }} />
        </div>
        <div style={{ fontFamily: tFont, fontSize: 78, lineHeight: 1.04, fontWeight: 600 }}>The Vermilion Parlour</div>
        <div style={{ maxWidth: 460, margin: '20px auto 0', fontSize: 14.5, lineHeight: 1.8, color: soft }}>
          Mahjong in the grand manner — hand-painted, sealed and signed. The geometry of the age it first dazzled the world, in the colour of luck.
        </div>

        {/* centrepiece: ensō + cat */}
        <div style={{ position: 'relative', display: 'inline-block', marginTop: 40, padding: '36px 70px' }}>
          <ParlourEnso color={ensoColor} />
          <div style={{ position: 'relative', display: 'flex', alignItems: 'flex-end', justifyContent: 'center', gap: 14, height: 220 }}>
            <Tile suit="dragon" value="red" w={84} body={tileBody} ink={tileInk} tilt={-8} style={{ alignSelf: 'center' }} />
            <Tile suit="cat" value={1} w={132} body={tileBody} rainbow={!tileBody || tileBody === 'ivory'} ink={tileInk} />
            <Tile suit="bamboo" value={1} w={84} body={tileBody} ink={tileInk} tilt={8} style={{ alignSelf: 'center' }} />
          </div>
        </div>
      </div>

      {/* deco rule */}
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 18, padding: '6px 64px 46px' }}>
        <div style={{ flex: 1, height: 1, background: accent, opacity: 0.4 }} />
        <Seal chars={['福']} fill={sealFill} ink={sealInk} size={38} rotate={0} />
        <div style={{ flex: 1, height: 1, background: accent, opacity: 0.4 }} />
      </div>

      {/* trio of arched cards, each sealed */}
      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 30, padding: '0 70px 88px' }}>
        {[{ n: 'The Vermilion', s: 'House set · 144', t: { suit: 'dragon', value: 'red' }, seal: ['喜'] },
          { n: 'The Ivory', s: 'Classic suits', t: { suit: 'char', value: 5 }, seal: ['緣'] },
          { n: 'The Kitten', s: 'Signature edition', t: { suit: 'cat', value: 1, rainbow: true }, seal: ['樂'] }].map((c, i) => (
          <div key={i} className="v15-card" style={{ position: 'relative', textAlign: 'center' }}>
            <div style={{ border: `1.5px solid ${accent}`, borderRadius: '130px 130px 8px 8px', padding: '38px 24px 28px', background: brandSubtle ? 'rgba(0,0,0,0.02)' : 'rgba(255,255,255,0.05)' }}>
              <div style={{ height: 180, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Tile {...c.t} w={104} body={tileBody === 'ink' ? 'ink' : 'ivory'} ink={tileBody === 'ink' ? tileInk : undefined} />
              </div>
              <div style={{ width: 30, height: 1, background: accent, opacity: 0.5, margin: '14px auto' }} />
              <div style={{ fontFamily: tFont, fontSize: 23 }}>{c.n}</div>
              <div style={{ fontSize: 10.5, letterSpacing: '0.2em', textTransform: 'uppercase', color: soft, marginTop: 8 }}>{c.s}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Colourway A — bold red field, cream seals & cream brush ensō.
function VermilionV15() {
  return (
    <ParlourHome
      bg="linear-gradient(170deg,#a82318,#8a1c12)"
      accent="#f3ece0"
      soft="rgba(243,236,224,0.78)"
      ensoColor="#f3ece0"
      sealFill="#f3ece0"
      sealInk="#a82318"
      tileBody="ivory"
      tileInk="#23202b"
      brandSubtle={false}
    />
  );
}

// Colourway B — rice-paper field, vermilion seals & ink brush ensō.
function CinnabarV15b() {
  return (
    <ParlourHome
      bg="linear-gradient(170deg,#f3ece0,#ece0cc)"
      accent="#7a2117"
      soft="rgba(80,50,40,0.7)"
      ensoColor="#26231d"
      sealFill="#a82318"
      sealInk="#f3ece0"
      tileBody="ivory"
      tileInk="#23202b"
      brandSubtle={true}
    />
  );
}

Object.assign(window, { VermilionV15, CinnabarV15b, ParlourHome, Seal });