// components.jsx — reusable UI pieces for Sendly (i18n-aware)

const { useState, useEffect, useRef, useMemo } = React;

/* ============ Decorative doodles ============ */
function Doodles() {
  return (
    <React.Fragment>
      <svg className="doodle d1" width="58" height="58" viewBox="0 0 58 58" style={{ "--r": "-8deg" }}>
        <circle cx="29" cy="29" r="22" fill="var(--pink)" stroke="var(--line)" strokeWidth="2.5" />
        <circle cx="29" cy="29" r="11" fill="var(--paper)" stroke="var(--line)" strokeWidth="2" />
      </svg>
      <svg className="doodle d2" width="70" height="34" viewBox="0 0 70 34" style={{ "--r": "12deg" }}>
        <path d="M2 17 Q12 2, 22 17 T42 17 T62 17"
              fill="none" stroke="var(--line)" strokeWidth="3" strokeLinecap="round" />
      </svg>
      <svg className="doodle d3" width="64" height="64" viewBox="0 0 64 64" style={{ "--r": "10deg" }}>
        <polygon points="32,4 39,24 60,24 43,37 50,58 32,46 14,58 21,37 4,24 25,24"
                 fill="var(--yellow)" stroke="var(--line)" strokeWidth="2.5" strokeLinejoin="round" />
      </svg>
      <svg className="doodle d4" width="60" height="60" viewBox="0 0 60 60" style={{ "--r": "-6deg" }}>
        <rect x="6" y="6" width="48" height="48" rx="14" fill="var(--sky)" stroke="var(--line)" strokeWidth="2.5" />
        <path d="M18 30 L26 38 L42 22" fill="none" stroke="var(--line)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </React.Fragment>
  );
}

/* ============ Step dots ============ */
function StepDots({ step, max }) {
  const dots = [];
  for (let i = 1; i <= max; i++) {
    let cls = "step-dot";
    if (i < step) cls += " done";
    if (i === step) cls += " active";
    dots.push(
      <React.Fragment key={i}>
        <div className={cls} aria-current={i === step}>
          {i < step ? (
            <svg width="12" height="12" viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3" className="step-tick" /></svg>
          ) : i}
        </div>
        {i < max && <div className="step-line" />}
      </React.Fragment>
    );
  }
  return <div className="step-dots">{dots}</div>;
}

/* ============ Confetti ============ */
function Confetti({ show, palette }) {
  const pieces = useMemo(() => {
    if (!show) return [];
    const out = [];
    for (let i = 0; i < 90; i++) {
      out.push({
        id: i,
        left: Math.random() * 100,
        bg: palette[Math.floor(Math.random() * palette.length)],
        delay: Math.random() * 0.6,
        duration: 1.6 + Math.random() * 1.6,
        rotate: Math.random() * 360,
        size: 8 + Math.random() * 8,
      });
    }
    return out;
  }, [show, palette]);

  if (!show) return null;
  return (
    <div className="confetti-stage" aria-hidden="true">
      {pieces.map(p => (
        <div key={p.id} className="confetti-piece" style={{
          left: p.left + "%",
          background: p.bg,
          animationDelay: p.delay + "s",
          animationDuration: p.duration + "s",
          transform: `rotate(${p.rotate}deg)`,
          width: p.size + "px",
          height: (p.size * 1.4) + "px",
        }} />
      ))}
    </div>
  );
}

/* ============ Occasion picker ============ */
function OccasionGrid({ value, onChange, t }) {
  return (
    <div className="occasion-grid">
      {OCCASIONS.map(o => (
        <button
          key={o.id}
          type="button"
          className={"occ" + (value === o.id ? " selected" : "")}
          onClick={() => onChange(o.id)}
        >
          <span className="occ-emoji">{o.emoji}</span>
          <span className="occ-name">{t("occ." + o.id)}</span>
        </button>
      ))}
    </div>
  );
}

/* ============ Postcard preview ============ */
function PostcardPreview({ occasion, recipient, family, sender, body, t }) {
  const tagline = occasion ? t("tag." + occasion.id) : "—";
  const fullName = [recipient, family].filter(Boolean).join(" ") || "—";
  return (
    <div className="postcard">
      <div className="postcard-head">
        <span>SENDLY · €1.99</span>
        <div className="stamp">
          {occasion ? occasion.emoji : "✉️"}
          <div>SENDLY</div>
        </div>
      </div>
      <div className="postcard-occasion">{tagline}</div>
      <div className="postcard-to">{t("to")} {fullName},</div>
      <div className="postcard-body">{body || t("body_placeholder")}</div>
      <div className="postcard-sig">— {sender || "you"}</div>
    </div>
  );
}

function EmailPreview({ occasion, recipient, family, sender, body, contact, t }) {
  const tagline = occasion ? t("tag." + occasion.id) : "—";
  const fullName = [recipient, family].filter(Boolean).join(" ") || "—";
  return (
    <div className="email-mock">
      <div className="email-bar">
        <div className="row"><strong>From</strong> Sendly &lt;hello@sentwithlove.vip&gt;</div>
        <div className="row"><strong>To</strong> {fullName} &lt;{contact || "recipient@email.com"}&gt;</div>
        <div className="row"><strong>Subject</strong> {tagline}</div>
      </div>
      <div className="email-body">
        <PostcardPreview occasion={occasion} recipient={recipient} family={family} sender={sender} body={body} t={t} />
      </div>
    </div>
  );
}

function SmsPreview({ occasion, recipient, sender, body, contact, t }) {
  const tag = occasion ? t("tag." + occasion.id) : "—";
  return (
    <div className="sms-mock">
      <div className="sms-header">
        <strong>Sendly</strong>
        {contact || "+1 (555) 010-2233"} · today
      </div>
      <div className="sms-bubble sendly">📬 {sender || "Someone"}</div>
      <div className="sms-bubble">
        <strong style={{ display: "block", marginBottom: 4 }}>{tag}, {recipient || "—"}</strong>
        {body || t("body_placeholder")}
        {sender ? `\n\n— ${sender}` : ""}
      </div>
    </div>
  );
}

/* ============ Payment Options ============
   Production: replace each method with the real SDK call.
   Easiest single-SDK path covering all of these in one integration:
   - Stripe Payment Element  (Apple/Google Pay, cards, Link, Klarna, SEPA, iDEAL, Bancontact auto-detected by region)
   - PayPal Smart Buttons    (PayPal + cards in one SDK)
   Use BOTH in parallel for the most natural "pay how you like" UX.
   Integration sketches are inlined as comments in each handler.
*/
const PAY_METHODS = [
  { id: "paypal",     label: "PayPal",         badge: "#FFC439", text: "#111",    style: "paypal" },
  { id: "applepay",   label: "Apple\u00A0Pay", badge: "#000",    text: "#fff",    style: "applepay" },
  { id: "googlepay",  label: "Google\u00A0Pay",badge: "#fff",    text: "#1f1f1f", style: "googlepay" },
  { id: "card",       label: "Card",           badge: "#1f1f23", text: "#fff",    style: "card" },
  { id: "klarna",     label: "Klarna",         badge: "#FFA8CD", text: "#0E0E0F", style: "klarna" },
  { id: "ideal",      label: "iDEAL",          badge: "#fff",    text: "#CC0066", style: "ideal" },
  { id: "sepa",       label: "SEPA",           badge: "#fff",    text: "#0F2D6B", style: "sepa" },
  { id: "bancontact", label: "Bancontact",     badge: "#fff",    text: "#1A4685", style: "bancontact" },
];

function PayPalButtons({ amount, currency, onApprove, t }) {
  const [processing, setProcessing] = useState(null); // 'paypal' | 'card' | null
  const [showCard, setShowCard] = useState(false);

  function simulatePayPal() {
    setProcessing("paypal");
    setTimeout(() => { setProcessing(null); onApprove({ method: "paypal", orderId: "DEMO-" + Date.now() }); }, 1100);
  }
  function simulateCard() {
    setProcessing("card");
    setTimeout(() => { setProcessing(null); onApprove({ method: "card", orderId: "DEMO-" + Date.now() }); }, 900);
  }

  return (
    <div className="paypal-wrap">
      {/* PRODUCTION INTEGRATION (uncomment after adding <script src="https://www.paypal.com/sdk/js?client-id=YOUR_ID&currency=EUR&components=buttons,card-fields"></script>):
        useEffect(() => {
          if (!window.paypal) return;
          window.paypal.Buttons({
            style: { layout: 'vertical', shape: 'pill', label: 'paypal' },
            createOrder: (data, actions) => actions.order.create({
              purchase_units: [{ amount: { value: String(amount), currency_code: currency } }]
            }),
            onApprove: (data, actions) => actions.order.capture().then(() => onApprove({ method: 'paypal', orderId: data.orderID }))
          }).render('#paypal-button-container');
        }, []);
      */}

      <button
        type="button"
        className="pp-btn pp-paypal"
        onClick={simulatePayPal}
        disabled={!!processing}
        aria-label="Pay with PayPal"
      >
        {processing === "paypal" ? (
          <span className="pp-spinner" />
        ) : (
          <svg viewBox="0 0 124 33" height="22" aria-hidden="true">
            <path fill="#253B80" d="M46.211 6.749h-6.839a.95.95 0 0 0-.939.802l-2.766 17.537a.57.57 0 0 0 .564.658h3.265a.95.95 0 0 0 .939-.803l.746-4.73a.95.95 0 0 1 .938-.803h2.165c4.505 0 7.105-2.18 7.784-6.5.306-1.89.013-3.375-.872-4.415-.972-1.142-2.696-1.746-4.985-1.746zm.789 6.405c-.374 2.454-2.249 2.454-4.062 2.454h-1.032l.724-4.583a.57.57 0 0 1 .563-.481h.473c1.235 0 2.4 0 3.002.704.359.42.469 1.044.332 1.906zM65.857 13.075h-3.272a.57.57 0 0 0-.563.481l-.145.916-.229-.332c-.709-1.029-2.29-1.373-3.868-1.373-3.619 0-6.71 2.741-7.312 6.586-.313 1.918.132 3.752 1.22 5.031.998 1.176 2.426 1.666 4.125 1.666 2.916 0 4.533-1.875 4.533-1.875l-.146.91a.57.57 0 0 0 .562.66h2.95a.95.95 0 0 0 .939-.803l1.77-11.209a.566.566 0 0 0-.564-.658zm-4.565 6.374c-.316 1.871-1.801 3.127-3.695 3.127-.951 0-1.711-.305-2.199-.883-.484-.574-.668-1.391-.514-2.301.295-1.855 1.805-3.152 3.67-3.152.93 0 1.686.309 2.184.892.499.589.697 1.411.554 2.317zM83.5 13.075h-3.288a.954.954 0 0 0-.787.417l-4.536 6.68-1.923-6.42a.953.953 0 0 0-.912-.677h-3.232a.57.57 0 0 0-.541.754l3.625 10.638-3.408 4.81a.57.57 0 0 0 .465.9h3.284a.949.949 0 0 0 .781-.408l10.946-15.8a.57.57 0 0 0-.474-.894z"/>
            <path fill="#179BD7" d="M94.992 6.749h-6.84a.95.95 0 0 0-.938.802l-2.766 17.537a.569.569 0 0 0 .562.658h3.51a.665.665 0 0 0 .656-.562l.785-4.971a.95.95 0 0 1 .938-.803h2.164c4.506 0 7.105-2.18 7.785-6.5.307-1.89.012-3.375-.873-4.415-.971-1.142-2.694-1.746-4.983-1.746zm.789 6.405c-.373 2.454-2.248 2.454-4.062 2.454h-1.031l.725-4.583a.568.568 0 0 1 .562-.481h.473c1.234 0 2.4 0 3.002.704.359.42.468 1.044.331 1.906zM114.637 13.075h-3.27a.567.567 0 0 0-.562.481l-.145.916-.23-.332c-.709-1.029-2.289-1.373-3.867-1.373-3.619 0-6.709 2.741-7.311 6.586-.312 1.918.131 3.752 1.219 5.031 1 1.176 2.426 1.666 4.125 1.666 2.916 0 4.533-1.875 4.533-1.875l-.146.91a.57.57 0 0 0 .564.66h2.949a.95.95 0 0 0 .938-.803l1.771-11.209a.571.571 0 0 0-.568-.658zm-4.565 6.374c-.314 1.871-1.801 3.127-3.695 3.127-.949 0-1.711-.305-2.199-.883-.484-.574-.666-1.391-.514-2.301.297-1.855 1.805-3.152 3.67-3.152.93 0 1.686.309 2.184.892.501.589.699 1.411.554 2.317zM118.502 7.23l-2.807 17.858a.569.569 0 0 0 .562.658h2.822c.469 0 .867-.34.939-.803l2.768-17.536a.57.57 0 0 0-.562-.659h-3.16a.571.571 0 0 0-.562.482z"/>
            <path fill="#253B80" d="M7.266 29.154l.523-3.322-1.165-.027H1.061L4.927 1.292a.316.316 0 0 1 .314-.268h9.38c3.114 0 5.263.648 6.385 1.927.526.6.861 1.227 1.023 1.917.17.724.173 1.589.007 2.644l-.012.077v.676l.526.298a3.69 3.69 0 0 1 1.065.812c.45.513.741 1.165.864 1.938.127.795.085 1.741-.123 2.812-.24 1.232-.628 2.305-1.152 3.183a6.547 6.547 0 0 1-1.825 2c-.696.494-1.523.869-2.458 1.109-.906.236-1.939.355-3.072.355h-.73c-.522 0-1.029.188-1.427.525a2.21 2.21 0 0 0-.744 1.328l-.055.299-.924 5.855-.042.215c-.011.068-.03.102-.058.125a.155.155 0 0 1-.096.035H7.266z"/>
            <path fill="#179BD7" d="M23.048 7.667c-.028.179-.06.362-.096.55-1.237 6.351-5.469 8.545-10.874 8.545H9.326c-.661 0-1.218.48-1.321 1.132L6.596 26.83l-.399 2.533a.704.704 0 0 0 .695.814h4.881c.578 0 1.069-.42 1.16-.99l.048-.248.919-5.832.059-.32c.09-.572.582-.992 1.16-.992h.73c4.729 0 8.431-1.92 9.513-7.476.452-2.321.218-4.259-.978-5.622a4.667 4.667 0 0 0-1.336-1.03z"/>
            <path fill="#222D65" d="M21.754 7.151a9.757 9.757 0 0 0-1.203-.267 15.284 15.284 0 0 0-2.426-.177h-7.352a1.172 1.172 0 0 0-1.159.992L8.05 17.605l-.045.289a1.336 1.336 0 0 1 1.321-1.132h2.752c5.405 0 9.637-2.195 10.874-8.545.037-.188.068-.371.096-.55a6.594 6.594 0 0 0-1.017-.429 9.045 9.045 0 0 0-.277-.087z"/>
            <path fill="#253B80" d="M9.614 7.699a1.169 1.169 0 0 1 1.159-.991h7.352c.871 0 1.684.057 2.426.177a9.757 9.757 0 0 1 1.481.353c.365.121.704.264 1.017.429.368-2.347-.003-3.945-1.272-5.392C20.378.682 17.853 0 14.622 0h-9.38c-.66 0-1.223.48-1.325 1.133L.01 25.898a.806.806 0 0 0 .795.932h5.791l1.454-9.225 1.564-9.906z"/>
          </svg>
        )}
      </button>

      <div className="pp-or"><span>{t("pay_or_card")}</span></div>

      {!showCard ? (
        <button type="button" className="pp-btn pp-card" onClick={() => setShowCard(true)}>
          <svg width="22" height="16" viewBox="0 0 22 16" fill="none">
            <rect x="0.5" y="0.5" width="21" height="15" rx="2.5" fill="white" stroke="#2C2E2F"/>
            <rect x="0.5" y="3.5" width="21" height="3" fill="#2C2E2F"/>
          </svg>
          {t("card_number")} · Visa · Mastercard
        </button>
      ) : (
        <div className="pp-card-form">
          <input className="input" placeholder="1234  5678  9012  3456" maxLength={19} />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 10 }}>
            <input className="input" placeholder={t("expiry") + " · MM / YY"} />
            <input className="input" placeholder={t("cvc") + " · 123"} />
          </div>
          <button className="pp-btn pp-card-submit" onClick={simulateCard} disabled={!!processing} type="button" style={{ marginTop: 10 }}>
            {processing === "card" ? <span className="pp-spinner" /> : `${t("send_for")} · €${amount}`}
          </button>
        </div>
      )}

      <div className="pp-note">{t("pay_demo_note")}</div>
    </div>
  );
}

function PaymentOptions({ amount, currency, onApprove, t }) {
  const [processing, setProcessing] = useState(null);
  const [showCard, setShowCard] = useState(false);
  const [moreOpen, setMoreOpen] = useState(false);

  function pay(method) {
    if (method === "card") { setShowCard(true); return; }
    setProcessing(method);
    // Simulated 1-second hand-off. In production, each method calls its own SDK:
    //   paypal:    window.paypal.Buttons({ createOrder, onApprove }).render(...)
    //   applepay:  new ApplePaySession(3, request).begin()  // or via Stripe PaymentRequest
    //   googlepay: google.payments.api.PaymentsClient.loadPaymentData(...) // or via Stripe
    //   klarna:    Klarna.Payments.authorize(...) // or Stripe Payment Element with klarna enabled
    //   sepa:      Stripe.confirmSepaDebitPayment(clientSecret, { payment_method: { sepa_debit: { iban }}})
    //   ideal:     Stripe.confirmIdealPayment(clientSecret, { ... })
    //   bancontact:Stripe.confirmBancontactPayment(clientSecret, { ... })
    setTimeout(() => {
      setProcessing(null);
      onApprove({ method, orderId: "DEMO-" + Date.now() });
    }, 1100);
  }
  function payCard() {
    setProcessing("card");
    setTimeout(() => {
      setProcessing(null);
      onApprove({ method: "card", orderId: "DEMO-" + Date.now() });
    }, 900);
  }

  const primary  = PAY_METHODS.slice(0, 4);
  const secondary = PAY_METHODS.slice(4);

  return (
    <div className="paypal-wrap">
      <div className="pay-grid">
        {primary.map(m => (
          <button key={m.id} type="button"
            className={"pay-tile pay-" + m.style + (processing === m.id ? " loading" : "")}
            onClick={() => pay(m.id)}
            disabled={!!processing}
            style={{ background: m.badge, color: m.text }}
            aria-label={"Pay with " + m.label}>
            {processing === m.id ? <span className="pp-spinner" /> : <PayMark id={m.id} label={m.label} />}
          </button>
        ))}
      </div>

      {showCard && (
        <div className="pp-card-form">
          <input className="input" placeholder="1234  5678  9012  3456" maxLength={19} />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 10 }}>
            <input className="input" placeholder={t("expiry") + " \u00B7 MM / YY"} />
            <input className="input" placeholder={t("cvc") + " \u00B7 123"} />
          </div>
          <button className="pp-btn pp-card-submit" onClick={payCard} disabled={!!processing} type="button" style={{ marginTop: 10 }}>
            {processing === "card" ? <span className="pp-spinner" /> : `${t("send_for")} \u00B7 \u20AC${amount}`}
          </button>
        </div>
      )}

      <button className="pay-more" type="button" onClick={() => setMoreOpen(o => !o)}>
        {moreOpen ? "\u2212" : "+"} More ways to pay
      </button>

      {moreOpen && (
        <div className="pay-grid pay-grid-secondary">
          {secondary.map(m => (
            <button key={m.id} type="button"
              className={"pay-tile pay-" + m.style + (processing === m.id ? " loading" : "")}
              onClick={() => pay(m.id)}
              disabled={!!processing}
              style={{ background: m.badge, color: m.text }}
              aria-label={"Pay with " + m.label}>
              {processing === m.id ? <span className="pp-spinner" /> : <PayMark id={m.id} label={m.label} />}
            </button>
          ))}
        </div>
      )}

      <div className="pp-note">{t("pay_demo_note")}</div>
    </div>
  );
}

/* ============ Brand marks (inline SVG, brand-accurate but minimal) ============ */
function PayMark({ id, label }) {
  if (id === "paypal") return (
    <svg viewBox="0 0 124 33" height="20" aria-hidden="true">
      <path fill="#253B80" d="M46.211 6.749h-6.839a.95.95 0 0 0-.939.802l-2.766 17.537a.57.57 0 0 0 .564.658h3.265a.95.95 0 0 0 .939-.803l.746-4.73a.95.95 0 0 1 .938-.803h2.165c4.505 0 7.105-2.18 7.784-6.5.306-1.89.013-3.375-.872-4.415-.972-1.142-2.696-1.746-4.985-1.746zm.789 6.405c-.374 2.454-2.249 2.454-4.062 2.454h-1.032l.724-4.583a.57.57 0 0 1 .563-.481h.473c1.235 0 2.4 0 3.002.704.359.42.469 1.044.332 1.906zM65.857 13.075h-3.272a.57.57 0 0 0-.563.481l-.145.916-.229-.332c-.709-1.029-2.29-1.373-3.868-1.373-3.619 0-6.71 2.741-7.312 6.586-.313 1.918.132 3.752 1.22 5.031.998 1.176 2.426 1.666 4.125 1.666 2.916 0 4.533-1.875 4.533-1.875l-.146.91a.57.57 0 0 0 .562.66h2.95a.95.95 0 0 0 .939-.803l1.77-11.209a.566.566 0 0 0-.564-.658zm-4.565 6.374c-.316 1.871-1.801 3.127-3.695 3.127-.951 0-1.711-.305-2.199-.883-.484-.574-.668-1.391-.514-2.301.295-1.855 1.805-3.152 3.67-3.152.93 0 1.686.309 2.184.892.499.589.697 1.411.554 2.317zM83.5 13.075h-3.288a.954.954 0 0 0-.787.417l-4.536 6.68-1.923-6.42a.953.953 0 0 0-.912-.677h-3.232a.57.57 0 0 0-.541.754l3.625 10.638-3.408 4.81a.57.57 0 0 0 .465.9h3.284a.949.949 0 0 0 .781-.408l10.946-15.8a.57.57 0 0 0-.474-.894z"/>
      <path fill="#179BD7" d="M94.992 6.749h-6.84a.95.95 0 0 0-.938.802l-2.766 17.537a.569.569 0 0 0 .562.658h3.51a.665.665 0 0 0 .656-.562l.785-4.971a.95.95 0 0 1 .938-.803h2.164c4.506 0 7.105-2.18 7.785-6.5.307-1.89.012-3.375-.873-4.415-.971-1.142-2.694-1.746-4.983-1.746zm.789 6.405c-.373 2.454-2.248 2.454-4.062 2.454h-1.031l.725-4.583a.568.568 0 0 1 .562-.481h.473c1.234 0 2.4 0 3.002.704.359.42.468 1.044.331 1.906zM114.637 13.075h-3.27a.567.567 0 0 0-.562.481l-.145.916-.23-.332c-.709-1.029-2.289-1.373-3.867-1.373-3.619 0-6.709 2.741-7.311 6.586-.312 1.918.131 3.752 1.219 5.031 1 1.176 2.426 1.666 4.125 1.666 2.916 0 4.533-1.875 4.533-1.875l-.146.91a.57.57 0 0 0 .564.66h2.949a.95.95 0 0 0 .938-.803l1.771-11.209a.571.571 0 0 0-.568-.658zm-4.565 6.374c-.314 1.871-1.801 3.127-3.695 3.127-.949 0-1.711-.305-2.199-.883-.484-.574-.666-1.391-.514-2.301.297-1.855 1.805-3.152 3.67-3.152.93 0 1.686.309 2.184.892.501.589.699 1.411.554 2.317zM118.502 7.23l-2.807 17.858a.569.569 0 0 0 .562.658h2.822c.469 0 .867-.34.939-.803l2.768-17.536a.57.57 0 0 0-.562-.659h-3.16a.571.571 0 0 0-.562.482z"/>
      <path fill="#253B80" d="M7.266 29.154l.523-3.322-1.165-.027H1.061L4.927 1.292a.316.316 0 0 1 .314-.268h9.38c3.114 0 5.263.648 6.385 1.927.526.6.861 1.227 1.023 1.917.17.724.173 1.589.007 2.644l-.012.077v.676l.526.298a3.69 3.69 0 0 1 1.065.812c.45.513.741 1.165.864 1.938.127.795.085 1.741-.123 2.812-.24 1.232-.628 2.305-1.152 3.183a6.547 6.547 0 0 1-1.825 2c-.696.494-1.523.869-2.458 1.109-.906.236-1.939.355-3.072.355h-.73c-.522 0-1.029.188-1.427.525a2.21 2.21 0 0 0-.744 1.328l-.055.299-.924 5.855-.042.215c-.011.068-.03.102-.058.125a.155.155 0 0 1-.096.035H7.266z"/>
      <path fill="#179BD7" d="M23.048 7.667c-.028.179-.06.362-.096.55-1.237 6.351-5.469 8.545-10.874 8.545H9.326c-.661 0-1.218.48-1.321 1.132L6.596 26.83l-.399 2.533a.704.704 0 0 0 .695.814h4.881c.578 0 1.069-.42 1.16-.99l.048-.248.919-5.832.059-.32c.09-.572.582-.992 1.16-.992h.73c4.729 0 8.431-1.92 9.513-7.476.452-2.321.218-4.259-.978-5.622a4.667 4.667 0 0 0-1.336-1.03z"/>
      <path fill="#253B80" d="M9.614 7.699a1.169 1.169 0 0 1 1.159-.991h7.352c.871 0 1.684.057 2.426.177a9.757 9.757 0 0 1 1.481.353c.365.121.704.264 1.017.429.368-2.347-.003-3.945-1.272-5.392C20.378.682 17.853 0 14.622 0h-9.38c-.66 0-1.223.48-1.325 1.133L.01 25.898a.806.806 0 0 0 .795.932h5.791l1.454-9.225 1.564-9.906z"/>
    </svg>
  );
  if (id === "applepay") return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontWeight: 600, fontSize: 17 }}>
      <svg width="18" height="22" viewBox="0 0 17 21" fill="currentColor" aria-hidden="true"><path d="M14.06 11.13c-.03-2.79 2.28-4.14 2.39-4.21-1.31-1.91-3.34-2.17-4.06-2.2-1.72-.18-3.36 1.01-4.23 1.01-.87 0-2.22-.98-3.65-.95-1.88.03-3.61 1.09-4.58 2.77-1.95 3.38-.5 8.4 1.4 11.15.93 1.34 2.04 2.84 3.49 2.79 1.4-.06 1.93-.91 3.62-.91 1.69 0 2.17.91 3.65.88 1.51-.03 2.46-1.37 3.39-2.71 1.07-1.55 1.51-3.06 1.53-3.13-.03-.01-2.94-1.13-2.96-4.49zm-2.78-8.27c.77-.93 1.29-2.23 1.14-3.52-1.11.04-2.45.74-3.24 1.67-.71.82-1.34 2.13-1.17 3.4 1.23.1 2.49-.63 3.27-1.55z"/></svg>
      Pay
    </span>
  );
  if (id === "googlepay") return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontWeight: 600, fontSize: 15 }}>
      <svg width="22" height="22" viewBox="0 0 48 48" aria-hidden="true">
        <path fill="#4285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z"/>
        <path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z"/>
        <path fill="#FBBC04" d="M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24c0 3.55.85 6.91 2.34 9.88l7.35-5.7z"/>
        <path fill="#EA4335" d="M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z"/>
      </svg>
      <span>Pay</span>
    </span>
  );
  if (id === "card") return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontWeight: 600, fontSize: 14 }}>
      <svg width="22" height="16" viewBox="0 0 22 16" aria-hidden="true">
        <rect x="0.5" y="0.5" width="21" height="15" rx="2.5" fill="white" stroke="currentColor" opacity="0.4"/>
        <rect x="0.5" y="3.5" width="21" height="3" fill="currentColor" opacity="0.5"/>
      </svg>
      Card
      <span style={{ fontSize: 11, opacity: 0.6, marginLeft: 4 }}>VISA \u00B7 MC \u00B7 AMEX</span>
    </span>
  );
  if (id === "klarna") return (
    <span style={{ fontWeight: 800, fontSize: 16, letterSpacing: "-0.01em" }}>Klarna.</span>
  );
  if (id === "ideal") return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontWeight: 800, fontSize: 17, letterSpacing: "-0.02em" }}>
      <span style={{ color: "#CC0066" }}>i</span><span style={{ color: "#0C2074" }}>DEAL</span>
    </span>
  );
  if (id === "sepa") return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontWeight: 700, fontSize: 14, color: "#0F2D6B" }}>
      <span style={{ fontSize: 17, fontWeight: 800 }}>SEPA</span>
      <span style={{ fontSize: 11, opacity: 0.7 }}>Direct Debit</span>
    </span>
  );
  if (id === "bancontact") return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontWeight: 800, fontSize: 14, letterSpacing: "-0.01em" }}>
      <span style={{ color: "#005498" }}>Banc</span><span style={{ color: "#FFD200", background: "#005498", padding: "0 4px", borderRadius: 3 }}>contact</span>
    </span>
  );
  return label;
}

Object.assign(window, {
  Doodles, StepDots, Confetti, OccasionGrid,
  PostcardPreview, EmailPreview, SmsPreview,
  PayPalButtons, PaymentOptions, PayMark, PAY_METHODS,
});
