// NewsletterVariants.jsx — three campaign newsletter inserts + contact update block

function NewsletterVariantA() {
  return (
    <div style={nl.card}>
      <div style={nl.overline}>Newsletter insert |Variant A — Early June (pre-launch)</div>
      <div style={nl.block}>
        <div style={nl.blockLabel}>Something is coming.</div>
        <p style={nl.body}>
          On June 15, La Isla Network launches its first audience-wide fundraising
          campaign. The goal: $50,000 by July 31, so your gift can protect workers from
          heat stress in the hottest months of the year. Watch your inbox.
        </p>
      </div>
    </div>
  );
}

function NewsletterVariantB({ raised = 31400 }) {
  return (
    <div style={nl.card}>
      <div style={nl.overline}>Newsletter insert |Variant B — Early July (mid-campaign)</div>
      <div style={nl.block}>
        <div style={nl.blockLabel}>Halfway through the Summer Heat Campaign.</div>
        <p style={nl.body}>
          You've helped raise <strong>${raised.toLocaleString("en-US")}</strong> of the $50,000
          goal, with three weeks to go. If you have given: thank you. If you have not
          yet: this is the moment that matters most.
        </p>
        <a href="#donate" style={nl.link}>Donate →</a>
      </div>
    </div>
  );
}

function NewsletterVariantC({ finalTotal = 52340, donorCount = 418 }) {
  return (
    <div style={nl.card}>
      <div style={nl.overline}>Newsletter insert |Variant C — Mid-August (post-campaign)</div>
      <div style={nl.block}>
        <div style={nl.blockLabel}>
          You closed our first summer campaign at ${finalTotal.toLocaleString("en-US")}.
        </div>
        <p style={nl.body}>
          Thank you to the {donorCount} donors who made this possible. Full close-out
          report at year-end.
        </p>
      </div>
    </div>
  );
}

function ContactUpdateInsert() {
  const [submitted, setSubmitted] = React.useState(false);
  const [prefs, setPrefs] = React.useState({ newsletter: true, campaign: false, mail: false });

  return (
    <div style={nl.card}>
      <div style={nl.overline}>Newsletter insert |Persistent — Contact info update</div>
      <div style={nl.block}>
        <div style={nl.blockLabel}>Help us stay in touch.</div>
        <p style={nl.body}>
          La Isla Network has just upgraded its donor and contact systems, and we are
          bringing our records up to date for everyone who follows our work.
        </p>
        <p style={nl.body}>
          Confirm or update your contact info using the short form below. We are
          particularly trying to capture mailing addresses, so we can send the people
          who care about this work the occasional postcard from the field, an annual
          impact report, or a hand-signed thank-you note when it is warranted.
        </p>
        <p style={{ ...nl.body, color: "var(--lin_text-muted)", fontSize: "var(--lin_text-sm)" }}>
          Your information stays private. Mailing addresses are used only by La Isla
          Network for the purposes above.
        </p>
        {submitted ? (
          <div style={nl.successMsg}>Preferences saved. Thank you.</div>
        ) : (
          <form style={nl.form} onSubmit={e => { e.preventDefault(); setSubmitted(true); }}>
            <div style={nl.formRow}>
              <div style={nl.field}>
                <label style={nl.label}>First name *</label>
                <input style={nl.input} type="text" required placeholder="First name" />
              </div>
              <div style={nl.field}>
                <label style={nl.label}>Last name</label>
                <input style={nl.input} type="text" placeholder="Last name" />
              </div>
            </div>
            <div style={nl.field}>
              <label style={nl.label}>Email *</label>
              <input style={nl.input} type="email" required defaultValue="donor@example.org" />
            </div>
            <div style={nl.field}>
              <label style={nl.label}>Phone (optional)</label>
              <input style={nl.input} type="tel" placeholder="+1 (___) ___-____" />
            </div>
            <div style={nl.field}>
              <label style={nl.label}>Mailing address (optional)</label>
              <input style={nl.input} type="text" placeholder="Street address" />
              <div style={{ height: 8 }} />
              <div style={nl.formRow}>
                <input style={nl.input} type="text" placeholder="City" />
                <input style={{ ...nl.input, maxWidth: 100 }} type="text" placeholder="State" />
                <input style={{ ...nl.input, maxWidth: 120 }} type="text" placeholder="Postal code" />
              </div>
              <div style={{ height: 8 }} />
              <input style={nl.input} type="text" placeholder="Country" />
            </div>
            <div style={nl.field}>
              <label style={nl.label}>How would you like to hear from us?</label>
              <div style={nl.checkGroup}>
                {[
                  { key: "newsletter", label: "Monthly newsletter" },
                  { key: "campaign", label: "Campaign updates" },
                  { key: "mail", label: "Mail" },
                ].map(opt => (
                  <label key={opt.key} style={nl.checkLabel}>
                    <input
                      type="checkbox"
                      checked={prefs[opt.key]}
                      onChange={e => setPrefs(p => ({ ...p, [opt.key]: e.target.checked }))}
                      style={{ accentColor: "var(--lin_blue-500)" }}
                    />
                    <span>{opt.label}</span>
                  </label>
                ))}
              </div>
            </div>
            <button type="submit" style={nl.submit}>Save my preferences</button>
          </form>
        )}
      </div>
    </div>
  );
}

const nl = {
  card: {
    background: "var(--lin_surface-white)",
    border: "var(--lin_border-light)", borderRadius: "var(--lin_radius-lg)",
    overflow: "hidden",
  },
  overline: {
    background: "var(--lin_blue-100)",
    borderBottom: "1px solid var(--lin_grey-200)",
    padding: "var(--lin_space-3) var(--lin_space-6)",
    fontSize: "var(--lin_text-xs)", fontWeight: "var(--lin_weight-semibold)",
    letterSpacing: "var(--lin_tracking-widest)", textTransform: "uppercase",
    color: "var(--lin_blue-600)",
  },
  block: {
    padding: "var(--lin_space-8) var(--lin_space-8)",
    display: "flex", flexDirection: "column", gap: "var(--lin_space-4)",
    maxWidth: 600,
  },
  blockLabel: {
    fontSize: "var(--lin_text-xl)", fontWeight: "var(--lin_weight-semibold)",
    color: "var(--lin_text-primary)", lineHeight: "var(--lin_leading-snug)",
  },
  body: {
    fontSize: "var(--lin_text-base)", lineHeight: "var(--lin_leading-relaxed)",
    color: "var(--lin_text-body)", margin: 0,
  },
  link: {
    display: "inline-block", color: "var(--lin_blue-500)",
    fontSize: "var(--lin_text-sm)", fontWeight: "var(--lin_weight-semibold)",
    textDecoration: "none", letterSpacing: "var(--lin_tracking-wide)",
  },
  form: { display: "flex", flexDirection: "column", gap: "var(--lin_space-5)", marginTop: "var(--lin_space-2)" },
  formRow: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--lin_space-4)" },
  field: { display: "flex", flexDirection: "column", gap: "var(--lin_space-2)" },
  label: { fontSize: "var(--lin_text-sm)", fontWeight: "var(--lin_weight-medium)", color: "var(--lin_text-body)" },
  input: {
    fontFamily: "var(--lin_font-family)", fontSize: "var(--lin_text-base)",
    color: "var(--lin_text-primary)", background: "var(--lin_surface-white)",
    border: "1px solid var(--lin_grey-200)", borderRadius: "var(--lin_radius-md)",
    padding: "var(--lin_space-3) var(--lin_space-4)", outline: "none", width: "100%",
  },
  checkGroup: { display: "flex", flexDirection: "column", gap: "var(--lin_space-3)" },
  checkLabel: {
    display: "flex", alignItems: "center", gap: "var(--lin_space-3)",
    fontSize: "var(--lin_text-sm)", color: "var(--lin_text-body)", cursor: "pointer",
  },
  submit: {
    alignSelf: "flex-start",
    background: "var(--lin_blue-500)", color: "#fff", border: "none",
    padding: "var(--lin_space-4) var(--lin_space-8)", borderRadius: "var(--lin_radius-md)",
    fontSize: "var(--lin_text-base)", fontWeight: "var(--lin_weight-semibold)",
    letterSpacing: "var(--lin_tracking-wide)", cursor: "pointer",
  },
  successMsg: {
    background: "var(--lin_blue-100)", color: "var(--lin_blue-700)",
    padding: "var(--lin_space-4) var(--lin_space-5)",
    borderRadius: "var(--lin_radius-md)", fontSize: "var(--lin_text-sm)",
    fontWeight: "var(--lin_weight-medium)",
  },
};

Object.assign(window, {
  NewsletterVariantA, NewsletterVariantB, NewsletterVariantC, ContactUpdateInsert,
});