// DonateSections.jsx — all content sections with premium enhancements

// ── Utility components ─────────────────────────────────────────

function ScrollCue() {
  const [show, setShow] = React.useState(false);
  const [gone, setGone] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setShow(true), 1600);
    const onScroll = () => setGone(true);
    window.addEventListener("scroll", onScroll, { once: true, passive: true });
    return () => {clearTimeout(t);window.removeEventListener("scroll", onScroll);};
  }, []);
  if (gone) return null;
  return (
    <div style={{ position: "absolute", bottom: 28, left: "50%", transform: "translateX(-50%)", opacity: show ? 0.5 : 0, transition: "opacity 0.6s ease", pointerEvents: "none" }}>
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--lin_blue-400)" strokeWidth="1.5" strokeLinecap="round" style={{ animation: "scrollBob 2s ease-in-out infinite" }}>
        <polyline points="6 9 12 15 18 9" />
      </svg>
    </div>);

}


function PartnerMarquee({ items }) {
  const doubled = [...items, ...items];
  return (
    <div style={{ overflow: "hidden", WebkitMaskImage: "linear-gradient(to right, transparent, black 12%, black 88%, transparent)", maskImage: "linear-gradient(to right, transparent, black 12%, black 88%, transparent)" }}>
      <div style={{ display: "flex", gap: "var(--lin_space-4)", animation: "marqueeScroll 18s linear infinite", width: "max-content" }}>
        {doubled.map((p, i) =>
        <span key={i} className="lin-partner-chip" style={{ fontSize: "var(--lin_text-sm)", color: "var(--lin_text-muted)", padding: "var(--lin_space-2) var(--lin_space-4)", background: "var(--lin_grey-100)", borderRadius: "var(--lin_radius-full)", userSelect: "none" }}>{p}</span>
        )}
      </div>
    </div>);

}


// ── HeroSection ────────────────────────────────────────────────
function HeroSection({ raised, onDonate, loading }) {
  const bp = useBreakpoint();
  const [entered, setEntered] = React.useState(false);
  React.useEffect(() => {const t = setTimeout(() => setEntered(true), 60);return () => clearTimeout(t);}, []);

  const reveal = (delay) => ({
    opacity: entered ? 1 : 0,
    transform: entered ? "translateY(0)" : "translateY(14px)",
    transition: `opacity 0.65s ease ${delay}ms, transform 0.65s ease ${delay}ms`
  });

  const secPad = bp.isMobile
    ? "var(--lin_space-10) var(--lin_space-5) var(--lin_space-12)"
    : "var(--lin_space-20) var(--lin_space-8) 0";

  return (
    <SunsetSectionBackground
      data-component="HeroSection"
      tone="var(--lin_surface-white)"
      alpha={0.55}
      skyFraction={1}
      interactive={true}
      style={{ padding: secPad, minHeight: bp.isMobile ? "auto" : "100vh", display: "flex", flexDirection: "column", justifyContent: bp.isMobile ? "flex-start" : "center" }}
    >
      <div style={{ maxWidth: "var(--lin_container-xl)", margin: "0 auto", display: "grid", gridTemplateColumns: bp.isMobile ? "1fr" : "1.1fr 0.9fr", gap: bp.isMobile ? "var(--lin_space-8)" : "var(--lin_space-16)", alignItems: "center", position: "relative" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--lin_space-3)" }}>
          <div style={{ ...ds.overline, ...reveal(0), marginBottom: 0 }}>Summer Heat Campaign | June – July 2026</div>
          <h1 style={{ ...ds.heroH1, fontSize: bp.isMobile ? "var(--lin_text-4xl)" : "var(--lin_text-6xl)", background: "linear-gradient(225deg, #85b0c3 20%, #6399af 40%, #3a6175 100%)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text", maxWidth: "14ch", ...reveal(80) }}>
            They cannot step out of the heat
          </h1>
          <p style={{ ...ds.heroLead, fontSize: bp.isMobile ? "var(--lin_text-base)" : "var(--lin_text-xl)", marginTop: bp.isMobile ? "var(--lin_space-1)" : 0, ...reveal(160) }}>
            You can step in to protect the workers who feed and house the world through the hottest months of the year.
          </p>
          {/* <p style={{ ...ds.heroSub, ...reveal(240) }}>
            The more you give, the cooler it gets. The cooler it gets, the safer they are.
          </p> */}
          <div style={{ display: "flex", gap: "var(--lin_space-3)", flexWrap: "wrap", marginTop: "var(--lin_space-2)", ...reveal(320) }}>
            <a href="#story" className="lin-btn-secondary" style={ds.btnSecondary}>Read the story</a>
          </div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--lin_space-6)", background: "rgba(255,255,255,0.18)", backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", border: "1px solid rgba(255,255,255,0.38)", borderRadius: "var(--lin_radius-xl)", boxShadow: "0 4px 30px rgba(0,0,0,0.08)", padding: bp.isMobile ? "var(--lin_space-8) var(--lin_space-6)" : "var(--lin_space-10) var(--lin_space-8)", ...reveal(200) }}>
          <h2 style={{ ...ds.sectionH2, fontSize: bp.isMobile ? "var(--lin_text-xl)" : "var(--lin_text-2xl)", textAlign: "center", margin: 0, paddingBottom: "var(--lin_space-6)", color: "var(--lin_navy-700)" }}>
            Help us reach the cooling zone
          </h2>
          <CoolingThermometerV3 raised={raised} goal={50000} onDonate={onDonate} loading={loading} />
        </div>
      </div>
      <ScrollCue />
    </SunsetSectionBackground>);

}

// ── GiftTableSection ───────────────────────────────────────────
function GiftTableSection({ onDonate }) {
  const bp = useBreakpoint();
  const secPad = bp.isMobile ? "var(--lin_space-12) var(--lin_space-5)" : "var(--lin_space-20) var(--lin_space-8)";
  const col = bp.isMobile ? "90px 1fr" : "160px 1fr auto";

  const tiers = [
  { amt: "$24", raw: "24", desc: "Heat-safety training and printed materials for one worker." },
  { amt: "$73", raw: "73", desc: "Training a supervisor to spot the warning signs of heat illness." },
  { amt: "$101", raw: "101", desc: "A day at a worksite. Our team measures conditions, talks with workers, identifies what needs to change." },
  { amt: "$247", raw: "247", desc: "A research visit that adds to the global evidence used to change policy." },
  { amt: "$501", raw: "501", desc: "Our full PREP training, rolled out at a new community partner." },
  { amt: "$1,011", raw: "1011", desc: "A new pilot site. Research, training, and follow-up across one harvest." }];


  return (
    <section id="where" data-component="GiftTableSection" style={{ padding: secPad, background: "var(--lin_surface-light)" }}>
      <div style={{ maxWidth: "var(--lin_container-lg)", margin: "0 auto", display: "flex", flexDirection: "column", gap: "var(--lin_space-6)" }}>
        <RevealBlock><div style={ds.overline}>WHAT ARE YOU SUPPORTING</div></RevealBlock>
        <RevealBlock delay={60}><h2 style={{ ...ds.sectionH2, fontSize: bp.isMobile ? "var(--lin_text-3xl)" : "var(--lin_text-4xl)" }}>Where your gift goes</h2></RevealBlock>
        <RevealBlock delay={100}><p style={ds.sectionLead}>You deserve a straight answer. Every gift is unrestricted. These tiers show you the kinds of work your money pays for.</p></RevealBlock>

        <RevealBlock delay={140}>
          <div style={{ border: "1px solid var(--lin_grey-200)", borderRadius: "var(--lin_radius-lg)", overflow: "hidden" }}>
            <div style={{ display: "grid", gridTemplateColumns: col, background: "var(--lin_surface-navy)", padding: "var(--lin_space-4) var(--lin_space-5)" }}>
              <div style={ds.giftHeaderCell}>Gift</div>
              <div style={ds.giftHeaderCell}>What it funds</div>
              {!bp.isMobile && <div style={ds.giftHeaderCell}></div>}
            </div>
            {tiers.map((t, i) =>
            <div key={t.amt} className="lin-gift-row" onClick={() => openGivebutter()}
            style={{ display: "grid", gridTemplateColumns: col, padding: bp.isMobile ? "var(--lin_space-4) var(--lin_space-4)" : "var(--lin_space-4) var(--lin_space-5)", borderBottom: i < tiers.length - 1 ? "1px solid var(--lin_grey-200)" : "none", alignItems: "center", background: i % 2 === 0 ? "#fff" : "var(--lin_blue-100)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: "var(--lin_space-2)" }}>
                  <div style={{ ...ds.giftAmt, fontSize: bp.isMobile ? "var(--lin_text-base)" : "var(--lin_text-xl)" }}>{t.amt}</div>
                  {t.badge && <span style={{ background: "var(--lin_blue-500)", color: "#fff", fontSize: 10, fontWeight: 700, padding: "2px 7px", borderRadius: "var(--lin_radius-full)", letterSpacing: "0.05em", textTransform: "uppercase" }}>{t.badge}</span>}
                </div>
                <div style={ds.giftDesc}>{t.desc}</div>
                {!bp.isMobile && <div className="lin-gift-row-cta">Give {t.amt} →</div>}
              </div>
            )}
          </div>
        </RevealBlock>
        <RevealBlock delay={180}>
          <p style={{ fontSize: "var(--lin_text-base)", fontStyle: "italic", color: "var(--lin_text-muted)", margin: 0 }}>Pick the line that fits your life. None of these is small.</p>
        </RevealBlock>
        <RevealBlock delay={220}>
          <button onClick={() => openGivebutter()} className="lin-btn-primary" style={{ ...ds.btnPrimary, alignSelf: "flex-start" }}>Donate now</button>
        </RevealBlock>
      </div>
    </section>);

}

// ── WhoWeAreSection ────────────────────────────────────────────
function WhoWeAreSection() {
  const bp = useBreakpoint();
  const secPad = bp.isMobile ? "var(--lin_space-12) var(--lin_space-5)" : "var(--lin_space-24) var(--lin_space-8)";
  const partners = ["US Dept. of Labor", "OSHA", "CDC", "World Vision", "Fair Trade USA", "Bonsucro"];
  const press = ["The New York Times", "The Guardian", "Al Jazeera", "National Geographic"];
  const allItems = [...partners];
  return (
    <section id="who" data-component="WhoWeAreSection" style={{ padding: secPad, background: "var(--lin_surface-white)" }}>
      <div style={{ maxWidth: "var(--lin_container-lg)", margin: "0 auto", display: "flex", flexDirection: "column", gap: bp.isMobile ? "var(--lin_space-6)" : "var(--lin_space-10)" }}>
        <RevealBlock><div style={ds.overline}>WHO WE ARE</div></RevealBlock>
        <RevealBlock delay={60}><h2 style={{ ...ds.sectionH2, fontSize: bp.isMobile ? "var(--lin_text-3xl)" : "var(--lin_text-4xl)" }}>La Isla Network is academics and practitioners</h2></RevealBlock>

        {/* Scrolling marquee */}
        <RevealBlock delay={100}><PartnerMarquee items={allItems} /></RevealBlock>

        <div style={{ display: "grid", gridTemplateColumns: bp.isMobile ? "1fr" : "1fr 1fr", gap: bp.isMobile ? "var(--lin_space-8)" : "var(--lin_space-16)", alignItems: "start", marginTop: bp.isMobile ? 0 : "var(--lin_space-4)" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: bp.isMobile ? "var(--lin_space-5)" : "var(--lin_space-7)" }}>
            <RevealBlock><p style={ds.bodyText}>
              Our team includes PhD researchers publishing in top medical journals, and field coordinators who have spent years working alongside sugarcane cutters in 110-degree heat.
            </p></RevealBlock>
            <RevealBlock delay={60}><p style={ds.bodyText}>
              We have partnered with the US Department of Labor, OSHA, the CDC, World Vision, Fair Trade USA, and Bonsucro. Our research has been covered by The New York Times, The Guardian, Al Jazeera, and National Geographic.
            </p></RevealBlock>
            <RevealBlock delay={80}><p style={ds.bodyText}>
              Workers trust us because we do not talk about them. We work with them. They help design our protocols, validate our research, and see real changes: accessible water stations, mandatory rest breaks, supervisors who know what to watch for.
            </p></RevealBlock>
            <RevealBlock delay={160}><p style={ds.bodyText}>
              Companies trust us because we measure everything: health outcomes, productivity, costs. We have proven what many assumed was impossible.
            </p></RevealBlock>
            {/* Blockquote */}
            <RevealBlock delay={240}>
              <div style={{ padding: "var(--lin_space-5) 0", borderTop: "1px solid var(--lin_grey-200)", borderBottom: "1px solid var(--lin_grey-200)" }}>
                <p style={{ fontSize: bp.isMobile ? "var(--lin_text-lg)" : "var(--lin_text-xl)", fontWeight: "var(--lin_weight-light)", color: "var(--lin_blue-600)", lineHeight: "var(--lin_leading-relaxed)", fontStyle: "italic", margin: 0 }}>
                  Protecting workers and protecting the business are the same thing.
                </p>
              </div>
            </RevealBlock>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: "var(--lin_space-5)" }}>
            <RevealBlock>
              <div>
                <div style={{ ...ds.overline, marginBottom: "var(--lin_space-3)" }}>In the field</div>
                <img
                  src="assets/IMG/CKD_NIC20007-03281_xs.jpg"
                  alt="La Isla Network field work"
                  style={{ width: "100%", borderRadius: "var(--lin_radius-md)", display: "block", objectFit: "cover" }}
                />
              </div>
            </RevealBlock>
          </div>
        </div>

        {/* Press coverage — full-width row, 4 logo columns */}
        <RevealBlock delay={80}>
          <div style={{ borderTop: "1px solid var(--lin_grey-200)", paddingTop: bp.isMobile ? "var(--lin_space-6)" : "var(--lin_space-10)", paddingBottom: bp.isMobile ? "var(--lin_space-2)" : "var(--lin_space-6)" }}>
            <div style={{ ...ds.overline, marginBottom: "var(--lin_space-4)" }}>Press coverage</div>
            <div style={{ display: "grid", gridTemplateColumns: bp.isMobile ? "1fr 1fr" : "repeat(4, 1fr)", gap: "var(--lin_space-3)" }}>
              {[
                { src: "assets/IMG/TIME-Logo.png",           alt: "TIME",               href: "https://time.com/6227277/qatar-extreme-heat-world-cup-2022/" },
                { src: "assets/IMG/Guardian logo.png",       alt: "The Guardian",        href: "https://laislanetwork.org/long-live-journalism/" },
                { src: "assets/IMG/Aljazeera_eng.svg.png",   alt: "Al Jazeera",          href: "https://www.aljazeera.com/gallery/2016/6/28/help-comes-to-el-salvadors-sick-sugarcane-workers" },
                { src: "assets/IMG/ng-logo-2fl.webp",        alt: "National Geographic", href: "https://www.nationalgeographic.com/health/article/excessive-heat-wearable-technology" },
              ].map(({ src, alt, href }) => (
                <a key={alt} href={href} target="_blank" rel="noopener noreferrer" style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "var(--lin_space-4) var(--lin_space-4)", background: "var(--lin_grey-100)", borderRadius: "var(--lin_radius-sm)", minHeight: 64, textDecoration: "none", transition: "background 250ms" }}
                  onMouseEnter={e => e.currentTarget.style.background = "var(--lin_grey-200)"}
                  onMouseLeave={e => e.currentTarget.style.background = "var(--lin_grey-100)"}>
                  <img src={src} alt={alt} style={{ maxHeight: 36, maxWidth: "100%", objectFit: "contain", filter: "grayscale(1)", opacity: 0.7 }} />
                </a>
              ))}
            </div>
          </div>
        </RevealBlock>

      </div>
    </section>);

}

// ── FinalAskSection ────────────────────────────────────────────
function FinalAskSection({ onDonate, raised = 0, donorCount = 0 }) {
  const bp = useBreakpoint();
  const secPad = bp.isMobile ? "var(--lin_space-16) var(--lin_space-5)" : "var(--lin_space-20) var(--lin_space-8)";
  const shareUrl = "https://laislanetwork.org/summer";
  const shareTxt = encodeURIComponent("La Isla Network's Summer Heat Campaign — protecting workers from heat stress. Goal: $50,000 by July 31.");
  const twitterUrl = `https://twitter.com/intent/tweet?text=${shareTxt}&url=${encodeURIComponent(shareUrl)}`;
  const linkedinUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl)}`;
  const emailUrl = `mailto:?subject=Summer Heat Campaign&body=${shareTxt}%20${encodeURIComponent(shareUrl)}`;

  return (
    <section data-component="FinalAskSection" style={{ padding: secPad, background: "var(--lin_surface-navy)" }}>
      <div style={{ maxWidth: "var(--lin_container-lg)", margin: "0 auto", display: "flex", flexDirection: "column", gap: "var(--lin_space-6)", alignItems: "center", textAlign: "center" }}>

        {/* Compact thermometer progress */}
        <RevealBlock style={{ width: "100%", maxWidth: 420 }}>
          <div style={{ background: "var(--lin_navy-700)", borderRadius: "var(--lin_radius-lg)", padding: "var(--lin_space-5)" }}>
            <CoolingThermometer raised={raised} goal={50000} compact />
          </div>
        </RevealBlock>

        <RevealBlock delay={80}><div style={{ ...ds.overline, color: "var(--lin_blue-400)" }}>FINAL ASK</div></RevealBlock>
        <RevealBlock delay={140}><h2 style={{ ...ds.sectionH2, fontSize: bp.isMobile ? "var(--lin_text-3xl)" : "var(--lin_text-4xl)", color: "#fff", maxWidth: 520 }}>Be one of the people who steps in</h2></RevealBlock>
        <RevealBlock delay={200}><p style={{ fontSize: bp.isMobile ? "var(--lin_text-base)" : "var(--lin_text-lg)", lineHeight: "var(--lin_leading-relaxed)", color: "var(--lin_grey-300)", maxWidth: 500, margin: 0 }}>
          $50,000 in six weeks. If you can give, give today. If you have given, share this page with one person who cares about this work.
        </p></RevealBlock>

        {donorCount > 0 &&
        <RevealBlock delay={240}>
            <div style={{ fontSize: "var(--lin_text-sm)", color: "var(--lin_blue-400)", fontWeight: "var(--lin_weight-medium)" }}>
              Join <strong>{donorCount}</strong> donors who have given this summer.
            </div>
          </RevealBlock>
        }

        <RevealBlock delay={280}>
          <div style={{ display: "flex", gap: "var(--lin_space-3)", flexWrap: "wrap", justifyContent: "center" }}>
            <button onClick={() => openGivebutter()} style={ds.btnDark}>Donate now</button>
            <a href="mailto:info@laislanetwork.org" style={ds.btnGhost}>Questions? Reach us at info@laislanetwork.org</a>
          </div>
        </RevealBlock>

        {/* Social share */}
        <RevealBlock delay={340}>
          <div style={{ display: "flex", alignItems: "center", gap: "var(--lin_space-4)", flexWrap: "wrap", justifyContent: "center" }}>
            <span style={{ fontSize: "var(--lin_text-xs)", color: "var(--lin_grey-500)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }}>Share</span>
            {[
            { label: "X / Twitter", href: twitterUrl },
            { label: "LinkedIn", href: linkedinUrl },
            { label: "Email", href: emailUrl }].
            map((s) =>
            <a key={s.label} href={s.href} target="_blank" rel="noopener" style={{ fontSize: "var(--lin_text-sm)", color: "var(--lin_blue-400)", fontWeight: "var(--lin_weight-semibold)", textDecoration: "none" }}>{s.label}</a>
            )}
          </div>
        </RevealBlock>

        <p style={{ fontSize: "var(--lin_text-xs)", color: "var(--lin_grey-500)", marginTop: "var(--lin_space-2)" }}>
          La Isla Network is a 501(c)(3) nonprofit. EIN on request. All gifts are tax-deductible to the extent allowed by law.
        </p>
      </div>
    </section>);

}

// ── CampaignFooter ─────────────────────────────────────────────
function CampaignFooter() {
  const bp = useBreakpoint();
  return (
    <footer data-component="CampaignFooter" style={{ background: "var(--lin_navy-900)", padding: bp.isMobile ? "var(--lin_space-10) var(--lin_space-5)" : "var(--lin_space-12) var(--lin_space-8)", fontFamily: "Inter, sans-serif" }}>
      <div style={{ maxWidth: "var(--lin_container-xl)", margin: "0 auto", display: "flex", flexDirection: "column", gap: "var(--lin_space-5)", alignItems: "flex-start" }}>
        <Logo variant="white" width={130} />
        <div style={{ display: "flex", gap: "var(--lin_space-4)", alignItems: "center", flexWrap: "wrap" }}>
          <a href="mailto:info@laislanetwork.org" style={ds.footerLink}>info@laislanetwork.org</a>
          <span style={{ color: "var(--lin_navy-600)" }}>|</span>
          <a href="https://laislanetwork.org" style={ds.footerLink}>laislanetwork.org</a>
          <span style={{ color: "var(--lin_navy-600)" }}>|</span>
          <span style={{ color: "var(--lin_grey-400)", fontSize: "var(--lin_text-xs)" }}>501(c)(3) | EIN on request</span>
        </div>
        <div style={{ color: "var(--lin_grey-500)", fontSize: "var(--lin_text-xs)" }}>© 2026 La Isla Network | All rights reserved</div>
      </div>
    </footer>);

}

// ── Shared styles ──────────────────────────────────────────────
const ds = {
  overline: { fontSize: "var(--lin_text-xs)", fontWeight: "var(--lin_weight-semibold)", letterSpacing: "var(--lin_tracking-widest)", textTransform: "uppercase", color: "var(--lin_blue-500)" },
  heroH1: { fontFamily: "'acumin-pro-wide', sans-serif", fontWeight: 700, letterSpacing: "var(--lin_tracking-tight)", lineHeight: "var(--lin_leading-tight)", color: "var(--lin_text-primary)", margin: 0 },
  heroLead: { lineHeight: "var(--lin_leading-relaxed)", color: "var(--lin_text-body)", margin: 0, maxWidth: 500 },
  heroSub: { fontSize: "var(--lin_text-base)", color: "var(--lin_text-muted)", fontStyle: "italic", margin: 0 },
  sectionH2: { fontFamily: "'acumin-pro-wide', sans-serif", fontWeight: 700, letterSpacing: "var(--lin_tracking-tight)", lineHeight: "var(--lin_leading-tight)", color: "var(--lin_text-primary)", margin: 0 },
  sectionLead: { fontSize: "var(--lin_text-lg)", lineHeight: "var(--lin_leading-relaxed)", color: "var(--lin_text-body)", margin: 0 },
  bodyText: { fontSize: "var(--lin_text-base)", lineHeight: "var(--lin_leading-relaxed)", color: "var(--lin_text-body)", margin: 0 },
  statCard: { background: "var(--lin_blue-100)", borderRadius: "var(--lin_radius-lg)", padding: "var(--lin_space-6)", display: "flex", flexDirection: "column", gap: "var(--lin_space-2)" },
  statNum: { fontSize: "var(--lin_text-4xl)", fontWeight: "var(--lin_weight-bold)", color: "var(--lin_blue-600)", letterSpacing: "var(--lin_tracking-tight)" },
  statLabel: { fontSize: "var(--lin_text-sm)", color: "var(--lin_text-body)", lineHeight: "var(--lin_leading-normal)" },
  giftHeaderCell: { fontSize: "var(--lin_text-xs)", fontWeight: "var(--lin_weight-semibold)", letterSpacing: "var(--lin_tracking-widest)", textTransform: "uppercase", color: "var(--lin_blue-400)" },
  giftAmt: { fontWeight: "var(--lin_weight-bold)", color: "var(--lin_blue-600)" },
  giftDesc: { fontSize: "var(--lin_text-sm)", color: "var(--lin_text-body)", lineHeight: "var(--lin_leading-normal)" },
  btnPrimary: { 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", textDecoration: "none", display: "inline-block", transition: "background var(--lin_transition-fast)" },
  btnSecondary: { background: "#fff", color: "var(--lin_blue-500)", border: "2px solid var(--lin_blue-500)", padding: "calc(var(--lin_space-4) - 2px) calc(var(--lin_space-8) - 2px)", borderRadius: "var(--lin_radius-md)", fontSize: "var(--lin_text-base)", fontWeight: "var(--lin_weight-semibold)", letterSpacing: "var(--lin_tracking-wide)", textDecoration: "none", display: "inline-block", transition: "background var(--lin_transition-fast)" },
  btnDark: { background: "#fff", color: "var(--lin_navy-800)", 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", textDecoration: "none", display: "inline-block" },
  btnGhost: { background: "transparent", color: "var(--lin_blue-400)", border: "1px solid var(--lin_navy-600)", padding: "calc(var(--lin_space-4) - 1px) calc(var(--lin_space-8) - 1px)", borderRadius: "var(--lin_radius-md)", fontSize: "var(--lin_text-sm)", textDecoration: "none", display: "inline-block" },
  footerLink: { fontSize: "var(--lin_text-sm)", color: "var(--lin_blue-400)", textDecoration: "none", fontFamily: "Inter, sans-serif" }
};

Object.assign(window, {
  HeroSection, GiftTableSection, WhoWeAreSection,
  FinalAskSection, CampaignFooter
});