// Store — Invictus Body Jewelry (5 categorías como cards)
const STORE_CATEGORIES = [
  { id: 'tradicional', name: 'Tradicional', count: 12, desc: 'Anillos, barbells y aros de acero quirúrgico y titanio.',
    bg: 'radial-gradient(circle at 30% 30%, #3a2a0a, #0a0a0a 70%)' },
  { id: 'tops', name: 'Tops', count: 18, desc: 'Cabezas intercambiables: ópalo, Swarovski, zirconia.',
    bg: 'radial-gradient(circle at 70% 30%, #1a1a2a, #0a0a0a 70%)' },
  { id: 'clickers', name: 'Clickers', count: 14, desc: 'Cierre a presión, diseños segmentados y decorativos.',
    bg: 'radial-gradient(circle at 50% 30%, #2a0808, #0a0a0a 70%)' },
  { id: 'navel', name: 'Navel', count: 10, desc: 'Banana bells anatómicos para ombligo.',
    bg: 'radial-gradient(circle at 30% 50%, #2a1a0a, #0a0a0a 70%)' },
  { id: 'nipple', name: 'Nipple', count: 8, desc: 'Sets en par para piercing de nipple.',
    bg: 'radial-gradient(circle at 70% 50%, #1a0a1a, #0a0a0a 70%)' },
];

function CategoryGlyph({ id }) {
  if (id === 'tradicional') return (
    <svg viewBox="0 0 100 100" width="64" height="64">
      <circle cx="50" cy="50" r="28" fill="none" stroke="#C9A84C" strokeWidth="3"/>
      <circle cx="50" cy="22" r="3" fill="#C9A84C"/>
    </svg>
  );
  if (id === 'tops') return (
    <svg viewBox="0 0 100 100" width="64" height="64">
      <circle cx="50" cy="50" r="14" fill="#F5F0EB"/>
      <circle cx="50" cy="50" r="22" fill="none" stroke="#F5F0EB" strokeWidth="1" opacity="0.3"/>
    </svg>
  );
  if (id === 'clickers') return (
    <svg viewBox="0 0 100 100" width="64" height="64">
      <circle cx="50" cy="50" r="26" fill="none" stroke="#F5F0EB" strokeWidth="3"/>
      <rect x="46" y="20" width="8" height="6" fill="#F5F0EB"/>
    </svg>
  );
  if (id === 'navel') return (
    <svg viewBox="0 0 100 100" width="64" height="64">
      <path d="M50 25 Q60 40, 55 55 Q52 70, 50 80" stroke="#C9A84C" strokeWidth="3" fill="none"/>
      <circle cx="50" cy="22" r="4" fill="#C9A84C"/>
      <circle cx="50" cy="82" r="6" fill="#C9A84C"/>
    </svg>
  );
  return (
    <svg viewBox="0 0 100 100" width="64" height="64">
      <line x1="25" y1="50" x2="75" y2="50" stroke="#F5F0EB" strokeWidth="3"/>
      <circle cx="25" cy="50" r="5" fill="#F5F0EB"/>
      <circle cx="75" cy="50" r="5" fill="#F5F0EB"/>
    </svg>
  );
}

function CategoryCard({ c, i }) {
  return (
    <motion.a
      href={`Joyeria/${c.id}.html`}
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5, delay: i * 0.06 }}
      whileHover={{ y: -6 }}
      className="card corner-marks cat-card"
      style={{ position: 'relative', display: 'flex', flexDirection: 'column', textDecoration: 'none' }}
    >
      <span className="cm-a"/><span className="cm-b"/>
      <div style={{
        aspectRatio: '4/3', background: c.bg,
        display: 'grid', placeItems: 'center',
        borderBottom: '1px solid rgba(139,0,0,0.2)',
        position: 'relative',
      }}>
        <CategoryGlyph id={c.id}/>
        <div style={{
          position: 'absolute', top: 12, right: 12,
          padding: '6px 10px', background: 'rgba(10,10,10,0.7)',
          backdropFilter: 'blur(6px)',
          fontFamily: 'var(--font-accent)', fontSize: 10,
          letterSpacing: '0.25em', color: 'var(--white)',
        }}>{c.count} PIEZAS</div>
      </div>
      <div style={{ padding: 20, flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h4 style={{
          fontFamily: 'var(--font-display)', fontSize: 24,
          color: 'var(--white)', lineHeight: 1.1,
        }}>{c.name}</h4>
        <p style={{ color: 'var(--gray)', fontSize: 13, lineHeight: 1.5, marginTop: 8, flex: 1 }}>
          {c.desc}
        </p>
        <div style={{
          marginTop: 16, paddingTop: 14,
          borderTop: '1px solid rgba(139,0,0,0.2)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontFamily: 'var(--font-accent)', fontSize: 11,
          letterSpacing: '0.25em', color: 'var(--ink-red-bright)',
        }}>
          VER COLECCIÓN <Icon.Arrow/>
        </div>
      </div>
    </motion.a>
  );
}

function Store() {
  const [showAll, setShowAll] = useState(false);
  const isMobile = typeof window !== 'undefined' && window.matchMedia('(max-width: 700px)').matches;

  return (
    <section id="tienda">
      <Reveal><div className="label-tag">Joyería</div></Reveal>
      <Reveal delay={0.1}>
        <h2 style={{ fontSize: 'clamp(36px, 6vw, 84px)', marginTop: 16, lineHeight: 1 }}>
          Invictus <em style={{ color: 'var(--ink-red-bright)' }}>Body Jewelry.</em>
        </h2>
      </Reveal>
      <Reveal delay={0.15}>
        <p className="italic-lead" style={{ fontSize: 18, marginTop: 12, color: 'var(--white)', opacity: 0.7 }}>
          Joyería profesional para piercing — explora por categoría.
        </p>
      </Reveal>

      <div className="cat-grid">
        {STORE_CATEGORIES.map((c, i) => (
          <div key={c.id} className={i >= 2 ? 'cat-extra' : ''} style={{
            display: !showAll && i >= 2 && isMobile ? 'none' : 'block'
          }}>
            <CategoryCard c={c} i={i}/>
          </div>
        ))}
      </div>

      <div className="cat-more">
        <a href="Joyeria/" className="btn btn-primary">
          Ver todo el catálogo <Icon.Arrow/>
        </a>
      </div>

      <style>{`
        .cat-grid {
          margin-top: 40px;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;
        }
        .cat-more {
          margin-top: 40px;
          text-align: center;
        }
        @media (max-width: 1000px) {
          .cat-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 600px) {
          .cat-grid { grid-template-columns: 1fr; gap: 14px; }
        }
      `}</style>
    </section>
  );
}

window.Store = Store;