// PepLab Co — Lab-grade aesthetic overrides
// Activated by `aesthetic: "lab"` — overlays a metallic/scientific/futuristic skin

const LAB_CSS = `
:root.lab {
  --navy-deep: #0A0F1A;
  --navy-mid: #131B2C;
  --navy-soft: #1E2A42;
  --champagne: #C9D1DC;        /* cool steel */
  --champagne-light: #E5E9F0;
  --cream: #0F1623;             /* dark surface */
  --ivory: #0D1320;
  --white: #060912;
  --graphite: #E8ECF2;
  --gray-text: #8B95A8;
  --gray-line: rgba(180, 196, 220, 0.12);
  --success: #00D4A0;
  --whatsapp: #25D366;
  --accent-cyan: #6FE7E6;
  --accent-violet: #A99CF5;

  --serif: 'Inter', sans-serif;
  --sans: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

.lab body { background: var(--white); color: var(--graphite); }

/* Replace serif headings with technical sans */
.lab .serif {
  font-family: 'Inter', sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: -0.04em !important;
  font-style: normal !important;
}
.lab .serif em {
  font-style: normal !important;
  font-weight: 200 !important;
  background: linear-gradient(135deg, #6FE7E6 0%, #A99CF5 50%, #C9D1DC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}

/* Backgrounds — dark metallic */
.lab section[style*="background: var(--white)"],
.lab section[style*="background: var(--ivory)"],
.lab section[style*="background: var(--cream)"] {
  background: var(--white) !important;
  color: var(--graphite) !important;
}
.lab section[style*="background: var(--navy-deep)"] {
  background: linear-gradient(180deg, #0A0F1A 0%, #131B2C 100%) !important;
}

/* Technical grid background on key sections */
.lab #productos,
.lab #articulos,
.lab #faq {
  position: relative;
}
.lab #productos::before,
.lab #articulos::before,
.lab #faq::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(180,196,220,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,196,220,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}

/* Cards — glass on dark */
.lab article,
.lab a[style*="border: 1px solid var(--gray-line)"] {
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)) !important;
  border: 1px solid rgba(180, 196, 220, 0.10) !important;
  backdrop-filter: blur(10px);
}
.lab article:hover {
  border-color: rgba(111, 231, 230, 0.4) !important;
  box-shadow: 0 0 0 1px rgba(111, 231, 230, 0.2), 0 24px 60px rgba(111, 231, 230, 0.10) !important;
}

/* Buttons */
.lab .btn-primary {
  background: linear-gradient(135deg, #C9D1DC 0%, #E5E9F0 100%) !important;
  color: #0A0F1A !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.5) inset, 0 8px 24px rgba(201, 209, 220, 0.15);
}
.lab .btn-primary:hover {
  background: linear-gradient(135deg, #6FE7E6 0%, #A99CF5 100%) !important;
}
.lab .btn-outline-light { border-color: rgba(180, 196, 220, 0.4) !important; }
.lab .btn-outline-dark {
  border-color: rgba(180, 196, 220, 0.4) !important;
  color: var(--graphite) !important;
}
.lab .btn-outline-dark:hover {
  background: var(--graphite) !important;
  color: var(--white) !important;
}

/* Hairline -> glow */
.lab .hairline {
  background: linear-gradient(90deg, #6FE7E6, transparent) !important;
  box-shadow: 0 0 12px rgba(111, 231, 230, 0.5);
  width: 56px !important;
}

/* Eyebrows -> mono */
.lab .uppercase-eyebrow {
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.22em !important;
  color: var(--accent-cyan) !important;
}

/* Header */
.lab header[style*="position: fixed"] {
  background: rgba(10, 15, 26, 0.7) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  border-bottom-color: rgba(180,196,220,0.08) !important;
}

/* Champagne text -> cyan */
.lab [style*="color: var(--champagne)"] {
  color: var(--accent-cyan) !important;
}
.lab .serif[style*="color: var(--champagne)"] em,
.lab .serif em[style*="color: var(--champagne)"] {
  background: linear-gradient(135deg, #6FE7E6, #A99CF5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Vial container — dark with scanline */
.lab article > div[style*="background: var(--ivory)"],
.lab article > div[style*="background: var(--cream)"] {
  background:
    linear-gradient(180deg, rgba(111,231,230,0.04) 0%, transparent 100%),
    radial-gradient(ellipse at 50% 100%, rgba(111, 231, 230, 0.08), transparent 60%),
    #0D1320 !important;
  position: relative;
  overflow: hidden;
}
.lab article > div[style*="background: var(--ivory)"]::after,
.lab article > div[style*="background: var(--cream)"]::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    rgba(111, 231, 230, 0.03) 3px 4px
  );
  pointer-events: none;
}

/* Trust strip */
.lab section[style*="padding: \\"56px 0\\""] {
  background: linear-gradient(180deg, #0F1623, #0A0F1A) !important;
  border-color: rgba(180,196,220,0.08) !important;
}

/* Testimonials background */
.lab section[style*="background: var(--cream)"][style*="120px 0"] {
  background: linear-gradient(180deg, #0A0F1A, #0F1623) !important;
}

.lab article[style*="background: var(--white)"],
.lab article[style*="background: var(--navy-deep)"] {
  background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)) !important;
}
.lab article[style*="background: var(--navy-deep)"] {
  background: linear-gradient(145deg, rgba(111,231,230,0.10), rgba(169,156,245,0.05)) !important;
  border-color: rgba(111,231,230,0.3) !important;
}

/* Footer */
.lab footer { background: #050810 !important; }

/* Inputs / chips */
.lab button[style*="border-radius: 100px"] {
  background: rgba(180,196,220,0.04) !important;
  color: var(--graphite) !important;
  border-color: rgba(180,196,220,0.15) !important;
}
.lab button[style*="border-radius: 100px"][style*="background: var(--navy-deep)"] {
  background: linear-gradient(135deg, #6FE7E6, #A99CF5) !important;
  color: #0A0F1A !important;
  border-color: transparent !important;
}

/* FAQ + plus circles */
.lab button[aria-expanded] span:last-child {
  border-color: rgba(180,196,220,0.2) !important;
  color: var(--accent-cyan) !important;
}
.lab button[aria-expanded="true"] span:last-child {
  background: linear-gradient(135deg, #6FE7E6, #A99CF5) !important;
  color: #0A0F1A !important;
  box-shadow: 0 0 16px rgba(111, 231, 230, 0.5);
  border-color: transparent !important;
}

/* Lifestyle placeholders -> data-viz vibe */
.lab .lifestyle-placeholder {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(111,231,230,0.18), transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(169,156,245,0.18), transparent 50%),
    linear-gradient(135deg, #0F1623 0%, #060912 100%) !important;
}
.lab .lifestyle-placeholder::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(180,196,220,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,196,220,0.08) 1px, transparent 1px);
  background-size: 40px 40px;
}
.lab .placeholder-label.dark {
  background: rgba(111, 231, 230, 0.12) !important;
  color: #6FE7E6 !important;
  border: 1px solid rgba(111, 231, 230, 0.3) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* Tag badges */
.lab article span[style*="background: var(--champagne)"] {
  background: linear-gradient(135deg, #6FE7E6, #A99CF5) !important;
  color: #0A0F1A !important;
}
.lab article span[style*="background: var(--navy-deep)"][style*="position: absolute"] {
  background: rgba(10, 15, 26, 0.8) !important;
  color: var(--accent-cyan) !important;
  border: 1px solid rgba(111, 231, 230, 0.4);
}

/* Drawer */
.lab div[style*="height: 100vh"][style*="background: var(--white)"] {
  background: linear-gradient(180deg, #0A0F1A 0%, #060912 100%) !important;
  color: var(--graphite) !important;
  border-left: 1px solid rgba(111, 231, 230, 0.2);
}
.lab div[style*="background: var(--ivory)"][style*="padding: \\"24px 24px\\""] {
  background: rgba(111, 231, 230, 0.05) !important;
  border: 1px solid rgba(111, 231, 230, 0.15);
}

/* Vial SVG - in lab mode, swap label colors via filter */
.lab svg[aria-label*="vial"] {
  filter: drop-shadow(0 0 24px rgba(111, 231, 230, 0.3));
}

/* Sections that used inline color: var(--white) need light text in lab mode (since --white is remapped dark) */
.lab section[style*="background: var(--navy-deep)"] {
  color: #E8ECF2 !important;
}
.lab section[style*="background: var(--navy-deep)"] [style*="color: var(--white)"],
.lab section[style*="background: var(--navy-deep)"] h1,
.lab section[style*="background: var(--navy-deep)"] h2,
.lab section[style*="background: var(--navy-deep)"] h3,
.lab section[style*="background: var(--navy-deep)"] p {
  color: #E8ECF2 !important;
}
.lab [style*="color: var(--white)"]:not(.btn-whatsapp):not(.btn-primary) {
  color: #E8ECF2 !important;
}
.lab h1, .lab h2, .lab h3, .lab h4, .lab h5, .lab h6,
.lab p, .lab span, .lab a, .lab div, .lab button {
  /* fallthrough — handled per-attribute below */
}
.lab [style*="color: var(--navy-deep)"]:not(.btn-primary):not([style*="background"]) {
  color: var(--graphite) !important;
}
/* But for backgrounds/borders that legitimately use navy-deep, keep them */
.lab [style*="background: var(--navy-deep)"] [style*="color: var(--navy-deep)"] {
  color: #0A0F1A !important;
}
/* Tags with champagne BG keep dark text */
.lab span[style*="background: var(--champagne)"][style*="color: var(--navy-deep)"] {
  color: #0A0F1A !important;
}
/* Drawer body text legibility */
.lab div[style*="height: 100vh"] [style*="color: var(--graphite)"] { color: var(--graphite) !important; }
.lab div[style*="height: 100vh"] [style*="color: var(--gray-text)"] { color: #8B95A8 !important; }
`;

function applyAesthetic(mode) {
  const id = "lab-aesthetic-style";
  let el = document.getElementById(id);
  if (mode === "lab") {
    if (!el) {
      el = document.createElement("style");
      el.id = id;
      el.textContent = LAB_CSS;
      document.head.appendChild(el);
    }
    document.documentElement.classList.add("lab");
  } else {
    document.documentElement.classList.remove("lab");
  }
}

window.applyAesthetic = applyAesthetic;

// Apply saved preference immediately to prevent flash on reload
try {
  const saved = window.localStorage && localStorage.getItem("peplab-aesthetic");
  if (saved === "lab") applyAesthetic("lab");
} catch (e) { /* localStorage unavailable */ }

// Floating user-facing toggle (pill shape, bottom-left, doesn't collide with WhatsApp)
const AestheticToggle = ({ aesthetic, onChange }) => {
  const isLab = aesthetic === "lab";
  const baseBtn = {
    padding: "9px 16px",
    border: "none",
    borderRadius: 999,
    cursor: "pointer",
    fontFamily: "var(--sans)",
    fontSize: 11,
    fontWeight: 600,
    letterSpacing: "0.12em",
    textTransform: "uppercase",
    transition: "all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1)",
    whiteSpace: "nowrap",
  };
  return (
    <div
      role="group"
      aria-label="Cambiar estética visual"
      className="aesthetic-toggle-pill"
      style={{
        position: "fixed",
        bottom: 28,
        left: 28,
        zIndex: 40,
        display: "flex",
        gap: 2,
        background: isLab
          ? "rgba(13, 19, 32, 0.75)"
          : "rgba(255, 255, 255, 0.85)",
        backdropFilter: "blur(14px) saturate(140%)",
        WebkitBackdropFilter: "blur(14px) saturate(140%)",
        borderRadius: 999,
        padding: 4,
        boxShadow: isLab
          ? "0 12px 30px rgba(111, 231, 230, 0.18), 0 0 0 1px rgba(111,231,230,0.2)"
          : "0 12px 30px rgba(11, 37, 69, 0.12), 0 0 0 1px rgba(11,37,69,0.06)",
      }}
    >
      <button
        type="button"
        aria-pressed={!isLab}
        onClick={() => onChange("editorial")}
        style={{
          ...baseBtn,
          background: !isLab ? "#0B2545" : "transparent",
          color: !isLab ? "#C9A961" : "rgba(232, 236, 242, 0.7)",
        }}
      >
        Editorial
      </button>
      <button
        type="button"
        aria-pressed={isLab}
        onClick={() => onChange("lab")}
        style={{
          ...baseBtn,
          background: isLab
            ? "linear-gradient(135deg, #6FE7E6 0%, #A99CF5 100%)"
            : "transparent",
          color: isLab ? "#0A0F1A" : "rgba(11, 37, 69, 0.65)",
        }}
      >
        Lab-grade
      </button>
    </div>
  );
};

window.AestheticToggle = AestheticToggle;