// CATEGORIES — horizontal scrollable cards

function KBCategories() {
  const K = window.KB;
  const { ArrowRight } = window.KBIcon;

  // Tall visual cards — jp label + en + placeholder imagery drawn as abstract motif
  const categories = (window.KBCATEGORIES || []);

  return (
    <section style={{
      background: K.navy900,
      padding: '72px 0 56px',
      position: 'relative',
    }}>
      <div style={{ padding: '0 24px' }}>
        <SectionHeader
          kicker="CATEGORIES"
          title="幅広く、全て本気で。"
          note="金貨一枚から、数千万のロレックスまで。"
        />
      </div>

      {/* Scroll hint */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '28px 24px 14px',
      }}>
        <div style={{
          fontFamily: K.fontMono, fontSize: 9.5,
          letterSpacing: '0.2em', color: K.inkMute,
        }}>SWIPE →</div>
        <div style={{
          display: 'flex', gap: 4,
          fontFamily: K.fontMono, fontSize: 9.5,
          color: K.goldLight, letterSpacing: '0.1em',
        }}>
          <span>01</span>
          <span style={{ color: K.inkMute }}>/</span>
          <span style={{ color: K.inkMute }}>{String(categories.length).padStart(2,'0')}</span>
        </div>
      </div>

      {/* Horizontal scroll */}
      <div style={{
        display: 'flex', gap: 12, overflowX: 'auto',
        padding: '0 24px 24px',
        scrollSnapType: 'x mandatory',
        WebkitOverflowScrolling: 'touch',
      }}>
        {categories.map((c, i) => (
          <CategoryCard key={c.en} c={c} i={i} />
        ))}
      </div>

      {/* Bottom strip chips — clickable popups */}
      <div style={{
        display: 'flex', flexWrap: 'wrap', gap: 6,
        padding: '0 24px', marginTop: 8,
      }}>
        {[
          { ja: '切手', en: 'Stamp' },
          { ja: '骨董品', en: 'Antique' },
          { ja: '洋酒', en: 'Spirits' },
          { ja: '記念品', en: 'Collectible' },
          { ja: '楽器', en: 'Instrument' },
          { ja: '贈答品', en: 'Gift' },
          { ja: '食器', en: 'Tableware' },
        ].map(({ ja, en }) => (
          <button key={ja} type="button"
            onClick={() => window.__openCategory && window.__openCategory(en)}
            style={{
              padding: '6px 12px',
              border: `0.5px solid ${K.gold}30`,
              fontFamily: K.fontSans, fontSize: 11,
              color: K.inkDim, background: 'transparent',
              cursor: 'pointer',
            }}>{ja}</button>
        ))}
      </div>
    </section>
  );
}

function CategoryCard({ c, i }) {
  const K = window.KB;
  const open = () => window.__openCategory && window.__openCategory(c.en);
  return (
    <article
      onClick={open}
      onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(); } }}
      tabIndex={0}
      role="button"
      aria-label={`${c.ja}の詳細を見る`}
      style={{
      flexShrink: 0,
      width: 180, height: 260,
      scrollSnapAlign: 'start',
      cursor: 'pointer',
      background: `linear-gradient(160deg, rgba(201,169,97,0.07) 0%, rgba(10,15,28,0.72) 60%, rgba(5,8,16,0.88) 100%)`,
      backdropFilter: 'blur(14px) saturate(1.4)',
      WebkitBackdropFilter: 'blur(14px) saturate(1.4)',
      border: `1px solid rgba(201,169,97,0.28)`,
      boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 32px rgba(0,0,0,0.45)',
      borderRadius: 10,
      position: 'relative',
      overflow: 'hidden',
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      padding: 16,
      transition: 'transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s',
    }}
    onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px) scale(1.02)'; e.currentTarget.style.boxShadow = `inset 0 1px 0 rgba(255,255,255,0.1), 0 20px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(201,169,97,0.4)`; }}
    onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = 'inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 32px rgba(0,0,0,0.45)'; }}
    >
      {/* Motif / placeholder visual */}
      <CategoryMotif kind={c.motif} color={c.accent} />

      {/* Index number */}
      <div style={{
        position: 'relative', zIndex: 2,
        fontFamily: K.fontLatin, fontWeight: 400, fontStyle: 'italic',
        fontSize: 22, color: c.accent, letterSpacing: '0.1em',
      }}>
        {String(i+1).padStart(2, '0')}
      </div>

      {/* Label */}
      <div style={{ position: 'relative', zIndex: 2 }}>
        <div style={{
          fontFamily: K.fontMono, fontSize: 9,
          letterSpacing: '0.2em', color: c.accent, textTransform: 'uppercase',
        }}>{c.en}</div>
        <div style={{
          marginTop: 6,
          fontFamily: K.fontSerif, fontWeight: 700, fontSize: 20,
          color: K.ink, letterSpacing: '0.04em', lineHeight: 1.2,
        }}>{c.ja}</div>
        <div style={{
          marginTop: 6,
          fontFamily: K.fontSans, fontSize: 10.5,
          color: K.inkMute, letterSpacing: '0.02em',
        }}>{c.sub}</div>
      </div>
    </article>
  );
}

// Abstract placeholder motifs — geometric, not representational
function CategoryMotif({ kind, color }) {
  const K = window.KB;
  const common = {
    position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 1,
    opacity: 0.9,
  };
  // Each motif is a differentiable geometric composition
  const motifs = {
    watch: (
      <svg viewBox="0 0 180 260" style={common}>
        <circle cx="90" cy="90" r="42" fill="none" stroke={color} strokeWidth="1.5" opacity="0.5"/>
        <circle cx="90" cy="90" r="28" fill="none" stroke={color} strokeWidth="0.8" opacity="0.3"/>
        <line x1="90" y1="70" x2="90" y2="90" stroke={color} strokeWidth="1.5"/>
        <line x1="90" y1="90" x2="105" y2="95" stroke={color} strokeWidth="1.5"/>
        <rect x="80" y="40" width="20" height="10" fill="none" stroke={color} strokeWidth="1" opacity="0.4"/>
        <rect x="80" y="130" width="20" height="10" fill="none" stroke={color} strokeWidth="1" opacity="0.4"/>
      </svg>
    ),
    watch2: (
      <svg viewBox="0 0 180 260" style={common}>
        <rect x="60" y="50" width="60" height="80" rx="8" fill="none" stroke={color} strokeWidth="1.5" opacity="0.5"/>
        <rect x="70" y="60" width="40" height="60" fill="none" stroke={color} strokeWidth="0.8" opacity="0.3"/>
        <circle cx="90" cy="90" r="3" fill={color}/>
      </svg>
    ),
    bar: (
      <svg viewBox="0 0 180 260" style={common}>
        <polygon points="45,70 135,70 145,110 35,110" fill="none" stroke={color} strokeWidth="1.5" opacity="0.5"/>
        <polygon points="50,80 130,80 138,105 42,105" fill="none" stroke={color} strokeWidth="0.8" opacity="0.3"/>
        <text x="90" y="97" textAnchor="middle" fontFamily={K.fontLatin} fontSize="10" fontStyle="italic" fill={color} opacity="0.6">999.9</text>
      </svg>
    ),
    gem: (
      <svg viewBox="0 0 180 260" style={common}>
        <polygon points="90,45 125,75 110,115 70,115 55,75" fill="none" stroke={color} strokeWidth="1.5" opacity="0.5"/>
        <line x1="55" y1="75" x2="125" y2="75" stroke={color} strokeWidth="0.8" opacity="0.3"/>
        <line x1="90" y1="45" x2="90" y2="115" stroke={color} strokeWidth="0.8" opacity="0.3"/>
        <line x1="70" y1="115" x2="125" y2="75" stroke={color} strokeWidth="0.5" opacity="0.25"/>
        <line x1="110" y1="115" x2="55" y2="75" stroke={color} strokeWidth="0.5" opacity="0.25"/>
      </svg>
    ),
    bag: (
      <svg viewBox="0 0 180 260" style={common}>
        <path d="M55 80 Q55 60 75 60 L105 60 Q125 60 125 80 L125 130 L55 130 Z" fill="none" stroke={color} strokeWidth="1.5" opacity="0.5"/>
        <path d="M72 75 Q72 55 90 55 Q108 55 108 75" fill="none" stroke={color} strokeWidth="1" opacity="0.4"/>
        <circle cx="90" cy="100" r="4" fill="none" stroke={color} strokeWidth="1" opacity="0.5"/>
      </svg>
    ),
    cam: (
      <svg viewBox="0 0 180 260" style={common}>
        <rect x="45" y="70" width="90" height="55" rx="4" fill="none" stroke={color} strokeWidth="1.5" opacity="0.5"/>
        <circle cx="90" cy="97" r="17" fill="none" stroke={color} strokeWidth="1.2" opacity="0.5"/>
        <circle cx="90" cy="97" r="9" fill="none" stroke={color} strokeWidth="0.8" opacity="0.3"/>
        <rect x="110" y="62" width="18" height="10" fill="none" stroke={color} strokeWidth="1" opacity="0.4"/>
      </svg>
    ),
    card: (
      <svg viewBox="0 0 180 260" style={common}>
        <rect x="50" y="70" width="80" height="50" rx="3" fill="none" stroke={color} strokeWidth="1.5" opacity="0.5" transform="rotate(-4 90 95)"/>
        <rect x="55" y="80" width="35" height="4" fill={color} opacity="0.3" transform="rotate(-4 90 95)"/>
        <rect x="55" y="90" width="55" height="2" fill={color} opacity="0.25" transform="rotate(-4 90 95)"/>
      </svg>
    ),
    coin: (
      <svg viewBox="0 0 180 260" style={common}>
        <circle cx="78" cy="100" r="28" fill="none" stroke={color} strokeWidth="1.5" opacity="0.5"/>
        <circle cx="78" cy="100" r="20" fill="none" stroke={color} strokeWidth="0.5" opacity="0.3"/>
        <circle cx="108" cy="80" r="22" fill="none" stroke={color} strokeWidth="1.2" opacity="0.4"/>
        <text x="78" y="105" textAnchor="middle" fontFamily={K.fontSerif} fontSize="14" fontWeight="700" fill={color} opacity="0.6">圓</text>
      </svg>
    ),
    kimono: (
      <svg viewBox="0 0 180 260" style={common}>
        <path d="M90 50 L60 80 L60 140 L90 135 L120 140 L120 80 Z" fill="none" stroke={color} strokeWidth="1.5" opacity="0.5"/>
        <line x1="90" y1="50" x2="90" y2="135" stroke={color} strokeWidth="1" opacity="0.4"/>
        <path d="M70 100 Q80 95 90 100" fill="none" stroke={color} strokeWidth="0.6" opacity="0.3"/>
        <path d="M90 100 Q100 95 110 100" fill="none" stroke={color} strokeWidth="0.6" opacity="0.3"/>
      </svg>
    ),
  };
  return motifs[kind] || null;
}

Object.assign(window, { KBCategories });