// Pipeko website — Product line detail screen (Sheer Elegance / Blackout / Malla Solar). Exports window.PKProducto.
const { Button, Badge } = window.PipekoInterioresDesignSystem_5fe34e;
const { link: waLink } = window.PKWhatsApp;

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

function PSwatch({ name, photo, slotId }) {
  const hex = window.PK_COLOR_HEX[name] || '#CFC9C0';
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '6px' }}>
      <div style={{ width: '110px', height: '110px', borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid var(--warmgrey-300)', boxShadow: 'var(--shadow-xs)', background: 'color-mix(in srgb, ' + hex + ' 20%, var(--cream-50))' }}>
        <img src={photo || undefined} alt={name} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
      </div>
      <span style={{ fontFamily: 'var(--font-ui)', fontSize: '12px', color: 'var(--text-muted)', textAlign: 'center' }}>{name}</span>
    </div>
  );
}

function SpecRow({ label, value, detail, first }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: '20px', padding: '18px 0', borderTop: first ? 'none' : '1px solid var(--warmgrey-200)' }}>
      <div style={{ fontFamily: 'var(--font-ui)', fontSize: '14px', fontWeight: 700, letterSpacing: '.03em', color: 'var(--text-muted)' }}>{label}</div>
      <div>
        <div style={{ fontFamily: 'var(--font-serif)', fontSize: '19px', color: 'var(--plum-800)', fontWeight: 600, marginBottom: detail ? '4px' : 0 }}>{value}</div>
        {detail && <div style={{ fontFamily: 'var(--font-ui)', fontSize: '15px', lineHeight: 1.6, color: 'var(--slate-800)' }}>{detail}</div>}
      </div>
    </div>
  );
}

function PList({ items, tone }) {
  const color = tone === 'muted' ? 'var(--text-muted)' : 'var(--slate-800)';
  return (
    <ul style={{ margin: 0, paddingLeft: '20px', fontFamily: 'var(--font-ui)', fontSize: '16px', lineHeight: 1.7, color, display: 'flex', flexDirection: 'column', gap: '4px' }}>
      {items.map((it, i) => <li key={i}>{it}</li>)}
    </ul>
  );
}

function ProductoScreen({ go, line }) {
  const isMobile = window.usePKMobile();
  const data = window.PK_CATALOG.find((l) => l.slug === line) || window.PK_CATALOG[0];
  const otherLines = window.PK_CATALOG.filter((l) => l.slug !== data.slug);

  React.useEffect(() => {
    window.PKSEO.setMeta(
      data.seoTitle || ('Persianas ' + data.name + ' | Pipeko'),
      data.seoDescription || (data.tagline + ' Garantía de 5 años en mecanismo e instalación incluida.')
    );
    window.PKSEO.setJsonLd('ld-product', {
      '@context': 'https://schema.org', '@type': 'Product', name: 'Persianas ' + data.name + ' a la medida',
      description: data.intro,
      brand: { '@type': 'Brand', name: 'Pipeko' },
      manufacturer: { '@type': 'Organization', name: 'Pipeko Interiores', url: 'https://www.pipekointeriores.com' },
      color: (data.colors || (data.colorsByTier || []).flatMap((t) => t.colors)).join(', '),
      url: 'https://www.pipekointeriores.com/persianas/' + data.slug,
      category: 'Persianas a la medida',
      material: data.material,
      offers: {
        '@type': 'Offer',
        priceCurrency: 'MXN',
        availability: 'https://schema.org/InStock',
        url: 'https://www.pipekointeriores.com/persianas/' + data.slug,
        seller: { '@type': 'Organization', name: 'Pipeko Interiores' },
        warranty: '5 años en mecanismo',
        shippingDetails: {
          '@type': 'OfferShippingDetails',
          shippingDestination: { '@type': 'DefinedRegion', addressCountry: 'MX', addressRegion: ['CMX', 'MEX'] },
          deliveryTime: { '@type': 'ShippingDeliveryTime', businessDays: { '@type': 'QuantitativeValue', minValue: 1, maxValue: 5 } }
        },
        hasMerchantReturnPolicy: {
          '@type': 'MerchantReturnPolicy',
          applicableCountry: 'MX',
          returnPolicyCategory: 'https://schema.org/MerchantReturnNotPermitted'
        }
      },
      additionalProperty: [
        { '@type': 'PropertyValue', name: 'Garantía en mecanismo', value: '5 años' },
        { '@type': 'PropertyValue', name: 'Instalación', value: 'Profesional, incluida en el precio' },
        { '@type': 'PropertyValue', name: 'Control de luz', value: data.light.label },
        { '@type': 'PropertyValue', name: 'Privacidad', value: data.privacy.label }
      ]
    });
    window.PKSEO.setBreadcrumb('ld-breadcrumb', [
      { name: 'Inicio', url: 'https://www.pipekointeriores.com/' },
      { name: 'Persianas', url: 'https://www.pipekointeriores.com/persianas' },
      { name: data.name, url: 'https://www.pipekointeriores.com/persianas/' + data.slug }
    ]);
    window.PKSEO.setCanonical('https://www.pipekointeriores.com/persianas/' + data.slug);
    window.PKSEO.setOG({
      title: 'Persianas ' + data.name + ' a la Medida | Pipeko CDMX',
      description: data.intro + ' Garantía de 5 años en mecanismo e instalación incluida.',
      url: 'https://www.pipekointeriores.com/persianas/' + data.slug
    });
    return () => { window.PKSEO.clearJsonLd('ld-product'); window.PKSEO.clearJsonLd('ld-breadcrumb'); };
  }, [data]);

  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>
          <a href="#" onClick={(e) => { e.preventDefault(); go('catalogo'); }} style={{ color: 'var(--text-muted)', textDecoration: 'none' }}>Persianas</a>
          <span> / </span><span>{data.name}</span>
        </div>
      </div>

      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? '0 20px 40px' : '0 32px 64px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? '28px' : '56px', alignItems: 'center' }}>
        <div>
          {data.tag && <div style={{ marginBottom: '16px' }}><Badge tone="taupe" variant="soft">{data.tag}</Badge></div>}
          <h1 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: isMobile ? '30px' : '46px', lineHeight: 1.15, letterSpacing: '-.02em', margin: '0 0 16px' }}>Persianas {data.name}</h1>
          <p style={{ fontFamily: 'var(--font-ui)', fontSize: '19px', lineHeight: 1.65, color: 'var(--slate-800)', margin: '0 0 24px' }}>{data.intro}</p>
          <Button size="lg" variant="primary" as="a" href={waLink('Hola, me interesa cotizar: ' + data.name + '.')} target="_blank" rel="noopener">Cotiza {data.name} por WhatsApp</Button>
        </div>
        <div style={{ position: 'relative', aspectRatio: '4 / 5', borderRadius: 'var(--radius-xl)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)' }}>
          <img src={data.installPhoto || undefined} alt={'Persiana ' + data.name + ' a la medida instalada por Pipeko en Ciudad de México'} 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>

      {data.howItWorks && (
        <div style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: isMobile ? '0 20px 40px' : '0 32px 56px' }}>
          <div style={{ background: 'var(--plum-100)', borderRadius: 'var(--radius-lg)', padding: '28px 32px' }}>
            <div style={{ fontFamily: 'var(--font-ui)', fontSize: '12px', letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--plum-800)', fontWeight: 600, marginBottom: '10px' }}>Cómo funciona</div>
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: '17px', lineHeight: 1.7, color: 'var(--slate-800)', margin: 0 }}>{data.howItWorks}</p>
          </div>
        </div>
      )}

      <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 ? '40px 20px' : '56px 32px' }}>
          <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '28px', margin: '0 0 10px' }}>Colores disponibles</h2>
          {data.colorIntro && <p style={{ fontFamily: 'var(--font-ui)', fontSize: '16px', lineHeight: 1.6, color: 'var(--slate-800)', margin: '0 0 22px', maxWidth: '68ch' }}>{data.colorIntro}</p>}
          {data.colorsByTier ? (
            <div style={{ display: 'flex', flexDirection: 'column', gap: '28px' }}>
              {data.colorsByTier.map((t) => {
                const tierSlug = slugColor(t.tier);
                return (
                <div key={t.tier}>
                  <div style={{ fontFamily: 'var(--font-ui)', fontSize: '13px', fontWeight: 700, letterSpacing: '.05em', color: 'var(--text-muted)', marginBottom: '14px', textTransform: 'uppercase' }}>{t.tier}</div>
                  <div style={{ display: 'flex', gap: '22px', flexWrap: 'wrap' }}>{t.colors.map((c) => <PSwatch key={t.tier + '-' + c} name={c} photo={data.colorPhotos && data.colorPhotos[c]} slotId={'ph-swatch-' + data.slug + '-' + tierSlug + '-' + slugColor(c)} />)}</div>
                </div>
                );
              })}
            </div>
          ) : (
            <div style={{ display: 'flex', gap: '22px', flexWrap: 'wrap' }}>{data.colors.map((c) => <PSwatch key={c} name={c} photo={data.colorPhotos && data.colorPhotos[c]} slotId={'ph-swatch-' + data.slug + '-' + slugColor(c)} />)}</div>
          )}
        </div>
      </section>

      <div style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: isMobile ? '40px 20px' : '56px 32px' }}>
        <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '28px', margin: '0 0 8px' }}>Ficha técnica</h2>
        <div>
          <SpecRow first label="Material" value={data.material} />
          <SpecRow label="Control de luz" value={data.light.label} detail={data.light.detail} />
          <SpecRow label="Privacidad" value={data.privacy.label} detail={data.privacy.detail} />
          <SpecRow label="Blackout" value={data.blackoutLabel} />
          <SpecRow label="Durabilidad" value={data.durability} />
        </div>
        <div style={{ marginTop: '4px', paddingTop: '18px', borderTop: '1px solid var(--warmgrey-200)' }}>
          <div style={{ fontFamily: 'var(--font-ui)', fontSize: '14px', fontWeight: 700, letterSpacing: '.03em', color: 'var(--text-muted)', marginBottom: '12px' }}>Tiers</div>
          <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', marginBottom: '10px' }}>
            {data.tiers.map((t) => (
              <div key={t.name} style={{ border: '1px solid var(--warmgrey-200)', borderRadius: 'var(--radius-sm)', padding: '10px 16px' }}>
                <div style={{ fontFamily: 'var(--font-ui)', fontSize: '13px', fontWeight: 700, color: 'var(--plum-800)' }}>{t.name}</div>
                {t.note && <div style={{ fontFamily: 'var(--font-ui)', fontSize: '13px', color: 'var(--text-muted)', marginTop: '2px' }}>{t.note}</div>}
              </div>
            ))}
          </div>
          <div style={{ fontFamily: 'var(--font-ui)', fontSize: '14px', color: 'var(--text-faint)' }}>{data.tiersNote}</div>
        </div>
      </div>

      <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 ? '40px 20px' : '56px 32px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? '28px' : '40px' }}>
          <div>
            <h3 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '22px', margin: '0 0 14px' }}>Beneficios</h3>
            <PList items={data.benefits} />
          </div>
          <div>
            <h3 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '22px', margin: '0 0 14px' }}>Qué considerar</h3>
            <PList items={data.limitations} tone="muted" />
          </div>
          <div>
            <h3 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '22px', margin: '0 0 14px' }}>Ideal para</h3>
            <PList items={data.idealFor} />
          </div>
          <div>
            <h3 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '22px', margin: '0 0 14px' }}>No ideal para</h3>
            <PList items={data.notIdealFor} tone="muted" />
          </div>
        </div>
      </section>

      <div style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: isMobile ? '40px 20px 0' : '56px 32px 0' }}>
        <div style={{ background: 'var(--cream-50)', border: '1px solid var(--warmgrey-200)', borderRadius: 'var(--radius-lg)', padding: '24px 28px' }}>
          <div style={{ fontFamily: 'var(--font-ui)', fontSize: '12px', letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--taupe-500)', fontWeight: 600, marginBottom: '10px' }}>Cuidado</div>
          <p style={{ fontFamily: 'var(--font-ui)', fontSize: '16px', lineHeight: 1.7, color: 'var(--slate-800)', margin: 0 }}>{data.care}</p>
        </div>
      </div>

      <div style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: isMobile ? '32px 20px 48px' : '40px 32px 64px', display: 'flex', gap: '28px', flexWrap: 'wrap' }}>
        <a href="#" onClick={(e) => { e.preventDefault(); go('guia'); }} style={{ fontFamily: 'var(--font-ui)', fontSize: '15px', fontWeight: 600, color: 'var(--plum-800)', textDecoration: 'none' }}>¿Cuál persiana te conviene? ›</a>
        <a href="#" onClick={(e) => { e.preventDefault(); go('comparacion'); }} style={{ fontFamily: 'var(--font-ui)', fontSize: '15px', fontWeight: 600, color: 'var(--plum-800)', textDecoration: 'none' }}>Compara las 3 líneas ›</a>
      </div>

      <section style={{ background: 'var(--slate-800)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? '40px 20px' : '64px 32px' }}>
          <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--cream-50)', fontWeight: 600, fontSize: '26px', margin: '0 0 24px' }}>También te puede interesar</h2>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: '24px' }}>
            {otherLines.map((l) => (
              <a key={l.slug} href="#" onClick={(e) => { e.preventDefault(); go('producto', l.slug); }} style={{ display: 'flex', flexDirection: 'column', textDecoration: 'none', background: 'var(--cream-50)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
                <div style={{ aspectRatio: '16 / 9', overflow: 'hidden' }}><img src={l.detailPhoto || undefined} alt={'Persiana ' + l.name + ' a la medida – Pipeko fabricante directo CDMX'} 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: '18px 20px' }}>
                  <div style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '19px', marginBottom: '4px' }}>{l.name}</div>
                  <div style={{ fontFamily: 'var(--font-ui)', color: 'var(--text-muted)', fontSize: '14px' }}>{l.tagline}</div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PKProducto: ProductoScreen });