// Pipeko website — Home screen. Exports window.PKHome.
const { Button, Badge, Card, ProductCard, ArticleCard } = window.PipekoInterioresDesignSystem_5fe34e;
const { link: waLink } = window.PKWhatsApp;
const HERO_VISUAL = window.__resources.heroVisual;
const LIGHT_LEVELS = { Nula: 0, 'Media-alta': 3, Ajustable: 'range' };
const PRIV_LEVELS = { Media: 2, Total: 4, Ajustable: 'range' };

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 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 SectionHead({ eyebrow, title, action, onAction }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: '32px', gap: '24px', flexWrap: 'wrap' }}>
      <div>
        <div style={{ fontFamily: 'var(--font-ui)', fontSize: '12px', letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--taupe-500)', fontWeight: 600, marginBottom: '10px' }}>{eyebrow}</div>
        <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '38px', letterSpacing: '-.02em', margin: 0 }}>{title}</h2>
      </div>
      {action && <a href="#" onClick={(e) => { e.preventDefault(); onAction && onAction(); }} style={{ fontFamily: 'var(--font-ui)', fontSize: '15px', fontWeight: 600, color: 'var(--plum-800)', textDecoration: 'none', whiteSpace: 'nowrap' }}>{action} ›</a>}
    </div>
  );
}

function PersianaVisual() {
  return (
    <div style={{ position: 'relative', aspectRatio: '4 / 5', borderRadius: 'var(--radius-xl)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)' }}>
      <img src={HERO_VISUAL} alt="Persiana Sheer Elegance Pipeko instalada en ventana de sala moderna en CDMX" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
    </div>
  );
}

function Hero() {
  const isMobile = window.usePKMobile();
  return (
    <section style={{ background: 'var(--cream-100)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? '32px 20px 56px' : '48px 32px 80px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.05fr 1fr', gap: isMobile ? '32px' : '56px', alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'var(--font-ui)', fontSize: '13px', letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--taupe-500)', fontWeight: 600, marginBottom: '22px' }}>Persianas a la medida · La mejor relación precio-calidad en CDMX</div>
            <h1 style={{ fontFamily: 'var(--font-serif)', color: 'var(--slate-800)', fontWeight: 700, fontSize: isMobile ? '38px' : '58px', lineHeight: 1.08, letterSpacing: '-.02em', margin: '0 0 28px' }}>
              Tradición familiar en Ciudad de México
            </h1>
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: isMobile ? '17px' : '20px', lineHeight: 1.6, color: 'var(--slate-800)', maxWidth: isMobile ? 'none' : '46ch', margin: '0 0 32px' }}>
              Somos una empresa mexicana con más de 35 años de experiencia técnica. Fabricante directo y sin intermediarios: persianas de calidad a buen precio, hechas a la medida con materiales duraderos y garantía de 5 años en mecanismo.
            </p>
            <Button size="lg" variant="primary" as="a" href={waLink('Hola, quiero cotizar persianas.')} target="_blank" rel="noopener">Escríbenos por WhatsApp</Button>
          </div>
          <PersianaVisual />
        </div>
      </div>
    </section>
  );
}

function MaterialesReales({ go }) {
  const isMobile = window.usePKMobile();
  return (
    <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: isMobile ? '48px 20px' : '80px 32px' }}>
        <div style={{ maxWidth: '68ch', marginBottom: '40px' }}>
          <div style={{ fontFamily: 'var(--font-ui)', fontSize: '12px', letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--taupe-500)', fontWeight: 600, marginBottom: '10px' }}>Materiales reales</div>
          <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: isMobile ? '26px' : '34px', letterSpacing: '-.02em', margin: '0 0 14px' }}>Persianas de calidad: conoce qué estás comprando</h2>
          <p style={{ fontFamily: 'var(--font-ui)', fontSize: '18px', lineHeight: 1.65, color: 'var(--slate-800)', margin: 0 }}>Te explicamos las diferencias entre materiales y tonos para que puedas elegir por conocimiento, calidad y durabilidad, no solamente por el costo.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: '24px' }}>
          {window.PK_CATALOG.map((l) => {
            const colors = l.colors || (l.colorsByTier || []).flatMap((t) => t.colors);
            return (
              <div key={l.slug} style={{ background: 'var(--cream-50)', border: '1px solid var(--warmgrey-200)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
                <div style={{ aspectRatio: '16 / 10', overflow: 'hidden' }}><img src={l.materialesPhoto || undefined} alt={'Persiana ' + l.name + ' a la medida Pipeko – material y textura de cerca'} 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={{ padding: '22px' }}>
                  <h3 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '19px', margin: '0 0 8px' }}>{l.name}</h3>
                  <p style={{ fontFamily: 'var(--font-ui)', fontSize: '14px', lineHeight: 1.55, color: 'var(--text-muted)', margin: '0 0 16px', minHeight: '44px' }}>{l.material}</p>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginBottom: '16px' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                      <i data-lucide="sun" style={{ width: '14px', height: '14px', color: 'var(--taupe-500)', flexShrink: 0 }}></i>
                      <span style={{ fontFamily: 'var(--font-ui)', fontSize: '12.5px', color: 'var(--slate-800)', width: '78px', flexShrink: 0 }}>{l.light.label}</span>
                      <LevelDots level={LIGHT_LEVELS[l.light.label]} />
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                      <i data-lucide="eye-off" style={{ width: '14px', height: '14px', color: 'var(--taupe-500)', flexShrink: 0 }}></i>
                      <span style={{ fontFamily: 'var(--font-ui)', fontSize: '12.5px', color: 'var(--slate-800)', width: '78px', flexShrink: 0 }}>{l.privacy.label}</span>
                      <LevelDots level={PRIV_LEVELS[l.privacy.label]} />
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: '6px', marginBottom: '16px' }}>
                    {colors.slice(0, 6).map((c) => (<span key={c} title={c} style={{ width: '15px', height: '15px', borderRadius: '50%', background: window.PK_COLOR_HEX[c] || '#ccc', border: '1px solid var(--warmgrey-300)' }}></span>))}
                  </div>
                  <a href="#" onClick={(e) => { e.preventDefault(); go('producto', l.slug); }} style={{ fontFamily: 'var(--font-ui)', fontSize: '14px', fontWeight: 600, color: 'var(--plum-800)', textDecoration: 'none' }}>Conocer esta línea ›</a>
                </div>
              </div>
            );
          })}
        </div>

      </div>
    </section>
  );
}

function EduBlock({ go }) {
  const isMobile = window.usePKMobile();
  const arts = [
    { eyebrow: 'Guía de materiales', title: '¿Qué hace que una persiana dure años?', excerpt: 'El mecanismo, el tejido y la instalación marcan la diferencia.', img: window.__resources.artImg1 },
    { 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.', img: window.__resources.artImg2, route: 'comparacion' },
    { eyebrow: 'Mantenimiento', title: 'Cuida tus persianas en 10 minutos', excerpt: 'Una rutina simple alarga la vida de cualquier tejido.', img: window.__resources.artImg3, route: 'faq' },
  ];
  return (
    <section style={{ background: 'var(--cream-100)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? '48px 20px' : '80px 32px' }}>
        <SectionHead eyebrow="Aprende antes de comprar" title="Guías para elegir tus persianas" action="Todas las guías" onAction={() => go('articulo')} />
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: '24px' }}>
          {arts.map((a, i) => (
            <ArticleCard key={i} eyebrow={a.eyebrow} title={a.title} excerpt={a.excerpt}
              image={a.img} onClick={(e) => { e.preventDefault(); go(a.route || 'articulo'); }} />
          ))}
        </div>
      </div>
    </section>
  );
}

function TuInversionSegura({ go }) {
  const rows = [
    { icon: 'shield-check', label: 'Respaldo', pipeko: 'Garantía de 5 años en mecanismo', otros: 'Sin ella' },
    { icon: 'hammer', label: 'Montaje', pipeko: 'Experto e incluido', otros: 'Lo haces tú mismo, sin soporte' },
    { icon: 'layers', label: 'Textiles', pipeko: 'Alta calidad, duradera', otros: 'Plásticos finos' },
    { icon: 'users', label: 'Trato', pipeko: 'Trato directo, 35 años de respaldo', otros: 'Chatbot automático' },
  ];
  return (
    <section style={{ background: 'var(--cream-100)' }}>
      <div style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: '80px 32px', textAlign: 'center' }}>
        <div style={{ fontFamily: 'var(--font-ui)', fontSize: '12px', letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--taupe-500)', fontWeight: 600, marginBottom: '14px' }}>Mejor relación precio-calidad</div>
        <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '38px', letterSpacing: '-.02em', margin: '0 0 20px', lineHeight: 1.15 }}>¿Persianas muy baratas en línea?</h2>
        <p style={{ fontFamily: 'var(--font-ui)', fontSize: '18px', lineHeight: 1.7, color: 'var(--slate-800)', margin: '0 0 40px' }}>
          Pipeko ofrece la mejor relación precio-calidad en persianas a la medida. A diferencia de opciones genéricas de bajo costo, recibes trato directo y cercano, garantía de 5 años en mecanismo y materiales que no se degradan con el uso diario. Calidad y precio en equilibrio.
        </p>
        <div style={{ overflowX: 'auto' }}>
        <div style={{ minWidth: '560px', borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid var(--warmgrey-200)', boxShadow: 'var(--shadow-md)', textAlign: 'left' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '150px 1fr 1fr', background: 'var(--cream-50)' }}>
            <div></div>
            <div style={{ padding: '18px', 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: '8px 22px', borderRadius: 'var(--radius-pill)' }}>PIPEKO</span></div>
            <div style={{ padding: '18px', 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: '8px 22px', borderRadius: 'var(--radius-pill)', border: '1px solid var(--warmgrey-300)' }}>TEMU</span></div>
          </div>
          {rows.map((r) => (
            <div key={r.label} style={{ display: 'grid', gridTemplateColumns: '150px 1fr 1fr', borderTop: '1px solid var(--warmgrey-200)' }}>
              <div style={{ padding: '18px 16px', display: 'flex', alignItems: 'center', gap: '8px' }}>
                <i data-lucide={r.icon} style={{ width: '15px', height: '15px', color: 'var(--taupe-500)', flexShrink: 0 }}></i>
                <span style={{ fontFamily: 'var(--font-ui)', fontSize: '13px', fontWeight: 700, letterSpacing: '.02em', color: 'var(--text-muted)' }}>{r.label}</span>
              </div>
              <div style={{ padding: '18px 16px', background: 'var(--plum-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px', textAlign: 'center' }}>
                <i data-lucide="circle-check" style={{ width: '15px', height: '15px', color: 'var(--plum-800)', flexShrink: 0 }}></i>
                <span style={{ fontFamily: 'var(--font-ui)', fontSize: '15px', fontWeight: 600, color: 'var(--plum-800)' }}>{r.pipeko}</span>
              </div>
              <div style={{ padding: '18px 16px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px', textAlign: 'center' }}>
                <i data-lucide="circle-x" style={{ width: '15px', height: '15px', color: 'var(--warmgrey-400)', flexShrink: 0 }}></i>
                <span style={{ fontFamily: 'var(--font-ui)', fontSize: '15px', color: 'var(--text-muted)' }}>{r.otros}</span>
              </div>
            </div>
          ))}
        </div>
        </div>
        <div style={{ marginTop: '28px' }}>
          <a href="#" onClick={(e) => { e.preventDefault(); go('comparacion'); }} style={{ fontFamily: 'var(--font-ui)', fontSize: '15px', fontWeight: 600, color: 'var(--plum-800)', textDecoration: 'none' }}>Ver la comparación completa ›</a>
        </div>
      </div>
    </section>
  );
}

function OwnerInstalling() {
  const isMobile = window.usePKMobile();
  return (
    <section style={{ background: 'var(--slate-800)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? '48px 20px' : '72px 32px' }}>
        <div style={{ marginBottom: '36px', maxWidth: '60ch' }}>
          <div style={{ fontFamily: 'var(--font-ui)', fontSize: '12px', letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--slate-200)', fontWeight: 600, marginBottom: '10px' }}>Quién te instala</div>
          <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--cream-50)', 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-200)', margin: 0 }}>
            Instaladores propios, capacitados directamente por el dueño. Si algo no queda bien, él lo resuelve personalmente.
          </p>
        </div>
      </div>
    </section>
  );
}

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', 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 Combinalas() {
  const isMobile = window.usePKMobile();
  return (
    <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: isMobile ? '48px 20px' : '80px 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' }}>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: '28px', marginBottom: '32px' }}>
          <div style={{ aspectRatio: '1402 / 1122', minWidth: 0, minHeight: 0 }}><image-slot id="home-combinalas-blackout-mallasolar" shape="rounded" radius="16" placeholder="Foto: Blackout + Malla Solar" alt="Persiana Blackout combinada con Malla Solar instalada en ventana – combinación Pipeko para mayor durabilidad" src={window.__resources.pImg9}></image-slot></div>
          <div style={{ aspectRatio: '1402 / 1122', minWidth: 0, minHeight: 0 }}><image-slot id="home-combinalas-sheer-blackout" shape="rounded" radius="16" placeholder="Foto: Sheer Elegance + Blackout" alt="Persiana Sheer Elegance combinada con Blackout en ventana – combinación Pipeko para luz y privacidad" src={window.__resources.pImg27}></image-slot></div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: '24px' }}>
          <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 zonas con muchísimo sol. La malla solar es más resistente y ayuda a proteger el blackout, prolongando su vida útil.
            </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 diseño y funcionalidad, además de ayudar a prolongar la vida útil de la Sheer Elegance.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Categories({ go }) {
  const isMobile = window.usePKMobile();
  return (
    <section style={{ background: 'var(--cream-100)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? '48px 20px' : '80px 32px' }}>
        <SectionHead eyebrow="Catálogo" title="Elige tu línea de persiana" action="Compara las 3 líneas" onAction={() => go('comparacion')} />
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: '24px' }}>
          {window.PK_CATALOG.map((l) => (
            <SlotProductCard key={l.slug} slotId={'ph-install-' + l.slug} placeholder={'Persiana ' + l.name + ' a la medida instalada por Pipeko'} src={l.installPhoto}
              tag={l.tag} name={l.name} description={l.tagline} ctaLabel="Conocer esta línea"
              onNavigate={(e) => { e.preventDefault(); go('producto', l.slug); }} />
          ))}
        </div>
      </div>
    </section>
  );
}

function SocialProof() {
  const isMobile = window.usePKMobile();
  return (
    <section style={{ background: 'var(--plum-800)', color: 'var(--cream-50)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? '48px 20px' : '72px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '40px', flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', gap: isMobile ? '32px' : '56px' }}>
          <div>
            <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: '48px', lineHeight: 1, color: 'var(--cream-50)' }}>35 años</div>
            <div style={{ fontFamily: 'var(--font-ui)', fontSize: '15px', color: 'color-mix(in srgb, var(--cream-50) 82%, transparent)', marginTop: '8px' }}>Empresa familiar</div>
          </div>
          <div>
            <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: '48px', lineHeight: 1, color: 'var(--cream-50)' }}>5 años</div>
            <div style={{ fontFamily: 'var(--font-ui)', fontSize: '15px', color: 'color-mix(in srgb, var(--cream-50) 82%, transparent)', marginTop: '8px' }}>Garantía en mecanismo</div>
          </div>
        </div>
        <Button size="lg" variant="primary" as="a"
          iconLeft={<window.PKWhatsAppIcon size={20} />}
          href={waLink('Hola, quiero cotizar persianas.')} target="_blank" rel="noopener">Escríbenos por WhatsApp</Button>
      </div>
    </section>
  );
}

function HomeScreen({ go }) {
  React.useEffect(() => {
    window.PKSEO.setMeta(
      'Persianas a la Medida en CDMX y Edoméx | Fabricante Directo – Pipeko',
      'Fabricante directo de persianas a la medida en Ciudad de México. Sheer Elegance, Blackout y Malla Solar con la mejor relación precio-calidad, garantía de 5 años en mecanismo e instalación incluida.'
    );
    window.PKSEO.setCanonical('https://www.pipekointeriores.com/');
    window.PKSEO.setOG({
      title: 'Persianas a la Medida en CDMX | Pipeko – Fabricante Directo',
      description: 'Empresa familiar mexicana con 35 años de experiencia. Persianas Sheer Elegance, Blackout y Malla Solar con garantía de 5 años en mecanismo e instalación incluida.',
      url: 'https://www.pipekointeriores.com/'
    });
  }, []);
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  return (
    <React.Fragment>
      <Hero />
      <MaterialesReales go={go} />
      <EduBlock go={go} />
      <TuInversionSegura go={go} />
      <OwnerInstalling />
      <Combinalas />
      <Categories go={go} />
      <SocialProof />
    </React.Fragment>
  );
}

Object.assign(window, { PKHome: HomeScreen });
