// Shared brand components: header, footer, brand mark, vial graphics
// Loaded as type="text/babel" — globals exported via window.

const Star = ({ size = 22, color = "currentColor" }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill={color} aria-hidden="true">
    {/* Sharp 4-point burst */}
    <path d="M12 0 L13.6 9.4 L24 12 L13.6 14.6 L12 24 L10.4 14.6 L0 12 L10.4 9.4 Z" />
  </svg>
);

const Brandmark = ({ light = false }) => (
  <a href="/index.html" className="brandmark" style={{ color: light ? "var(--paper)" : "var(--ink)" }}>
    <span className="star" style={{ color: "var(--lime)" }}>
      <Star size={22} />
    </span>
    <span>SUPERSTAR<span style={{ opacity: 0.55, marginLeft: 4 }}>/WELLNESS</span></span>
  </a>
);

const Header = ({ active = "shop" }) => (
  <>
    <div className="promo-bar">
      ★ FREE EXPRESS SHIPPING ON STACKS OVER $250 — USE CODE <strong>PEAK10</strong>
    </div>
    <header className="site-header">
      <div className="container site-header-inner">
        <Brandmark />
        <nav className="nav-main">
          <a href="/shop.html" className={active === "shop" ? "active" : ""}>Pharmacy</a>
          <a href="/platform.html" className={active === "platform" ? "active" : ""}>Platform</a>
          <a href="/consult.html" className={active === "consult" ? "active" : ""}>Telehealth</a>
          <a href="/learn.html" className={active === "learn" ? "active" : ""}>Learn</a>
          <a href="/partners.html" className={active === "partners" ? "active" : ""}>For business</a>
        </nav>
        <div className="nav-cta">
          <a href="/bioreveal.html?start=1" className="btn btn-sm btn-primary">Find my protocol →</a>
          <a href="#" className="btn btn-sm btn-ghost">Log in</a>
        </div>
      </div>
    </header>
  </>
);

const Footer = () => (
  <footer className="site-footer">
    <div className="container">
      <div className="footer-top">
        <div className="footer-col">
          <Brandmark light />
          <p style={{ marginTop: 16, opacity: 0.7, fontSize: 14, lineHeight: 1.6, maxWidth: 320 }}>
            Wellness, finally explained. Personalized protocols, clinician-guided care, and pharmacy fulfillment built around the goals you're actually chasing.
          </p>
          <div style={{ marginTop: 24, display: "flex", gap: 8, flexWrap: "wrap" }}>
            <span className="chip chip-dark">★ MD-led</span>
            <span className="chip chip-dark">COA verified</span>
          </div>
        </div>
        <div className="footer-col">
          <h4>Shop</h4>
          <ul>
            <li><a href="/shop/sermorelin.html">Sermorelin</a></li>
            <li><a href="/shop/nad-plus.html">NAD+</a></li>
            <li><a href="/shop/bpc-157.html">BPC-157</a></li>
            <li><a href="/shop/ipamorelin.html">Ipamorelin</a></li>
            <li><a href="/shop/ghk-cu.html">GHK-Cu</a></li>
            <li><a href="/shop/glutathione.html">Glutathione</a></li>
            <li><a href="/shop.html">Full catalog</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Learn</h4>
          <ul>
            <li><a href="/learn.html#what">What is a peptide?</a></li>
            <li><a href="/learn.html#safe">Are they safe?</a></li>
            <li><a href="/learn.html#take">How do you take them?</a></li>
            <li><a href="/learn.html#fast">How fast do they work?</a></li>
            <li><a href="/bioreveal.html?start=1">Find my protocol</a></li>
            <li><a href="/quiz/">Build my protocol</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>For Business</h4>
          <ul>
            <li><a href="/partners.html">Partner program</a></li>
            <li><a href="/partners/hair-salons.html">For salons</a></li>
            <li><a href="/partners/yoga-studios.html">For yoga + pilates</a></li>
            <li><a href="/partners/chiropractors.html">For chiropractors</a></li>
            <li><a href="/partners/gyms.html">For gyms</a></li>
            <li><a href="/partners/playbook.html">Partner playbook</a></li>
            <li><a href="/partners/apply.html">Apply now</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Services</h4>
          <ul>
            <li><a href="/shop.html">Online pharmacy</a></li>
            <li><a href="/platform.html">AI health platform</a></li>
            <li><a href="/consult.html">Telehealth consults</a></li>
            <li><a href="/platform.html#login">Member dashboard</a></li>
            <li><a href="/learn.html">Help center</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 SUPERSTAR WELLNESS</span>
        <span>RX ONLY · 21+ · U.S. ONLY</span>
      </div>
      <p className="footer-disclaimer" style={{ marginTop: 18 }}>
        <strong style={{ color: "var(--paper)", letterSpacing: "0.06em" }}>WHAT WE OFFER —</strong> Superstar Wellness offers personalized wellness protocols, clinician-guided telehealth, pharmacy-fulfilled compounds, supplements, longevity support, and AI-powered health-planning software designed to help members improve recovery, body composition, focus, skin, hair, and metabolic health.
      </p>
      <p className="footer-disclaimer">
        Compounded medications are not FDA-approved and have not been reviewed for safety, effectiveness, or quality. Prescriptions are issued only after an online consultation with an independent licensed provider. Statements have not been evaluated by the FDA. Products are not intended to diagnose, treat, cure, or prevent any disease. Individual results vary. Charts shown are for illustrative purposes only.
      </p>
    </div>
  </footer>
);

/* ---------- VIAL GRAPHICS ----------
 * Photoreal SVG vial mockup. Clear glass body, metallic crimp, colored cap,
 * tinted liquid, big vertical "superstar" wordmark, small horizontal product name.
 * Designed to sit on a SOLID COLORED BACKDROP (the parent's background).
 *
 * Usage:
 *   <ProductShot bg="#C29472"> <Vial product="sermorelin" cap="#E47E3E" tint="#D9A47C" /> </ProductShot>
 */

const Vial = ({
  product = "BPC-157",
  cap = "#E47E3E",            // cap color
  tint = "rgba(255,255,255,0.15)", // liquid tint - subtle, mostly clear
  bg = "#C29472",             // parent backdrop (used to color the glass interior)
}) => {
  const id = product.replace(/[^a-z0-9]/gi, "");
  return (
    <svg viewBox="0 0 240 420" width="100%" height="100%" aria-hidden="true" style={{ overflow: "visible" }}>
      <defs>
        {/* Cap top — slight darken on bottom edge */}
        <linearGradient id={`cap-${id}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={cap} />
          <stop offset="1" stopColor={cap} stopOpacity="0.85"/>
        </linearGradient>
        {/* Metallic crimp — silver gradient */}
        <linearGradient id={`crimp-${id}`} x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="#9a9a96"/>
          <stop offset="0.15" stopColor="#e8e6e0"/>
          <stop offset="0.5" stopColor="#c8c4bd"/>
          <stop offset="0.85" stopColor="#e8e6e0"/>
          <stop offset="1" stopColor="#8a8884"/>
        </linearGradient>
        {/* Glass body — picks up the backdrop, with subtle tint */}
        <linearGradient id={`glass-${id}`} x1="0" y1="0" x2="1" y2="0">
          <stop offset="0"   stopColor={bg} stopOpacity="0.55"/>
          <stop offset="0.15" stopColor={bg} stopOpacity="0.8"/>
          <stop offset="0.5"  stopColor={bg} stopOpacity="0.4"/>
          <stop offset="0.85" stopColor={bg} stopOpacity="0.8"/>
          <stop offset="1"   stopColor={bg} stopOpacity="0.95"/>
        </linearGradient>
        {/* Top highlight on liquid */}
        <linearGradient id={`liq-${id}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={tint} stopOpacity="0.3"/>
          <stop offset="0.15" stopColor={tint} stopOpacity="0.6"/>
          <stop offset="1" stopColor={tint} stopOpacity="0.85"/>
        </linearGradient>
        {/* Soft shadow under vial */}
        <radialGradient id={`shadow-${id}`} cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" stopColor="rgba(0,0,0,0.45)"/>
          <stop offset="1" stopColor="rgba(0,0,0,0)"/>
        </radialGradient>
      </defs>

      {/* Ground shadow — long, soft */}
      <ellipse cx="120" cy="395" rx="86" ry="10" fill={`url(#shadow-${id})`} />

      {/* ============ CAP ============ */}
      {/* Top disc */}
      <ellipse cx="120" cy="36" rx="36" ry="6" fill={cap} opacity="0.9"/>
      <rect x="84" y="36" width="72" height="20" fill={`url(#cap-${id})`} />
      <ellipse cx="120" cy="56" rx="36" ry="5" fill={cap} opacity="0.7"/>
      {/* Cap top sheen */}
      <ellipse cx="110" cy="34" rx="14" ry="2" fill="white" opacity="0.35"/>

      {/* ============ METALLIC CRIMP NECK ============ */}
      <rect x="80" y="56" width="80" height="26" fill={`url(#crimp-${id})`} />
      {/* crimp ridges */}
      <rect x="80" y="62" width="80" height="1.5" fill="rgba(0,0,0,0.18)"/>
      <rect x="80" y="74" width="80" height="1.5" fill="rgba(0,0,0,0.18)"/>
      {/* crimp top edge */}
      <ellipse cx="120" cy="56" rx="40" ry="3.5" fill="#d4d0c8"/>
      {/* crimp bottom shadow */}
      <rect x="80" y="80" width="80" height="3" fill="rgba(0,0,0,0.2)"/>

      {/* ============ GLASS NECK TAPER ============ */}
      <path d="M 88 83 L 76 96 L 76 110 L 164 110 L 164 96 L 152 83 Z" fill={`url(#glass-${id})`} />

      {/* ============ GLASS BODY ============ */}
      {/* Main cylinder */}
      <rect x="68" y="106" width="104" height="280" rx="6" fill={`url(#glass-${id})`} />
      {/* Liquid inside */}
      <rect x="71" y="155" width="98" height="228" rx="4" fill={`url(#liq-${id})`} />
      {/* Liquid meniscus */}
      <ellipse cx="120" cy="155" rx="49" ry="3" fill={tint} opacity="0.55"/>
      <ellipse cx="120" cy="156" rx="49" ry="2" fill="rgba(255,255,255,0.35)"/>

      {/* Bottom of vial — small inner ring for the dished base */}
      <ellipse cx="120" cy="383" rx="49" ry="4" fill="rgba(0,0,0,0.18)"/>
      <ellipse cx="120" cy="384" rx="40" ry="2.5" fill="rgba(0,0,0,0.25)"/>

      {/* Glass left edge highlight */}
      <rect x="69" y="108" width="3" height="270" fill="rgba(255,255,255,0.55)" opacity="0.6"/>
      {/* Glass right edge subtle */}
      <rect x="167" y="108" width="2" height="270" fill="rgba(255,255,255,0.35)" opacity="0.5"/>
      {/* Vertical glass shine */}
      <rect x="84" y="120" width="6" height="240" fill="rgba(255,255,255,0.18)" opacity="0.7"/>

      {/* ============ LABEL TEXT (printed on glass) ============ */}
      {/* Small horizontal — product name */}
      <text x="84" y="200" fontFamily="Inter, sans-serif" fontSize="11" fontWeight="500"
        letterSpacing="0.01em" fill="white" opacity="0.95">
        compounded
      </text>
      <text x="84" y="214" fontFamily="Inter, sans-serif" fontSize="11" fontWeight="500"
        letterSpacing="0.01em" fill="white" opacity="0.95">
        {product.toLowerCase()}
      </text>

      {/* Rx only — bottom small */}
      <text x="84" y="362" fontFamily="Inter, sans-serif" fontSize="9" fontWeight="500"
        letterSpacing="0.02em" fill="white" opacity="0.8">
        Rx only
      </text>

      {/* Big vertical SUPERSTAR wordmark — Archivo black, large, runs down right side */}
      <text
        x="160" y="380"
        fontFamily="Archivo, sans-serif" fontSize="62" fontWeight="900"
        letterSpacing="-0.02em"
        fill="white" opacity="0.97"
        transform="rotate(-90 160 380)"
      >
        superstar
      </text>
      {/* small star sigil under wordmark */}
      <g transform="translate(151 130)">
        <path d="M 5 0 L 6.2 3.8 L 10 5 L 6.2 6.2 L 5 10 L 3.8 6.2 L 0 5 L 3.8 3.8 Z" fill="white" opacity="0.95"/>
      </g>
    </svg>
  );
};

/* Photoreal product shot — uses real PNG vial against soft feminine backdrop */
const ProductShot = ({ bg, product = "NAD+", chip, badge, children }) => {
  const pal = (window.PRODUCT_PALETTES || {})[product] || { bg: "#D9C8B8", cap: "#7A4A2E", tint: "rgba(122,74,46,0.18)" };
  const bgColor = bg || pal.bg;
  const capColor = pal.cap || "#7A4A2E";
  const tintColor = pal.tint || "rgba(122,74,46,0.18)";
  // per-product image: /assets/products/<slug>.png  (e.g. "NAD+" -> nad-plus, "GHK-Cu" -> ghk-cu)
  const slug = product.toLowerCase().replace(/\+/g, "-plus").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
  // Real per-product shots are full-bleed photos (own backdrop) -> let them fill the
  // card edge-to-edge. The generic /assets/vial.png fallback stays centered on the palette.
  const [isFallback, setIsFallback] = React.useState(false);
  return (
  <div style={{
    background: bgColor,
    aspectRatio: "1/1",
    borderRadius: "var(--r-xl)",
    position: "relative",
    overflow: "hidden",
    display: "grid",
    placeItems: "center",
  }}>
    {isFallback && (
      <React.Fragment>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse at 50% 25%, rgba(255,255,255,0.28) 0%, transparent 60%)" }} />
        <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: "35%", background: "linear-gradient(to top, rgba(0,0,0,0.10), transparent)" }} />
      </React.Fragment>
    )}
    <img
      src={`/assets/products/${slug}.png`}
      alt={product}
      onError={(e) => { if (!e.currentTarget.dataset.fallback) { e.currentTarget.dataset.fallback = "1"; e.currentTarget.src = "/assets/vial.png"; setIsFallback(true); } }}
      style={isFallback ? {
        position: "relative", width: "78%", height: "88%", objectFit: "contain",
        filter: "drop-shadow(0 24px 36px rgba(0,0,0,0.22))",
      } : {
        position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover",
      }}
    />
    {isFallback && (
      <div style={{
        position: "absolute", bottom: 14, left: 0, right: 0, textAlign: "center",
        fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.22em",
        color: "rgba(0,0,0,0.6)", textTransform: "uppercase", fontWeight: 700,
      }}>
        {product}
      </div>
    )}
    {chip !== false && (
      <div style={{ position: "absolute", top: 20, left: 20, background: "white", padding: "7px 14px", borderRadius: 999, fontSize: 13, fontWeight: 600, display: "flex", alignItems: "center", gap: 8 }}>
        <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#1FB36B" }}/>
        In stock
      </div>
    )}
    {badge && (
      <div style={{ position: "absolute", top: 20, right: 20, background: "rgba(0,0,0,0.7)", color: "white", padding: "7px 14px", borderRadius: 999, fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", fontFamily: "var(--font-mono)" }}>
        {badge}
      </div>
    )}
    {children}
  </div>
  );
};

/* Per-product palette — backdrop + cap + liquid tint.
 * Every product needs a unique combo so the vial visual is recognizable per-SKU. */
const PRODUCT_PALETTES = {
  "BPC-157":     { bg: "#C8B49C", cap: "#7A4A2E", tint: "rgba(122,74,46,0.18)" },   // warm taupe + brown cap
  "TB-500":      { bg: "#A8B4A8", cap: "#3A6B4A", tint: "rgba(58,107,74,0.20)" },
  "Sermorelin":  { bg: "#D9A47C", cap: "#E47E3E", tint: "rgba(228,126,62,0.22)" },  // warm clay + orange cap
  "Ipamorelin":  { bg: "#C49484", cap: "#A0463A", tint: "rgba(160,70,58,0.20)" },   // terracotta + brick
  "CJC-1295":    { bg: "#B8A89C", cap: "#5E4A3E", tint: "rgba(94,74,62,0.18)" },    // taupe + dark brown
  "NAD+":        { bg: "#E5D9C7", cap: "#C49B5E", tint: "rgba(196,155,94,0.18)" },  // cream + gold cap
  "Epitalon":    { bg: "#B8A4B8", cap: "#6E4A6E", tint: "rgba(110,74,110,0.18)" },
  "Selank":      { bg: "#A8A0B8", cap: "#5848A0", tint: "rgba(88,72,160,0.20)" },   // lavender + violet
  "Semax":       { bg: "#A8B4C4", cap: "#3858A8", tint: "rgba(56,88,168,0.20)" },
  "Semaglutide": { bg: "#B8C4A8", cap: "#5A8A3A", tint: "rgba(90,138,58,0.20)" },
  "Tirzepatide": { bg: "#A0B098", cap: "#3E7A4A", tint: "rgba(62,122,74,0.20)" },
  "GHK-Cu":      { bg: "#E8C4B8", cap: "#C46A4A", tint: "rgba(196,106,74,0.20)" },  // blush + copper cap
  "Glutathione": { bg: "#9CC8B8", cap: "#3A8A6E", tint: "rgba(58,138,110,0.22)" },  // mint + teal cap
  "DSIP":        { bg: "#9CA8B4", cap: "#3E5A78", tint: "rgba(62,90,120,0.20)" },   // dusty blue + navy cap
  "PT-141":      { bg: "#9A4A4A", cap: "#FF6B5C", tint: "rgba(255,107,92,0.22)" },  // brick + coral
  "Thymosin":    { bg: "#3A6B5D", cap: "#5EE6B5", tint: "rgba(94,230,181,0.25)" },
  "B12 / MIC":   { bg: "#E8B85C", cap: "#C46A1A", tint: "rgba(196,106,26,0.22)" },  // amber + orange (B12 yellow)
  "MIC + B12":   { bg: "#E8B85C", cap: "#C46A1A", tint: "rgba(196,106,26,0.22)" },  // alias
  "STACK 01":    { bg: "#181818", cap: "#E8B5A8", tint: "rgba(232,181,168,0.18)" },
};

const getPalette = (name) => PRODUCT_PALETTES[name] || PRODUCT_PALETTES["BPC-157"];

/* Floating syringe / pen */
const Pen = ({ accent = "#E47E3E", bg = "#C29472" }) => (
  <svg viewBox="0 0 100 320" width="100%" height="100%" aria-hidden="true">
    <defs>
      <linearGradient id="pen-body" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0" stopColor="#f5f3ee"/>
        <stop offset="0.5" stopColor="white"/>
        <stop offset="1" stopColor="#e6e3dc"/>
      </linearGradient>
    </defs>
    <ellipse cx="50" cy="312" rx="34" ry="5" fill="rgba(0,0,0,0.3)"/>
    {/* Cap */}
    <rect x="28" y="20" width="44" height="60" rx="10" fill={accent}/>
    <rect x="28" y="20" width="44" height="14" rx="10" fill={accent} opacity="0.85"/>
    {/* Body */}
    <rect x="28" y="80" width="44" height="220" rx="10" fill="url(#pen-body)" stroke="rgba(0,0,0,0.06)"/>
    {/* Window */}
    <rect x="34" y="170" width="32" height="50" rx="3" fill="rgba(0,0,0,0.06)"/>
    {/* Dial */}
    <rect x="28" y="280" width="44" height="20" rx="10" fill="#1a1a1a"/>
    {/* Wordmark */}
    <text x="50" y="146" textAnchor="middle" fontFamily="Archivo" fontSize="13" fontWeight="900"
      letterSpacing="-0.01em" fill="#1a1a1a" transform="rotate(-90 50 146)">
      superstar
    </text>
  </svg>
);

Object.assign(window, { Star, Brandmark, Header, Footer, Vial, ProductShot, Pen, PRODUCT_PALETTES, getPalette });