// Pipeko website — Educational article screen. Exports window.PKArticle.
const { Button, Badge, ArticleCard } = window.PipekoInterioresDesignSystem_5fe34e;

function ArticleScreen({ go }) {
  const isMobile = window.usePKMobile();
  React.useEffect(() => {
    window.PKSEO.setMeta('Qué hace que una persiana dure años | Pipeko', 'El mecanismo, el tejido y la instalación marcan la diferencia. Guía honesta antes de comparar precios de persianas.');
    window.PKSEO.setCanonical('https://www.pipekointeriores.com/guias/como-elegir-persianas');
    window.PKSEO.setOG({ title: 'Qué hace que una persiana dure años | Pipeko', description: 'El mecanismo, el tejido y la instalación marcan la diferencia. Guía honesta antes de comparar precios de persianas.', url: 'https://www.pipekointeriores.com/guias/como-elegir-persianas' });
  }, []);
  return (
    <div style={{ background: 'var(--cream-100)' }}>
      {/* hero */}
      <div style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: isMobile ? '32px 20px 20px' : '48px 32px 24px' }}>
        <div style={{ fontFamily: 'var(--font-ui)', fontSize: '13px', color: 'var(--text-faint)', marginBottom: '20px' }}>
          <a href="#" onClick={(e) => { e.preventDefault(); go('home'); }} style={{ color: 'var(--text-muted)', textDecoration: 'none' }}>Inicio</a>
          <span> / </span><a href="#" onClick={(e) => { e.preventDefault(); go('guia'); }} style={{ color: 'var(--text-muted)', textDecoration: 'none' }}>Guías</a>
          <span> / </span><span>Materiales</span>
        </div>
        <Badge tone="taupe" variant="soft">Guía de materiales</Badge>
        <h1 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: isMobile ? '30px' : '46px', lineHeight: 1.15, letterSpacing: '-.02em', margin: '16px 0 18px' }}>
          ¿Qué hace que una persiana dure años?
        </h1>
        <p style={{ fontFamily: 'var(--font-ui)', fontSize: isMobile ? '17px' : '21px', lineHeight: 1.6, color: 'var(--slate-800)', margin: '0 0 22px' }}>
          Entendemos que el precio importa. Antes de comparar, vale la pena saber qué estás pagando realmente: no todas las persianas son iguales por dentro.
        </p>
        <div style={{ display: 'flex', alignItems: 'center', gap: '14px', fontFamily: 'var(--font-ui)', fontSize: '14px', color: 'var(--text-muted)', paddingBottom: '8px' }}>
          <span>Por el equipo Pipeko</span><span style={{ color: 'var(--warmgrey-300)' }}>·</span><span>3 min de lectura</span>
        </div>
      </div>

      {/* lead image */}
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? '0 20px 8px' : '0 32px 8px' }}>
        <div style={{ aspectRatio: isMobile ? '16 / 9' : '21 / 9', borderRadius: 'var(--radius-xl)', overflow: 'hidden', boxShadow: 'var(--shadow-md)' }}>
          <img src={window.__resources.weaveTaupe} alt="Detalle macro del tejido de una persiana romana de lino" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
        <div style={{ fontFamily: 'var(--font-ui)', fontSize: '13px', color: 'var(--text-faint)', textAlign: 'center', marginTop: '10px' }}>
          Detalle macro: la trama de un tejido de lino determina su caída y durabilidad.
        </div>
      </div>

      {/* body */}
      <article style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: isMobile ? '32px 20px 8px' : '40px 32px 24px' }}>
        <Para>Cuando comparas dos persianas casi idénticas en la foto, la diferencia real está en tres cosas: el <Strong>mecanismo</Strong>, el <Strong>tejido</Strong> y la <Strong>instalación</Strong>. Así se comporta cada tejido de Pipeko:</Para>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: '16px', margin: '24px 0 32px' }}>
          {window.PK_CATALOG.map((l) => (
            <div key={l.slug} style={{ background: 'var(--cream-50)', border: '1px solid var(--warmgrey-200)', borderRadius: 'var(--radius-lg)', padding: '22px' }}>
              <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '19px', margin: '0 0 10px' }}>{l.name}</h2>
              <ul style={{ margin: 0, paddingLeft: '18px', fontFamily: 'var(--font-ui)', fontSize: '15px', lineHeight: 1.6, color: 'var(--slate-800)', display: 'flex', flexDirection: 'column', gap: '6px' }}>
                <li><Strong>Tejido:</Strong> {l.material}</li>
                <li><Strong>Luz:</Strong> {l.light.label}</li>
                <li><Strong>Privacidad:</Strong> {l.privacy.label}</li>
                <li><Strong>Ideal para:</Strong> {l.idealFor[0]}</li>
              </ul>
              <a href="#" onClick={(e) => { e.preventDefault(); go('producto', l.slug); }} style={{ display: 'inline-block', marginTop: '14px', fontFamily: 'var(--font-ui)', fontSize: '14px', fontWeight: 600, color: 'var(--plum-800)', textDecoration: 'none' }}>Ver ficha completa ›</a>
            </div>
          ))}
        </div>

        <Para>El <Strong>mecanismo</Strong> es la parte que más se usa y la primera en fallar cuando es de baja calidad: por eso lo respaldamos con <Strong>garantía de 5 años</Strong>. La <Strong>instalación</Strong> también importa: una persiana bien hecha pero mal instalada se cuelga chueca y se desgasta antes de tiempo. Por eso tomamos la medida e instalamos nosotros mismos, sin costo extra.</Para>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: '16px', margin: '28px 0' }}>
          {[['blackout', 'Blackout'], ['sheer-elegance', 'Sheer Elegance']].map(([slug, l]) => (
            <figure key={slug} style={{ margin: 0 }}>
              <div style={{ aspectRatio: '4/3', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
                <img src={(window.PK_CATALOG.find((x) => x.slug === slug) || {}).detailPhoto || undefined} alt={'Foto: ' + l + ' de frente'} 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>
              <figcaption style={{ fontFamily: 'var(--font-ui)', fontSize: '13px', color: 'var(--text-faint)', marginTop: '8px' }}>{l}: misma familia, distinto comportamiento de luz.</figcaption>
            </figure>
          ))}
        </div>

        <div style={{ background: 'var(--cream-50)', border: '1px solid var(--warmgrey-200)', borderRadius: 'var(--radius-lg)', padding: '24px 28px', margin: '32px 0 0' }}>
          <div style={{ fontFamily: 'var(--font-ui)', fontSize: '12px', letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--taupe-500)', fontWeight: 600, marginBottom: '10px' }}>En resumen</div>
          <ul style={{ margin: 0, paddingLeft: '20px', fontFamily: 'var(--font-ui)', fontSize: '17px', lineHeight: 1.7, color: 'var(--slate-800)' }}>
            <li>El mecanismo es lo que más se usa: pide garantía de 5 años.</li>
            <li>Elige el tejido por la habitación, no solo por el color.</li>
            <li>La instalación profesional alarga la vida de cualquier persiana.</li>
          </ul>
        </div>
      </article>

      {/* CTA */}
      <div style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: isMobile ? '0 20px 40px' : '0 32px 56px' }}>
        <div style={{ background: 'var(--slate-800)', borderRadius: 'var(--radius-xl)', padding: isMobile ? '28px 24px' : '36px 40px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '28px', flexWrap: 'wrap' }}>
          <div>
            <h3 style={{ fontFamily: 'var(--font-serif)', color: 'var(--cream-50)', fontWeight: 600, fontSize: '26px', margin: '0 0 6px' }}>¿Te ayudamos a elegir?</h3>
            <p style={{ fontFamily: 'var(--font-ui)', color: 'var(--slate-200)', fontSize: '16px', margin: 0 }}>Agenda una visita sin costo y resolvemos tus dudas en persona.</p>
          </div>
          <Button size="lg" variant="primary" onClick={() => go('cotizar')}>Agenda tu visita</Button>
        </div>
      </div>

      {/* related */}
      <div style={{ background: 'var(--cream-200)', borderTop: '1px solid var(--warmgrey-200)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? '48px 20px' : '64px 32px' }}>
          <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '30px', margin: '0 0 28px' }}>Sigue aprendiendo</h2>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: '24px' }}>
            <ArticleCard eyebrow="Cómo elegir" title="Blackout o Sheer Elegance: cuál necesitas" excerpt="Depende de la habitación y de cuánta luz quieres controlar." image={window.__resources.weaveSlate} onClick={(e) => { e.preventDefault(); go('comparacion'); }} />
            <ArticleCard eyebrow="Mantenimiento" title="Cuida tus persianas en 10 minutos" excerpt="Una rutina simple alarga la vida de cualquier tejido." image={window.__resources.weaveCream} onClick={(e) => { e.preventDefault(); go('faq'); }} />
            <ArticleCard eyebrow="Precio y valor" title="Por qué la más barata sale cara" excerpt="Reencuadramos el costo real a lo largo de los años." image={window.__resources.weaveCharcoal} onClick={(e) => { e.preventDefault(); go('comparacion'); }} />
          </div>
        </div>
      </div>
    </div>
  );
}

function Para({ children }) {
  return <p style={{ fontFamily: 'var(--font-ui)', fontSize: '18px', lineHeight: 1.75, color: 'var(--slate-800)', margin: '0 0 18px', textWrap: 'pretty' }}>{children}</p>;
}
function Strong({ children }) {
  return <strong style={{ color: 'var(--plum-700)', fontWeight: 700 }}>{children}</strong>;
}

Object.assign(window, { PKArticle: ArticleScreen });