function HeroVisualStatue() {
  return (
    <div className="hero-visual" style={{ aspectRatio: "16/10", background: "transparent", border: 0, borderRadius: 16, overflow: "hidden", position: "relative" }}>
      <img
        src="peptides supplies, bacteriostatic water - vialprep.png"
        alt="Classical statue holding the vialprep kit"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 30%", display: "block", borderRadius: 16 }} />
    </div>);
}

function HeroVisualExploded_unused() {
  const items = [
  { qty: "50×", label: "Insulin syringe · 0.5ml · 31g" },
  { qty: "10×", label: "Reconstitution syringe · 3ml" },
  { qty: "100×", label: "Alcohol prep pads" },
  { qty: "1×", label: "Printed guides · injection + dosing" },
  { qty: "1×", label: "Storage box · fridge-ready" }];

  return (
    <div className="hero-visual" style={{ aspectRatio: "5/6", background: "var(--paper)" }}>
      <div style={{ position: "absolute", inset: 24, display: "flex", flexDirection: "column", gap: 8 }}>
        <div className="eyebrow" style={{ marginBottom: 4 }}>Kit · 30-day supply</div>
        {items.map((it, i) =>
        <div key={i} style={{ display: "grid", gridTemplateColumns: "60px 1fr auto", gap: 12, alignItems: "center", padding: "10px 14px", background: "var(--white)", border: "1px solid var(--line)", borderRadius: 10 }}>
            <span className="mono" style={{ fontSize: 12, color: "var(--neon)", fontWeight: 600 }}>{it.qty}</span>
            <span style={{ fontSize: 13, color: "var(--ink-2)" }}>{it.label}</span>
            <ICheck size={16} stroke="var(--neon)" />
          </div>
        )}
      </div>
    </div>);
}

function Hero({ tweaks, onCta }) {
  const headlineParts = (tweaks.headline || "").split("\n");
  const monthly = tweaks.priceMonthly || 1490;
  return (
    <section className="hero" style={{ padding: 0, position: "relative", minHeight: "85vh", display: "flex", alignItems: "center", overflow: "hidden" }}>
      {/* Full-bleed background image */}
      <img
        className="hero-bg"
        src="peptides supplies, bacteriostatic water - vialprep.png"
        alt="vialprep supplies in a martini glass"
        style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "calc(100% + 55px)", objectFit: "cover", objectPosition: "5% 10%", zIndex: 0, transform: "scale(1.5)", transformOrigin: "5% 15%" }} />
      {/* Dark overlay for text legibility */}
      <div className="hero-overlay" style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.1) 100%)", zIndex: 1 }} />

      <div className="container" style={{ position: "relative", zIndex: 2, padding: "80px 32px" }}>
        <div style={{ maxWidth: 560 }}>
          <div className="col gap-32">
            <div className="col gap-16">
              <h1 className="display hero-headline">
                {headlineParts.map((line, i) =>
                <React.Fragment key={i}>
                    {i === 0 ? line : <em>{line}</em>}
                    {i < headlineParts.length - 1 && <br />}
                  </React.Fragment>
                )}
              </h1>
              <p className="hero-sub">{tweaks.subhead}</p>
            </div>
            <div className="hero-cta">
              <a className="btn btn-accent" href="/waitlist/" onClick={() => gtag('event', 'waitlist_click', { event_category: 'conversion', link_location: 'hero' })}>
                Join the waitlist <IArrow size={16} />
              </a>
              <a className="btn btn-ghost-dark" href="#how">How it works</a>
            </div>
          </div>
        </div>
      </div>
    </section>);
}

Object.assign(window, { Hero });