// Pipeko website — Guías: "¿cuál es la mejor persiana para cada persona y espacio?". Exports window.PKGuia.
const { Button, Badge } = window.PipekoInterioresDesignSystem_5fe34e;
const { link: waLink } = window.PKWhatsApp;

function Pills({ items, tone }) {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
      {items.map((it, i) => (
        <span key={i} style={{
          fontFamily: 'var(--font-ui)', fontSize: '13.5px', padding: '6px 14px', borderRadius: 'var(--radius-pill)',
          background: tone === 'muted' ? 'var(--cream-200)' : 'var(--plum-100)', color: tone === 'muted' ? 'var(--text-muted)' : 'var(--plum-800)',
          border: tone === 'muted' ? '1px solid var(--warmgrey-200)' : 'none', fontWeight: 500,
        }}>{it}</span>
      ))}
    </div>
  );
}

function StepRow({ icon, title, children }) {
  return (
    <div style={{ display: 'flex', gap: '16px', alignItems: 'flex-start' }}>
      <div style={{ width: '40px', height: '40px', borderRadius: '50%', background: 'var(--plum-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <i data-lucide={icon} style={{ width: '19px', height: '19px', color: 'var(--plum-800)' }}></i>
      </div>
      <div>
        <div style={{ fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: '16px', color: 'var(--slate-800)', marginBottom: '4px' }}>{title}</div>
        <div style={{ fontFamily: 'var(--font-ui)', fontSize: '15.5px', lineHeight: 1.6, color: 'var(--text-muted)' }}>{children}</div>
      </div>
    </div>
  );
}

function MedicionAnimation() {
  const STEPS = 4;
  const [step, setStep] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setStep((s) => (s + 1) % (STEPS + 2)), 850);
    return () => clearInterval(id);
  }, []);
  const filled = Math.min(step, STEPS);
  return (
    <div style={{ maxWidth: '320px', margin: '0 0 32px' }}>
      <div style={{ position: 'relative', width: '100%', aspectRatio: '4 / 3', background: 'var(--cream-50)', border: '1px solid var(--warmgrey-200)', borderRadius: 'var(--radius-lg)' }}>
        <div style={{ position: 'absolute', top: '14%', left: '8%', right: '8%', bottom: '14%', border: '3px solid var(--slate-800)', borderRadius: '3px' }}></div>
        {[0, 1, 2, 3].map((i) => (
          <div key={i} style={{
            position: 'absolute', top: '20%', bottom: '20%', left: (10.5 + i * 19.5) + '%', width: '17%',
            border: '1.5px solid var(--plum-800)', borderRadius: '2px', background: 'var(--plum-100)',
            opacity: filled > i ? 1 : 0, transform: filled > i ? 'scale(1)' : 'scale(0.85)',
            transition: 'opacity 280ms ease, transform 280ms ease',
          }}></div>
        ))}
      </div>
      <div style={{ textAlign: 'center', marginTop: '12px', fontFamily: 'var(--font-ui)', fontSize: '14px', color: 'var(--text-muted)' }}>
        {filled === 0 ? 'Cuenta cuántas hojas caben a lo ancho' : filled + (filled === 1 ? ' hoja' : ' hojas') + ' de ' + STEPS}
      </div>
    </div>
  );
}

function MedicionGuide() {
  return (
    <div>
      <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '30px', letterSpacing: '-.02em', margin: '0 0 10px' }}>Cómo medir tu ventana sin regla</h2>
      <p style={{ fontFamily: 'var(--font-ui)', fontSize: '17px', lineHeight: 1.6, color: 'var(--slate-800)', margin: '0 0 24px' }}>No necesitas cinta métrica para pedir tu cotización. Tres formas de tener una medida aproximada:</p>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: '28px', alignItems: 'start', marginBottom: '28px' }}>
        <MedicionAnimation />
        <div style={{ borderRadius: 'var(--radius-xl)', overflow: 'hidden', border: '1px solid var(--warmgrey-200)', boxShadow: 'var(--shadow-md)' }}>
          <img src={window.__resources.guiaMedicion} alt="Guía visual: cómo medir tu ventana con hoja de papel carta u oficio" loading="lazy" style={{ width: '100%', height: 'auto', display: 'block' }} />
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '22px', marginBottom: '28px' }}>
        <StepRow icon="file-text" title="Con una hoja carta u oficio">Una hoja carta u oficio mide 21.6 × 27.9 cm. Cuenta cuántas veces cabe a lo ancho y a lo alto del hueco de tu ventana.</StepRow>
        <StepRow icon="smartphone" title="Con una app de medición del celular">La mayoría de los celulares tienen una app de medición con cámara, útil para una referencia rápida.</StepRow>
        <StepRow icon="door-open" title="Comparando con un objeto conocido">Una puerta o un tabique te dan una referencia de tamaño si no tienes ninguna otra herramienta a la mano.</StepRow>
      </div>
      <div style={{ background: 'var(--plum-100)', borderRadius: 'var(--radius-lg)', padding: '20px 24px' }}>
        <p style={{ fontFamily: 'var(--font-ui)', fontSize: '15.5px', lineHeight: 1.6, color: 'var(--plum-800)', margin: 0 }}><strong>La medida final y exacta la toma Pipeko</strong> en tu visita de medición, antes de fabricar.</p>
      </div>
    </div>
  );
}

function GuideBlock({ line, go, reverse }) {
  const isMobile = window.usePKMobile();
  const colors = line.colors || (line.colorsByTier || []).flatMap((t) => t.colors);
  const content = (
    <div>
      {line.tag && <div style={{ marginBottom: '14px' }}><Badge tone="taupe" variant="soft">{line.tag}</Badge></div>}
      <h2 id={line.slug} style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '30px', letterSpacing: '-.02em', margin: '0 0 10px' }}>{line.name}</h2>
      <p style={{ fontFamily: 'var(--font-ui)', fontSize: '17px', lineHeight: 1.6, color: 'var(--slate-800)', margin: '0 0 22px' }}>{line.tagline}</p>

      <div style={{ marginBottom: '20px' }}>
        <div style={{ fontFamily: 'var(--font-ui)', fontSize: '13px', fontWeight: 700, letterSpacing: '.04em', color: 'var(--text-muted)', marginBottom: '10px' }}>Espacios ideales</div>
        <Pills items={line.idealFor} />
      </div>
      <div style={{ marginBottom: '26px' }}>
        <div style={{ fontFamily: 'var(--font-ui)', fontSize: '13px', fontWeight: 700, letterSpacing: '.04em', color: 'var(--text-muted)', marginBottom: '10px' }}>Mejor evitar en</div>
        <Pills items={line.notIdealFor} tone="muted" />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: '24px', marginBottom: '26px' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-ui)', fontSize: '13px', fontWeight: 700, letterSpacing: '.04em', color: 'var(--plum-800)', marginBottom: '10px' }}>Ventajas</div>
          <ul style={{ margin: 0, paddingLeft: '18px', fontFamily: 'var(--font-ui)', fontSize: '15px', lineHeight: 1.65, color: 'var(--slate-800)', display: 'flex', flexDirection: 'column', gap: '4px' }}>
            {line.benefits.map((b, i) => <li key={i}>{b}</li>)}
          </ul>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-ui)', fontSize: '13px', fontWeight: 700, letterSpacing: '.04em', color: 'var(--text-muted)', marginBottom: '10px' }}>Desventajas</div>
          <ul style={{ margin: 0, paddingLeft: '18px', fontFamily: 'var(--font-ui)', fontSize: '15px', lineHeight: 1.65, color: 'var(--text-muted)', display: 'flex', flexDirection: 'column', gap: '4px' }}>
            {line.limitations.map((b, i) => <li key={i}>{b}</li>)}
          </ul>
        </div>
      </div>

      <div style={{ display: 'flex', gap: '6px', marginBottom: '24px' }}>
        {colors.slice(0, 6).map((c) => (<span key={c} title={c} style={{ width: '17px', height: '17px', borderRadius: '50%', background: window.PK_COLOR_HEX[c] || '#ccc', border: '1px solid var(--warmgrey-300)' }}></span>))}
      </div>

      <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap' }}>
        <a href="#" onClick={(e) => { e.preventDefault(); go('producto', line.slug); }} style={{ fontFamily: 'var(--font-ui)', fontSize: '15px', fontWeight: 600, color: 'var(--plum-800)', textDecoration: 'none' }}>Ver ficha completa de {line.name} ›</a>
        <a href={waLink('Hola, tengo dudas sobre ' + line.name + '.')} target="_blank" rel="noopener" style={{ fontFamily: 'var(--font-ui)', fontSize: '15px', fontWeight: 600, color: 'var(--text-muted)', textDecoration: 'none' }}>Preguntar por WhatsApp ›</a>
      </div>
    </div>
  );
  const image = (
    <div style={{ position: 'relative', aspectRatio: '4 / 3', borderRadius: 'var(--radius-xl)', overflow: 'hidden', boxShadow: 'var(--shadow-md)' }}>
      <img src={line.installPhoto || undefined} alt={'Foto: ' + line.name + ' instalada en ventana'} 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>
  );
  return (
    <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? '28px' : '48px', alignItems: 'center' }}>
      {reverse && !isMobile ? <React.Fragment>{content}{image}</React.Fragment> : <React.Fragment>{image}{content}</React.Fragment>}
    </div>
  );
}

function GuiaScreen({ go }) {
  const isMobile = window.usePKMobile();
  React.useEffect(() => {
    window.PKSEO.setMeta('Guías: cómo medir tu ventana y qué persiana elegir | Pipeko', 'Cómo medir tu ventana sin regla y qué línea de persiana conviene para cada espacio: Sheer Elegance, Blackout o Malla Solar. Ventajas, desventajas y garantía de 5 años en mecanismo.');
    window.PKSEO.setCanonical('https://www.pipekointeriores.com/guias');
    window.PKSEO.setOG({ title: 'Guías: cómo medir tu ventana y qué persiana elegir | Pipeko', description: 'Cómo medir tu ventana sin regla y qué línea de persiana conviene para cada espacio: Sheer Elegance, Blackout o Malla Solar. Ventajas, desventajas y garantía de 5 años en mecanismo.', url: 'https://www.pipekointeriores.com/guias' });
    window.PKSEO.setBreadcrumb('ld-breadcrumb', [{ name: 'Inicio', url: 'https://www.pipekointeriores.com/' }, { name: 'Guías', url: 'https://www.pipekointeriores.com/guias' }]);
    return () => window.PKSEO.clearJsonLd('ld-breadcrumb');
  }, []);
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });

  return (
    <div style={{ background: 'var(--cream-100)' }}>
      <div style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: isMobile ? '32px 20px 8px' : '48px 32px 8px' }}>
        <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><span>Guías</span>
        </div>
        <Badge tone="taupe" variant="soft">Guías</Badge>
        <h1 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: isMobile ? '28px' : '42px', lineHeight: 1.18, letterSpacing: '-.02em', margin: '16px 0 18px' }}>
          Guías para elegir y medir bien
        </h1>
        <p style={{ fontFamily: 'var(--font-ui)', fontSize: '19px', lineHeight: 1.65, color: 'var(--slate-800)', margin: 0 }}>
          Cómo medir tu ventana sin regla y qué línea de persiana conviene para cada espacio, con sus ventajas y lo que hay que considerar antes de decidir.
        </p>
      </div>

      <div style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: '56px 32px 0' }}>
        <MedicionGuide />
      </div>

      <div style={{ maxWidth: 'var(--container-text)', margin: '64px auto 0', padding: '56px 32px 0', borderTop: '1px solid var(--warmgrey-200)' }}>
        <Badge tone="taupe" variant="soft">Guía de compra</Badge>
        <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '34px', lineHeight: 1.16, letterSpacing: '-.02em', margin: '16px 0 14px' }}>
          ¿Cuál es la mejor persiana para cada persona y cada espacio?
        </h2>
        <p style={{ fontFamily: 'var(--font-ui)', fontSize: '18px', lineHeight: 1.65, color: 'var(--slate-800)', margin: 0 }}>
          Cada línea de Pipeko resuelve una necesidad distinta de luz, privacidad y presupuesto. Aquí te explicamos para qué habitación y qué necesidad conviene cada una, con sus ventajas y lo que hay que considerar antes de decidir.
        </p>
      </div>

      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? '20px 20px 8px' : '32px 32px 8px', display: 'flex', flexDirection: 'column', gap: isMobile ? '56px' : '80px' }}>
        {window.PK_CATALOG.map((line, i) => <GuideBlock key={line.slug} line={line} go={go} reverse={i % 2 === 1} />)}
      </div>

      <div style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: '80px 32px 88px' }}>
        <div style={{ background: 'var(--slate-800)', borderRadius: 'var(--radius-xl)', padding: '40px', textAlign: 'center' }}>
          <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--cream-50)', fontWeight: 600, fontSize: '26px', margin: '0 0 10px' }}>¿Sigues sin decidirte?</h2>
          <p style={{ fontFamily: 'var(--font-ui)', color: 'var(--slate-200)', fontSize: '16px', margin: '0 0 24px', maxWidth: '46ch', marginLeft: 'auto', marginRight: 'auto' }}>
            Cuéntanos tu espacio y tu necesidad por WhatsApp — te ayudamos a elegir sin compromiso, o revisa el <a href="#" onClick={(e) => { e.preventDefault(); go('comparacion'); }} style={{ color: 'var(--cream-50)', fontWeight: 600 }}>comparador completo</a>.
          </p>
          <Button size="lg" variant="primary" as="a" href={waLink('Hola, no sé qué línea de persiana me conviene. ¿Me ayudan a elegir?')} target="_blank" rel="noopener">Preguntar por WhatsApp</Button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PKGuia: GuiaScreen });
