// Welcome Kit — Golden Hour room.
function WelcomeKit() {
  const hero = {
    n: "01",
    name: "Digital assisted walkthrough",
    spec: "QR on welcome card · vialprep.com/get-started",
    body: "Scan the QR. A guided flow walks you through your kit, calculates your dose, and takes you step by step through mixing and injection. Breathing exercise included for the needle.",
    tag: "digital",
    img: "uploads/digital-walkthrough.png?v=2"
  };

  const items = [
  {
    n: "02",
    group: "storage",
    name: "Vial storage box",
    spec: "",
    body: "A dedicated home for your vials in the fridge. Keeps everything at temperature, organized, and out of the way. Sized for your vials and injection supplies, nothing else.",
    img: "uploads/peptide-storage-box.png"
  },
  {
    n: "03",
    group: "injecting",
    name: "Walkthrough cards",
    spec: "",
    body: "Every step from uncapping to cleanup, in order, with pictures. Covers both mixing your vial and the injection itself. Prop it up next to you for the first few cycles.",
    img: "uploads/walkthrough-cards.png"
  },
  {
    n: "04",
    group: "injecting",
    name: "Site rotation body map",
    spec: "",
    body: "Where to inject this week, where you injected last week. The diagram that keeps your sites rotating without you having to remember.",
    img: "uploads/site-rotation-map.png"
  },
  {
    n: "05",
    group: "logging",
    name: "Cycle log card",
    spec: "",
    body: "Tick the day, note the site, log how you feel. Ten seconds after each injection. The back has a QR to reorder when supplies run low.",
    img: "uploads/cycle-log-card.png"
  }];


  return (
    <section id="welcome-kit" style={{ background: "var(--g-golden)" }}>
      <div className="container">
        <div className="section-head" style={{ marginBottom: 48 }}>
          <h2 className="display section-title">The prep kit.</h2>
          <p className="section-sub">
            Five things, shipped once with your first order. The storage box keeps your vials at temperature. The cards and digital walkthrough cover every step of the protocol.
          </p>
        </div>

        <div className="welcome-grid">
          <div className="card wk-hero" style={{ gridColumn: "1 / -1", display: "grid", gridTemplateColumns: "1fr 1fr", overflow: "hidden" }}>
            <div style={{ padding: 32, display: "flex", flexDirection: "column", gap: 14, justifyContent: "center" }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--accent-deep)" }}>{hero.n}</div>
              <h3 className="display" style={{ fontSize: 28, lineHeight: 1.1, margin: 0 }}>{hero.name}</h3>
              {hero.spec && <p className="mono" style={{ fontSize: 11, color: "var(--ink-3)", margin: 0 }}>{hero.spec}</p>}
              <p style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.55, margin: 0, maxWidth: "42ch" }}>{hero.body}</p>
              <div style={{ marginTop: 4 }}>
                <span className="pill"><span className="pill-dot" style={{ background: "var(--neon)" }} /> {hero.tag}</span>
              </div>
            </div>
            <div style={{ borderLeft: "1px solid var(--line)", position: "relative", minHeight: 260, overflow: "hidden" }}>
              <img src={hero.img} alt={hero.name} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
          </div>

          {items.map((it, i) => (
            <div key={i} className="card" style={{ padding: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}>
              {it.img ? (
                <div style={{ height: 180, position: "relative", background: "var(--paper)" }}>
                  <img src={it.img} alt={it.name} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
                </div>
              ) : (
                <div style={{ height: 180, background: "var(--honey)", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 8 }}>
                  <IBook size={32} stroke="var(--accent-deep)" />
                  <span className="mono" style={{ fontSize: 10, color: "var(--accent-deep)" }}>Scan QR to start</span>
                </div>
              )}
              <div style={{ padding: "20px 24px 24px", display: "flex", flexDirection: "column", gap: 8, flex: 1 }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--accent-deep)" }}>{it.n}</div>
                <h3 className="display" style={{ fontSize: 20, lineHeight: 1.15, margin: 0 }}>{it.name}</h3>
                {it.spec && <p className="mono" style={{ fontSize: 10, color: "var(--ink-4)", margin: 0 }}>{it.spec}</p>}
                <p style={{ fontSize: 13, color: "var(--ink-3)", lineHeight: 1.5, margin: 0 }}>{it.body}</p>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 24, textAlign: "center" }}>
          <a className="btn btn-accent" href="/waitlist/" onClick={() => gtag('event', 'waitlist_click', { event_category: 'conversion', link_location: 'welcome_kit' })}>
            Join the waitlist <IArrow size={14} />
          </a>
        </div>

      </div>

      <style>{`
        .welcome-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 20px;
        }
        .wk-hero {
          grid-column: 1 / -1;
        }
        @media (max-width: 860px) {
          .welcome-grid { grid-template-columns: 1fr 1fr; }
          .wk-hero { grid-template-columns: 1fr !important; }
          .wk-hero > div:last-child { min-height: 220px; border-left: 0; border-top: 1px solid var(--line); }
        }
        @media (max-width: 540px) {
          .welcome-grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { WelcomeKit });