// variations-a.jsx — Homepage directions 1–3 for MagicalKitten.
// Each is a self-contained hero+collection composition sized for a 1280-wide
// artboard. Tile/TileRow/Mat come from tiles.jsx (on window).
// Exports to window: GalleryV1, AtelierV2, MidnightV3.

const F = {
  jost: '"Jost", system-ui, sans-serif',
  cormorant: '"Cormorant Garamond", Georgia, serif',
  playfair: '"Playfair Display", Georgia, serif',
  grotesk: '"Space Grotesk", system-ui, sans-serif',
  quicksand: '"Quicksand", system-ui, sans-serif',
  noto: '"Noto Serif SC", serif',
};

// shared one-time CSS for hover/motion bits (prefixed, no collisions)
(function () {
  if (typeof document === 'undefined' || document.getElementById('mk-var-a-styles')) return;
  const s = document.createElement('style');
  s.id = 'mk-var-a-styles';
  s.textContent = `
  .v1-link{position:relative;color:inherit;text-decoration:none;padding-bottom:2px;}
  .v1-link::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:#1a1a1a;transition:right .35s cubic-bezier(.2,.8,.2,1);}
  .v1-link:hover::after{right:0;}
  .v1-card{transition:transform .5s cubic-bezier(.2,.8,.25,1);}
  .v1-card:hover{transform:translateY(-8px);}
  .v2-seal{transition:transform .6s cubic-bezier(.2,.8,.25,1);}
  .v2-card:hover .v2-seal{transform:rotate(8deg) scale(1.06);}
  .v3-glow{transition:filter .5s, transform .5s;}
  .v3-card:hover .v3-glow{filter:drop-shadow(0 0 24px rgba(201,162,75,.55));transform:translateY(-6px);}
  .mk-btn{cursor:pointer;border:none;font:inherit;transition:all .3s cubic-bezier(.2,.8,.2,1);}
  `;
  document.head.appendChild(s);
})();

// ───────────────────────── 1 · THE GALLERY ─────────────────────────
function GalleryV1() {
  const ink = '#1a1a1a';
  const collection = [
    { name: 'Lotus Circles', sub: 'Full set · 144 tiles', price: '$2,400', tiles: [{ suit: 'dot', value: 5 }] },
    { name: 'The Sparrow', sub: 'Bamboo suit study', price: '$2,400', tiles: [{ suit: 'bamboo', value: 1 }] },
    { name: 'Magical Kitten', sub: 'Signature cat tile', price: '$2,800', tiles: [{ suit: 'cat', value: 1, rainbow: true }] },
  ];
  return (
    <div style={{ background: '#ffffff', color: ink, fontFamily: F.jost, width: 1280 }}>
      {/* nav */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', padding: '34px 64px 0' }}>
        <div style={{ display: 'flex', gap: 30, fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
          <a className="v1-link" href="#">Tiles</a><a className="v1-link" href="#">Mats</a><a className="v1-link" href="#">Sets</a>
        </div>
        <div style={{ textAlign: 'center', fontSize: 16, letterSpacing: '0.42em', fontWeight: 500, paddingLeft: '0.42em' }}>MAGICAL&nbsp;KITTEN</div>
        <div style={{ display: 'flex', gap: 30, justifyContent: 'flex-end', fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
          <a className="v1-link" href="#">Atelier</a><a className="v1-link" href="#">Search</a><a className="v1-link" href="#">Bag (0)</a>
        </div>
      </div>
      <div style={{ height: 1, background: '#ececec', margin: '34px 64px 0' }} />

      {/* hero */}
      <div style={{ textAlign: 'center', padding: '110px 64px 40px' }}>
        <div style={{ fontSize: 11, letterSpacing: '0.34em', textTransform: 'uppercase', color: '#9a9389', marginBottom: 40 }}>Est. 2026 — Hand-painted mahjong</div>
        <div style={{ fontFamily: F.cormorant, fontSize: 76, lineHeight: 1.04, fontWeight: 400, letterSpacing: '-0.01em' }}>
          Quiet games,<br /><span style={{ fontStyle: 'italic' }}>beautifully</span> made.
        </div>
        <div style={{ maxWidth: 440, margin: '34px auto 0', fontSize: 15, lineHeight: 1.7, color: '#6b655c' }}>
          Each set is painted by hand and cast in a small atelier. No two are alike — the way heirlooms should be.
        </div>
      </div>

      {/* floating tiles, museum label */}
      <div style={{ display: 'flex', justifyContent: 'center', gap: 38, padding: '40px 0 26px', alignItems: 'flex-end' }}>
        <Tile suit="char" value={5} w={120} tilt={-7} />
        <Tile suit="dot" value={1} w={150} />
        <Tile suit="cat" value={1} w={120} rainbow tilt={7} />
      </div>
      <div style={{ textAlign: 'center', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#9a9389', paddingBottom: 96 }}>
        Plate I — “Five Thousand, First Dot &amp; The Kitten” · porcelain &amp; resin
      </div>

      {/* collection */}
      <div style={{ padding: '0 64px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderTop: '1px solid #1a1a1a', paddingTop: 22, marginBottom: 56 }}>
          <div style={{ fontFamily: F.cormorant, fontSize: 30 }}>The Collection</div>
          <a className="v1-link" href="#" style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase' }}>View all 12 →</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 1, background: '#ececec', border: '1px solid #ececec' }}>
          {collection.map((c, i) => (
            <div key={i} className="v1-card" style={{ background: '#fff', padding: '54px 40px 40px', textAlign: 'center' }}>
              <div style={{ height: 220, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Tile {...c.tiles[0]} w={120} />
              </div>
              <div style={{ fontFamily: F.cormorant, fontSize: 25, marginTop: 30 }}>{c.name}</div>
              <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#9a9389', margin: '8px 0 16px' }}>{c.sub}</div>
              <div style={{ fontSize: 14, letterSpacing: '0.05em' }}>{c.price}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ height: 90 }} />
    </div>
  );
}

// ───────────────────────── 2 · THE ATELIER ─────────────────────────
function AtelierV2() {
  const paper = '#f1e9da';
  const ink = '#211c17';
  const cinnabar = '#b4452f';
  return (
    <div style={{ background: paper, color: ink, fontFamily: F.jost, width: 1280, position: 'relative' }}>
      {/* subtle paper texture */}
      <div style={{ position: 'absolute', inset: 0, opacity: 0.5, pointerEvents: 'none',
        backgroundImage: 'radial-gradient(rgba(160,140,110,0.10) 1px, transparent 1px)', backgroundSize: '4px 4px' }} />
      {/* nav */}
      <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '32px 60px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ width: 34, height: 34, background: cinnabar, color: '#f1e9da', borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: F.noto, fontSize: 20, fontWeight: 700 }}>貓</div>
          <div style={{ fontSize: 15, letterSpacing: '0.3em', fontWeight: 500, paddingLeft: '0.3em' }}>MAGICAL KITTEN</div>
        </div>
        <div style={{ display: 'flex', gap: 36, fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#5c534644' }}>
          <a className="v1-link" href="#" style={{ color: '#5c5346' }}>Sets</a>
          <a className="v1-link" href="#" style={{ color: '#5c5346' }}>Tiles</a>
          <a className="v1-link" href="#" style={{ color: '#5c5346' }}>Mats</a>
          <a className="v1-link" href="#" style={{ color: '#5c5346' }}>Our Atelier</a>
          <a className="v1-link" href="#" style={{ color: cinnabar }}>Bag · 0</a>
        </div>
      </div>
      <div style={{ height: 1, background: '#d8ccb6', margin: '0 60px' }} />

      {/* hero — asymmetric, vertical CJK accent + fanned hand */}
      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 30, padding: '78px 60px 70px', alignItems: 'center' }}>
        <div style={{ position: 'relative' }}>
          <div style={{ position: 'absolute', top: -16, left: -2, fontFamily: F.noto, writingMode: 'vertical-rl', fontSize: 19, letterSpacing: '0.3em', color: '#b9a986' }}>手繪麻將・一器一畫</div>
          <div style={{ paddingLeft: 54 }}>
            <div style={{ fontFamily: F.cormorant, fontSize: 68, lineHeight: 1.08, fontWeight: 500 }}>
              The art of the<br /><span style={{ fontStyle: 'italic', color: cinnabar }}>well-played</span><br />afternoon.
            </div>
            <p style={{ maxWidth: 400, fontSize: 15, lineHeight: 1.8, color: '#5c5346', margin: '34px 0 36px' }}>
              Heirloom mahjong, painted by a single artist and finished in our atelier. Rooted in tradition, made for your table.
            </p>
            <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
              <button className="mk-btn" style={{ background: ink, color: paper, padding: '15px 30px', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase' }}>Explore sets</button>
              <a className="v1-link" href="#" style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase' }}>The making-of →</a>
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <TileRow w={108} fan={9} tiles={[{ suit: 'char', value: 1 }, { suit: 'bamboo', value: 1 }, { suit: 'dragon', value: 'red' }, { suit: 'cat', value: 1, rainbow: true }, { suit: 'dot', value: 8 }]} />
        </div>
      </div>

      {/* seal divider */}
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 20, padding: '0 60px 56px' }}>
        <div style={{ flex: 1, height: 1, background: '#d8ccb6' }} />
        <div style={{ width: 40, height: 40, border: `2px solid ${cinnabar}`, color: cinnabar, borderRadius: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: F.noto, fontWeight: 700, fontSize: 22 }}>福</div>
        <div style={{ flex: 1, height: 1, background: '#d8ccb6' }} />
      </div>

      {/* three signature sets */}
      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 28, padding: '0 60px 90px' }}>
        {[{ n: 'Cinnabar', s: 'The Dragons', t: { suit: 'dragon', value: 'red' } },
          { n: 'Jade Garden', s: 'Bamboo & flowers', t: { suit: 'bamboo', value: 6 } },
          { n: 'Lucky Cat', s: 'Signature edition', t: { suit: 'cat', value: 1, rainbow: true } }].map((c, i) => (
          <div key={i} className="v2-card" style={{ background: '#f7f1e6', border: '1px solid #e2d6c0', borderRadius: 6, padding: '40px 34px', textAlign: 'center' }}>
            <div className="v2-seal" style={{ height: 180, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Tile {...c.t} w={110} />
            </div>
            <div style={{ fontFamily: F.cormorant, fontSize: 26, marginTop: 18 }}>{c.n}</div>
            <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#9a8e76', marginTop: 6 }}>{c.s}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ───────────────────────── 3 · MIDNIGHT ─────────────────────────
function MidnightV3() {
  const bg = '#100f15';
  const gold = '#c9a24b';
  const cream = '#efe9dc';
  return (
    <div style={{ background: bg, color: cream, fontFamily: F.grotesk, width: 1280, position: 'relative', overflow: 'hidden' }}>
      {/* radial spotlight */}
      <div style={{ position: 'absolute', top: -160, left: '50%', transform: 'translateX(-50%)', width: 900, height: 700,
        background: 'radial-gradient(ellipse at center, rgba(201,162,75,0.16), transparent 62%)', pointerEvents: 'none' }} />
      {/* nav */}
      <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '32px 60px' }}>
        <div style={{ fontFamily: F.playfair, fontSize: 22, letterSpacing: '0.04em' }}>Magical Kitten</div>
        <div style={{ display: 'flex', gap: 34, fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(239,233,220,0.6)' }}>
          <a className="v1-link" href="#" style={{ color: 'inherit' }}>Collection</a>
          <a className="v1-link" href="#" style={{ color: 'inherit' }}>Bespoke</a>
          <a className="v1-link" href="#" style={{ color: 'inherit' }}>Atelier</a>
          <a href="#" style={{ color: gold, textDecoration: 'none' }}>Bag · 0</a>
        </div>
      </div>
      <div style={{ height: 1, background: 'linear-gradient(90deg,transparent,rgba(201,162,75,0.4),transparent)', margin: '0 60px' }} />

      {/* hero */}
      <div style={{ position: 'relative', textAlign: 'center', padding: '76px 60px 30px' }}>
        <div style={{ fontSize: 11, letterSpacing: '0.4em', textTransform: 'uppercase', color: gold, marginBottom: 26 }}>The Obsidian Collection</div>
        <div style={{ fontFamily: F.playfair, fontSize: 82, lineHeight: 1.05, fontWeight: 500 }}>
          Played by candlelight,<br /><span style={{ fontStyle: 'italic', color: gold }}>kept</span> for generations.
        </div>
      </div>

      {/* spotlit hero tiles */}
      <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'flex-end', gap: 30, padding: '46px 0 34px' }}>
        <Tile suit="dragon" value="red" w={120} body="ink" ink="#e9c0b6" tilt={-8} />
        <div className="v3-glow" style={{ filter: 'drop-shadow(0 0 30px rgba(201,162,75,0.4))' }}>
          <Tile suit="cat" value={1} w={160} body="ink" rainbow />
        </div>
        <Tile suit="dot" value={9} w={120} body="ink" ink="#e9c0b6" tilt={8} />
      </div>
      <div style={{ position: 'relative', textAlign: 'center', fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(239,233,220,0.45)', paddingBottom: 80 }}>
        Hand-gilded · obsidian resin · 22k accents
      </div>

      {/* product row */}
      <div style={{ position: 'relative', padding: '0 60px 86px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 40 }}>
          <div style={{ fontFamily: F.playfair, fontSize: 30 }}>Featured pieces</div>
          <a href="#" style={{ color: gold, fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', textDecoration: 'none' }}>The full collection →</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 22 }}>
          {[{ n: 'Ruby Dragon Set', p: '$3,600', t: { suit: 'dragon', value: 'red' } },
            { n: 'Sapphire Circles', p: '$3,200', t: { suit: 'dot', value: 7 } },
            { n: 'The Golden Cat', p: '$4,200', t: { suit: 'cat', value: 1, rainbow: true } }].map((c, i) => (
            <div key={i} className="v3-card" style={{ background: 'linear-gradient(180deg,#1b1a23,#141320)', border: '1px solid rgba(201,162,75,0.22)', borderRadius: 8, padding: '40px 30px', textAlign: 'center' }}>
              <div className="v3-glow" style={{ height: 190, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Tile {...c.t} w={108} body="ink" ink="#e9c0b6" />
              </div>
              <div style={{ fontFamily: F.playfair, fontSize: 23, marginTop: 20 }}>{c.n}</div>
              <div style={{ fontSize: 13, letterSpacing: '0.1em', color: gold, marginTop: 10 }}>{c.p}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { GalleryV1, AtelierV2, MidnightV3 });