// ThankYouEmail.jsx — donation thank-you autoresponder preview

function ThankYouEmail({ firstName = "Maria", giftAmount = "250" }) {
  return (
    <div style={te.shell}>
      {/* Email client chrome */}
      <div style={te.chrome}>
        <div style={te.chromeDot} />
        <div style={te.chromeDot} />
        <div style={te.chromeDot} />
        <span style={te.chromeLabel}>Email preview |Brevo autoresponder</span>
      </div>
      {/* Subject line */}
      <div style={te.subjectRow}>
        <span style={te.subjectLabel}>Subject</span>
        <span style={te.subject}>Thank you, {firstName}.</span>
      </div>
      {/* Email body */}
      <div style={te.body}>
        <div style={te.emailWrap}>
          {/* Header */}
          <div style={te.header}>
            <Logo variant="white" width={130} />
          </div>
          {/* Body copy */}
          <div style={te.content}>
            <p style={te.greeting}>Hi {firstName},</p>
            <p style={te.p}>
              Thank you for your gift of <strong>${giftAmount}</strong> to the Summer Heat Campaign.
            </p>
            <p style={te.p}>
              Your gift makes this work possible. It is the difference between protecting one
              community and protecting the next one. Workers in the field this summer are
              working better, safer, and longer because of you.
            </p>

            <div style={te.divider} />

            <p style={te.sectionHead}>Here is what happens next:</p>

            <div style={te.stepList}>
              <div style={te.step}>
                <div style={te.stepNum}>1</div>
                <p style={te.stepText}>
                  <strong>This email is your tax receipt.</strong> La Isla Network is a
                  501(c)(3) nonprofit. Your contribution is tax-deductible to the extent
                  allowed by U.S. law.
                </p>
              </div>
              <div style={te.step}>
                <div style={te.stepNum}>2</div>
                <p style={te.stepText}>
                  You will hear from us through the rest of the campaign with progress
                  updates and stories from the field.
                </p>
              </div>
              <div style={te.step}>
                <div style={te.stepNum}>3</div>
                <p style={te.stepText}>
                  In early August, we will send a close-out report telling you exactly what
                  your campaign raised and what it funded.
                </p>
              </div>
              <div style={te.step}>
                <div style={te.stepNum}>4</div>
                <p style={te.stepText}>
                  At year-end, you will receive our full impact report — names where we have
                  permission, photographs, and the numbers from the worksites you helped protect.
                </p>
              </div>
            </div>

            <div style={te.divider} />

            <p style={te.p}>
              If you have a question, hit reply. This inbox is monitored by a real person
              on our team.
            </p>
            <p style={te.signature}>
              With gratitude,<br />
              <strong>Jason Glaser</strong><br />
              CEO, La Isla Network
            </p>
          </div>
          {/* Footer */}
          <div style={te.emailFooter}>
            <p style={te.footerText}>
              La Isla Network |EIN [insert] |<a href="https://laislanetwork.org" style={te.footerLink}>laislanetwork.org</a>
            </p>
            <p style={te.footerText}>
              <a href="#" style={te.footerLink}>Unsubscribe</a> |<a href="#" style={te.footerLink}>Update preferences</a>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

const te = {
  shell: {
    background: "var(--lin_grey-100)", borderRadius: "var(--lin_radius-xl)",
    overflow: "hidden", border: "var(--lin_border-light)",
  },
  chrome: {
    background: "#e8eaed", padding: "var(--lin_space-3) var(--lin_space-5)",
    display: "flex", alignItems: "center", gap: "var(--lin_space-2)",
    borderBottom: "1px solid var(--lin_grey-200)",
  },
  chromeDot: {
    width: 12, height: 12, borderRadius: "50%", background: "var(--lin_grey-300)",
  },
  chromeLabel: {
    fontSize: "var(--lin_text-xs)", color: "var(--lin_text-muted)",
    marginLeft: "var(--lin_space-4)",
  },
  subjectRow: {
    background: "#fff", borderBottom: "1px solid var(--lin_grey-200)",
    padding: "var(--lin_space-4) var(--lin_space-6)",
    display: "flex", gap: "var(--lin_space-4)", alignItems: "baseline",
  },
  subjectLabel: {
    fontSize: "var(--lin_text-xs)", fontWeight: "var(--lin_weight-semibold)",
    textTransform: "uppercase", letterSpacing: "var(--lin_tracking-widest)",
    color: "var(--lin_text-muted)", minWidth: 60,
  },
  subject: { fontSize: "var(--lin_text-lg)", fontWeight: "var(--lin_weight-semibold)", color: "var(--lin_text-primary)" },
  body: { padding: "var(--lin_space-8)", background: "var(--lin_grey-100)" },
  emailWrap: {
    maxWidth: 560, margin: "0 auto",
    background: "var(--lin_surface-white)",
    borderRadius: "var(--lin_radius-lg)",
    overflow: "hidden",
    boxShadow: "var(--lin_shadow-md)",
  },
  header: {
    background: "var(--lin_surface-navy)",
    padding: "var(--lin_space-8) var(--lin_space-10)",
    display: "flex", alignItems: "center",
  },
  content: {
    padding: "var(--lin_space-10)",
    display: "flex", flexDirection: "column", gap: "var(--lin_space-5)",
  },
  greeting: { fontSize: "var(--lin_text-lg)", color: "var(--lin_text-primary)", margin: 0 },
  p: { fontSize: "var(--lin_text-base)", lineHeight: "var(--lin_leading-relaxed)", color: "var(--lin_text-body)", margin: 0 },
  divider: { height: 1, background: "var(--lin_grey-200)", margin: "var(--lin_space-2) 0" },
  sectionHead: {
    fontSize: "var(--lin_text-sm)", fontWeight: "var(--lin_weight-semibold)",
    textTransform: "uppercase", letterSpacing: "var(--lin_tracking-widest)",
    color: "var(--lin_blue-500)", margin: 0,
  },
  stepList: { display: "flex", flexDirection: "column", gap: "var(--lin_space-5)" },
  step: { display: "flex", gap: "var(--lin_space-4)", alignItems: "flex-start" },
  stepNum: {
    flexShrink: 0, width: 28, height: 28, borderRadius: "50%",
    background: "var(--lin_blue-100)", color: "var(--lin_blue-600)",
    display: "flex", alignItems: "center", justifyContent: "center",
    fontSize: "var(--lin_text-sm)", fontWeight: "var(--lin_weight-bold)",
    marginTop: 2,
  },
  stepText: { fontSize: "var(--lin_text-base)", lineHeight: "var(--lin_leading-relaxed)", color: "var(--lin_text-body)", margin: 0 },
  signature: {
    fontSize: "var(--lin_text-base)", color: "var(--lin_text-body)",
    lineHeight: "var(--lin_leading-relaxed)", margin: 0,
  },
  emailFooter: {
    background: "var(--lin_surface-light)", borderTop: "var(--lin_border-light)",
    padding: "var(--lin_space-6) var(--lin_space-10)",
    display: "flex", flexDirection: "column", gap: "var(--lin_space-2)", alignItems: "center",
  },
  footerText: { fontSize: "var(--lin_text-xs)", color: "var(--lin_text-muted)", margin: 0, textAlign: "center" },
  footerLink: { color: "var(--lin_blue-500)", textDecoration: "none" },
};

Object.assign(window, { ThankYouEmail });