// Welcome Kit — four tiles. Ships once with the first kit.
// Practice pad is the hero. Three paper objects bridge the first injection.
function WelcomeKit() {
  const hero = {
    n: "01",
    name: "Injection practice kit",
    spec: "Practice injection pad · silicone · realistic resistance · reusable",
    body:
    "For when your hands aren't ready yet. Push, draw, inject, until they are.",
    tag: "practice",
    img: "uploads/4d2553a8-1189-46e8-add2-915932d9d6c8.png"
  };

  const items = [
  {
    n: "02",
    group: "storage",
    name: "Reusable insulated vial case",
    spec: "EVA shell · thermal lined · fits 2 vials",
    body: "Keeps your vials at temperature when you travel, move between rooms, or just want them somewhere that isn't a bare fridge shelf. Sized for peptide vials, nothing else.",
    img: "uploads/b47e36e6-d505-4b46-9c0f-64bb769054c6.png"
  },
  {
    n: "03",
    group: "dosing",
    name: "Dosing booklet",
    spec: "20 pages · A6 · ships with every kit",
    body: "Your cycle laid out week by week — what to draw, when to inject, what to log. Plain language, no medical shorthand. Stays next to the kit so you never have to guess.",
    img: "uploads/99bce6f2-69af-4d8f-afc8-f13bbc4e7206.png"
  },
  {
    n: "04",
    group: "injecting",
    name: "Site rotation body map",
    spec: "A5 card · front and back",
    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/2ec6561e-d283-45e9-821d-1369b547d64f.png"
  }];


  return (
    <section id="welcome-kit" style={{ background: "var(--paper-2)" }}>
      <div className="container">
        <div className="section-head" style={{ marginBottom: 48 }}>
          <h2 className="display section-title">What's actually in the welcome box.</h2>
          <p className="section-sub">
            Four things, shipped once with your first kit. The practice pad is the ritual object that bridges first-time fear; the three cards walk you through the moments that scare first-timers most. Yours to keep — even if you cancel.
          </p>
        </div>

        <div className="welcome-grid">
          <article className="wk-hero">
            <img
              src={hero.img}
              alt={hero.name}
              style={{
                position: "absolute",
                inset: 0,
                width: "100%",
                height: "100%",
                objectFit: "cover"
              }}
            />
            <div className="wk-hero-overlay">
              <div className="wk-hero-tag">
                <span className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--accent-deep)" }}>
                  {hero.n} · {hero.tag.toUpperCase()} · INJECTING
                </span>
              </div>
              <div className="wk-hero-text">
                <h3 className="display" style={{ fontSize: "clamp(28px, 3.2vw, 40px)", lineHeight: 1.05, margin: 0 }}>
                  {hero.name}.
                </h3>
                <div className="mono" style={{ fontSize: 11, letterSpacing: "0.06em", color: "var(--ink-3)", marginTop: 6 }}>
                  {hero.spec}
                </div>
                <p style={{ margin: "12px 0 0", fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.55, maxWidth: "46ch" }}>
                  {hero.body}
                </p>
              </div>
            </div>
          </article>

          {items.map((it, i) =>
          <article key={i} className="wk-tile">
              {it.img ? (
                <img
                  src={it.img}
                  alt={it.name}
                  style={{
                    height: 140,
                    width: "100%",
                    objectFit: "cover",
                    borderBottom: "1px solid var(--line)",
                    display: "block"
                  }}
                />
              ) : (
                <div
                className="ph"
                style={{
                  height: 140,
                  borderRadius: 0,
                  background:
                  "repeating-linear-gradient(135deg, transparent 0 12px, rgba(47,111,78,0.05) 12px 13px), var(--white)",
                  border: 0,
                  borderBottom: "1px solid var(--line)",
                  color: "var(--ink-4)",
                  fontSize: 10,
                  letterSpacing: "0.1em"
                }}>

                  {it.name.toLowerCase()}
                </div>
              )}
              <div className="wk-body">
                <div className="wk-row">
                  <span className="mono" style={{ fontSize: 10, letterSpacing: "0.16em", color: "var(--accent-deep)", fontWeight: 600 }}>
                    {it.n} · {it.group.toUpperCase()}
                  </span>
                </div>
                <h4 className="display" style={{ fontSize: 18, margin: "4px 0 2px", lineHeight: 1.2 }}>
                  {it.name}
                </h4>
                <div className="mono" style={{ fontSize: 10, color: "var(--ink-4)", letterSpacing: "0.04em", lineHeight: 1.5 }}>
                  {it.spec}
                </div>
                <p style={{ margin: "8px 0 0", fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.55 }}>
                  {it.body}
                </p>
              </div>
            </article>
          )}
        </div>

        <p style={{ marginTop: 24, fontSize: 13, color: "var(--ink-4)", lineHeight: 1.6, maxWidth: 760 }}>Plus the EVA travel pouch and dosing booklet which we'll send you with each kit so you always have it on hand.

        </p>

        <div
          style={{
            marginTop: 24,
            padding: "16px 20px",
            borderRadius: 12,
            background: "var(--white)",
            border: "1px solid var(--line)",
            display: "flex",
            gap: 12,
            alignItems: "center",
            flexWrap: "wrap"
          }}>
          
          <IShield size={18} stroke="var(--accent)" />
          <div style={{ fontSize: 13.5, color: "var(--ink-2)", flex: 1, minWidth: 280 }}>
            <strong style={{ color: "var(--ink)" }}>The welcome kit is yours.</strong>{" "}
            One-time, with your first month. Refund the monthly kit any time — keep the box.
          </div>
          <button
            className="btn btn-accent btn-sm"
            onClick={() => document.getElementById("pricing")?.scrollIntoView({ behavior: "smooth", block: "start" })}>
            
            Get my kit — ฿6,540 <IArrow size={14} />
          </button>
        </div>
      </div>

      <style>{`
        .welcome-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-auto-rows: minmax(260px, auto);
          gap: 14px;
        }
        .wk-hero {
          position: relative;
          grid-column: 1 / -1;
          border-radius: 18px;
          overflow: hidden;
          background: var(--white);
          border: 1px solid var(--line);
          min-height: 420px;
        }
        .wk-hero-overlay {
          position: absolute;
          inset: 0;
          padding: 28px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          background: linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(251,250,247,0.92) 100%);
        }
        .wk-hero-tag { display: inline-flex; }
        .wk-hero-text {
          background: color-mix(in srgb, var(--white) 88%, transparent);
          backdrop-filter: blur(6px);
          padding: 22px;
          border-radius: 14px;
          border: 1px solid var(--line-2);
          align-self: flex-start;
          max-width: 92%;
        }
        .wk-tile {
          background: var(--white);
          border: 1px solid var(--line);
          border-radius: 14px;
          overflow: hidden;
          display: flex;
          flex-direction: column;
        }
        .wk-body { padding: 16px; display: flex; flex-direction: column; }
        .wk-row { display: flex; justify-content: space-between; align-items: baseline; }

        @media (max-width: 1080px) {
          .welcome-grid { grid-template-columns: repeat(2, 1fr); }
          .wk-hero { min-height: 380px; }
        }
        @media (max-width: 720px) {
          .welcome-grid { grid-template-columns: 1fr; }
          .wk-hero { min-height: 320px; }
          .wk-hero-overlay { padding: 18px; }
          .wk-hero-text { padding: 16px; max-width: 100%; }
        }
      `}</style>
    </section>);

}

Object.assign(window, { WelcomeKit });