// Pipeko website — Catalog / category screen: filters (combinable, client-side only —
// no query params, no new indexable URL per combination), mini comparison table, FAQ.
// Exports window.PKCategory.
const { Button, Badge } = window.PipekoInterioresDesignSystem_5fe34e;

const PDF_CATALOGS = [
  { slug: 'malla-sombra', name: 'Malla Sombra', href: './catalogos/malla-sombra.pdf' },
  { slug: 'blackout', name: 'Blackout', href: './catalogos/blackout.pdf' },
  { slug: 'sheer-elegance', name: 'Sheer Elegance', href: './catalogos/sheer-elegance.pdf' },
  { slug: 'malla-sombra-translucida', name: 'Malla Sombra Translúcida', href: './catalogos/malla-sombra-translucida.pdf' },
];

function PlaceholderPhoto({ label, ratio = '4 / 3' }) {
  return (
    <div style={{
      aspectRatio: ratio,
      borderRadius: 'var(--radius-xl)',
      background: 'repeating-linear-gradient(135deg, var(--cream-200) 0px, var(--cream-200) 14px, var(--cream-300) 14px, var(--cream-300) 28px)',
      border: '1px solid var(--warmgrey-200)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <span style={{
        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
        fontSize: '13px', color: 'var(--warmgrey-600)', background: 'var(--cream-50)',
        padding: '7px 14px', borderRadius: 'var(--radius-sm)', border: '1px solid var(--warmgrey-300)',
        textAlign: 'center', maxWidth: '82%', lineHeight: 1.5,
      }}>{label}</span>
    </div>
  );
}

function allColors(line) {
  return line.colors || (line.colorsByTier || []).flatMap((t) => t.colors);
}

function slugColor(name) { return name.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/[^a-z0-9]+/g, '-'); }

function colorEntries() {
  const out = [];
  window.PK_CATALOG.forEach((l) => {
    if (l.colorsByTier) {
      l.colorsByTier.forEach((t) => {
        const tierSlug = slugColor(t.tier);
        t.colors.forEach((c) => out.push({ line: l, color: c, tierLabel: l.name + ' · ' + t.tier, tierSlug }));
      });
    } else {
      (l.colors || []).forEach((c) => out.push({ line: l, color: c, tierLabel: l.name, tierSlug: null }));
    }
  });
  return out;
}

function SlotProductCard({ slotId, placeholder, src, tag, name, description, ctaLabel, onNavigate }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', background: 'var(--cream-50)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid var(--warmgrey-200)', boxShadow: 'var(--shadow-xs)' }}>
      <div style={{ position: 'relative', aspectRatio: '1 / 1', overflow: 'hidden', background: 'var(--cream-200)' }}>
        <img src={src || undefined} alt={placeholder} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top left', display: 'block' }} />
        {tag && <div style={{ position: 'absolute', top: '12px', left: '12px', zIndex: 1, pointerEvents: 'none' }}><Badge tone="slate" variant="solid" size="sm">{tag}</Badge></div>}
      </div>
      <div style={{ padding: 'var(--space-5)', display: 'flex', flexDirection: 'column', gap: '8px' }}>
        <h3 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '21px', lineHeight: 1.15, margin: 0 }}>{name}</h3>
        {description && <p style={{ fontFamily: 'var(--font-ui)', color: 'var(--text-muted)', fontSize: '15px', lineHeight: 1.55, margin: 0 }}>{description}</p>}
        <a href="#" onClick={onNavigate} style={{ fontFamily: 'var(--font-ui)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '14px', textDecoration: 'none', marginTop: '6px' }}>{ctaLabel} ›</a>
      </div>
    </div>
  );
}

function Chip({ active, onClick, children, dotColor }) {
  return (
    <button onClick={onClick} style={{
      fontFamily: 'var(--font-ui)', fontSize: '14px', fontWeight: active ? 600 : 500,
      padding: '7px 14px', borderRadius: 'var(--radius-pill)', cursor: 'pointer',
      border: `1px solid ${active ? 'var(--plum-800)' : 'var(--warmgrey-300)'}`,
      background: active ? 'var(--plum-100)' : 'transparent',
      color: active ? 'var(--plum-800)' : 'var(--slate-800)',
      display: 'inline-flex', alignItems: 'center', gap: dotColor ? '7px' : 0,
    }}>
      {dotColor && <span style={{ width: '12px', height: '12px', borderRadius: '50%', background: dotColor, border: '1px solid var(--warmgrey-300)', flexShrink: 0 }}></span>}
      {children}
    </button>
  );
}

function FilterGroup({ title, children }) {
  return (
    <div style={{ marginBottom: '26px' }}>
      <div style={{ fontFamily: 'var(--font-ui)', fontSize: '13px', fontWeight: 700, letterSpacing: '.04em', color: 'var(--slate-800)', marginBottom: '12px' }}>{title}</div>
      {children}
    </div>
  );
}

const LIGHT_OPTIONS = Array.from(new Set(window.PK_CATALOG.map((l) => l.light.label)));
const PRIVACY_OPTIONS = Array.from(new Set(window.PK_CATALOG.map((l) => l.privacy.label)));
const BLACKOUT_OPTIONS = ['Sí', 'No'];
const COLOR_OPTIONS = Array.from(new Set(window.PK_CATALOG.flatMap(allColors)));

function FiltersPanel({ filters, toggle, clearAll }) {
  return (
    <div>
      <FilterGroup title="Tipo">
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
          {window.PK_CATALOG.map((l) => <Chip key={l.slug} active={filters.tipo.has(l.slug)} onClick={() => toggle('tipo', l.slug)}>{l.name}</Chip>)}
        </div>
      </FilterGroup>
      <FilterGroup title="Color">
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
          {COLOR_OPTIONS.map((c) => <Chip key={c} active={filters.color.has(c)} onClick={() => toggle('color', c)} dotColor={window.PK_COLOR_HEX[c] || '#CFC9C0'}>{c}</Chip>)}
        </div>
      </FilterGroup>
      <FilterGroup title="Control de luz">
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
          {LIGHT_OPTIONS.map((v) => <Chip key={v} active={filters.luz.has(v)} onClick={() => toggle('luz', v)}>{v}</Chip>)}
        </div>
      </FilterGroup>
      <FilterGroup title="Privacidad">
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
          {PRIVACY_OPTIONS.map((v) => <Chip key={v} active={filters.privacidad.has(v)} onClick={() => toggle('privacidad', v)}>{v}</Chip>)}
        </div>
      </FilterGroup>
      <FilterGroup title="Blackout">
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
          {BLACKOUT_OPTIONS.map((v) => <Chip key={v} active={filters.blackout.has(v)} onClick={() => toggle('blackout', v)}>{v}</Chip>)}
        </div>
      </FilterGroup>
      <Button variant="ghost" size="sm" onClick={clearAll} style={{ paddingLeft: 0, paddingRight: 0 }}>Limpiar filtros</Button>
    </div>
  );
}

const LIGHT_LEVELS = { Nula: 0, 'Media-alta': 3, Ajustable: 'range' };
const PRIV_LEVELS = { Media: 2, Total: 4, Ajustable: 'range' };

function LevelDots({ level }) {
  return (
    <div style={{ display: 'flex', gap: '4px' }}>
      {[0, 1, 2, 3].map((i) => (
        <span key={i} style={{
          width: '12px', height: '12px', borderRadius: '3px',
          background: level === 'range' ? `linear-gradient(135deg, var(--plum-800) ${25 * i}%, var(--plum-100) ${25 * (i + 1)}%)` : (i < level ? 'var(--plum-800)' : 'var(--cream-50)'),
          border: level === 'range' ? 'none' : (i < level ? 'none' : '1px solid var(--warmgrey-300)'),
        }}></span>
      ))}
    </div>
  );
}

function MiniCompareRow({ label, icon, kind, values, first }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '150px repeat(3, 1fr)', borderTop: first ? 'none' : '1px solid var(--warmgrey-200)' }}>
      <div style={{ padding: '14px 16px', fontFamily: 'var(--font-ui)', fontSize: '13px', fontWeight: 700, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: '7px' }}>
        {icon && <i data-lucide={icon} style={{ width: '13px', height: '13px', color: 'var(--taupe-500)', flexShrink: 0 }}></i>}
        {label}
      </div>
      {values.map((v, i) => (
        <div key={i} style={{ padding: '14px 16px', borderLeft: '1px solid var(--warmgrey-200)', display: 'flex', alignItems: 'center' }}>
          {kind === 'level' ? (
            <div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
              <span style={{ fontFamily: 'var(--font-ui)', fontSize: '13px', color: 'var(--slate-800)' }}>{v.label}</span>
              <LevelDots level={v.level} />
            </div>
          ) : kind === 'boolean' ? (
            <span style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
              <i data-lucide={v ? 'circle-check' : 'circle-x'} style={{ width: '15px', height: '15px', color: v ? 'var(--plum-800)' : 'var(--warmgrey-400)', flexShrink: 0 }}></i>
              <span style={{ fontFamily: 'var(--font-ui)', fontSize: '13.5px', color: 'var(--slate-800)' }}>{v ? 'Sí' : 'No'}</span>
            </span>
          ) : (
            <span style={{ fontFamily: 'var(--font-ui)', fontSize: '14.5px', color: 'var(--slate-800)' }}>{v}</span>
          )}
        </div>
      ))}
    </div>
  );
}

function FaqItem({ q, a }) {
  return (
    <div style={{ padding: '22px 0', borderTop: '1px solid var(--warmgrey-200)' }}>
      <h3 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '19px', margin: '0 0 8px' }}>{q}</h3>
      <p style={{ fontFamily: 'var(--font-ui)', fontSize: '16px', lineHeight: 1.7, color: 'var(--slate-800)', margin: 0 }}>{a}</p>
    </div>
  );
}

function emptyFilters() { return { tipo: new Set(), color: new Set(), luz: new Set(), privacidad: new Set(), blackout: new Set() }; }

function CategoryScreen({ go }) {
  const [filters, setFilters] = React.useState(emptyFilters);
  const [isMobile, setIsMobile] = React.useState(() => typeof window !== 'undefined' && window.matchMedia('(max-width: 860px)').matches);
  const [drawerOpen, setDrawerOpen] = React.useState(false);

  React.useEffect(() => {
    window.PKSEO.setMeta('Persianas a la medida CDMX | Pipeko Persianas', 'Persianas Sheer Elegance, Blackout y Solar Screen a la medida en CDMX. Garantía de 5 años en mecanismo e instalación profesional incluida.');
    window.PKSEO.setCanonical('https://www.pipekointeriores.com/persianas');
    window.PKSEO.setOG({ title: 'Persianas a la medida CDMX | Pipeko Persianas', description: 'Persianas Sheer Elegance, Blackout y Solar Screen a la medida en CDMX. Garantía de 5 años en mecanismo e instalación profesional incluida.', url: 'https://www.pipekointeriores.com/persianas' });
    window.PKSEO.setBreadcrumb('ld-breadcrumb', [{ name: 'Inicio', url: 'https://www.pipekointeriores.com/' }, { name: 'Persianas', url: 'https://www.pipekointeriores.com/persianas' }]);
    return () => window.PKSEO.clearJsonLd('ld-breadcrumb');
  }, []);

  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });

  React.useEffect(() => {
    const mq = window.matchMedia('(max-width: 860px)');
    const handler = (e) => setIsMobile(e.matches);
    mq.addEventListener ? mq.addEventListener('change', handler) : mq.addListener(handler);
    return () => { mq.removeEventListener ? mq.removeEventListener('change', handler) : mq.removeListener(handler); };
  }, []);

  const toggle = (group, value) => setFilters((prev) => {
    const s = new Set(prev[group]);
    s.has(value) ? s.delete(value) : s.add(value);
    return { ...prev, [group]: s };
  });
  const clearAll = () => setFilters(emptyFilters());
  const activeCount = Object.values(filters).reduce((n, s) => n + s.size, 0);

  const matches = (l) => {
    if (filters.tipo.size && !filters.tipo.has(l.slug)) return false;
    if (filters.color.size && !allColors(l).some((c) => filters.color.has(c))) return false;
    if (filters.luz.size && !filters.luz.has(l.light.label)) return false;
    if (filters.privacidad.size && !filters.privacidad.has(l.privacy.label)) return false;
    if (filters.blackout.size && !filters.blackout.has(l.blackout ? 'Sí' : 'No')) return false;
    return true;
  };
  const filtered = window.PK_CATALOG.filter(matches);

  return (
    <div style={{ background: 'var(--cream-100)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? '20px 20px 0' : '32px 32px 0' }}>
        <div style={{ fontFamily: 'var(--font-ui)', fontSize: '13px', color: 'var(--text-faint)', marginBottom: '18px' }}>
          <a href="#" onClick={(e) => { e.preventDefault(); go('home'); }} style={{ color: 'var(--text-muted)', textDecoration: 'none' }}>Inicio</a>
          <span> / </span><span>Persianas</span>
        </div>
        <h1 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: isMobile ? '30px' : '44px', letterSpacing: '-.02em', margin: '0 0 10px' }}>Persianas a la medida</h1>
        <p style={{ fontFamily: 'var(--font-ui)', fontSize: '18px', color: 'var(--text-muted)', margin: '0 0 28px', maxWidth: '64ch' }}>
          Tres líneas para tus ventanas, fabricadas a la medida en CDMX y Edoméx, con garantía de 5 años en mecanismo e instalación incluida. ¿No sabes cuál elegir? <a href="#" onClick={(e) => { e.preventDefault(); go('comparacion'); }} style={{ color: 'var(--plum-800)', fontWeight: 600 }}>Compáralas aquí</a>.
        </p>
      </div>

      {isMobile && (
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 32px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <Button variant="outline" size="sm" onClick={() => setDrawerOpen(true)}>Filtrar persianas{activeCount > 0 ? ` (${activeCount})` : ''}</Button>
          <span style={{ fontFamily: 'var(--font-ui)', fontSize: '14px', color: 'var(--text-muted)' }}>{filtered.length} {filtered.length === 1 ? 'línea' : 'líneas'}</span>
        </div>
      )}

      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? '0 20px 60px' : '0 32px 80px', display: isMobile ? 'block' : 'grid', gridTemplateColumns: isMobile ? undefined : '210px 1fr', gap: '40px', alignItems: 'start' }}>
        {!isMobile && (
          <aside style={{ position: 'sticky', top: '90px' }}>
            <FiltersPanel filters={filters} toggle={toggle} clearAll={clearAll} />
          </aside>
        )}
        <div>
          {!isMobile && (
            <div style={{ marginBottom: '22px' }}>
              <span style={{ fontFamily: 'var(--font-ui)', fontSize: '15px', color: 'var(--text-muted)' }}>{filtered.length} {filtered.length === 1 ? 'línea' : 'líneas'}</span>
            </div>
          )}
          {filtered.length === 0 ? (
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: '15px', color: 'var(--text-muted)' }}>Sin resultados con estos filtros.</p>
          ) : (
            <div>
              {window.PK_CATALOG.filter(matches).map((l) => {
                const passColor = (c) => !filters.color.size || filters.color.has(c);
                if (l.colorsByTier) {
                  const tiers = l.colorsByTier.map((t) => ({ tier: t.tier, colors: t.colors.filter(passColor) })).filter((t) => t.colors.length);
                  if (!tiers.length) return null;
                  return (
                    <div key={l.slug} style={{ marginBottom: '44px' }}>
                      <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '21px', margin: '0 0 18px' }}>{l.name}</h2>
                      {tiers.map((t) => (
                        <div key={t.tier} style={{ marginBottom: '22px' }}>
                          <div style={{ fontFamily: 'var(--font-ui)', fontSize: '12px', fontWeight: 700, letterSpacing: '.05em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: '12px' }}>{t.tier}</div>
                          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '24px' }}>
                            {t.colors.map((c) => {
                              const photoKey = slugColor(l.name) + '---' + slugColor(c);
                              const photoSrc = { 'blackout---blanco': window.__resources.pImg1, 'blackout---ivory': window.__resources.pImg3, 'blackout---perla': window.__resources.pImg6, 'blackout---stone': window.__resources.pImg7, 'blackout---morado': window.__resources.pImg4, 'blackout---chocolate': window.__resources.pImg2, 'blackout---oxford': window.__resources.pImg5, 'malla-solar---blanco': window.__resources.pImg17, 'malla-solar---ivory': window.__resources.pImg16, 'malla-solar---linen': window.__resources.pImg20, 'malla-solar---gris': window.__resources.pImg19, 'malla-solar---charcoal': window.__resources.pImg18, 'sheer-elegance---gris': window.__resources.pImg24, 'sheer-elegance---gris-oxford': window.__resources.pImg25, 'sheer-elegance---blanco': window.__resources.pImg28, 'sheer-elegance---cafe-madera': window.__resources.pImg29, 'sheer-elegance---beige': window.__resources.pImg22, 'sheer-elegance---capuccino': window.__resources.pImg23 }[photoKey] || (l.colorPhotos && l.colorPhotos[c]);
                              return (
                                <SlotProductCard key={l.slug + '-' + slugColor(t.tier) + '-' + slugColor(c)} slotId={'ph-swatch-' + l.slug + '-' + slugColor(t.tier) + '-' + slugColor(c)} placeholder={'Foto: ' + l.name + ' ' + t.tier + ' ' + c} src={photoSrc} name={c} description={l.name + ' · ' + t.tier} ctaLabel={'Ver ' + l.name} onNavigate={(e) => { e.preventDefault(); go('producto', l.slug); }} />
                              );
                            })}
                          </div>
                        </div>
                      ))}
                    </div>
                  );
                }
                const colors = (l.colors || []).filter(passColor);
                if (!colors.length) return null;
                return (
                  <div key={l.slug} style={{ marginBottom: '44px' }}>
                    <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '21px', margin: '0 0 18px' }}>{l.name}</h2>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '24px' }}>
                      {colors.map((c) => {
                        const photoKey = slugColor(l.name) + '---' + slugColor(c);
                        const photoSrc = { 'blackout---blanco': window.__resources.pImg1, 'blackout---ivory': window.__resources.pImg3, 'blackout---perla': window.__resources.pImg6, 'blackout---stone': window.__resources.pImg7, 'blackout---morado': window.__resources.pImg4, 'blackout---chocolate': window.__resources.pImg2, 'blackout---oxford': window.__resources.pImg5, 'malla-solar---blanco': window.__resources.pImg17, 'malla-solar---ivory': window.__resources.pImg16, 'malla-solar---linen': window.__resources.pImg20, 'malla-solar---gris': window.__resources.pImg19, 'malla-solar---charcoal': window.__resources.pImg18, 'sheer-elegance---gris': window.__resources.pImg24, 'sheer-elegance---gris-oxford': window.__resources.pImg25, 'sheer-elegance---blanco': window.__resources.pImg28, 'sheer-elegance---cafe-madera': window.__resources.pImg29, 'sheer-elegance---beige': window.__resources.pImg22, 'sheer-elegance---capuccino': window.__resources.pImg23 }[photoKey] || (l.colorPhotos && l.colorPhotos[c]);
                        return (
                          <SlotProductCard key={l.slug + '-' + slugColor(c)} slotId={'ph-swatch-' + l.slug + '-' + slugColor(c)} placeholder={'Foto: ' + l.name + ' ' + c} src={photoSrc} name={c} description={l.name} ctaLabel={'Ver ' + l.name} onNavigate={(e) => { e.preventDefault(); go('producto', l.slug); }} />
                        );
                      })}
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>

      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? '0 20px 40px' : '0 32px 48px' }}>
        <div style={{ background: 'var(--cream-50)', border: '1px solid var(--warmgrey-200)', borderRadius: 'var(--radius-lg)', padding: isMobile ? '24px 20px' : '28px 32px' }}>
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: isMobile ? '18px' : '22px', fontWeight: 600, color: 'var(--plum-800)', lineHeight: 1.4, margin: '0 0 12px' }}>
            ¿No encuentras el color que buscas?
          </p>
          <p style={{ fontFamily: 'var(--font-ui)', fontSize: '16px', lineHeight: 1.65, color: 'var(--slate-800)', margin: '0 0 20px' }}>
            Tenemos <span style={{ fontWeight: 700, animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite' }}>más de 100 opciones</span> entre tipos de persianas, colores y materiales. Los ejemplos que ves aquí son solo una muestra de nuestra variedad completa.
          </p>
          <style>{`@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }`}</style>
          <p style={{ fontFamily: 'var(--font-ui)', fontSize: '16px', lineHeight: 1.65, color: 'var(--slate-800)', margin: '0 0 20px' }}>
            ¿No sabes qué color elegir? Mándanos un WhatsApp y te asesoramos de manera personalizada.
          </p>
          <Button size="md" variant="primary" as="a"
            iconLeft={<window.PKWhatsAppIcon size={18} />}
            href={window.PKWhatsApp.link('Hola, necesito asesoría para elegir el color de mi persiana.')} target="_blank" rel="noopener">Asesoría personalizada por WhatsApp</Button>

          <div style={{ marginTop: '28px', paddingTop: '24px', borderTop: '1px solid var(--warmgrey-200)' }}>
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: '14px', fontWeight: 600, letterSpacing: '.02em', color: 'var(--plum-800)', margin: '0 0 14px' }}>Catálogos en PDF</p>
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)', gap: '16px' }}>
              {PDF_CATALOGS.map((c) => (
                <div key={c.slug} style={{ border: '1px solid var(--warmgrey-200)', borderRadius: 'var(--radius-lg)', padding: '18px 16px', display: 'flex', flexDirection: 'column', gap: '10px', background: 'var(--cream-50)' }}>
                  <i data-lucide="file-text" style={{ width: '20px', height: '20px', color: 'var(--plum-800)' }}></i>
                  <p style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, color: 'var(--plum-800)', fontSize: '15px', margin: 0 }}>{c.name}</p>
                  <a href={c.href} target="_blank" rel="noopener" style={{ fontFamily: 'var(--font-ui)', fontSize: '13px', fontWeight: 600, color: 'var(--plum-800)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
                    <i data-lucide="download" style={{ width: '14px', height: '14px' }}></i>Descargar catálogo
                  </a>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? '0 20px 40px' : '0 32px 56px', borderTop: '1px solid var(--warmgrey-200)' }}>
        <div style={{ paddingTop: isMobile ? '36px' : '56px', marginBottom: '32px', maxWidth: '68ch' }}>
          <div style={{ fontFamily: 'var(--font-ui)', fontSize: '12px', letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--taupe-500)', fontWeight: 600, marginBottom: '10px' }}>Combinaciones</div>
          <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: isMobile ? '26px' : '34px', letterSpacing: '-.02em', margin: '0 0 14px' }}>Combínalas</h2>
          <p style={{ fontFamily: 'var(--font-ui)', fontSize: '18px', lineHeight: 1.65, color: 'var(--slate-800)', margin: 0 }}>
            Podemos combinar diferentes tipos de persianas en una misma ventana para mejorar su funcionalidad, durabilidad y diseño.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: '20px', marginBottom: '32px', maxWidth: '760px', margin: '0 auto 32px' }}>
          <div style={{ aspectRatio: '1402 / 1122', minWidth: 0, minHeight: 0 }}><image-slot id="combinalas-blackout-mallasolar" shape="rounded" radius="16" placeholder="Foto: Blackout + Malla Solar" alt="Persiana Blackout combinada con Malla Solar – mayor durabilidad frente al sol" src={window.__resources.pImg9}></image-slot></div>
          <div style={{ aspectRatio: '1402 / 1122', minWidth: 0, minHeight: 0 }}><image-slot id="combinalas-sheer-blackout" shape="rounded" radius="16" placeholder="Foto: Sheer Elegance + Blackout" alt="Persiana Sheer Elegance combinada con Blackout – diseño y control de luz" src={window.__resources.pImg27}></image-slot></div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: '24px', maxWidth: '760px', margin: '0 auto' }}>
          <div style={{ background: 'var(--cream-50)', border: '1px solid var(--warmgrey-200)', borderRadius: 'var(--radius-lg)', padding: '24px' }}>
            <h3 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '19px', margin: '0 0 10px' }}>Blackout + Malla Solar</h3>
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: '15px', lineHeight: 1.6, color: 'var(--slate-800)', margin: 0 }}>
              Ideal para ventanas que reciben muchísimo sol. La malla solar es más resistente y ayuda a proteger el blackout, aumentando su durabilidad.
            </p>
          </div>
          <div style={{ background: 'var(--cream-50)', border: '1px solid var(--warmgrey-200)', borderRadius: 'var(--radius-lg)', padding: '24px' }}>
            <h3 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '19px', margin: '0 0 10px' }}>Sheer Elegance + Blackout</h3>
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: '15px', lineHeight: 1.6, color: 'var(--slate-800)', margin: 0 }}>
              Permite combinar el diseño y la entrada de luz de la Sheer Elegance con el control de luz y privacidad del Blackout. También puede ayudar a prolongar la vida útil de la Sheer Elegance.
            </p>
          </div>
        </div>
      </div>

      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? '0 20px 60px' : '0 32px 80px', borderTop: '1px solid var(--warmgrey-200)' }}>
        <div style={{ paddingTop: isMobile ? '36px' : '56px', marginBottom: '32px', maxWidth: '64ch' }}>
          <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: isMobile ? '24px' : '30px', letterSpacing: '-.02em', margin: '0 0 8px' }}>Catálogo completo por tipo y color</h2>
          <p style={{ fontFamily: 'var(--font-ui)', fontSize: '15px', color: 'var(--text-muted)', margin: 0 }}>{colorEntries().length} variantes: una foto por cada tipo, nivel y color. Usa el filtro de color para ver solo una selección.</p>
        </div>
        {window.PK_CATALOG.filter(matches).map((l) => {
          const passColor = (c) => !filters.color.size || filters.color.has(c);
          if (l.colorsByTier) {
            const tiers = l.colorsByTier.map((t) => ({ tier: t.tier, colors: t.colors.filter(passColor) })).filter((t) => t.colors.length);
            if (!tiers.length) return null;
            return (
              <div key={l.slug} style={{ marginBottom: '44px' }}>
                <h3 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '21px', margin: '0 0 18px' }}>{l.name}</h3>
                {tiers.map((t) => (
                  <div key={t.tier} style={{ marginBottom: '22px' }}>
                    <div style={{ fontFamily: 'var(--font-ui)', fontSize: '12px', fontWeight: 700, letterSpacing: '.05em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: '12px' }}>{t.tier}</div>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '24px' }}>
                      {t.colors.map((c) => {
                        const photoKey = slugColor(l.name) + '---' + slugColor(c);
                        const photoSrc = { 'blackout---blanco': window.__resources.pImg1, 'blackout---ivory': window.__resources.pImg3, 'blackout---perla': window.__resources.pImg6, 'blackout---stone': window.__resources.pImg7, 'blackout---morado': window.__resources.pImg4, 'blackout---chocolate': window.__resources.pImg2, 'blackout---oxford': window.__resources.pImg5, 'malla-solar---blanco': window.__resources.pImg17, 'malla-solar---ivory': window.__resources.pImg16, 'malla-solar---linen': window.__resources.pImg20, 'malla-solar---gris': window.__resources.pImg19, 'malla-solar---charcoal': window.__resources.pImg18 }[photoKey] || (l.colorPhotos && l.colorPhotos[c]);
                        return (
                        <SlotProductCard key={l.slug + '-' + slugColor(t.tier) + '-' + slugColor(c)}
                          slotId={'ph-swatch-' + l.slug + '-' + slugColor(t.tier) + '-' + slugColor(c)}
                          placeholder={'Foto: ' + l.name + ' ' + t.tier + ' ' + c}
                          src={photoSrc}
                          name={c} description={l.name + ' · ' + t.tier}
                          ctaLabel={'Ver ' + l.name} onNavigate={(e) => { e.preventDefault(); go('producto', l.slug); }} />
                        );
                      })}
                    </div>
                  </div>
                ))}
              </div>
            );
          }
          const colors = (l.colors || []).filter(passColor);
          if (!colors.length) return null;
          return (
            <div key={l.slug} style={{ marginBottom: '44px' }}>
              <h3 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '21px', margin: '0 0 18px' }}>{l.name}</h3>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '24px' }}>
                {colors.map((c) => {
                  const photoKey = slugColor(l.name) + '---' + slugColor(c);
                  const photoSrc = { 'blackout---blanco': window.__resources.pImg1, 'blackout---ivory': window.__resources.pImg3, 'blackout---perla': window.__resources.pImg6, 'blackout---stone': window.__resources.pImg7, 'blackout---morado': window.__resources.pImg4, 'blackout---chocolate': window.__resources.pImg2, 'blackout---oxford': window.__resources.pImg5, 'malla-solar---blanco': window.__resources.pImg17, 'malla-solar---ivory': window.__resources.pImg16, 'malla-solar---linen': window.__resources.pImg20, 'malla-solar---gris': window.__resources.pImg19, 'malla-solar---charcoal': window.__resources.pImg18 }[photoKey] || (l.colorPhotos && l.colorPhotos[c]);
                  return (
                  <SlotProductCard key={l.slug + '-' + slugColor(c)}
                    slotId={'ph-swatch-' + l.slug + '-' + slugColor(c)}
                    placeholder={'Foto: ' + l.name + ' ' + c}
                    src={photoSrc}
                    name={c} description={l.name}
                    ctaLabel={'Ver ' + l.name} onNavigate={(e) => { e.preventDefault(); go('producto', l.slug); }} />
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>

      {isMobile && drawerOpen && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 50, background: 'rgba(20,18,16,.45)', display: 'flex', justifyContent: 'flex-end' }} onClick={() => setDrawerOpen(false)}>
          <div onClick={(e) => e.stopPropagation()} style={{ width: '86%', maxWidth: '360px', height: '100%', background: 'var(--cream-50)', padding: '24px', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
              <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: '20px', color: 'var(--plum-800)' }}>Filtrar persianas</span>
              <button onClick={() => setDrawerOpen(false)} aria-label="Cerrar" style={{ border: 'none', background: 'none', fontSize: '24px', cursor: 'pointer', color: 'var(--slate-800)', lineHeight: 1 }}>×</button>
            </div>
            <div style={{ flex: 1 }}><FiltersPanel filters={filters} toggle={toggle} clearAll={clearAll} /></div>
            <Button variant="primary" fullWidth onClick={() => setDrawerOpen(false)} style={{ marginTop: '20px' }}>Ver {filtered.length} resultados</Button>
          </div>
        </div>
      )}

    </div>
  );
}

Object.assign(window, { PKCategory: CategoryScreen });