// components.jsx — Axon shared UI

const { useState, useEffect, useRef } = React;

// ─────────────────────────────────────────────────────────────────────────────
// Brand mark: dual hexagon molecule with three substituents (matches the
// user-provided GENMAX logo geometry).
function Mark({ size = 18, color = "currentColor" }) {
  const w = Math.round(size * 1.18);
  return (
    <svg
      width={w}
      height={size}
      viewBox="68 48 100 85"
      style={{ display: "block" }}
      aria-hidden="true"
    >
      <g transform="translate(120, 100)" fill="none" stroke={color} strokeLinejoin="round" strokeLinecap="round">
        <polygon points="-9,-30 15,-15 15,15 -9,30 -33,15 -33,-15" strokeWidth="3.2"/>
        <polygon points="9,-30 33,-15 33,15 9,30 -15,15 -15,-15" strokeWidth="3.2"/>
        <line x1="9" y1="-30" x2="22" y2="-47" strokeWidth="2.6"/>
        <line x1="-33" y1="15" x2="-47" y2="27" strokeWidth="2.6"/>
        <line x1="33" y1="15" x2="47" y2="27" strokeWidth="2.6"/>
        <circle cx="22" cy="-47" r="5" fill={color}/>
        <circle cx="-47" cy="27" r="5" fill={color}/>
        <circle cx="47" cy="27" r="5" fill={color}/>
      </g>
    </svg>
  );
}

function Wordmark({ size = 14, gap = 12 }) {
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap, lineHeight: 1 }}>
      <Mark size={size * 1.8} />
      <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
        <span style={{
          fontSize: size,
          fontWeight: 500,
          letterSpacing: "0.28em",
          textTransform: "uppercase",
        }}>GENMAX</span>
        <span style={{
          fontSize: Math.max(8, size * 0.5),
          fontWeight: 400,
          letterSpacing: "0.40em",
          textTransform: "uppercase",
          color: "var(--muted)",
        }}>Peptides</span>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Button — primary (filled), secondary (outline), ghost (text)
function Button({ children, variant = "primary", size = "md", onClick, type = "button", style, full, as = "button", href }) {
  const sizes = {
    sm: { padding: "8px 14px", fontSize: 12, height: 32 },
    md: { padding: "12px 20px", fontSize: 13, height: 44 },
    lg: { padding: "16px 28px", fontSize: 14, height: 52 },
  };
  const variants = {
    primary: { background: "var(--fg)", color: "var(--bg)", border: "1px solid var(--fg)" },
    secondary: { background: "transparent", color: "var(--fg)", border: "1px solid var(--border)" },
    ghost: { background: "transparent", color: "var(--fg)", border: "1px solid transparent" },
    accent: { background: "var(--accent)", color: "#fff", border: "1px solid var(--accent)" },
  };
  const base = {
    ...sizes[size],
    ...variants[variant],
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    gap: 8,
    fontFamily: "inherit",
    fontWeight: 500,
    letterSpacing: "0.01em",
    cursor: "pointer",
    transition: "all .15s ease",
    width: full ? "100%" : "auto",
    whiteSpace: "nowrap",
    ...style,
  };
  const Tag = as;
  return (
    <Tag
      href={href}
      type={as === "button" ? type : undefined}
      onClick={onClick}
      style={base}
      onMouseEnter={(e) => {
        if (variant === "primary") e.currentTarget.style.background = "var(--fg-hover)";
        if (variant === "secondary") e.currentTarget.style.background = "var(--surface-2)";
        if (variant === "ghost") e.currentTarget.style.background = "var(--surface-2)";
        if (variant === "accent") e.currentTarget.style.background = "var(--accent-hover)";
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.background = variants[variant].background;
      }}
    >
      {children}
    </Tag>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Mono label, eyebrow, code badges
function Eyebrow({ children, style }) {
  return (
    <div style={{
      fontFamily: "var(--mono)",
      fontSize: 11,
      letterSpacing: "0.14em",
      textTransform: "uppercase",
      color: "var(--muted)",
      ...style,
    }}>{children}</div>
  );
}

function Code({ children, style }) {
  return (
    <span style={{
      fontFamily: "var(--mono)",
      fontSize: 11,
      letterSpacing: "0.06em",
      color: "var(--muted)",
      ...style,
    }}>{children}</span>
  );
}

function Badge({ children, tone = "default" }) {
  const tones = {
    default: { background: "var(--surface-2)", color: "var(--fg)", border: "1px solid var(--border)" },
    accent: { background: "transparent", color: "var(--accent)", border: "1px solid var(--accent-soft)" },
    muted: { background: "transparent", color: "var(--muted)", border: "1px solid var(--border)" },
  };
  return (
    <span style={{
      ...tones[tone],
      fontFamily: "var(--mono)",
      fontSize: 10,
      letterSpacing: "0.1em",
      textTransform: "uppercase",
      padding: "4px 8px",
      borderRadius: 2,
      display: "inline-block",
      lineHeight: 1.4,
    }}>{children}</span>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Image — real image w/ graceful fallback to striped placeholder.
// Applies a subtle desaturation/contrast treatment to match the muted palette.
function Image({ src, label, ratio = "1/1", code, style, treatment = "default", overlayCode = true }) {
  const [failed, setFailed] = useState(false);
  const [loaded, setLoaded] = useState(false);
  if (failed || !src) {
    return <Placeholder label={label} ratio={ratio} code={code} style={style} />;
  }
  const filters = {
    default: "saturate(0.75) contrast(0.96) brightness(1.02)",
    mono: "grayscale(1) contrast(1.04)",
    none: "none",
  };
  return (
    <div style={{
      position: "relative",
      width: "100%",
      aspectRatio: ratio,
      background: "var(--surface-2)",
      backgroundImage:
        "repeating-linear-gradient(135deg, transparent 0 12px, var(--stripe) 12px 13px)",
      overflow: "hidden",
      border: "1px solid var(--border)",
      ...style,
    }}>
      <img
        src={src}
        alt={label || ""}
        loading="lazy"
        onLoad={() => setLoaded(true)}
        onError={() => setFailed(true)}
        style={{
          position: "absolute",
          inset: 0,
          width: "100%",
          height: "100%",
          objectFit: "cover",
          filter: filters[treatment],
          display: "block",
          opacity: loaded ? 1 : 0,
          transition: "opacity .4s ease",
        }}
      />
      {code && overlayCode && (
        <div style={{
          position: "absolute",
          top: 12,
          left: 12,
          fontFamily: "var(--mono)",
          fontSize: 10,
          letterSpacing: "0.1em",
          color: "rgba(255,255,255,0.92)",
          background: "rgba(15,15,15,0.45)",
          padding: "5px 8px",
          backdropFilter: "blur(6px)",
          WebkitBackdropFilter: "blur(6px)",
          zIndex: 1,
        }}>{code}</div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Placeholder image — striped monospace, indicates what should go there.
function Placeholder({ label = "product shot", ratio = "1/1", style, code }) {
  return (
    <div style={{
      position: "relative",
      width: "100%",
      aspectRatio: ratio,
      background: "var(--surface-2)",
      backgroundImage:
        "repeating-linear-gradient(135deg, transparent 0 12px, var(--stripe) 12px 13px)",
      border: "1px solid var(--border)",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      overflow: "hidden",
      ...style,
    }}>
      <div style={{
        fontFamily: "var(--mono)",
        fontSize: 10,
        letterSpacing: "0.14em",
        textTransform: "uppercase",
        color: "var(--muted)",
        background: "var(--bg)",
        padding: "5px 9px",
        border: "1px solid var(--border)",
      }}>{label}</div>
      {code && (
        <div style={{
          position: "absolute",
          top: 12,
          left: 12,
          fontFamily: "var(--mono)",
          fontSize: 10,
          letterSpacing: "0.1em",
          color: "var(--muted)",
        }}>{code}</div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Header — nav + cart + mobile drawer
function Header({ route, navigate, cartCount, darkChrome }) {
  const links = [
    { id: "shop", label: "Shop" },
    { id: "about", label: "About" },
    { id: "contact", label: "Contact" },
  ];
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 4);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  // Close drawer whenever route changes
  useEffect(() => { setMobileOpen(false); }, [route]);
  // Lock body scroll while drawer is open
  useEffect(() => {
    document.body.style.overflow = mobileOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [mobileOpen]);
  // Close on Escape
  useEffect(() => {
    if (!mobileOpen) return;
    const onKey = (e) => { if (e.key === "Escape") setMobileOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [mobileOpen]);
  const fg     = darkChrome ? "rgba(244,247,255,0.92)" : "var(--fg)";
  const muted  = darkChrome ? "rgba(220,228,245,0.55)" : "var(--muted)";
  const border = darkChrome ? "rgba(255,255,255,0.08)" : "var(--border)";
  // Over the dark hero, the header is fully transparent at the very top
  // (so the canvas reads cleanly), and only fades in once you scroll.
  const bg = scrolled
    ? (darkChrome
        ? "rgba(4,6,13,0.55)"
        : "color-mix(in oklab, var(--bg) 88%, transparent)")
    : (darkChrome ? "transparent" : "var(--bg)");
  const useBlur = scrolled;
  return (
    <React.Fragment>
      <header style={{
        position: "fixed",
        top: 0,
        left: 0,
        right: 0,
        zIndex: 50,
        background: bg,
        backdropFilter: useBlur ? "blur(12px) saturate(140%)" : "none",
        WebkitBackdropFilter: useBlur ? "blur(12px) saturate(140%)" : "none",
        borderBottom: scrolled ? "1px solid " + border : "1px solid transparent",
        transition: "background .3s, border-color .3s",
      }}>
        <div className="container" style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          height: 64,
        }}>
          <a href="#" onClick={(e) => { e.preventDefault(); navigate("home"); }} style={{ color: fg, textDecoration: "none" }}>
            <Wordmark size={14} />
          </a>
          <nav style={{ display: "flex", alignItems: "center", gap: 36 }} className="nav-desktop">
            {links.map((l) => (
              <a key={l.id}
                href={"#" + l.id}
                onClick={(e) => { e.preventDefault(); navigate(l.id); }}
                style={{
                  fontSize: 13,
                  color: route === l.id ? fg : muted,
                  textDecoration: "none",
                  letterSpacing: "0.01em",
                  position: "relative",
                  paddingBottom: 2,
                  borderBottom: route === l.id ? "1px solid " + fg : "1px solid transparent",
                }}
              >{l.label}</a>
            ))}
          </nav>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <button
              onClick={() => navigate("cart")}
              style={{
                display: "inline-flex",
                alignItems: "center",
                gap: 8,
                padding: "8px 12px",
                border: "1px solid " + border,
                background: route === "cart"
                  ? (darkChrome ? "rgba(255,255,255,0.08)" : "var(--surface-2)")
                  : "transparent",
                fontFamily: "inherit",
                fontSize: 12,
                color: fg,
                cursor: "pointer",
                letterSpacing: "0.02em",
              }}
            >
              <span>Cart</span>
              <span style={{
                fontFamily: "var(--mono)",
                fontSize: 11,
                color: muted,
              }}>[{String(cartCount).padStart(2, "0")}]</span>
            </button>
            {/* Hamburger — visible only on mobile via CSS */}
            <button
              className="nav-mobile-toggle"
              onClick={() => setMobileOpen(true)}
              aria-label="Open menu"
              style={{
                display: "none",
                alignItems: "center",
                justifyContent: "center",
                width: 38,
                height: 38,
                padding: 0,
                border: "1px solid " + border,
                background: "transparent",
                cursor: "pointer",
              }}
            >
              <span style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                <span style={{ display: "block", width: 18, height: 1.5, background: fg }} />
                <span style={{ display: "block", width: 18, height: 1.5, background: fg }} />
                <span style={{ display: "block", width: 18, height: 1.5, background: fg }} />
              </span>
            </button>
          </div>
        </div>
      </header>

      {/* Mobile drawer */}
      {mobileOpen && (
        <div
          role="dialog"
          aria-modal="true"
          aria-label="Mobile navigation"
          style={{
            position: "fixed",
            inset: 0,
            zIndex: 100,
            background: "rgba(4,6,13,0.97)",
            backdropFilter: "blur(20px) saturate(140%)",
            WebkitBackdropFilter: "blur(20px) saturate(140%)",
            color: "rgba(244,247,255,0.92)",
            display: "flex",
            flexDirection: "column",
            animation: "drawerFade .2s ease",
          }}
        >
          <div style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            padding: "16px 20px",
            height: 64,
            borderBottom: "1px solid rgba(255,255,255,0.08)",
          }}>
            <span style={{ color: "rgba(244,247,255,0.92)" }}>
              <Wordmark size={14} />
            </span>
            <button
              onClick={() => setMobileOpen(false)}
              aria-label="Close menu"
              style={{
                width: 38,
                height: 38,
                padding: 0,
                border: "1px solid rgba(255,255,255,0.12)",
                background: "transparent",
                color: "rgba(244,247,255,0.92)",
                cursor: "pointer",
                fontSize: 22,
                lineHeight: 1,
                fontFamily: "inherit",
              }}
            >×</button>
          </div>
          <nav style={{
            display: "flex",
            flexDirection: "column",
            padding: "32px 20px",
            gap: 4,
          }}>
            <a
              href="#home"
              onClick={(e) => { e.preventDefault(); navigate("home"); }}
              style={{
                fontSize: 28,
                fontWeight: 400,
                color: route === "home" ? "rgba(244,247,255,0.95)" : "rgba(220,228,245,0.65)",
                textDecoration: "none",
                padding: "14px 0",
                borderBottom: "1px solid rgba(255,255,255,0.06)",
                letterSpacing: "0.01em",
              }}
            >Home</a>
            {links.map((l) => (
              <a key={l.id}
                href={"#" + l.id}
                onClick={(e) => { e.preventDefault(); navigate(l.id); }}
                style={{
                  fontSize: 28,
                  fontWeight: 400,
                  color: route === l.id ? "rgba(244,247,255,0.95)" : "rgba(220,228,245,0.65)",
                  textDecoration: "none",
                  padding: "14px 0",
                  borderBottom: "1px solid rgba(255,255,255,0.06)",
                  letterSpacing: "0.01em",
                }}
              >{l.label}</a>
            ))}
            <a
              href="#cart"
              onClick={(e) => { e.preventDefault(); navigate("cart"); }}
              style={{
                fontSize: 28,
                fontWeight: 400,
                color: route === "cart" ? "rgba(244,247,255,0.95)" : "rgba(220,228,245,0.65)",
                textDecoration: "none",
                padding: "14px 0",
                letterSpacing: "0.01em",
                display: "flex",
                alignItems: "baseline",
                gap: 10,
              }}
            >
              Cart
              <span style={{
                fontFamily: "var(--mono)",
                fontSize: 14,
                color: "rgba(220,228,245,0.5)",
              }}>[{String(cartCount).padStart(2, "0")}]</span>
            </a>
          </nav>
        </div>
      )}
    </React.Fragment>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Footer
function Footer({ navigate }) {
  const cols = [
    { title: "Shop", links: [["All products", "shop"], ["New", "shop"], ["Bestsellers", "shop"]] },
    { title: "Company", links: [["About", "about"], ["Contact", "contact"], ["Quality & Testing", "about"]] },
    { title: "Support", links: [["FAQ", "home"], ["Shipping", "contact"], ["Returns", "contact"]] },
  ];
  return (
    <footer style={{
      marginTop: 120,
      borderTop: "1px solid var(--border)",
      background: "var(--bg)",
      paddingTop: 64,
      paddingBottom: 32,
    }}>
      <div className="container">
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr 1fr 1fr",
          gap: 48,
          paddingBottom: 56,
        }} className="footer-grid">
          <div>
            <Wordmark size={14} />
            <p style={{
              marginTop: 18,
              fontSize: 13,
              lineHeight: 1.6,
              color: "var(--muted)",
              maxWidth: 280,
            }}>
              Research-grade peptides for laboratory and professional use. Tested, traceable, transparent.
            </p>
            <div style={{ marginTop: 22, display: "flex", flexDirection: "column", gap: 6 }}>
              <Code>ISO 9001:2015</Code>
              <Code>GMP Compliant Sourcing</Code>
              <Code>HPLC ≥ 99% purity</Code>
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.title}>
              <Eyebrow>{c.title}</Eyebrow>
              <ul style={{ listStyle: "none", padding: 0, margin: "18px 0 0", display: "flex", flexDirection: "column", gap: 10 }}>
                {c.links.map(([label, route]) => (
                  <li key={label}>
                    <a
                      href={"#" + route}
                      onClick={(e) => { e.preventDefault(); navigate(route); }}
                      style={{ color: "var(--fg)", textDecoration: "none", fontSize: 13 }}
                    >{label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          borderTop: "1px solid var(--border)",
          paddingTop: 24,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          flexWrap: "wrap",
          gap: 16,
        }}>
          <Code>© 2026 Genmax Laboratories. All rights reserved.</Code>
          <Code>For research use only. Not for human consumption.</Code>
        </div>
      </div>
    </footer>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Newsletter
function Newsletter() {
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  return (
    <div style={{
      border: "1px solid var(--border)",
      padding: "56px 8%",
      background: "var(--surface)",
      display: "grid",
      gridTemplateColumns: "1fr 1fr",
      gap: 40,
      alignItems: "center",
    }} className="newsletter">
      <div>
        <Eyebrow>Stay informed</Eyebrow>
        <h3 style={{
          fontSize: 28,
          margin: "12px 0 0",
          letterSpacing: "-0.02em",
          fontWeight: 500,
          lineHeight: 1.15,
        }}>New compounds, batch results, and lab notes — once a month.</h3>
      </div>
      <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{
        display: "flex",
        gap: 0,
        border: "1px solid var(--border)",
        background: "var(--bg)",
      }}>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="you@laboratory.com"
          required
          style={{
            flex: 1,
            border: 0,
            background: "transparent",
            padding: "0 20px",
            fontFamily: "inherit",
            fontSize: 14,
            color: "var(--fg)",
            outline: "none",
          }}
        />
        <button type="submit" style={{
          padding: "0 24px",
          background: "var(--fg)",
          color: "var(--bg)",
          border: 0,
          fontFamily: "inherit",
          fontSize: 13,
          cursor: "pointer",
          letterSpacing: "0.02em",
          height: 56,
        }}>{sent ? "Subscribed ✓" : "Subscribe"}</button>
      </form>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Product card
function ProductCard({ product, navigate }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onClick={() => navigate("product", { id: product.id })}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        cursor: "pointer",
        background: "var(--bg)",
        display: "flex",
        flexDirection: "column",
      }}
    >
      <div style={{
        position: "relative",
        transition: "transform .4s cubic-bezier(.2,.7,.2,1)",
        transform: hover ? "translateY(-3px)" : "none",
      }}>
        {product.image
          ? <Image src={product.image} label={product.shortName} ratio="4/5" code={product.code} />
          : <Placeholder label={product.shortName} ratio="4/5" code={product.code} />}
        {product.badge && (
          <div style={{ position: "absolute", top: 12, right: 12, zIndex: 2 }}>
            <Badge tone={product.badge === "New" ? "accent" : "default"}>{product.badge}</Badge>
          </div>
        )}
      </div>
      <div style={{ paddingTop: 16, display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16 }}>
        <div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
            <Code>{product.code}</Code>
            <Code>· {product.dose}</Code>
          </div>
          <h3 style={{
            fontSize: 16,
            margin: "4px 0 0",
            fontWeight: 500,
            letterSpacing: "-0.01em",
            color: "var(--fg)",
          }}>{product.name}</h3>
          <div style={{
            fontSize: 12,
            color: "var(--muted)",
            marginTop: 4,
          }}>{product.category}</div>
          {product.blurb && (
            <p style={{
              fontSize: 12,
              lineHeight: 1.5,
              color: "var(--muted)",
              marginTop: 8,
              marginBottom: 0,
              display: "-webkit-box",
              WebkitLineClamp: 2,
              WebkitBoxOrient: "vertical",
              overflow: "hidden",
            }}>{product.blurb}</p>
          )}
        </div>
        <div style={{
          fontSize: 15,
          fontWeight: 500,
          color: "var(--fg)",
          fontVariantNumeric: "tabular-nums",
        }}>${product.price}</div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Trust bar — strip with line-art icons
function TrustBar() {
  const items = [
    {
      label: "HPLC tested",
      sub: "Every batch, third-party verified",
      icon: (
        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round">
          {/* Chromatography peaks on a baseline */}
          <path d="M3 19 L6 19 L8 10 L10 15 L12 6 L14 13 L16 19 L21 19" />
          <line x1="3" y1="21" x2="21" y2="21" />
        </svg>
      ),
    },
    {
      label: "Cold-chain shipping",
      sub: "Insulated, tracked, 2-day worldwide",
      icon: (
        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round">
          {/* Snowflake */}
          <line x1="12" y1="3" x2="12" y2="21" />
          <line x1="3" y1="12" x2="21" y2="12" />
          <line x1="5.5" y1="5.5" x2="18.5" y2="18.5" />
          <line x1="5.5" y1="18.5" x2="18.5" y2="5.5" />
          <path d="M10 4.5 L12 3 L14 4.5" />
          <path d="M10 19.5 L12 21 L14 19.5" />
          <path d="M4.5 10 L3 12 L4.5 14" />
          <path d="M19.5 10 L21 12 L19.5 14" />
        </svg>
      ),
    },
    {
      label: "Secure checkout",
      sub: "256-bit SSL, no card stored",
      icon: (
        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round">
          {/* Shield with check */}
          <path d="M12 3 L5 5.5 V12 C5 16 8 19 12 21 C16 19 19 16 19 12 V5.5 L12 3 Z" />
          <path d="M9 12 L11 14 L15 10" />
        </svg>
      ),
    },
    {
      label: "Direct support",
      sub: "Lab staff respond within 24h",
      icon: (
        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round">
          {/* Speech bubble with lines */}
          <path d="M4 6 H20 V16 H13 L10 19 V16 H4 Z" />
          <line x1="8" y1="10" x2="16" y2="10" />
          <line x1="8" y1="13" x2="13" y2="13" />
        </svg>
      ),
    },
  ];
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "repeat(4, 1fr)",
      borderTop: "1px solid var(--border)",
      borderBottom: "1px solid var(--border)",
    }} className="trust-bar">
      {items.map((it, i) => (
        <div key={it.label} style={{
          padding: "28px 24px",
          borderLeft: i === 0 ? "none" : "1px solid var(--border)",
          display: "flex",
          flexDirection: "column",
          gap: 8,
        }}>
          <div style={{
            color: "var(--fg)",
            marginBottom: 10,
            display: "flex",
            alignItems: "center",
          }}>
            {it.icon}
          </div>
          <div style={{ fontSize: 13, color: "var(--fg)", fontWeight: 500 }}>{it.label}</div>
          <div style={{ fontSize: 12, color: "var(--muted)", lineHeight: 1.5 }}>{it.sub}</div>
        </div>
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Section header
function SectionHeader({ eyebrow, title, action }) {
  return (
    <div style={{
      display: "flex",
      justifyContent: "space-between",
      alignItems: "flex-end",
      marginBottom: 32,
      gap: 24,
    }}>
      <div>
        {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
        <h2 style={{
          fontSize: 36,
          fontWeight: 400,
          letterSpacing: "-0.025em",
          margin: eyebrow ? "12px 0 0" : 0,
          maxWidth: 640,
          lineHeight: 1.1,
        }}>{title}</h2>
      </div>
      {action && <div>{action}</div>}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// FAQ Item
function FAQItem({ q, a, defaultOpen }) {
  const [open, setOpen] = useState(!!defaultOpen);
  return (
    <div style={{ borderBottom: "1px solid var(--border)" }}>
      <button
        onClick={() => setOpen(!open)}
        style={{
          width: "100%",
          padding: "24px 0",
          background: "transparent",
          border: 0,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          cursor: "pointer",
          textAlign: "left",
          color: "var(--fg)",
          fontFamily: "inherit",
          gap: 24,
        }}
      >
        <span style={{ fontSize: 17, fontWeight: 500, letterSpacing: "-0.005em" }}>{q}</span>
        <span style={{
          fontFamily: "var(--mono)",
          fontSize: 14,
          color: "var(--muted)",
          width: 16,
          textAlign: "center",
          transition: "transform .2s",
          transform: open ? "rotate(45deg)" : "rotate(0)",
        }}>+</span>
      </button>
      <div style={{
        maxHeight: open ? 240 : 0,
        overflow: "hidden",
        transition: "max-height .25s ease",
      }}>
        <p style={{
          margin: 0,
          paddingBottom: 24,
          fontSize: 14,
          lineHeight: 1.7,
          color: "var(--muted)",
          maxWidth: 720,
        }}>{a}</p>
      </div>
    </div>
  );
}

Object.assign(window, {
  Mark, Wordmark, Button, Eyebrow, Code, Badge, Placeholder, Image,
  Header, Footer, Newsletter, ProductCard, TrustBar, SectionHeader, FAQItem,
});