function HeroVisualLifestyle() {
  return (
    <div className="hero-visual" style={{ aspectRatio: "3/4", background: "transparent", border: 0, borderRadius: 24, overflow: "hidden", position: "relative" }}>
      <img
        src="assets/hero-lifestyle.png"
        alt="A calm Bangkok kitchen morning — a woman pauses with a peptide vial in hand, the open Vialprep booklet on the counter beside her"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "32% 68%", display: "block" }} />
      
      <div style={{ position: "absolute", left: 16, bottom: 16, display: "flex", gap: 8, alignItems: "center" }}>
        <span className="pill" style={{ background: "rgba(255,255,255,0.92)", color: "var(--accent-deep)", border: "1px solid rgba(0,0,0,0.06)" }}>
          <span className="pill-dot" style={{ background: "var(--accent)" }} /> kindness, in the form of a kit
        </span>
      </div>
    </div>);

}

function HeroVisualExploded_unused() {
  // Exploded diagram — stack of labelled rows
  const items = [
  { qty: "50×", label: "Insulin syringe · 0.5ml · 31g" },
  { qty: "10×", label: "Reconstitution syringe · 3ml" },
  { qty: "2×", label: "Bacteriostatic water · 30ml" },
  { qty: "100×", label: "Alcohol prep pads" },
  { qty: "20×", label: "Sterile gauze + plaster" },
  { qty: "1×", label: "Dosing booklet · QR videos" },
  { qty: "1×", label: "Travel pouch · insulated" }];

  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(--accent-deep)", fontWeight: 600 }}>{it.qty}</span>
            <span style={{ fontSize: 13, color: "var(--ink-2)" }}>{it.label}</span>
            <ICheck size={16} stroke="var(--accent)" />
          </div>
        )}
      </div>
    </div>);

}

function Hero({ tweaks, onCta }) {
  const headlineParts = (tweaks.headline || "").split("\n");
  const starterPrice = 6540;
  const goToKit = () => document.getElementById("welcome-kit")?.scrollIntoView({ behavior: "smooth", block: "start" });
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div className="col gap-32">
            <div className="col gap-16">
              <span className="pill"><span className="pill-dot" /> Built in Bangkok for 153 first-timers (and counting).</span>
              <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>
              <p className="mono" style={{ fontSize: 12, letterSpacing: "0.08em", color: "var(--ink-3)", lineHeight: 1.7, margin: "4px 0 0", maxWidth: "52ch" }}>
                practice pad · founder's letter · walkthrough card · site-rotation map · EVA pouch · dosing booklet
              </p>
            </div>
            <div className="hero-cta">
              <button className="btn btn-accent" onClick={goToKit}>
                Get my kit — ฿{starterPrice.toLocaleString()} <IArrow size={16} />
              </button>
              <a className="btn btn-ghost" href="#how">See how this works</a>
            </div>
            <div className="hero-proof" style={{ display: "flex", gap: 20, flexWrap: "wrap", alignItems: "center", paddingTop: 4 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <span style={{ display: "inline-flex", gap: 1 }}>
                  {[0, 1, 2, 3, 4].map((i) => <IStar key={i} size={14} stroke="#E0A93B" fill="#E0A93B" />)}
                </span>
                <span style={{ fontSize: 13, color: "var(--ink-2)", fontWeight: 600 }}>4.9</span>
                <span style={{ fontSize: 13, color: "var(--ink-3)" }}>· 153 first-timers</span>
              </div>
              <div style={{ width: 1, height: 16, background: "var(--line)" }} />
              <div style={{ fontSize: 13, color: "var(--ink-3)", display: "flex", alignItems: "center", gap: 6 }}>
                <ITruck size={14} stroke="var(--accent)" /> Same-day in Bangkok
              </div>
              <div style={{ width: 1, height: 16, background: "var(--line)" }} />
              <div style={{ fontSize: 13, color: "var(--ink-3)" }}>14-day refund on most recent kit</div>
            </div>
          </div>
          <div>
            <HeroVisualLifestyle />
          </div>
        </div>
      </div>
    </section>);

}

function Marquee() {
  const items = [
  ["500+ kits shipped in Bangkok", ITruck],
  ["same-day delivery in Bangkok", IClock],
  ["14-day refund on most recent kit", ICheck],
  ["plain-language dosing booklet", IBook],
  ["sterile, sealed, lot-traceable", IVial],
  ["a real human to text · 7 days a week", IUser]];

  const all = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {all.map(([label, IconC], i) =>
        <span key={i} className="marquee-item">
            <IconC size={14} /> {label}
          </span>
        )}
      </div>
    </div>);

}

Object.assign(window, { Hero, Marquee });