/* GENT email automations — shared email primitives.
   Plain presentational components composed into each email template.
   Exported to window so emails.jsx / app.jsx can use them. */

const DS = window.GENTSkincareDesignSystem_a7fdfa;
const { Button, ProductCard, Chip, RoutineStep, Card } = DS;

const LOGO_WHITE = "assets/logos/gent-logo-white.png";
const PROD = {
  cleanser:   { img: "assets/products/cleanser-photo.png", photo: true, name: "Step 1 Cleanser",   step: 1, size: "150ml", price: "13.99", role: "Lightweight daily cleanser" },
  serum:      { img: "assets/products/serum-photo.png", photo: true, name: "Step 2 Serum",      step: 2, size: "30ml",  price: "18.99", role: "Targets dullness & fatigue" },
  moisturiser:{ img: "assets/products/moisturiser-photo.png", photo: true, name: "Step 3 Moisturiser",step: 3, size: "50ml",  price: "16.99", role: "Non-greasy hydration" },
  set:        { img: "assets/products/set.webp",         name: "The Skincare Set",              price: "45.00", role: "The complete routine" },
};

function Icon({ n, style }) {
  return <i data-lucide={n} style={style} />;
}

/* Brand glyphs — lucide@latest dropped brand icons, so inline the marks. */
const SOCIAL = {
  instagram: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>',
  facebook: '<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M14 8.5V7c0-.7.5-1 1-1h1.5V3H14c-2.2 0-3.5 1.5-3.5 3.7V8.5H8V12h2.5v9H14v-9h2.3l.5-3.5H14z"/></svg>',
  tiktok: '<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 3c.3 2.1 1.6 3.6 3.7 3.9V10c-1.4.1-2.7-.3-3.9-1v5.9c0 3.2-2.4 5.6-5.5 5.6S5.3 18 5.3 15c0-2.9 2.3-5.2 5.3-5.2.3 0 .6 0 .9.1v3.2c-.3-.1-.6-.2-.9-.2-1.2 0-2.2 1-2.2 2.2s1 2.2 2.2 2.2 2.2-.9 2.2-2.1V3h3.7z"/></svg>',
};

/* ---- Header: green bar, centred white wordmark ---- */
function EHead() {
  return (
    <>
      <div className="e-shipbar">Free shipping on all orders over £40</div>
      <div className="e-head">
        <img src={LOGO_WHITE} alt="GENT" />
      </div>
    </>
  );
}

/* ---- CTA button — pill, green on light / white on dark ---- */
function CTA({ children, variant = "primary", full, href = "#" }) {
  const onDark = variant === "inverted" || variant === "dark";
  return (
    <a href={href} style={{
      display: full ? "flex" : "inline-flex", width: full ? "100%" : "auto",
      alignItems: "center", justifyContent: "center", textDecoration: "none",
      background: onDark ? "var(--white)" : "var(--accent)",
      color: onDark ? "var(--green-900, #0D261C)" : "var(--white)",
      padding: "18px 38px", borderRadius: 999, fontSize: 12,
      letterSpacing: ".18em", textTransform: "uppercase", fontWeight: 800,
    }}>{children}</a>
  );
}

/* ---- Eyebrow + green dash ---- */
function Eyebrow({ children, onLight, style }) {
  return (
    <>
      <p className={"eyebrow" + (onLight ? " on-light" : "")} style={{ marginBottom: 0, ...style }}>{children}</p>
      <span className={"eyebrow-dash" + (onLight ? " on-light" : "")}></span>
    </>
  );
}

/* ---- Discount code block ---- */
function CodeBox({ code, label, sub, onLight }) {
  return (
    <div className={"code-box" + (onLight ? " on-light" : "")}>
      <p className="cap">{label}</p>
      <p className="code">{code}</p>
      {sub ? <p className="sub">{sub}</p> : null}
    </div>
  );
}

/* ---- Unused-welcome-code note banner ---- */
function CodeNote({ code = "GENT10", children }) {
  return (
    <div className="note">
      <Icon n="badge-percent" />
      <p className="nt">{children || <>Heads up, your welcome code <b>{code}</b> is still unused. It'll take 10% off automatically at checkout.</>}</p>
    </div>
  );
}

/* ---- Cart line item ---- */
function LineItem({ p, qty = 1 }) {
  return (
    <div className="lineitem">
      <div className={"thumb" + (p.photo ? " photo" : "")}><img src={p.img} alt={p.name} /></div>
      <div className="info">
        <div className="nmrow">
          <p className="nm">{p.name}</p>
          <span className="price">£{p.price}</span>
        </div>
        <span className="qty">{p.size ? p.size + " · " : ""}Qty {qty}</span>
      </div>
    </div>
  );
}

/* ---- Routine step — composes the DS RoutineStep ---- */
function Step({ n, title, desc, onDark }) {
  return <RoutineStep number={n} title={title} description={desc} tone={onDark ? "dark" : "light"} />;
}

/* ---- Product trio — composes the DS ProductCard ---- */
function ProdTrio() {
  return (
    <div style={{ maxWidth: 320, margin: "0 auto" }}>
      <ProductCard image={PROD.set.img} name={PROD.set.name}
        tagline="Cleanser · Serum · Moisturiser, the full 3-step routine"
        price={PROD.set.price} surface="glow" href="#" />
    </div>
  );
}

/* ---- Stars — outline lucide stars, green ---- */
function Stars({ n = 5 }) {
  return <div className="stars">{Array.from({ length: n }, (_, i) => <Icon key={i} n="star" />)}</div>;
}

/* ---- Review card — composes the DS Card ---- */
function Review({ quote, name, product }) {
  return (
    <div className="review glass">
      <Stars n={5} />
      <p className="rq">"{quote}"</p>
      <div className="rn">
        <span>{name}</span>
        <span className="verified"><Icon n="badge-check" style={{ width: 13, height: 13, display: "inline", verticalAlign: "-2px" }} /> Verified</span>
        {product ? <span>· {product}</span> : null}
      </div>
    </div>
  );
}

const REVIEWS = [
  { quote: "Skincare I'll actually stick to. Three steps, two minutes, done.", name: "James R.", product: "The Set" },
  { quote: "Skin looks less tired in meetings. That's the whole point.", name: "Daniel M.", product: "Serum" },
  { quote: "No 12-step nonsense. It just works, and I look sharper for it.", name: "Michael K.", product: "The Set" },
  { quote: "Bought the set for myself, ended up buying one for my brother.", name: "Tom H.", product: "The Set" },
];

/* ---- Trust bar ---- */
function TrustBar({ onDark, filled = true }) {
  const items = [
    ["shield-check", "28-Day Guarantee"],
    ["flask-conical", "Backed by Science"],
    ["leaf", "Vegan"],
    ["map-pin", "Made in the UK"],
  ];
  return (
    <div className={"trustbar" + (filled ? " filled" : "")}>
      {items.map(([ic, t], i) => (
        filled ? (
          <span key={t} style={{ order: i < 2 ? 0 : 2, minWidth: i >= 2 ? 150 : undefined, justifyContent: "center", display: "inline-flex", alignItems: "center", gap: 7, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".06em", textTransform: "uppercase", padding: "8px 15px", borderRadius: 999, border: 0, background: "var(--green-950)", color: "var(--white)", fontWeight: 700, lineHeight: 1 }}>
            <Icon n={ic} style={{ width: 13, height: 13, color: "var(--white)" }} />{t}
          </span>
        ) : <Chip key={t} icon={ic} onBrand={onDark}>{t}</Chip>
      ))}
      <span style={{ order: 1, flexBasis: "100%", height: 0 }}></span>
    </div>
  );
}

/* ---- Footer ---- */
function EFoot() {
  return (
    <div className="e-foot">
      <img src={LOGO_WHITE} alt="GENT" />
      <p className="tagline">Less Fuss, More Focus.</p>
      <div className="social">
        <a href="#" aria-label="Instagram" dangerouslySetInnerHTML={{ __html: SOCIAL.instagram }}></a>
        <a href="#" aria-label="Facebook" dangerouslySetInnerHTML={{ __html: SOCIAL.facebook }}></a>
        <a href="#" aria-label="TikTok" dangerouslySetInnerHTML={{ __html: SOCIAL.tiktok }}></a>
        <a href="#" aria-label="Email"><Icon n="mail" /></a>
      </div>
      <p className="fmeta">
        GENT Skincare · Dermatologically tested · Vegan · Made in the UK<br />
        You're receiving this because you signed up at gentskincare.co.uk.<br />
        <a href="#">Unsubscribe</a> · <a href="#">Update preferences</a> · <a href="#">View in browser</a>
      </p>
    </div>
  );
}

/* ---- Section wrapper helpers ---- */
function Pad({ className = "", children, style }) {
  return <div className={"e-pad " + className} style={style}>{children}</div>;
}

Object.assign(window, {
  GentKit: {
    PROD, REVIEWS, LOGO_WHITE,
    Icon, EHead, CTA, Eyebrow, CodeBox, CodeNote, LineItem, Step, ProdTrio,
    Stars, Review, TrustBar, EFoot, Pad,
  },
});