// PepLab Co — Page sections

const Hero = ({ palette, motion }) => {
  const isHighMotion = motion === "high";
  return (
    <section style={{
      position: "relative",
      minHeight: "100vh",
      display: "flex",
      alignItems: "center",
      overflow: "hidden",
      background: "var(--navy-deep)",
    }}>
      {/* lifestyle bg */}
      <div style={{ position: "absolute", inset: 0, zIndex: 0 }}>
        <img
          src="/uploads/hero-beauty.png"
          alt=""
          aria-hidden="true"
          style={{
            position: "absolute", inset: 0,
            width: "100%", height: "100%",
            objectFit: "cover",
            objectPosition: "center 30%",
          }}
        />
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(135deg, rgba(11,37,69,0.78) 0%, rgba(11,37,69,0.55) 50%, rgba(11,37,69,0.85) 100%)",
        }} />
      </div>

      {/* decorative molecule */}
      <div style={{
        position: "absolute", top: "18%", right: "8%", zIndex: 1, opacity: 0.18,
        animation: isHighMotion ? "fadeUp 1.4s ease-out 0.4s both" : "none",
      }}>
        <PlMolecule size={120} color="var(--champagne)" />
      </div>

      <div className="container" style={{ position: "relative", zIndex: 2, paddingTop: 76 }}>
        <div style={{ maxWidth: 880 }}>
          <div className="fade-up" style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 32, animationDelay: "0.1s" }}>
            <span className="hairline" style={{ background: "var(--champagne)" }} />
            <span className="uppercase-eyebrow" style={{ color: "var(--champagne)" }}>Biotecnología de élite</span>
          </div>

          <h1 className="serif fade-up" style={{
            color: "var(--white)",
            fontSize: "clamp(48px, 8.5vw, 104px)",
            lineHeight: 0.98,
            fontWeight: 400,
            letterSpacing: "-0.02em",
            marginBottom: 36,
            animationDelay: "0.2s",
          }}>
            Tu mejor versión<br />
            empieza a nivel <em style={{ color: "var(--champagne)", fontStyle: "italic", fontWeight: 300 }}>celular.</em>
          </h1>

          <p className="fade-up" style={{
            color: "rgba(255,255,255,0.78)",
            fontSize: 19,
            lineHeight: 1.5,
            maxWidth: 560,
            marginBottom: 44,
            fontWeight: 300,
            animationDelay: "0.35s",
          }}>
            Péptidos importados desde Australia. Pureza superior al 99%.
            Despachos a todo Chile en 24-72 horas.
          </p>

          <div className="fade-up" style={{ display: "flex", gap: 14, flexWrap: "wrap", animationDelay: "0.5s" }}>
            <a href="#productos" className="btn btn-primary">
              Ver productos <ArrowRight size={16} />
            </a>
            <a href={waUrl()} target="_blank" rel="noopener noreferrer" className="btn btn-outline-light">
              <WhatsAppIcon size={16} color="white" />
              Conversemos por WhatsApp
            </a>
          </div>

          {/* meta strip */}
          <div className="fade-up mono" style={{
            marginTop: 80,
            display: "flex",
            gap: 48,
            color: "rgba(255,255,255,0.55)",
            fontSize: 11,
            letterSpacing: "0.15em",
            textTransform: "uppercase",
            flexWrap: "wrap",
            animationDelay: "0.7s",
          }}>
            <span>SCT-001 · 2026</span>
            <span>—</span>
            <span>SYDNEY → SANTIAGO</span>
            <span>—</span>
            <span>HPLC VERIFIED</span>
          </div>
        </div>
      </div>

      {/* scroll indicator */}
      <div style={{
        position: "absolute", bottom: 40, left: "50%", transform: "translateX(-50%)",
        display: "flex", flexDirection: "column", alignItems: "center", gap: 12,
        color: "rgba(255,255,255,0.5)",
        animation: isHighMotion ? "fadeUp 1s ease-out 1s both" : "fadeUp 0.4s both",
      }}>
        <span className="mono" style={{ fontSize: 10, letterSpacing: "0.25em" }}>SCROLL</span>
        <div style={{ width: 1, height: 48, background: "var(--champagne)", opacity: 0.6 }} />
      </div>
    </section>
  );
};

// Trust strip
const TrustStrip = () => {
  const items = [
    { tag: "AU", title: "Origen Australia", desc: "Importación directa, no reenvasado." },
    { tag: "99%", title: "Pureza HPLC", desc: "Análisis documentado por lote." },
    { tag: "2-8°", title: "Almacenaje refrigerado", desc: "Stock controlado · empaque térmico cuando corresponde." },
    { tag: "24-72h", title: "Envío nacional", desc: "Bluexpress · Chilexpress · empaque discreto." },
  ];
  return (
    <section style={{ background: "var(--cream)", padding: "56px 0", borderTop: "1px solid rgba(201, 169, 97, 0.25)", borderBottom: "1px solid rgba(201, 169, 97, 0.25)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }}>
          {items.map((item, i) => (
            <div key={i} style={{
              display: "flex", flexDirection: "column", gap: 12,
              padding: "0 24px",
              borderLeft: i === 0 ? "none" : "1px solid rgba(11, 37, 69, 0.12)",
            }}>
              <span className="mono" style={{
                fontSize: 24, fontWeight: 500, color: "var(--navy-deep)",
                letterSpacing: "0.02em",
              }}>
                {item.tag}
              </span>
              <span className="uppercase-eyebrow" style={{ color: "var(--navy-deep)" }}>
                {item.title}
              </span>
              <span style={{ fontSize: 14, color: "var(--gray-text)", lineHeight: 1.5 }}>
                {item.desc}
              </span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// Product card
const ProductCard = ({ product, onSelect, featured }) => {
  const [hover, setHover] = React.useState(false);
  const unavailable = !product.available;
  return (
    <article
      onClick={() => !unavailable && onSelect(product)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: "var(--white)",
        border: "1px solid var(--gray-line)",
        borderRadius: 4,
        overflow: "hidden",
        cursor: unavailable ? "default" : "pointer",
        transition: "all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1)",
        transform: hover && !unavailable ? "translateY(-6px)" : "translateY(0)",
        boxShadow: hover && !unavailable ? "0 24px 60px rgba(11, 37, 69, 0.14)" : "0 1px 0 rgba(0,0,0,0.02)",
        opacity: unavailable ? 0.7 : 1,
        display: "flex", flexDirection: "column",
        position: "relative",
      }}
    >
      {/* tag */}
      {product.tag && (
        <span style={{
          position: "absolute", top: 16, left: 16, zIndex: 2,
          padding: "5px 12px",
          background: product.tag === "Próximamente" ? "var(--navy-deep)" : "var(--champagne)",
          color: product.tag === "Próximamente" ? "var(--white)" : "var(--navy-deep)",
          fontSize: 10, fontWeight: 600, letterSpacing: "0.15em", textTransform: "uppercase",
          borderRadius: 2,
        }}>
          {product.tag}
        </span>
      )}

      {/* lot number */}
      <span className="mono" style={{
        position: "absolute", top: 20, right: 20, zIndex: 2,
        fontSize: 10, color: "var(--gray-text)", letterSpacing: "0.1em",
      }}>
        LOT-{(product.slug.charCodeAt(0) * 47 + 1000).toString().slice(0, 4)}
      </span>

      {/* vial */}
      <div style={{
        background: hover && !unavailable ? "var(--cream)" : "var(--ivory)",
        padding: "44px 24px 32px",
        display: "flex", justifyContent: "center", alignItems: "flex-end",
        minHeight: 320,
        transition: "background 0.3s",
        position: "relative",
        overflow: "hidden",
      }}>
        <div style={{
          transition: "transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1)",
          transform: hover && !unavailable ? "translateY(-6px) scale(1.04)" : "translateY(0) scale(1)",
        }}>
          <VialImage product={product} size={180} />
        </div>
      </div>

      <div style={{ padding: "28px 24px 28px", borderTop: "1px solid var(--gray-line)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 6 }}>
          <h3 className="serif" style={{ fontSize: 26, color: "var(--navy-deep)", fontWeight: 500 }}>
            {product.name}
          </h3>
        </div>
        <p style={{ fontSize: 13, color: "var(--gray-text)", marginBottom: 20 }}>
          {product.subtitle} · <span className="mono" style={{ fontSize: 12 }}>{product.dose}</span>
        </p>

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
          <div>
            {product.priceNum ? (
              <>
                {product.originalPrice && (
                  <div className="mono" style={{ fontSize: 13, color: "var(--gray-text)", textDecoration: "line-through", marginBottom: 2 }}>
                    {product.originalPrice}
                  </div>
                )}
                <div className="serif" style={{ fontSize: 32, color: "var(--navy-deep)", lineHeight: 1, fontWeight: 500 }}>
                  {product.price}
                </div>
                <div className="mono" style={{ fontSize: 10, color: "var(--gray-text)", marginTop: 4, letterSpacing: "0.1em" }}>
                  CLP · INC. IVA
                </div>
              </>
            ) : (
              <div className="serif" style={{ fontSize: 22, color: "var(--navy-deep)", fontStyle: "italic", fontWeight: 400 }}>
                Próximamente
              </div>
            )}
          </div>

          <span style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            color: "var(--champagne)", fontSize: 13, fontWeight: 600,
            letterSpacing: "0.04em",
            transform: hover && !unavailable ? "translateX(4px)" : "translateX(0)",
            transition: "transform 0.3s",
          }}>
            {unavailable ? "Avísame" : "Ver detalle"} <ArrowRight size={14} />
          </span>
        </div>
      </div>
    </article>
  );
};

// Products section
const ProductsSection = ({ onSelect }) => (
  <section id="productos" style={{ padding: "120px 0", background: "var(--white)" }}>
    <div className="container">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, marginBottom: 80, alignItems: "end" }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 24 }}>
            <span className="hairline" />
            <span className="uppercase-eyebrow" style={{ color: "var(--navy-deep)" }}>Catálogo · 04 referencias</span>
          </div>
          <h2 className="serif" style={{ fontSize: "clamp(36px, 5vw, 64px)", lineHeight: 1.05, color: "var(--navy-deep)", fontWeight: 400 }}>
            Fórmulas puras.<br />
            <em style={{ color: "var(--champagne)", fontWeight: 300 }}>Delicadamente procesadas.</em>
          </h2>
        </div>
        <div style={{ paddingBottom: 12 }}>
          <p style={{ fontSize: 17, color: "var(--gray-text)", lineHeight: 1.6, maxWidth: 460 }}>
            Cada referencia llega con análisis HPLC del lote, logística controlada
            y empaque discreto. No vendemos magia — vendemos péptidos australianos
            bien manipulados.
          </p>
          <a href="#" style={{ display: "inline-flex", alignItems: "center", gap: 8, marginTop: 20, color: "var(--navy-deep)", fontWeight: 600, fontSize: 14, textDecoration: "none", borderBottom: "1px solid var(--champagne)", paddingBottom: 4 }}>
            Ver toda la tienda <ArrowRight size={14} />
          </a>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
        {PEPLAB_PRODUCTS.map((p) => (
          <ProductCard key={p.slug} product={p} onSelect={onSelect} />
        ))}
      </div>
    </div>
  </section>
);

// How to buy — 4-step process + free shipping promo
const HowToBuy = () => {
  const steps = [
    {
      n: "01",
      title: "Elige tus productos",
      desc: "Explora el catálogo y selecciona los péptidos que necesitas para tu protocolo.",
    },
    {
      n: "02",
      title: "Paga con link seguro",
      desc: "PayPal o Mercado Pago, ambos integrados en cada ficha de producto.",
    },
    {
      n: "03",
      title: "Envíanos el comprobante",
      desc: "Por WhatsApp, junto con tu nombre completo y dirección de envío.",
    },
    {
      n: "04",
      title: "Procesamos y despachamos",
      desc: "Una vez confirmado el pago, despachamos en 24h hábiles vía Bluexpress o Chilexpress.",
    },
  ];

  return (
    <section id="como-comprar" style={{ background: "var(--ivory)", padding: "120px 0", borderTop: "1px solid rgba(201, 169, 97, 0.2)" }}>
      <div className="container">
        {/* Header */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, marginBottom: 64, alignItems: "end" }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 24 }}>
              <span className="hairline" />
              <span className="uppercase-eyebrow" style={{ color: "var(--navy-deep)" }}>Cómo comprar · 04 pasos</span>
            </div>
            <h2 className="serif" style={{ fontSize: "clamp(36px, 5vw, 64px)", lineHeight: 1.05, color: "var(--navy-deep)", fontWeight: 400, letterSpacing: "-0.015em" }}>
              Sin vueltas.<br />
              <em style={{ color: "var(--champagne)", fontWeight: 300 }}>Cuatro pasos.</em>
            </h2>
          </div>
          <div style={{ paddingBottom: 8 }}>
            <p style={{ fontSize: 17, color: "var(--gray-text)", lineHeight: 1.6, maxWidth: 460 }}>
              El flujo de compra está pensado para ser rápido y transparente.
              Pagás online, mandás tu comprobante por WhatsApp, y nosotros nos
              encargamos del resto.
            </p>
          </div>
        </div>

        {/* Steps grid */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, marginBottom: 56 }}>
          {steps.map((s, i) => (
            <div
              key={s.n}
              style={{
                background: "var(--white)",
                border: "1px solid var(--gray-line)",
                borderRadius: 4,
                padding: "32px 28px",
                position: "relative",
                display: "flex",
                flexDirection: "column",
                gap: 16,
                transition: "all 0.3s",
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = "translateY(-4px)";
                e.currentTarget.style.boxShadow = "0 18px 40px rgba(11,37,69,0.08)";
                e.currentTarget.style.borderColor = "var(--champagne)";
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = "none";
                e.currentTarget.style.boxShadow = "none";
                e.currentTarget.style.borderColor = "var(--gray-line)";
              }}
            >
              <span className="mono" style={{
                fontSize: 14, fontWeight: 500, color: "var(--champagne)",
                letterSpacing: "0.15em",
              }}>
                {s.n}
              </span>
              <h3 className="serif" style={{
                fontSize: 22, lineHeight: 1.2,
                color: "var(--navy-deep)", fontWeight: 500,
                letterSpacing: "-0.01em",
              }}>
                {s.title}
              </h3>
              <p style={{
                fontSize: 14, lineHeight: 1.6,
                color: "var(--gray-text)",
              }}>
                {s.desc}
              </p>
              {/* connector arrow (not on last) */}
              {i < steps.length - 1 && (
                <span className="how-to-buy-arrow" style={{
                  position: "absolute",
                  top: "50%",
                  right: -16,
                  transform: "translateY(-50%)",
                  color: "var(--champagne)",
                  opacity: 0.4,
                  zIndex: 1,
                  pointerEvents: "none",
                }}>
                  <ArrowRight size={20} />
                </span>
              )}
            </div>
          ))}
        </div>

        {/* Free shipping promo banner */}
        <div style={{
          background: "var(--navy-deep)",
          color: "var(--white)",
          padding: "32px 40px",
          borderRadius: 4,
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 32,
          flexWrap: "wrap",
          position: "relative",
          overflow: "hidden",
        }}
        className="how-to-buy-promo"
        >
          <div style={{ position: "absolute", top: -20, right: -20, opacity: 0.08 }}>
            <PlMolecule size={180} color="var(--champagne)" />
          </div>
          <div style={{ position: "relative", flex: 1, minWidth: 260 }}>
            <div className="mono" style={{
              fontSize: 11, color: "var(--champagne)",
              letterSpacing: "0.2em", textTransform: "uppercase",
              marginBottom: 10,
            }}>
              Promo
            </div>
            <div className="serif" style={{
              fontSize: "clamp(22px, 3vw, 32px)", lineHeight: 1.2,
              fontWeight: 400, letterSpacing: "-0.01em",
            }}>
              Envío gratis con cualquier péptido <em style={{ color: "var(--champagne)", fontWeight: 300 }}>+ agua bacteriostática.</em>
            </div>
          </div>
          <a
            href={waUrl("Hola, quiero aprovechar el envío gratis combinando un péptido con agua bacteriostática. ¿Me ayudan a armar el pedido?")}
            target="_blank"
            rel="noopener noreferrer"
            className="btn btn-whatsapp"
            style={{ position: "relative", flexShrink: 0 }}
          >
            <WhatsAppIcon size={16} color="white" />
            Armar mi pedido
          </a>
        </div>
      </div>
    </section>
  );
};

// Editorial "Por qué PepLab"
const Editorial = () => (
  <section style={{ background: "var(--navy-deep)", color: "var(--white)", padding: "140px 0", position: "relative", overflow: "hidden" }}>
    {/* deco molecule */}
    <div style={{ position: "absolute", top: -40, right: -40, opacity: 0.06 }}>
      <PlMolecule size={400} color="var(--champagne)" />
    </div>
    <div className="container" style={{ position: "relative" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 80, alignItems: "center" }}>
        {/* image */}
        <div style={{ aspectRatio: "4/5", position: "relative" }}>
          <img
            src="/uploads/lab-editorial.png"
            alt="Laboratorio PepLab Co — beakers y pipetas en luz golden hour"
            loading="lazy"
            decoding="async"
            style={{
              width: "100%", height: "100%",
              objectFit: "cover",
              borderRadius: 2,
              display: "block",
            }}
          />
          <div style={{
            position: "absolute", bottom: -32, right: -32,
            background: "var(--champagne)", color: "var(--navy-deep)",
            padding: "28px 32px", maxWidth: 240,
            borderRadius: 2,
          }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", marginBottom: 8, opacity: 0.7 }}>FILOSOFÍA</div>
            <div className="serif" style={{ fontSize: 24, lineHeight: 1.15, fontWeight: 400, fontStyle: "italic" }}>
              "Trazabilidad antes que marketing."
            </div>
          </div>
        </div>

        {/* text */}
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 28 }}>
            <span className="hairline" />
            <span className="uppercase-eyebrow" style={{ color: "var(--champagne)" }}>Por qué PepLab</span>
          </div>
          <h2 className="serif" style={{ fontSize: "clamp(36px, 4.5vw, 56px)", lineHeight: 1.05, fontWeight: 400, marginBottom: 36, letterSpacing: "-0.015em" }}>
            No vendemos magia.<br />
            Vendemos <em style={{ color: "var(--champagne)", fontWeight: 300 }}>ciencia bien hecha.</em>
          </h2>
          <div style={{ fontSize: 17, lineHeight: 1.65, color: "rgba(255,255,255,0.78)", display: "flex", flexDirection: "column", gap: 20, fontWeight: 300 }}>
            <p>
              Importamos cada vial directamente desde laboratorios australianos certificados.
              Sin reenvasado, sin intermediarios opacos, sin etiquetas blancas. La logística
              se controla desde el origen hasta tu puerta — los productos liofilizados viajan
              estables, los que requieren refrigeración van con empaque térmico.
            </p>
            <p>
              Te atendemos por WhatsApp con respuestas humanas — no eres un ticket.
              Te mostramos el COA del lote si lo pides. El empaque que llega a tu
              casa no menciona el contenido.
            </p>
          </div>

          {/* mini stats */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 56, paddingTop: 40, borderTop: "1px solid rgba(201, 169, 97, 0.3)" }}>
            {[
              { n: "99.4%", l: "Pureza promedio (HPLC)" },
              { n: "< 30 min", l: "Respuesta WhatsApp" },
              { n: "2-8°C", l: "Almacenaje refrigerado" },
            ].map((s, i) => (
              <div key={i}>
                <div className="serif" style={{ fontSize: 36, color: "var(--champagne)", lineHeight: 1, fontWeight: 400 }}>{s.n}</div>
                <div style={{ fontSize: 12, color: "rgba(255,255,255,0.6)", marginTop: 8, letterSpacing: "0.04em" }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

// Testimonials
const Testimonials = () => {
  const [active, setActive] = React.useState(0);
  return (
    <section style={{ background: "var(--cream)", padding: "120px 0" }}>
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 64, display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}>
          <span className="hairline" />
          <span className="uppercase-eyebrow" style={{ color: "var(--navy-deep)" }}>Testimonios</span>
          <h2 className="serif" style={{ fontSize: "clamp(32px, 4vw, 48px)", lineHeight: 1.1, color: "var(--navy-deep)", fontWeight: 400, marginTop: 8, maxWidth: 720 }}>
            Lo que dicen quienes ya probaron.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
          {PEPLAB_TESTIMONIALS.map((t, i) => (
            <div
              key={i}
              onMouseEnter={() => setActive(i)}
              style={{
                background: active === i ? "var(--navy-deep)" : "var(--white)",
                color: active === i ? "var(--white)" : "var(--graphite)",
                padding: "40px 32px",
                borderRadius: 2,
                transition: "all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1)",
                border: "1px solid var(--gray-line)",
                display: "flex", flexDirection: "column",
                cursor: "default",
                transform: active === i ? "translateY(-6px)" : "none",
                boxShadow: active === i ? "0 24px 50px rgba(11, 37, 69, 0.18)" : "none",
              }}
            >
              <span className="serif" style={{ fontSize: 80, lineHeight: 0.6, color: "var(--champagne)", marginBottom: 8, fontStyle: "italic", fontWeight: 300 }}>"</span>
              <p className="serif" style={{ fontSize: 20, lineHeight: 1.4, fontStyle: "italic", fontWeight: 400, marginBottom: 32, flexGrow: 1 }}>
                {t.quote}
              </p>
              <div style={{ paddingTop: 20, borderTop: `1px solid ${active === i ? "rgba(201, 169, 97, 0.3)" : "var(--gray-line)"}` }}>
                <div style={{ fontWeight: 600, fontSize: 14 }}>{t.name}</div>
                <div className="mono" style={{ fontSize: 11, color: active === i ? "var(--champagne)" : "var(--gray-text)", marginTop: 4, letterSpacing: "0.08em", textTransform: "uppercase" }}>
                  {t.city} · {t.product}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// Guide hub
const GuideHub = () => (
  <section style={{ background: "var(--white)", padding: "120px 0" }}>
    <div className="container">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", alignItems: "end", marginBottom: 64, gap: 40 }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 24 }}>
            <span className="hairline" />
            <span className="uppercase-eyebrow" style={{ color: "var(--navy-deep)" }}>Aprende antes de comprar</span>
          </div>
          <h2 className="serif" style={{ fontSize: "clamp(32px, 4vw, 52px)", lineHeight: 1.05, color: "var(--navy-deep)", fontWeight: 400 }}>
            No te exponemos.<br />
            <em style={{ color: "var(--champagne)", fontWeight: 300 }}>Te explicamos.</em>
          </h2>
        </div>
        <div style={{ paddingBottom: 8, textAlign: "right" }}>
          <a href="#" style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "var(--navy-deep)", fontWeight: 600, fontSize: 14, textDecoration: "none", borderBottom: "1px solid var(--champagne)", paddingBottom: 4 }}>
            Ver toda la guía <ArrowRight size={14} />
          </a>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
        {PEPLAB_GUIDE.map((g, i) => (
          <a key={g.slug} href="#" style={{
            display: "flex", flexDirection: "column",
            textDecoration: "none", color: "inherit",
            border: "1px solid var(--gray-line)",
            borderRadius: 2, overflow: "hidden",
            transition: "all 0.3s",
          }}
          onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 18px 40px rgba(11,37,69,0.10)"; }}
          onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "none"; }}
          >
            <div style={{ aspectRatio: "16/10", position: "relative", overflow: "hidden" }}>
              {g.image ? (
                <img
                  src={g.image}
                  alt={g.title}
                  loading="lazy"
                  decoding="async"
                  style={{
                    width: "100%", height: "100%",
                    objectFit: "cover",
                    display: "block",
                    transition: "transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1)",
                  }}
                />
              ) : (
                <div className="lifestyle-placeholder">
                  <span className="placeholder-label dark">EDITORIAL · {g.tag.toUpperCase()}</span>
                </div>
              )}
            </div>
            <div style={{ padding: "28px 28px 32px" }}>
              <div className="mono" style={{ fontSize: 11, color: "var(--champagne)", letterSpacing: "0.15em", textTransform: "uppercase", marginBottom: 14 }}>
                {g.tag} · {g.read}
              </div>
              <h3 className="serif" style={{ fontSize: 24, lineHeight: 1.2, color: "var(--navy-deep)", fontWeight: 500, marginBottom: 14 }}>
                {g.title}
              </h3>
              <p style={{ fontSize: 15, color: "var(--gray-text)", lineHeight: 1.5 }}>
                {g.excerpt}
              </p>
              <div style={{ marginTop: 24, color: "var(--navy-deep)", fontWeight: 600, fontSize: 13, display: "inline-flex", alignItems: "center", gap: 6 }}>
                Leer artículo <ArrowRight size={12} />
              </div>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

// CTA Final
const CtaFinal = () => (
  <section style={{ background: "var(--navy-deep)", color: "var(--white)", padding: "120px 0", position: "relative", overflow: "hidden" }}>
    <div style={{ position: "absolute", inset: 0, opacity: 0.04, background: "repeating-linear-gradient(45deg, var(--champagne) 0 1px, transparent 1px 60px)" }} />
    <div className="container" style={{ position: "relative", textAlign: "center" }}>
      <PlMolecule size={56} color="var(--champagne)" />
      <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 72px)", lineHeight: 1.05, fontWeight: 400, marginTop: 32, marginBottom: 20, letterSpacing: "-0.015em" }}>
        ¿Lista o listo<br />
        para <em style={{ color: "var(--champagne)", fontWeight: 300 }}>empezar?</em>
      </h2>
      <p style={{ fontSize: 18, color: "rgba(255,255,255,0.7)", maxWidth: 580, margin: "0 auto 44px", lineHeight: 1.55, fontWeight: 300 }}>
        Conversemos por WhatsApp y resolvemos cualquier duda antes de tu pedido.
        Respondemos en menos de 30 minutos en horario hábil.
      </p>
      <div style={{ display: "inline-flex", gap: 14, flexWrap: "wrap", justifyContent: "center" }}>
        <a href={waUrl("Hola, tengo dudas antes de hacer mi pedido en PepLab Co.")} target="_blank" rel="noopener noreferrer" className="btn btn-whatsapp">
          <WhatsAppIcon size={16} color="white" />
          Conversemos por WhatsApp
        </a>
        <a href="/#productos" className="btn btn-outline-light">
          Ver productos
        </a>
      </div>
    </div>
  </section>
);

// Footer
const PlFooter = () => (
  <footer style={{ background: "#06182F", color: "rgba(255,255,255,0.7)", padding: "80px 0 40px" }}>
    <div className="container">
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1.2fr", gap: 60, marginBottom: 60 }}>
        <div>
          <Logo color="var(--white)" />
          <p style={{ marginTop: 24, fontSize: 14, lineHeight: 1.6, maxWidth: 280, color: "rgba(255,255,255,0.55)" }}>
            Biotecnología de élite, importada desde Australia. Para tu mejor versión.
          </p>
        </div>
        <div>
          <div className="uppercase-eyebrow" style={{ color: "var(--champagne)", marginBottom: 20 }}>Tienda</div>
          {PEPLAB_PRODUCTS.map((p) => (
            <a key={p.slug} href="#" style={{ display: "block", color: "inherit", textDecoration: "none", padding: "6px 0", fontSize: 14 }}>
              {p.name}
            </a>
          ))}
        </div>
        <div>
          <div className="uppercase-eyebrow" style={{ color: "var(--champagne)", marginBottom: 20 }}>Información</div>
          {["Sobre nosotros", "Guía de péptidos", "Preguntas frecuentes", "Contacto"].map((l) => (
            <a key={l} href="#" style={{ display: "block", color: "inherit", textDecoration: "none", padding: "6px 0", fontSize: 14 }}>{l}</a>
          ))}
        </div>
        <div>
          <div className="uppercase-eyebrow" style={{ color: "var(--champagne)", marginBottom: 20 }}>Contacto</div>
          <div style={{ fontSize: 14, lineHeight: 1.8 }}>
            <a href={waUrl()} target="_blank" rel="noopener noreferrer" className="mono" style={{ fontSize: 13, color: "inherit", textDecoration: "none" }}>{PEPLAB_WHATSAPP_DISPLAY}</a>
            <div>contacto@peplabco.cl</div>
            <div style={{ marginTop: 12, color: "rgba(255,255,255,0.5)", fontSize: 13 }}>Lun a sáb · 9:00 — 22:00</div>
            <div style={{ color: "rgba(255,255,255,0.5)", fontSize: 13 }}>Envíos a todo Chile</div>
          </div>
        </div>
      </div>
      <div style={{ paddingTop: 32, borderTop: "1px solid rgba(255,255,255,0.1)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16, fontSize: 12, color: "rgba(255,255,255,0.45)" }}>
        <div>© 2026 PepLab Co · <a href="#" style={{ color: "inherit" }}>Términos</a> · <a href="#" style={{ color: "inherit" }}>Privacidad</a></div>
        <div className="mono" style={{ letterSpacing: "0.1em" }}>SOLO MAYORES DE 18 · IMPORTADO DE AUSTRALIA 🇦🇺</div>
      </div>
    </div>
  </footer>
);

// Age gate
const AgeGate = ({ onPass }) => (
  <div style={{
    position: "fixed", inset: 0, zIndex: 100,
    background: "rgba(11, 37, 69, 0.85)",
    backdropFilter: "blur(8px)",
    display: "flex", alignItems: "center", justifyContent: "center",
    padding: 24,
    animation: "fadeUp 0.4s ease-out",
  }}>
    <div style={{
      background: "var(--cream)",
      maxWidth: 480, width: "100%",
      padding: "48px 40px",
      borderRadius: 4,
      textAlign: "center",
      boxShadow: "0 30px 80px rgba(0,0,0,0.3)",
      borderTop: "3px solid var(--champagne)",
    }}>
      <PlMolecule size={40} color="var(--navy-deep)" />
      <h2 className="serif" style={{ fontSize: 28, color: "var(--navy-deep)", marginTop: 24, marginBottom: 16, fontWeight: 400 }}>
        Aviso importante
      </h2>
      <p style={{ color: "var(--gray-text)", fontSize: 13, lineHeight: 1.6, marginBottom: 28, textAlign: "left" }}>
        Todos los productos suministrados por PepLab Co están destinados estrictamente a fines de investigación de laboratorio únicamente. No están aprobados para consumo humano o animal, ni para ningún uso terapéutico, diagnóstico o medicinal. La información proporcionada en este sitio web no ha sido evaluada por el Instituto de Salud Pública (ISP) ni por ninguna otra autoridad regulatoria. Estos compuestos no están diseñados para diagnosticar, tratar, curar o prevenir ninguna enfermedad o condición médica. La compra está restringida a profesionales calificados, investigadores o instituciones de investigación dentro de Chile o internacionalmente. Al realizar un pedido, confirmas que entiendes y aceptas estos términos.
      </p>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        <button className="btn btn-primary" style={{ width: "100%" }} onClick={onPass}>
          Entiendo y acepto
        </button>
        <button className="btn btn-outline-dark" style={{ width: "100%" }} onClick={() => window.location.href = "https://www.google.com"}>
          No, salir
        </button>
      </div>
    </div>
  </div>
);

// Product detail drawer
const ProductDrawer = ({ product, onClose }) => {
  if (!product) return null;
  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed", inset: 0, zIndex: 90,
        background: "rgba(11, 37, 69, 0.55)",
        backdropFilter: "blur(6px)",
        display: "flex", justifyContent: "flex-end",
        animation: "fadeUp 0.3s ease-out",
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: "min(640px, 100%)",
          height: "100vh",
          background: "var(--white)",
          overflow: "auto",
          animation: "slideRight 0.4s cubic-bezier(0.2, 0.8, 0.2, 1)",
        }}
      >
        <div style={{ position: "sticky", top: 0, background: "var(--white)", padding: "20px 32px", borderBottom: "1px solid var(--gray-line)", display: "flex", justifyContent: "space-between", alignItems: "center", zIndex: 2 }}>
          <span className="mono" style={{ fontSize: 11, letterSpacing: "0.15em", color: "var(--gray-text)", textTransform: "uppercase" }}>
            Producto · LOT-{(product.slug.charCodeAt(0) * 47 + 1000).toString().slice(0, 4)}
          </span>
          <button onClick={onClose} aria-label="Cerrar" style={{ background: "none", border: "none", fontSize: 24, cursor: "pointer", color: "var(--graphite)", padding: 4 }}>×</button>
        </div>

        <div style={{ background: "var(--cream)", padding: "48px 32px", display: "flex", justifyContent: "center" }}>
          <VialImage product={product} size={220} />
        </div>

        <div style={{ padding: "40px 32px" }}>
          {product.tag && (
            <span style={{
              display: "inline-block", padding: "5px 12px",
              background: product.tag === "Próximamente" ? "var(--navy-deep)" : "var(--champagne)",
              color: product.tag === "Próximamente" ? "var(--white)" : "var(--navy-deep)",
              fontSize: 10, fontWeight: 600, letterSpacing: "0.15em", textTransform: "uppercase",
              borderRadius: 2, marginBottom: 16,
            }}>{product.tag}</span>
          )}
          <h2 className="serif" style={{ fontSize: 48, color: "var(--navy-deep)", lineHeight: 1, marginBottom: 8, fontWeight: 500 }}>
            {product.name}
          </h2>
          <p style={{ color: "var(--gray-text)", marginBottom: 24, fontSize: 15 }}>
            {product.subtitle} · <span className="mono">{product.dose}</span>
          </p>

          <div className="serif" style={{ fontSize: 38, color: "var(--navy-deep)", marginBottom: 32, fontWeight: 500 }}>
            {product.originalPrice && (
              <span className="mono" style={{ fontSize: 18, color: "var(--gray-text)", textDecoration: "line-through", marginRight: 14, fontWeight: 400 }}>
                {product.originalPrice}
              </span>
            )}
            {product.priceNum ? product.price : "Próximamente"}
            {product.priceNum && <span className="mono" style={{ fontSize: 12, color: "var(--gray-text)", marginLeft: 12, letterSpacing: "0.08em" }}>CLP</span>}
          </div>

          <p className="serif" style={{ fontSize: 22, lineHeight: 1.4, fontStyle: "italic", color: "var(--navy-deep)", paddingLeft: 20, borderLeft: "2px solid var(--champagne)", marginBottom: 32, fontWeight: 400 }}>
            {product.hook}
          </p>

          <div style={{ marginBottom: 36 }}>
            <div className="uppercase-eyebrow" style={{ color: "var(--navy-deep)", marginBottom: 20 }}>Beneficios clave</div>
            {product.benefits.map((b, i) => (
              <div key={i} style={{ display: "flex", gap: 14, padding: "14px 0", borderBottom: i < product.benefits.length - 1 ? "1px solid var(--gray-line)" : "none" }}>
                <span className="mono" style={{ color: "var(--champagne)", fontSize: 12, minWidth: 24, paddingTop: 3 }}>0{i + 1}</span>
                <span style={{ fontSize: 15, lineHeight: 1.5, color: "var(--graphite)" }}>{b}</span>
              </div>
            ))}
          </div>

          <div style={{ background: "var(--ivory)", padding: "24px 24px", borderRadius: 2, marginBottom: 32 }}>
            <div className="uppercase-eyebrow" style={{ color: "var(--navy-deep)", marginBottom: 16 }}>Datos técnicos</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              {[
                ["Pureza", product.purity],
                ["Origen", "Australia 🇦🇺"],
                ["Almacenamiento", "2-8°C"],
                ["Vida útil", "24 meses"],
              ].map(([k, v]) => (
                <div key={k}>
                  <div className="mono" style={{ fontSize: 10, color: "var(--gray-text)", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 4 }}>{k}</div>
                  <div className="mono" style={{ fontSize: 14, color: "var(--navy-deep)", fontWeight: 500 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>

          {product.available ? (
            <>
              {/* Free shipping promo (shown on peptide products) */}
              {product.slug !== "agua-bacteriostatica" && (
                <div style={{
                  display: "flex", alignItems: "center", gap: 12,
                  padding: "12px 14px",
                  margin: "0 0 16px",
                  background: "var(--cream)",
                  border: "1px dashed var(--champagne)",
                  borderRadius: 4,
                }}>
                  <span style={{
                    background: "var(--champagne)", color: "var(--navy-deep)",
                    padding: "3px 8px", borderRadius: 2,
                    fontFamily: "var(--mono)", fontSize: 9, fontWeight: 700,
                    letterSpacing: "0.15em", textTransform: "uppercase",
                    flexShrink: 0,
                  }}>Envío gratis</span>
                  <span style={{ fontSize: 13, color: "var(--graphite)", lineHeight: 1.4 }}>
                    Suma <strong style={{ color: "var(--navy-deep)" }}>agua bacteriostática</strong> a tu pedido y el envío te sale gratis.
                  </span>
                </div>
              )}

              {/* Primary: payments online */}
              <PaymentOptions slug={product.slug} productName={product.name} onAdded={onClose} />

              {/* Separator */}
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 16,
                  margin: "28px 0 16px",
                  color: "var(--gray-text)",
                }}
              >
                <span style={{ flex: 1, height: 1, background: "var(--gray-line)" }} />
                <span
                  className="mono"
                  style={{
                    fontSize: 11,
                    letterSpacing: "0.18em",
                    textTransform: "uppercase",
                    color: "var(--gray-text)",
                  }}
                >
                  o consultar antes
                </span>
                <span style={{ flex: 1, height: 1, background: "var(--gray-line)" }} />
              </div>

              {/* Secondary: WhatsApp + Form, side by side, smaller */}
              <div style={{ display: "flex", gap: 10 }}>
                <a
                  href={waUrl(`Hola, tengo una consulta sobre ${product.name}.`)}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="btn btn-whatsapp btn-sm"
                  style={{ flex: 1 }}
                  aria-label={`Consultar ${product.name} por WhatsApp`}
                >
                  <WhatsAppIcon size={14} color="white" />
                  WhatsApp
                </a>
                <a
                  href="#"
                  className="btn btn-outline-dark btn-sm"
                  style={{ flex: 1 }}
                  aria-label="Enviar consulta por formulario"
                >
                  Formulario
                </a>
              </div>
            </>
          ) : (
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              <a href={waUrl(`Hola, quisiera saber cuándo estará disponible ${product.name}.`)} target="_blank" rel="noopener noreferrer" className="btn btn-whatsapp" style={{ width: "100%" }}>
                <WhatsAppIcon size={16} color="white" />
                Avísame cuando llegue
              </a>
              <a href="#" className="btn btn-outline-dark" style={{ width: "100%" }}>
                Enviar consulta por formulario
              </a>
            </div>
          )}

          <p style={{ marginTop: 24, fontSize: 12, color: "var(--gray-text)", lineHeight: 1.5, textAlign: "center" }}>
            Solo para mayores de 18 años · Importado desde Australia · Logística controlada
          </p>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, {
  Hero, TrustStrip, ProductCard, ProductsSection, HowToBuy, Editorial,
  Testimonials, GuideHub, CtaFinal, PlFooter, AgeGate, ProductDrawer,
});