/* GENT email automations — the templates.
   Each email is a component receiving { variant } (for A/B toggles).
   EMAILS registry (exported to window) drives the shell dropdown. */

const K = window.GentKit;
const {
  PROD, REVIEWS, Icon, EHead, CTA, Eyebrow, CodeBox, CodeNote, LineItem, Step,
  ProdTrio, Stars, Review, TrustBar, EFoot, Pad,
} = K;

/* Welcome-email step row: worded step label + bold title, rule, description */
function RuleStep({ n, title, desc }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "202px 1px minmax(0,268px)", gap: 8, alignItems: "end" }}>
      <div>
        <p style={{ fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 600, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--text-secondary)", margin: "0 0 2px" }}>{n}</p>
        <p style={{ fontWeight: 800, fontSize: 40, letterSpacing: "-.03em", lineHeight: 1, margin: 0, color: "var(--text-primary)" }}>{title}</p>
      </div>
      <div style={{ alignSelf: "stretch", background: "var(--border-subtle)", transform: "translateX(-13px)" }}></div>
      <p style={{ fontWeight: 500, fontSize: 15, lineHeight: 1.4, letterSpacing: "-.005em", color: "var(--text-primary)", margin: 0 }}>{desc}</p>
    </div>
  );
}

function CircleStep({ n, title, desc, flip, src, light, sm, price, was, noGlow, radius }) {
  const img = <div style={{ background: "#fff", borderRadius: radius || 20, aspectRatio: "1 / 1", width: noGlow ? "88%" : "98%", overflow: "hidden", boxShadow: src && !light && !noGlow ? "0 0 48px 11px rgba(95,171,132,.24)" : "none" }}>{src && <img src={src} alt="" style={{ display: "block", width: "105%", height: "105%", margin: "-2.5%", objectFit: "cover" }} />}</div>;
  const txt = (
    <div>
      <p style={{ fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 600, letterSpacing: ".18em", textTransform: "uppercase", color: light ? "var(--text-secondary)" : "rgba(255,255,255,.62)", margin: "0 0 4px" }}>{n}</p>
      <p style={{ fontWeight: 800, fontSize: sm ? 32 : 38, letterSpacing: "-.03em", lineHeight: 1, margin: 0, color: light ? "var(--text-primary)" : "#fff" }}>{title}</p>
      <p style={{ fontWeight: 400, fontSize: 15, lineHeight: 1.4, letterSpacing: "-.005em", color: light ? "var(--text-primary)" : "rgba(255,255,255,.82)", margin: "8px 0 0" }}>{desc}</p>
      {price && <p style={{ display: "flex", alignItems: "baseline", gap: 8, fontWeight: 800, fontSize: 18, letterSpacing: "-.02em", color: light ? "var(--text-primary)" : "#fff", margin: "10px 0 0" }}>{was && <span style={{ fontWeight: 500, fontSize: 12.6, textDecoration: "line-through", opacity: .6 }}>{was}</span>}<span>{price}</span></p>}
    </div>
  );
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, alignItems: "center" }}>
      {flip ? <>{txt}{img}</> : <>{img}{txt}</>}
    </div>
  );
}

/* ============ 1. WELCOME ============ */
function Welcome() {
  return (
    <>
      <EHead />
      <Pad className="e-hero-glow on-dark center" style={{ paddingTop: "93%", paddingBottom: 64 }}>
        <h1 className="e-h1" style={{ fontFamily: "var(--font-body)", fontWeight: 800, textTransform: "none", letterSpacing: "-0.045em", fontSize: 46, lineHeight: 1 }}>Less fuss. More focus</h1>
        <p className="e-lead" style={{ maxWidth: 430, margin: "11px auto 0" }}>
          <strong style={{ fontWeight: 700 }}>You're in.</strong> Here's 10% off your first order, because looking after yourself shouldn't be complicated.
        </p>
        <div style={{ margin: "28px 0 6px" }}>
          <CodeBox code="GENT10" label="10% off your first order" sub="Applied automatically at checkout. One use per customer." />
        </div>
        <div style={{ marginTop: 31 }}>
          <a href="#" style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", background: "var(--white)", color: "var(--green-900, #0D261C)", textDecoration: "none", padding: "18px 38px", borderRadius: 999, fontSize: 12, letterSpacing: ".18em", textTransform: "uppercase", fontWeight: 800 }}>Shop the routine</a>
        </div>
      </Pad>

      <Pad className="e-paper" style={{ paddingTop: 52 }}>
        <p className="eyebrow on-light center" style={{ marginBottom: 0 }}>PRESENTING THE GENTLEMAN'S</p>
        <span style={{ display: "block", width: 28, height: 2, background: "var(--green-600)", margin: "10px auto 12px" }}></span>
        <h2 className="e-h2 center" style={{ marginBottom: 28, fontWeight: 800, fontSize: 54, lineHeight: 1 }}>3 Step Routine</h2>
        <div style={{ display: "flex", flexDirection: "column", gap: 22, width: "fit-content", margin: "0 auto" }}>
          <RuleStep n="One" title="Cleanse" desc="Remove dirt, oil and daily build-up without stripping the skin." />
          <RuleStep n="Two" title="Treat" desc="A fast-absorbing serum that targets men's most common concerns." />
          <RuleStep n="Three" title="Moisturise" desc="Non-greasy hydration to finish, morning and night." />
        </div>
        <div className="center" style={{ margin: "42px 0 14px" }}>
          <a href="#" style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", background: "var(--accent)", color: "var(--white)", textDecoration: "none", padding: "18px 38px", borderRadius: 999, fontSize: 12, letterSpacing: ".18em", textTransform: "uppercase", fontWeight: 700 }}>Start with the set · <strong style={{ fontWeight: 800 }}>£45</strong></a>
        </div>
      </Pad>

      <div className="e-slate on-dark"><Pad className="center" style={{ paddingBottom: 44 }}>
        <p className="eyebrow" style={{ marginBottom: 0, color: "var(--white)", fontSize: 13.2 }}>Our mission</p>
        <span style={{ display: "block", width: 28, height: 2, background: "var(--green-500, #5FAB84)", margin: "10px auto 14px" }}></span>
        <p style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 22, lineHeight: 1.15, letterSpacing: "-.01em", color: "var(--white)", margin: 0 }}>
          Our mission is to simplify skincare for men, providing an effective routine to allow all men to look and feel confident
        </p>
      </Pad></div>

      <Pad className="e-muted"><TrustBar filled /></Pad>
      <EFoot />
    </>
  );
}

/* ============ 2. ABANDONED CART — 4 HOUR ============ */
function Cart4({ variant }) {
  const hasCode = variant === "code";
  return (
    <>
      <EHead />
      <Pad className="e-hero-glow on-dark center" style={{ paddingTop: "20.5%", paddingBottom: "12%" }}>
        <p className="eyebrow" style={{ marginBottom: 0, color: "var(--text-primary)" }}>Don't forget...</p>
        <span style={{ display: "block", width: 18, height: 2, background: "var(--green-600)", margin: "10px auto 12px" }}></span>
        <h1 className="e-h1">Your routine's waiting.</h1>
        <p className="e-lead" style={{ maxWidth: 430, margin: "11px auto 0" }}>
          Your items are still in your cart, but don't worry we've saved them for you. Why not pick up right from where you left off.
        </p>
      </Pad>

      {hasCode && (
        <div style={{ padding: "0 44px 4px" }}><CodeNote code="GENT10" /></div>
      )}

      <Pad style={{ paddingTop: 24, paddingBottom: 36 }}>
        <LineItem p={PROD.cleanser} />
        <LineItem p={PROD.serum} />
        <LineItem p={PROD.moisturiser} />
        <div className="totalrow">
          <span className="tl">Subtotal</span>
          <span className="tv">£49.97</span>
        </div>
        {hasCode && (
          <div className="totalrow" style={{ paddingTop: 6 }}>
            <span className="tl" style={{ color: "var(--green-600)" }}>With GENT10</span>
            <span className="tv" style={{ fontSize: 18, color: "var(--green-600)" }}>£44.97</span>
          </div>
        )}
        <div style={{ marginTop: 24 }}>
          <CTA variant="primary" full>{hasCode ? "Return to cart · save 10%" : "Return to your cart"}</CTA>
        </div>
      </Pad>

      <Pad className="e-muted" style={{ paddingTop: 40 }}><TrustBar /></Pad>
      <EFoot />
    </>
  );
}

/* ============ 3. ABANDONED CART — 24 HOUR ============ */
function Cart24({ variant }) {
  const hasCode = variant === "code";
  return (
    <>
      <EHead />
      <Pad className="e-hero-glow on-dark center" style={{ paddingTop: "86%", paddingBottom: 40 }}>
        <Eyebrow style={{ color: "var(--white)" }}>Still thinking it over?</Eyebrow>
        <h1 className="e-h1">When it's gone, it's gone.</h1>
        <p className="e-lead" style={{ maxWidth: 430, margin: "11px auto 0" }}>
          A sharp, effortless routine is one tap away.<br />Your cart's still here,
          {hasCode ? " and so is your 10% off." : " but not for long."}
        </p>
        <div style={{ marginTop: 31 }}>
          <CTA variant="inverted">{hasCode ? "Checkout with 10% off" : "Complete your order"}</CTA>
        </div>
      </Pad>

      {hasCode && (
        <div style={{ padding: "28px 44px 0" }}>
          <CodeNote code="GENT10">Your welcome code <b>GENT10</b> expires soon. Use it before it's gone, 10% comes off at checkout.</CodeNote>
        </div>
      )}

      <Pad style={{ paddingBottom: 10 }}>
        <LineItem p={PROD.cleanser} />
        <LineItem p={PROD.serum} />
        <LineItem p={PROD.moisturiser} />
      </Pad>

      <Pad className="e-muted" style={{ paddingTop: 34, paddingBottom: 34 }}>
        <Review quote="Easy to understand applications on how to apply. Great quality products and a really good price point." name="Sam G." product="The Set" />
        <div style={{ marginTop: 22 }}>
          <CTA variant="primary" full>{hasCode ? "Finish checkout · save 10%" : "Return to your cart"}</CTA>
        </div>
      </Pad>

      <Pad style={{ background: "#fff" }}><TrustBar /></Pad>
      <EFoot />
    </>
  );
}

/* ============ 4. BROWSE ABANDONMENT ============ */
function Browse() {
  return (
    <>
      <EHead />
      <Pad className="e-paper center">
        <Eyebrow onLight>Still weighing it up?</Eyebrow>
        <h1 className="e-h1" style={{ color: "var(--text-primary)" }}>The 3-step routine, explained.</h1>
        <p className="e-lead" style={{ color: "var(--text-secondary)", maxWidth: 430, margin: "11px auto 0" }}>
          You had a look at <strong style={{ color: "var(--text-primary)" }}>the Face Serum</strong>.
          Here's how it fits into two minutes, morning and night.
        </p>
      </Pad>

      <Pad className="e-steps" style={{ paddingTop: 44, paddingBottom: 69 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 34 }}>
          <CircleStep sm noGlow radius={11} src="assets/step-one-line-4.png" n="One" title="Cleanse" desc="Two pumps into wet hands, massage over the face for 30 seconds and rinse. Lifts dirt, excess oil and daily build-up without stripping, so oily skin, congestion and uneven texture stay in check." />
          <CircleStep sm noGlow radius={11} src="assets/step-two-line-3.png" flip n="Two" title="Treat" desc="Pat off excess water and press a few drops into damp skin. It absorbs fast and works beneath the surface on oil, pores and texture, supporting the skin barrier and keeping skin calm." />
          <CircleStep sm noGlow radius={11} src="assets/step-three-line-2.png" n="Three" title="Moisturise" desc="Massage a thin layer over face and neck in circular motions, morning and night. Lightweight but nourishing, it relieves dehydration, calms sensitivity and softens fine lines, never greasy." />
        </div>
      </Pad>

      <div>
        <div style={{ position: "relative", overflow: "hidden" }}>
        <img src="assets/set-trio-stone.png" alt="GENT · The Skincare Set" style={{ display: "block", width: "105%", margin: "0 -2.5% -5%" }} />
        <div className="center" style={{ position: "absolute", left: 0, right: 0, bottom: "5%", padding: "26px 44px 34px", transform: "translateY(4px)" }}>
          <h2 style={{ fontFamily: "var(--font-body)", fontWeight: 800, fontSize: 34, letterSpacing: "-.035em", lineHeight: 1, margin: 0, color: "var(--text-primary)" }}>The Skincare Set</h2>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, margin: "8px 0 0" }}>
            <p style={{ fontWeight: 600, fontSize: 16, letterSpacing: "-.01em", margin: 0, color: "var(--text-secondary)" }}>Cleanse. Treat. Moisturise.</p>
            <span style={{ width: 1, alignSelf: "stretch", background: "rgba(0,0,0,.22)" }}></span>
            <p style={{ fontWeight: 600, fontSize: 16, letterSpacing: "-.01em", margin: 0, color: "var(--text-secondary)" }}>The full 3-step routine for <strong style={{ fontWeight: 800, color: "var(--text-primary)" }}>£45</strong></p>
          </div>
          <div style={{ marginTop: 18 }}>
            <a href="#" style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", background: "var(--accent)", color: "var(--white)", textDecoration: "none", padding: "18px 38px", borderRadius: 999, fontSize: 12, letterSpacing: ".18em", textTransform: "uppercase", fontWeight: 800 }}>Add to cart</a>
          </div>
        </div>
        </div>
      </div>

      <Pad className="e-muted"><TrustBar /></Pad>
      <EFoot />
    </>
  );
}

/* ============ 5. THANK YOU — FIRST PURCHASE ============ */
function ThankYou() {
  return (
    <>
      <EHead />
      <Pad className="e-hero-glow on-dark center" style={{ paddingTop: "84%", paddingBottom: 0 }}></Pad>
      <div style={{ height: 5, background: "var(--green-600)" }}></div>

      <div style={{ background: "#fff" }}><Pad className="center">
        <p className="e-lead" style={{ fontSize: 23, fontWeight: 700, lineHeight: 1.3, color: "var(--text-primary)", maxWidth: 520, margin: "0 auto" }}>
          <span style={{ fontWeight: 800 }}>I'm Sam, the founder of GENT.</span>
          <span style={{ display: "block", width: 28, height: 2, background: "var(--green-500, #5FAB84)", margin: "12px auto 12px" }}></span>
          <span style={{ fontWeight: 600 }}>Thank you so much for your first order.<br />
          GENT was built on a simple idea: skincare for men should be quick, honest
          and effective. No ritual, no jargon, just formulas that
          <strong style={{ fontWeight: 700 }}> elevate a man's presence and standard of self</strong>.</span>
        </p>
      </Pad></div>

      <Pad className="e-steps" style={{ paddingTop: 48, paddingBottom: 60 }}>
        <p className="eyebrow center" style={{ marginBottom: 0, color: "#fff" }}>YOUR ORDER IS ON IT'S WAY!</p>
        <span style={{ display: "block", width: 28, height: 2, background: "var(--green-600)", margin: "10px auto 12px" }}></span>
        <h2 className="e-h2 center" style={{ marginBottom: 28, fontWeight: 800, fontSize: 38, lineHeight: 1 }}>Your new 3 Step Routine</h2>
        <div style={{ display: "flex", flexDirection: "column", gap: 34 }}>
          <CircleStep sm flip src="assets/step-one-line-4.png" n="One" title="Cleanse" desc="AM & PM. A pump, warm water, 30 seconds. Rinse and pat dry." />
          <CircleStep sm src="assets/step-two-line-3.png" n="Two" title="Treat" desc="AM & PM. A few drops of serum onto clean skin. Let it absorb." />
          <CircleStep sm flip src="assets/step-three-line-2.png" n="Three" title="Moisturise" desc="AM & PM. Finish with a thin layer. Sharp, never greasy." />
        </div>
      </Pad>

      <div style={{ background: "#fff" }}><Pad>
        <h2 className="e-h2 center" style={{ marginBottom: 6 }}>#GENTSkincare</h2>
        <p className="center" style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--text-secondary)", margin: "0 0 20px" }}>
          Tag us and you might feature here. Real routines, real results.
        </p>
        <div className="ugc-grid">
          <img src="assets/ugc-1.png" alt="Customer photo" />
          <img src="assets/ugc-2.png" alt="Customer photo" />
          <img src="assets/ugc-3.png" alt="Customer photo" />
        </div>
        <div className="center" style={{ marginTop: 24 }}><CTA variant="primary">Follow @gentskincare</CTA></div>
      </Pad></div>

      <Pad className="e-muted" style={{ paddingTop: 26 }}><TrustBar /></Pad>
      <EFoot />
    </>
  );
}

/* ============ 6. WIN BACK — 30 DAY ============ */
function WinBack() {
  return (
    <>
      <EHead />
      <Pad className="e-hero-green on-dark center">
        <Eyebrow style={{ color: "var(--white)" }}>It's been a month</Eyebrow>
        <h1 className="e-h1">Time to restock.</h1>
        <p className="e-lead" style={{ maxWidth: 430, margin: "11px auto 0" }}>
          Running low? Don't break the streak. Reorder in a couple of taps,
          and here's 5% off for keeping it up.
        </p>
        <div style={{ margin: "26px 0 6px" }}>
          <CodeBox code="CLEANSE5" label="5% off your reorder" sub="Applied at checkout." />
        </div>
        <div style={{ marginTop: 22 }}><CTA variant="inverted">Reorder now</CTA></div>
      </Pad>

      <Pad style={{ background: "#fff", paddingTop: 48, paddingBottom: 60 }}>
        <p className="eyebrow on-light center" style={{ marginBottom: 0 }}>THE PERFECT MORNING ROUTINE</p>
        <span style={{ display: "block", width: 28, height: 2, background: "var(--green-600)", margin: "10px auto 12px" }}></span>
        <h2 className="e-h2 center" style={{ marginBottom: 28, fontWeight: 800, fontSize: 38, lineHeight: 1, color: "var(--text-primary)" }}>The GENT Skincare Set</h2>
        <div style={{ display: "flex", flexDirection: "column", gap: 34 }}>
          <CircleStep sm light flip src="assets/products/cleanser-photo.png" n="150ml" title="Cleanser" was="£13.99" price="£13.29" desc="Clears dirt, excess oil and daily pollution without stripping, keeping skin balanced." />
          <CircleStep sm light src="assets/products/serum-photo.png" n="30ml" title="Serum" was="£18.99" price="£18.04" desc="Works beneath the surface on oil, pores and texture to support the skin barrier." />
          <CircleStep sm light flip src="assets/products/moisturiser-photo.png" n="50ml" title="Moisturiser" was="£16.99" price="£16.14" desc="Lightweight hydration that eases dehydration and softens fine lines, never greasy." />
        </div>
      </Pad>

      <Pad className="center" style={{ background: "var(--accent)", paddingTop: 40, paddingBottom: 44 }}>
        <h2 style={{ fontFamily: "var(--font-body)", fontWeight: 800, fontSize: 34, letterSpacing: "-.035em", lineHeight: 1, margin: 0, color: "var(--white)" }}>The Trifecta</h2>
        <p style={{ fontWeight: 600, fontSize: 16, letterSpacing: "-.01em", margin: "10px 0 0", color: "rgba(255,255,255,.86)" }}>Get the full 3-step routine for just <strong style={{ fontWeight: 800, color: "var(--white)" }}>£45</strong></p>
        <div style={{ marginTop: 20 }}>
          <a href="#" style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", background: "var(--white)", color: "var(--text-primary)", textDecoration: "none", padding: "15px 42px", borderRadius: 999, fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase", fontWeight: 800 }}>Reorder the set</a>
        </div>
      </Pad>

      <Pad className="e-muted">
        <Review quote="I've always used just soap and water until finding these 3 products, I like how its simple and easy to use my skins never looked better!" name="Alex" product="The Set" />
      </Pad>

      <Pad className="e-muted" style={{ paddingTop: 0 }}><TrustBar /></Pad>
      <EFoot />
    </>
  );
}

/* ============ 7. REVIEW REMINDER ============ */
function ReviewReminder() {
  const [rating, setRating] = React.useState(0);
  return (
    <>
      <EHead />
      <Pad className="center e-paper">
        <Eyebrow onLight>How's it going?</Eyebrow>
        <h1 className="e-h1" style={{ color: "var(--text-primary)" }}>How's the routine treating you?</h1>
        <p className="e-lead" style={{ color: "var(--text-secondary)", maxWidth: 430, margin: "11px auto 0" }}>
          It's been a few weeks. Thirty seconds of your time helps the next guy
          decide, and helps us keep getting better.
        </p>
        <div className="rate-row" style={{ marginTop: 24 }}>
          {[1, 2, 3, 4, 5].map((i) => (
            <button key={i} className={i <= rating ? "lit" : ""}
              onClick={() => setRating(i)} aria-label={i + " stars"}>
              <Icon n="star" />
            </button>
          ))}
        </div>
        <div style={{ marginTop: 22 }}>
          <CTA variant="primary">{rating ? "Write your review" : "Rate your routine"}</CTA>
        </div>
        <p style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--text-muted)", marginTop: 14 }}>
          Powered by Klaviyo Reviews
        </p>
      </Pad>

      <Pad style={{ background: "#fff", paddingBottom: 52 }}>
        <h2 className="e-h2 center" style={{ marginBottom: 6 }}>What others are saying</h2>
        <p className="center" style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--text-muted)", margin: "0 0 20px" }}>
          <Icon n="star" style={{ width: 13, height: 13, display: "inline", verticalAlign: "-2px", color: "var(--green-600)" }} /> 4.8/5 · 2,400+ verified reviews
        </p>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <Review quote="I'm honestly so impressed with this skincare gift set! From the moment I opened it, it felt really luxurious and thoughtfully put together." name="Taylor" product="The Set" />
          <Review quote="My husband's skin has improved loads since using these products. Would highly recommend to everyone." name="Cat" product="The Set" />
        </div>
      </Pad>

      <div style={{ background: "#fff" }}><Pad>
        <h2 className="e-h2 center" style={{ marginBottom: 6 }}>#GENTSkincare</h2>
        <p className="center" style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--text-secondary)", margin: "0 0 20px" }}>
          Tag us and you might feature here. Real routines, real results.
        </p>
        <div className="ugc-grid">
          <img src="assets/ugc-1.png" alt="Customer photo" />
          <img src="assets/ugc-2.png" alt="Customer photo" />
          <img src="assets/ugc-3.png" alt="Customer photo" />
        </div>
        <div className="center" style={{ marginTop: 24 }}><CTA variant="primary">Follow @gentskincare</CTA></div>
      </Pad></div>

      <Pad className="e-muted" style={{ paddingTop: 40 }}><TrustBar /></Pad>
      <EFoot />
    </>
  );
}

/* ============ REGISTRY ============ */
const EMAILS = [
  {
    id: "welcome", group: "Acquisition", name: "Welcome — 10% off",
    trigger: "Trigger · Newsletter signup", from: "GENT Skincare <hello@gentskincare.co.uk>",
    subject: "Welcome to GENT. Here's 10% off.",
    preheader: "Your code's inside, less fuss, more focus.",
    Component: Welcome,
  },
  {
    id: "cart4", group: "Abandoned cart", name: "Abandoned cart — 4 hours",
    trigger: "Trigger · Checkout started · +4 hours",
    from: "GENT Skincare <hello@gentskincare.co.uk>",
    subjects: { standard: "You left something behind.", code: "Your cart + 10% off is waiting." },
    preheaders: { standard: "Your routine's still saved.", code: "Your welcome code is still unused." },
    variants: [{ key: "standard", label: "Standard" }, { key: "code", label: "Unused welcome code" }],
    Component: Cart4,
  },
  {
    id: "cart24", group: "Abandoned cart", name: "Abandoned cart — 24 hours",
    trigger: "Trigger · Checkout started · +24 hours",
    from: "GENT Skincare <hello@gentskincare.co.uk>",
    subjects: { standard: "Still thinking it over?", code: "Your 10% off won't wait forever." },
    preheaders: { standard: "Don't overthink it, your cart's still here.", code: "Use GENT10 before it expires." },
    variants: [{ key: "standard", label: "Standard" }, { key: "code", label: "Unused welcome code" }],
    Component: Cart24,
  },
  {
    id: "browse", group: "Abandoned cart", name: "Browse abandonment",
    trigger: "Trigger · Product viewed · no add-to-cart",
    from: "GENT Skincare <hello@gentskincare.co.uk>",
    subject: "Still weighing it up?",
    preheader: "The 3-step routine, explained.",
    Component: Browse,
  },
  {
    id: "thankyou", group: "Post-purchase", name: "Thank you — first purchase",
    trigger: "Trigger · First order placed",
    from: "GENT Skincare <hello@gentskincare.co.uk>",
    subject: "Welcome to GENT. Here's what happens next.",
    preheader: "You just invested in your confidence.",
    Component: ThankYou,
  },
  {
    id: "reviewreminder", group: "Post-purchase", name: "Review reminder",
    trigger: "Trigger · Delivered · +21 days",
    from: "GENT Skincare <hello@gentskincare.co.uk>",
    subject: "How's the routine treating you?",
    preheader: "30 seconds, and it helps the next guy.",
    Component: ReviewReminder,
  },
  {
    id: "winback", group: "Retention", name: "Win back — 30 days",
    trigger: "Trigger · 30 days after purchase",
    from: "GENT Skincare <hello@gentskincare.co.uk>",
    subject: "It's been a month. Time to restock.",
    preheader: "Here's 5% off your reorder.",
    Component: WinBack,
  },
];

Object.assign(window, { GentEmails: EMAILS });