// Pipeko website — Comparación screen: cuál línea elegir, FAQ, y Pipeko vs marketplaces. Exports window.PKComparacion.
const { Button, Badge } = window.PipekoInterioresDesignSystem_5fe34e;
const { link: waLink } = window.PKWhatsApp;

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, whiteSpace: 'pre-line',
      }}>{label}</span>
    </div>
  );
}

function CompareRow({ label, icon, pipeko, otros, first }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', borderTop: first ? 'none' : '1px solid var(--warmgrey-200)' }}>
      <div style={{ padding: '20px 20px', fontFamily: 'var(--font-ui)', fontSize: '14px', fontWeight: 700, letterSpacing: '.03em', color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: '8px' }}>
        {icon && <i data-lucide={icon} style={{ width: '15px', height: '15px', color: 'var(--taupe-500)', flexShrink: 0 }}></i>}
        {label}
      </div>
      <div style={{ padding: '20px 20px', background: 'var(--plum-100)', display: 'flex', alignItems: 'center', gap: '10px' }}>
        <i data-lucide="circle-check" style={{ width: '17px', height: '17px', color: 'var(--plum-800)', flexShrink: 0 }}></i>
        <span style={{ fontFamily: 'var(--font-ui)', fontSize: '16px', color: 'var(--plum-800)', fontWeight: 600 }}>{pipeko}</span>
      </div>
      <div style={{ padding: '20px 20px', display: 'flex', alignItems: 'center', gap: '10px' }}>
        <i data-lucide="circle-x" style={{ width: '17px', height: '17px', color: 'var(--warmgrey-400)', flexShrink: 0 }}></i>
        <span style={{ fontFamily: 'var(--font-ui)', fontSize: '16px', color: 'var(--text-muted)' }}>{otros}</span>
      </div>
    </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 LineCompareRow({ label, icon, kind, values, first }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderTop: first ? 'none' : '1px solid var(--warmgrey-200)' }}>
      <div style={{ padding: '16px 18px', fontFamily: 'var(--font-ui)', fontSize: '13px', fontWeight: 700, letterSpacing: '.03em', 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: '16px 18px', display: 'flex', alignItems: 'center', borderLeft: '1px solid var(--warmgrey-200)' }}>
          {kind === 'level' ? (
            <div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
              <span style={{ fontFamily: 'var(--font-ui)', fontSize: '14px', 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: '14.5px', color: 'var(--slate-800)' }}>{v ? 'Sí' : 'No'}</span>
            </span>
          ) : (
            <span style={{ fontFamily: 'var(--font-ui)', fontSize: '15px', 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 ComparacionScreen({ go }) {
  const isMobile = window.usePKMobile();
  React.useEffect(() => {
    window.PKSEO.setMeta(
      'Blackout vs Sheer Elegance vs Malla Solar: Comparación Completa | Pipeko',
      'Compara las 3 líneas de persianas Pipeko: Sheer Elegance, Blackout y Malla Solar. Encuentra la mejor opción según luz, privacidad y presupuesto. Garantía de 5 años en mecanismo.'
    );
    window.PKSEO.setCanonical('https://www.pipekointeriores.com/comparacion');
    window.PKSEO.setOG({
      title: 'Comparación de Persianas: Blackout vs Sheer Elegance vs Solar Screen',
      description: 'Compara las 3 líneas de persianas Pipeko según luz, privacidad y presupuesto. La mejor relación precio-calidad con garantía de 5 años.',
      url: 'https://www.pipekointeriores.com/comparacion'
    });
  }, []);
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });

  const lines = window.PK_CATALOG;

  return (
    <div style={{ background: 'var(--cream-100)' }}>
      <div style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: isMobile ? '40px 20px 8px' : '64px 32px 8px', textAlign: 'center' }}>
        <Badge tone="taupe" variant="soft">Comparación honesta</Badge>
        <h1 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: isMobile ? '28px' : '42px', lineHeight: 1.15, letterSpacing: '-.02em', margin: '18px 0 20px' }}>
          Compara y elige con confianza
        </h1>
        <p style={{ fontFamily: 'var(--font-ui)', fontSize: '19px', lineHeight: 1.65, color: 'var(--slate-800)', margin: '0 auto' }}>
          Qué línea de persiana te conviene y por qué Pipeko tiene la mejor relación calidad-precio frente a marketplaces. Sin adornos, con los datos completos.
        </p>
      </div>

      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '48px 32px 8px' }}>
        <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '28px', margin: '0 0 22px' }}>¿Cuál línea es para ti?</h2>
        <div style={{ overflowX: 'auto' }}>
        <div style={{ minWidth: '640px', borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid var(--warmgrey-200)', boxShadow: 'var(--shadow-sm)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', background: 'var(--slate-800)' }}>
            <div style={{ padding: '16px 18px' }}></div>
            {lines.map((l) => (
              <div key={l.slug} style={{ padding: '16px 18px', borderLeft: '1px solid color-mix(in srgb, var(--cream-50) 15%, transparent)' }}>
                <div style={{ aspectRatio: '4 / 3', borderRadius: 'var(--radius-sm)', overflow: 'hidden', marginBottom: '10px' }}>
                  <img src={l.detailPhoto || undefined} alt={'Persiana ' + l.name + ' a la medida Pipeko – detalle de material'} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', background: 'repeating-linear-gradient(135deg, var(--cream-200) 0px, var(--cream-200) 14px, var(--cream-300) 14px, var(--cream-300) 28px)' }} />
                </div>
                <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: '16px', color: 'var(--cream-50)', marginBottom: '8px' }}>{l.name}</div>
                <div style={{ display: 'flex', gap: '4px' }}>{(l.colors || (l.colorsByTier || []).flatMap((t) => t.colors)).slice(0, 5).map((c) => (<span key={c} style={{ width: '10px', height: '10px', borderRadius: '50%', background: window.PK_COLOR_HEX[c] || '#ccc', border: '1px solid color-mix(in srgb, var(--cream-50) 30%, transparent)' }}></span>))}</div>
              </div>
            ))}
          </div>
          <LineCompareRow first icon="sun" label="Control de luz" kind="level" values={lines.map((l) => ({ label: l.light.label, level: LIGHT_LEVELS[l.light.label] }))} />
          <LineCompareRow icon="eye-off" label="Privacidad" kind="level" values={lines.map((l) => ({ label: l.privacy.label, level: PRIV_LEVELS[l.privacy.label] }))} />
          <LineCompareRow icon="moon" label="Blackout" kind="boolean" values={lines.map((l) => l.blackout)} />
          <LineCompareRow icon="shield-check" label="Durabilidad" values={lines.map((l) => l.durability)} />
          <LineCompareRow icon="home" label="Ideal para" values={lines.map((l) => l.idealShort)} />
        </div>
        </div>
        <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap', marginTop: '18px' }}>
          {lines.map((l) => (
            <a key={l.slug} href="#" onClick={(e) => { e.preventDefault(); go('producto', l.slug); }} style={{ fontFamily: 'var(--font-ui)', fontSize: '15px', fontWeight: 600, color: 'var(--plum-800)', textDecoration: 'none' }}>Ver {l.name} ›</a>
          ))}
        </div>
      </div>

      <div style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: '56px 32px 8px', textAlign: 'center' }}>
        <p style={{ fontFamily: 'var(--font-ui)', fontSize: '17px', color: 'var(--text-muted)', margin: '0 0 12px' }}>¿Tienes más dudas sobre materiales o instalación?</p>
        <a href="#" onClick={(e) => { e.preventDefault(); go('faq'); }} style={{ fontFamily: 'var(--font-ui)', fontSize: '16px', fontWeight: 600, color: 'var(--plum-800)', textDecoration: 'none' }}>Ver todas las preguntas frecuentes ›</a>
      </div>

      <section style={{ background: 'var(--cream-200)', borderTop: '1px solid var(--warmgrey-200)', borderBottom: '1px solid var(--warmgrey-200)' }}>
      <div style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: '64px 32px 8px', textAlign: 'center' }}>
        <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '32px', lineHeight: 1.2, letterSpacing: '-.02em', margin: '0 0 20px' }}>
          Persianas a la medida vs. Amazon o Temu: ¿vale la pena?
        </h2>
        <p style={{ fontFamily: 'var(--font-ui)', fontSize: '18px', lineHeight: 1.65, color: 'var(--slate-800)', margin: '0 auto' }}>
          Se ven casi iguales en la foto. Comparado con Temu, AliExpress u otros marketplaces, la diferencia real está en cuánto te duran y quién responde si algo falla.
        </p>
      </div>

      <div style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: '32px 32px 64px' }}>
        <div style={{ overflowX: 'auto' }}>
        <div style={{ minWidth: '600px', borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid var(--warmgrey-200)', boxShadow: 'var(--shadow-md)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', background: 'var(--cream-50)' }}>
            <div style={{ padding: '16px 20px' }}></div>
            <div style={{ padding: '14px 20px', display: 'flex', justifyContent: 'center' }}><span style={{ background: 'var(--slate-800)', color: 'var(--cream-50)', fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: '13px', letterSpacing: '.08em', padding: '7px 20px', borderRadius: 'var(--radius-pill)' }}>PIPEKO</span></div>
            <div style={{ padding: '14px 20px', display: 'flex', justifyContent: 'center' }}><span style={{ background: 'var(--cream-200)', color: 'var(--text-muted)', fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: '13px', letterSpacing: '.08em', padding: '7px 20px', borderRadius: 'var(--radius-pill)', border: '1px solid var(--warmgrey-300)' }}>TEMU / AMAZON</span></div>
          </div>
          <CompareRow first icon="shield-check" label="Garantía" pipeko="Garantía de 5 años en mecanismo" otros="0–1 año, si acaso" />
          <CompareRow icon="hammer" label="Instalación" pipeko="Profesional, incluida" otros="Tú mismo, con tus herramientas" />
          <CompareRow icon="layers" label="Materiales" pipeko="Tejido inspeccionado en sucursal" otros="Calidad variable, foto de catálogo" />
          <CompareRow icon="users" label="Respaldo" pipeko="35 años y sucursal física" otros="Vendedor anónimo, sin dirección" />
        </div>
        </div>
      </div>
      </section>

      
      <section style={{ background: 'var(--cream-100)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? '48px 20px' : '72px 32px' }}>
          <div style={{ maxWidth: '68ch', marginBottom: '32px' }}>
            <div style={{ fontFamily: 'var(--font-ui)', fontSize: '12px', letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--taupe-500)', fontWeight: 600, marginBottom: '10px' }}>Mayor durabilidad</div>
            <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '28px', letterSpacing: '-.02em', margin: '0 0 14px' }}>Combina tus persianas para que duren más</h2>
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: '17px', lineHeight: 1.7, color: 'var(--slate-800)', margin: 0 }}>
              En zonas con mucho sol, combinar dos tipos de persianas protege la interior y extiende la vida útil de ambas. Por ejemplo, una malla solar al frente protege el blackout detrás, o un blackout respalda una Sheer Elegance para que dure más años.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '28px', marginBottom: '32px' }}>
            <div style={{ aspectRatio: '1402 / 1122', minWidth: 0, minHeight: 0 }}><image-slot id="comparacion-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="comparacion-sheer-blackout" shape="rounded" radius="16" placeholder="Foto: Sheer Elegance + Blackout" alt="Persiana Sheer Elegance combinada con Blackout – luz de día y privacidad de noche" src={window.__resources.pImg27}></image-slot></div>
          </div>
        </div>
      </section>

<section style={{ background: 'var(--cream-200)', borderTop: '1px solid var(--warmgrey-200)', borderBottom: '1px solid var(--warmgrey-200)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '72px 32px' }}>
          <div style={{ marginBottom: '36px', maxWidth: '60ch' }}>
            <div style={{ fontFamily: 'var(--font-ui)', fontSize: '12px', letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--taupe-500)', fontWeight: 600, marginBottom: '10px' }}>Quién te instala</div>
            <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '32px', letterSpacing: '-.02em', margin: '0 0 12px' }}>Equipo propio, respaldo directo</h2>
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: '17px', lineHeight: 1.7, color: 'var(--slate-800)', margin: 0 }}>
              Sin subcontratados ni intermediarios. Instaladores propios, capacitados por el dueño. Si algo no queda bien, hablas directo con él.
            </p>
          </div>
        </div>
      </section>

      <div style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: '64px 32px 88px', textAlign: 'center' }}>
        <p style={{ fontFamily: 'var(--font-ui)', fontSize: '17px', color: 'var(--text-muted)', margin: '0 0 22px' }}>
          Comparar es sano. Si tienes dudas, con gusto te explicamos sin compromiso.
        </p>
        <Button size="lg" variant="primary" as="a" href={waLink('Hola, tengo dudas sobre las persianas.')} target="_blank" rel="noopener">Escríbenos por WhatsApp</Button>
      </div>
    </div>
  );
}

Object.assign(window, { PKComparacion: ComparacionScreen });
