/* Sections */

/* Press logos, stylized wordmarks for each outlet. Rendered at 
   common visual weight, desaturated to sit quietly under the hero. */
const PressLogos = {
  People: () => (
    <svg viewBox="0 0 120 32" height="28" aria-label="People" role="img">
      <text x="60" y="25" textAnchor="middle"
        fontFamily="'Bricolage Grotesque', serif" fontWeight="800"
        fontSize="26" letterSpacing="-0.5" fill="currentColor">People</text>
    </svg>
  ),
  TODAY: () => (
    <svg viewBox="0 0 120 32" height="26" aria-label="TODAY" role="img">
      <circle cx="14" cy="16" r="10" fill="oklch(0.65 0.15 35)" opacity="0.9" />
      <text x="30" y="22" fontFamily="'Inter Tight', sans-serif" fontWeight="700"
        fontSize="18" letterSpacing="2" fill="currentColor">TODAY</text>
    </svg>
  ),
  ABC7: () => (
    <svg viewBox="0 0 78 28" height="26" aria-label="ABC7" role="img">
      <circle cx="14" cy="14" r="12" fill="currentColor" />
      <text x="14" y="18" textAnchor="middle" fontFamily="'Inter Tight', sans-serif"
        fontWeight="800" fontSize="11" fill="#fff" letterSpacing="-0.3">abc</text>
      <text x="42" y="21" fontFamily="'Bricolage Grotesque', serif" fontWeight="800"
        fontSize="24" fill="currentColor">7</text>
    </svg>
  ),
  TheDodo: () => (
    <svg viewBox="0 0 140 32" height="24" aria-label="The Dodo" role="img">
      <text x="70" y="22" textAnchor="middle"
        fontFamily="'Bricolage Grotesque', serif" fontStyle="italic" fontWeight="700"
        fontSize="22" letterSpacing="-0.3" fill="currentColor">the dodo</text>
    </svg>
  ),
  GMT: () => (
    <svg viewBox="0 0 180 36" height="30" aria-label="Good Morning Texas" role="img">
      <text x="0" y="15" fontFamily="'Inter Tight', sans-serif" fontWeight="700"
        fontSize="10" letterSpacing="3" fill="currentColor">GOOD MORNING</text>
      <text x="0" y="32" fontFamily="'Bricolage Grotesque', serif" fontWeight="800"
        fontSize="18" letterSpacing="-0.5" fill="currentColor">TEXAS</text>
      <path d="M 122 22 L 130 18 L 130 28 Z" fill="oklch(0.65 0.15 35)" />
    </svg>
  ),
  NPR: () => (
    <svg viewBox="0 0 60 28" height="22" aria-label="NPR" role="img">
      <rect x="0" y="6" width="60" height="18" rx="2" fill="currentColor" />
      <text x="30" y="19" textAnchor="middle" fontFamily="'Inter Tight', sans-serif"
        fontWeight="800" fontSize="12" letterSpacing="1" fill="#fff">npr</text>
    </svg>
  ),
};

/* One press mark, shows the publication logo from assets/press/,
   falls back to a styled wordmark until the logo file is added. */
function PressMark({ name, slug, href, h }) {
  const [failed, setFailed] = React.useState(false);
  return (
    <a href={href} target="_blank" rel="noopener noreferrer" className="press-logo"
      style={{ display: "inline-flex", alignItems: "center", opacity: 0.72, transition: "opacity .2s ease" }}
      onMouseEnter={e => { e.currentTarget.style.opacity = 1; }}
      onMouseLeave={e => { e.currentTarget.style.opacity = 0.72; }}
    >
      {failed ? (
        <span style={{
          fontFamily: "var(--font-display)", fontWeight: 600,
          fontSize: "clamp(15px, 1.7vw, 20px)", color: "var(--ink-2)", whiteSpace: "nowrap",
        }}>{name}</span>
      ) : (
        <img src={`assets/press/${slug}.png?v=1`} alt={name} loading="lazy" decoding="async"
          style={{ height: h || 30, width: "auto", display: "block" }}
          onError={() => setFailed(true)} />
      )}
    </a>
  );
}

function Press() {
  const items = [
    { name: "The Dodo", slug: "thedodo", h: 40, href: "https://www.thedodo.com/daily-dodo/broken-dog-who-spent-his-life-in-a-cage-has-no-idea-hes-a-little-different" },
    { name: "People", slug: "people", href: "https://people.com/injured-malamute-with-crooked-head-transforms-after-dog-meat-farm-rescue-11904110" },
    { name: "Long Island Press", slug: "longislandpress", href: "https://www.longislandpress.com/2026/01/27/how-a-long-island-advocate-is-rescuing-dogs-from-the-global-meat-trade/" },
    { name: "New York Post", slug: "nypost", href: "https://nypost.com/2026/04/26/us-news/meet-the-nyers-saving-hundreds-of-adorable-dogs-from-ending-up-on-the-menu/" },
  ];
  return (
    <section id="press" className="press-section section-light" style={{ padding: "32px 0", borderBottom: "1px solid var(--line-light)" }}>
      <div className="wrap">
        <div className="press-row" style={{ display: "flex", alignItems: "center", gap: "clamp(20px, 3vw, 44px)", justifyContent: "center", flexWrap: "wrap", rowGap: 14 }}>
          <span className="eyebrow-dark" style={{ color: "var(--ink-3)", fontSize: 11, whiteSpace: "nowrap" }}>As Featured In</span>
          {items.map(it => <PressMark key={it.name} {...it} />)}
        </div>
      </div>
    </section>
  );
}

function Mission() {
  return (
    <section id="mission" className="section-light" style={{ padding: "56px 0", position: "relative", overflow: "hidden" }}>
      <Paw className="paw-light" style={{ top: 40, right: "6%", width: 44, height: 44 }} />
      <Paw className="paw-light" style={{ bottom: 40, left: "6%", width: 40, height: 40 }} />
      <div className="wrap">
        <div className="mission-grid" style={{
          background: "#fff", borderRadius: 20, padding: "clamp(28px, 4vw, 56px)",
          boxShadow: "0 2px 0 var(--line-light)",
          borderLeft: "4px solid var(--purple-500)",
          display: "grid", gridTemplateColumns: "minmax(0, 1.2fr) minmax(0, 1fr)", gap: 40, alignItems: "center",
        }}>
          <div>
            <h2 className="display display-serif-em" style={{ fontSize: "clamp(26px, 3.2vw, 42px)", margin: 0, color: "var(--ink)", lineHeight: 1.15 }}>
              Our mission is to give <em>every</em> dog rescued from the dog meat trade a chance at a <em>loving</em>, safe life.
            </h2>
          </div>
          <div>
            <div className="eyebrow-dark" style={{ marginBottom: 6 }}>The scale of it</div>
            <div className="display" style={{ fontSize: 68, lineHeight: 1, color: "var(--ink)", marginBottom: 6 }}><CountUp to={30} suffix="M" /></div>
            <div style={{ fontSize: 15, color: "var(--ink-2)", marginBottom: 8 }}>
              dogs are killed in Asia's dog meat trade every year.
            </div>
            <div style={{
              fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 18, lineHeight: 1.35,
              color: "var(--purple-600)", marginBottom: 14, maxWidth: 340,
            }}>
              That's roughly one dog, every second of every day.
            </div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-3)", letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 18 }}>Source: Humane Society International</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, borderTop: "1px solid var(--line-light)", paddingTop: 16 }}>
              {[[10, "M", "", "in China alone"], [1, "M", "+", "in South Korea annually"], [5, "M", "", "in Vietnam annually"]].map(([n, unit, plus, l]) => (
                <div key={l}>
                  <div className="display" style={{ fontSize: 24, color: "var(--ink)" }}><CountUp to={n} suffix={unit + plus} /></div>
                  <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 3 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Survivors({ onSponsor }) {
  // Live from Shelterluv — a continuous marquee that scrolls survivors past at a
  // steady, gentle pace and loops seamlessly (the list is rendered twice and the
  // track translates exactly one set). Constant linear speed = no jerk. Pauses on
  // hover; reduced-motion turns it into a normal horizontal scroll.
  const { status, animals } = useAnimals();
  const available = animals.filter((a) => a.available !== false && !isHiddenDog(a));
  const loop = available.length ? [...available, ...available] : [];
  const dur = Math.max(80, available.length * 10); // ~10s per card
  return (
    <section id="survivors" className="section-light" style={{ padding: "56px 0 16px", position: "relative", overflow: "hidden" }}>
      <Paw className="paw-light" style={{ top: 40, left: "5%", width: 40, height: 40 }} />
      <div className="wrap">
        <div className="survivors-hero" style={{
          display: "grid", gridTemplateColumns: "minmax(0, 1.08fr) minmax(0, 0.92fr)",
          gap: 44, alignItems: "stretch", marginBottom: 44,
        }}>
          <div>
            <h2 className="display" style={{ fontSize: "clamp(34px, 4.4vw, 56px)", margin: "0 0 16px", color: "var(--ink)" }}>
              Hopeful Survivors in Search of a Loving Home
            </h2>
            <p style={{ fontSize: 15, color: "var(--ink-2)", margin: "0 0 22px", maxWidth: 480, lineHeight: 1.6 }}>
              We rescue dogs from the dog meat trade, get them well, and place them with families ready to give a second chance.
            </p>
            <Magnetic><a href="/adopt" className="btn btn-accent">Adopt Today <span className="arrow">→</span></a></Magnetic>
            <div style={{ background: "var(--purple-500)", color: "#fff", borderRadius: 18, padding: "22px 26px", marginTop: 28 }}>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(255,255,255,0.72)", marginBottom: 8 }}>Where it began</div>
              <div className="display" style={{ fontSize: 22, marginBottom: 6 }}>Meet Sunny</div>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: "rgba(255,255,255,0.92)", margin: 0 }}>
                Sunny's rescue is the story that started it all, the dog whose journey to safety inspired the founding of Run 2 The Rescue. Every survivor since follows the trail she opened.
              </p>
            </div>
          </div>
          <div style={{ borderRadius: 22, overflow: "hidden", background: "var(--lav-200)", aspectRatio: "4 / 5", maxHeight: 560, alignSelf: "center" }}>
            <Img src="assets/sunny.jpg" alt="Sunny, the rescue that inspired Run 2 The Rescue" style={{ objectPosition: "center 30%" }} />
          </div>
        </div>

        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "baseline",
          flexWrap: "wrap", gap: "8px 16px", margin: "0 0 20px",
        }}>
          <h3 className="display" style={{ fontSize: "clamp(21px, 2.5vw, 30px)", margin: 0, color: "var(--ink)" }}>
            A few of our survivors
          </h3>
          <a href="/adopt" style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            fontWeight: 600, fontSize: 14, color: "var(--purple-600)", transition: "color .2s", whiteSpace: "nowrap",
          }}
            onMouseEnter={e => { e.currentTarget.style.color = "var(--purple-700)"; }}
            onMouseLeave={e => { e.currentTarget.style.color = "var(--purple-600)"; }}
          >
            Meet all{available.length ? ` ${available.length}` : ""} survivors <span className="arrow">→</span>
          </a>
        </div>

        {status === "ready" ? (
          <div className="surv-marquee">
            <div className="surv-track" style={{ animationDuration: `${dur}s` }}>
              {loop.map((d, i) => (
                <article key={`${d.id}-${i}`} className="surv-card-m" aria-hidden={i >= available.length ? true : undefined} onClick={() => onSponsor(d.name)}>
                  <div style={{ aspectRatio: "4/5", overflow: "hidden", background: "var(--lav-200)" }}>
                    <Img src={d.cover} alt={d.name} />
                  </div>
                  <div style={{ padding: 20 }}>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8, gap: 8 }}>
                      <div className="display" style={{ fontSize: 24, color: "var(--ink)" }}>{d.name}</div>
                      {d.ageGroup && (
                        <span style={{
                          fontSize: 10, fontFamily: "var(--font-ui)", letterSpacing: "0.06em", textTransform: "uppercase",
                          color: "var(--purple-600)",
                        }}>{d.ageGroup}</span>
                      )}
                    </div>
                    <p style={{ margin: 0, fontSize: 13, color: "var(--ink-2)", lineHeight: 1.5 }}>
                      {d.blurb && d.blurb.length > 104 ? d.blurb.slice(0, 104).trim() + "…" : d.blurb}
                    </p>
                  </div>
                </article>
              ))}
            </div>
          </div>
        ) : (
          <div className="ways-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }}>
            {status === "loading" && [0, 1, 2, 3].map(i => (
              <div key={i} style={{ background: "#fff", borderRadius: 20, overflow: "hidden" }}>
                <div style={{ aspectRatio: "4/5", background: "var(--lav-200)" }} />
                <div style={{ padding: 20 }}>
                  <div style={{ height: 16, width: "55%", background: "var(--lav-200)", borderRadius: 6, marginBottom: 12 }} />
                  <div style={{ height: 11, width: "100%", background: "var(--lav-100)", borderRadius: 6, marginBottom: 7 }} />
                  <div style={{ height: 11, width: "80%", background: "var(--lav-100)", borderRadius: 6 }} />
                </div>
              </div>
            ))}
            {status === "error" && (
              <p style={{ gridColumn: "1 / -1", textAlign: "center", color: "var(--ink-3)", fontSize: 14, padding: "24px 0" }}>
                Our survivors are loading from our shelter system. Refresh in a moment to meet them.
              </p>
            )}
          </div>
        )}
      </div>
    </section>
  );
}

function Journey() {
  // Real R2R survivors. beforeFocal / afterFocal control CSS object-position.
  const items = [
    { name: "Kronk",  before: IMG.kronkBefore,  after: IMG.kronkAfter,  story: "Rescued from a slaughter site in Mudanjiang. Featured in People Magazine." },
    { name: "Alfie",  before: IMG.alfieBefore,  after: IMG.alfieAfter,  story: "Rescued from the dog meat trade and finding his way home." },
    { name: "Gertie", before: IMG.gertieBefore, after: IMG.gertieAfter, story: "Rescued from the trade and finding her people." },
    { name: "Honey",  before: IMG.honeyBefore,  after: IMG.honeyAfter,  story: "From forgotten to a forever home of her own.", beforeFocal: "20% center" },
  ];
  // Scroll-velocity reactive: the card track lags a few pixels with scroll
  // speed, then settles, gentle "this page responds to you" motion.
  const trackRef = useRef(null);
  useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    let lastY = window.scrollY, vel = 0, smooth = 0, raf = 0;
    const onScroll = () => { const y = window.scrollY; vel = y - lastY; lastY = y; };
    const tick = () => {
      smooth += (vel - smooth) * 0.1;
      vel *= 0.8;
      const shift = Math.max(-7, Math.min(7, smooth * 0.4));
      if (trackRef.current) trackRef.current.style.transform = `translate3d(0, ${shift}px, 0)`;
      raf = requestAnimationFrame(tick);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    raf = requestAnimationFrame(tick);
    return () => { window.removeEventListener("scroll", onScroll); cancelAnimationFrame(raf); };
  }, []);
  return (
    <section className="section-light" style={{ padding: "56px 0 72px", position: "relative" }}>
      <Paw className="paw-light" style={{ top: 40, left: "5%", width: 44, height: 44 }} />
      <div className="wrap">
        <div className="journey-pinned" style={{
          display: "grid", gridTemplateColumns: "minmax(0, 0.8fr) minmax(0, 1.2fr)",
          gap: 56, alignItems: "start",
        }}>
          <div className="journey-sticky" style={{ position: "sticky", top: 128, alignSelf: "start" }}>
            <div className="eyebrow-dark" style={{ marginBottom: 14 }}>
              <span style={{ color: "var(--purple-500)" }}><PawGlyph /></span>From trauma to trust
            </div>
            <h2 className="display" style={{ fontSize: "clamp(34px, 4.2vw, 60px)", margin: "0 0 16px", color: "var(--ink)" }}>
              Their Journey to a New Life
            </h2>
            <p style={{ color: "var(--ink-2)", fontSize: 16, lineHeight: 1.6, margin: 0, maxWidth: 360 }}>
              Four survivors, before and after the moment everything changed.
            </p>
          </div>
          <div ref={trackRef} style={{ display: "flex", flexDirection: "column", gap: 28, willChange: "transform" }}>
            {items.map((it, i) => (
              <article key={it.name} className="reveal" style={{
                background: "#fff", borderRadius: 22, overflow: "hidden",
                boxShadow: "0 2px 6px oklch(0.4 0.05 310 / 0.06), 0 16px 38px oklch(0.4 0.05 310 / 0.10)",
              }}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 2, background: "var(--line-light)", aspectRatio: "2/1" }}>
                  <div style={{ position: "relative", background: "var(--plum-700)", overflow: "hidden" }}>
                    <Img src={it.before} alt={`${it.name} before rescue`} style={{ filter: "saturate(0.5) brightness(0.85)", objectPosition: it.beforeFocal || "center" }} />
                    <span style={{
                      position: "absolute", top: 0, left: 0,
                      background: "oklch(0.18 0.035 310 / 0.88)", color: "#fff", fontSize: 13,
                      padding: "6px 14px 7px", borderRadius: "0 0 14px 0",
                      fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 600,
                    }}>Before</span>
                  </div>
                  <div style={{ position: "relative", overflow: "hidden" }}>
                    <Img src={it.after} alt={`${it.name} after rescue`} style={{ objectPosition: it.afterFocal || "center" }} />
                    <span style={{
                      position: "absolute", top: 0, left: 0,
                      background: "rgba(255,255,255,0.94)", color: "var(--ink)", fontSize: 13,
                      padding: "6px 14px 7px", borderRadius: "0 0 14px 0",
                      fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 600,
                    }}>After</span>
                  </div>
                </div>
                <div style={{ padding: "22px 24px" }}>
                  <div>
                    <div className="display" style={{ fontSize: 26, marginBottom: 4, color: "var(--ink)" }}>{it.name}</div>
                    <p style={{ margin: 0, color: "var(--ink-2)", fontSize: 14, lineHeight: 1.55 }}>
                      {it.story}
                      {it.link && <> <a href={it.link.href} style={{ fontWeight: 600, color: "var(--purple-600)", whiteSpace: "nowrap" }}>{it.link.label} <span className="arrow">→</span></a></>}
                    </p>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Feature() {
  return (
    <section className="section-light" style={{ padding: "64px 0" }}>
      <div className="wrap">
        <div className="kronk-grid" style={{ display: "grid", gridTemplateColumns: "minmax(0, 0.9fr) minmax(0, 1.1fr)", gap: 48, alignItems: "center" }}>
          <div style={{
            position: "relative", aspectRatio: "4/5", borderRadius: 20, overflow: "hidden",
            background: "var(--lav-200)", boxShadow: "0 20px 48px -20px oklch(0.3 0.05 310 / 0.3)",
            maxHeight: 440,
          }}>
            <Img src={IMG.kronkAfter} alt="Kronk, leaping through fresh snow" />
          </div>
          <div>
            <span style={{
              display: "inline-block", padding: "6px 14px", borderRadius: 999,
              background: "var(--purple-soft)", color: "var(--purple-700)",
              fontSize: 12, fontFamily: "var(--font-display)", letterSpacing: "0.1em", textTransform: "uppercase",
              marginBottom: 16, fontWeight: 600,
            }}><PawGlyph />Featured Story</span>
            <h2 className="display" style={{ fontSize: "clamp(34px, 4.4vw, 56px)", margin: "0 0 16px", color: "var(--ink)" }}>
              Meet Kronk
            </h2>
            <p style={{ fontSize: 15, color: "var(--ink-2)", marginBottom: 22, maxWidth: 480, lineHeight: 1.65 }}>
              Kronk was rescued from a slaughter site in Mudanjiang. Now he leaps through fresh snow a world away. His journey from the dog meat trade to a life of pure joy is proof of what a second chance makes possible, and it caught the eye of <b style={{ color: "var(--ink)" }}>People Magazine</b>.
            </p>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
              <a href="/news" className="btn btn-accent">Read Kronk's Story <span className="arrow">→</span></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Ways({ onDonate, onSponsor }) {
  const items = [
    { title: "Adopt a Survivor", kind: "adopt",   href: "/adopt" },
    { title: "Become a Foster",  kind: "foster",  href: "/foster" },
    { title: "Sponsor a Dog",    kind: "sponsor", href: "/sponsor" },
    { title: "Make a Donation",  kind: "donate",  href: "/donate" },
  ];
  return (
    <section id="ways" className="section-light" style={{ padding: "52px 0 60px", position: "relative", overflow: "hidden" }}>
      <Paw className="paw-light" style={{ top: 40, left: "5%", width: 44, height: 44 }} />
      <Paw className="paw-light" style={{ top: 30, right: "6%", width: 40, height: 40 }} />
      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 32 }}>
          <h2 className="display" style={{ fontSize: "clamp(34px, 4.4vw, 56px)", margin: "0 0 10px", color: "var(--ink)" }}>
            How You Can Help
          </h2>
          <p style={{ color: "var(--ink-2)", fontSize: 15, margin: 0 }}>
            However you choose to help, a survivor gets closer to home.
          </p>
        </div>
        <div className="ways-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
          {items.map(it => (
            <a key={it.title} href={it.href} className="help-card reveal">
              <div className="help-art">
                <HelpIllustration kind={it.kind} />
              </div>
              <div className={"help-label help-label-" + it.kind}>
                <span className="help-icon"><HelpIcon kind={it.kind} /></span>
                <span className="help-text">{it.title}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Voices() {
  return (
    <section className="section-dark-2" style={{ padding: "52px 0", position: "relative" }}>
      <div className="wrap" style={{ maxWidth: 900 }}>
        <div style={{ textAlign: "center" }}>
          <p style={{ fontSize: 16, color: "var(--on-dark-2)", maxWidth: 620, margin: "0 auto 28px", lineHeight: 1.65 }}>
            A beacon of hope for the activists who go in, and the dogs they carry out.
          </p>
          <div style={{
            borderLeft: "3px solid var(--purple-500)", paddingLeft: 20,
            maxWidth: 520, margin: "0 auto 36px", textAlign: "left",
          }}>
            <div style={{ fontStyle: "italic", fontSize: 19, color: "#fff", marginBottom: 10 }}>
              "Run to the rescue with love, and peace will follow."
            </div>
            <div style={{ fontSize: 13, color: "var(--purple-400)" }}>River Phoenix</div>
          </div>
          <div className="display run-repeat" style={{ fontSize: "clamp(36px, 6vw, 72px)", color: "var(--purple-400)", letterSpacing: "0.02em" }}>
            RUN. RESCUE. REPEAT.
          </div>
        </div>
      </div>
    </section>
  );
}

function TeamCard({ p, featured }) {
  return (
    <div className="reveal" style={{
      background: "var(--plum-700)", borderRadius: featured ? 24 : 20, overflow: "hidden",
      padding: featured ? 22 : 16, border: "1px solid var(--line-dark)",
      height: "100%", display: "flex", flexDirection: "column",
      transition: "transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease",
    }}
      onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-5px)"; e.currentTarget.style.boxShadow = "0 24px 48px -22px oklch(0.1 0.04 310 / 0.7)"; }}
      onMouseLeave={e => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "none"; }}
    >
      <div style={{ aspectRatio: p.imgAspect || (featured ? "4/3" : "1/1"), borderRadius: featured ? 16 : 13, overflow: "hidden", marginBottom: featured ? 16 : 13, background: "var(--plum-600)", position: "relative" }}>
        {p.img ? (
          <Img src={p.img} alt={p.name} style={featured ? { objectPosition: p.imgPos || "center 28%" } : {}} />
        ) : (
          <div aria-hidden="true" style={{
            width: "100%", height: "100%", display: "flex", flexDirection: "column",
            alignItems: "center", justifyContent: "center", gap: 8,
            background: "linear-gradient(160deg, var(--plum-600), var(--plum-700))",
          }}>
            <span className="display" style={{ fontSize: featured ? 56 : 40, lineHeight: 1, color: "var(--purple-400)", opacity: 0.85 }}>
              {p.name.split(" ").map(w => w[0]).slice(0, 2).join("").toUpperCase()}
            </span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--on-dark-3)" }}>
              Photo coming soon
            </span>
          </div>
        )}
      </div>
      {p.tag && (
        <span style={{
          display: "inline-block", alignSelf: "flex-start", marginBottom: 10,
          fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase",
          color: "var(--purple-400)", background: "oklch(0.72 0.14 305 / 0.15)",
          padding: "4px 10px", borderRadius: 999,
        }}>{p.tag}</span>
      )}
      <div className="display" style={{ fontSize: featured ? 24 : 19, marginBottom: 4, color: "#fff" }}>{p.name}</div>
      <div style={{ fontSize: featured ? 12 : 11, fontFamily: "var(--font-display)", fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--on-dark-3)", marginBottom: featured ? 14 : 10 }}>{p.role}</div>
      <p style={{ color: "var(--on-dark-2)", fontSize: featured ? 14 : 13, margin: 0, lineHeight: 1.6 }}>{p.copy}</p>
    </div>
  );
}

function Team() {
  // Founders render large; the growing team renders in a uniform, equal-height row below.
  const founders = [
    { name: "Brandy Cherven", role: "Chief Executive Officer", tag: "Co-Founder", img: IMG.teamBrandy, imgAspect: "1031 / 1255", copy: "I never imagined that rescuing dogs would become my life's work. Everything changed when I adopted Sunny, a three-legged Jindo rescued from the dog meat trade in East Asia. What began as volunteering and advocacy ultimately led me to leave my traditional career path and, in 2024, co-found Run 2 The Rescue. Rescue is more than what I do... it's who I am. In memory of Sunny, the dog who changed everything." },
    { name: "Bonnie Klapper", role: "Chief Operating Officer", tag: "Co-Founder", img: IMG.teamBonnie, copy: "I spent nearly two dozen years as a federal prosecutor in California and New York, dismantling drug cartels. Today, I put that same energy and skills into helping the animals. I am a vegan animal rights activist who provides pro bono support to dozens of animal-related nonprofits and activists on the ground. While I fight for all animals, dogs have always had my heart. I am honored to work with Brandy and Run 2 the Rescue to save these beautiful dog meat trade survivors." },
  ];
  const team = [
    { name: "Gregory Carrico", role: "Foster Dad & Volunteer", tag: "Volunteer", img: IMG.teamGreg, copy: "Lifelong animal lover and ringleader of a twelve-poodle pack (plus fosters) based in Upstate New York. The daily agenda: rehabilitation, well-being, fashion, and a lot of pup-cups. Greg champions senior and special-needs rescues and the joy of bringing them home. \"Are all these dogs yours?\" ~ everyone Gregory meets while walking his dogs." },
    { name: "Kirk", role: "Tech Wizard", tag: "Team", img: IMG.teamKirk, copy: "Ok, who's this cat dude!? As a young lad in rural Wisconsin, I grew up literally running with a pack of (domesticated) dogs. My rescue work began in earnest in the concrete jungle of Harlem, NY, where there's a cat crisis on every corner. My first rescue, Zora, was a foster fail. Here she is, perched on my shoulder, telling me not to adopt another cat. Along with a small but dedicated group of rescuers, I helped found Be the Change Animal Rescue. Professionally, I help small businesses and nonprofits strategize and overcome technical hurdles. I'm also a songwriter and musician, and when I'm not advocating for animals, you can usually find me in the woods!" },
    { name: "Aman Garg", role: "Tech and AI Lead", tag: "Team", img: IMG.teamAman, copy: "10+ years in marketing analytics and consumer insights have left Aman a card-carrying data geek. Lately he's all-in on AI, cooking up products that solve real-world problems. The rest of his time belongs to Coco, his favorite drooler, who gets long walks on the St. Pete beach and a suspiciously generous ration of peanut-butter-and-banana ice cream." },
  ];
  return (
    <section className="section-dark" style={{ padding: "64px 0", position: "relative", overflow: "hidden" }}>
      <Paw className="paw-dark" style={{ top: 60, right: "6%", width: 52, height: 52 }} />
      <Paw className="paw-dark" style={{ bottom: 80, left: "5%", width: 56, height: 56 }} />
      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 40 }}>
          <div className="eyebrow" style={{ color: "var(--purple-400)", marginBottom: 12 }}><PawGlyph />Leadership</div>
          <h2 className="display" style={{ fontSize: "clamp(36px, 5vw, 64px)", margin: "0 0 12px", color: "#fff" }}>
            The team behind the mission
          </h2>
          <p style={{ color: "var(--on-dark-2)", fontSize: 15, margin: 0 }}>
            The founders, and the growing team, driving Run 2 The Rescue forward.
          </p>
        </div>

        <div className="team-grid" style={{
          display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
          gap: 28, justifyContent: "center", maxWidth: 920, margin: "0 auto 24px", alignItems: "stretch",
        }}>
          {founders.map(p => <TeamCard key={p.name} p={p} featured />)}
        </div>

        <div className="team-grid" style={{
          display: "grid", gridTemplateColumns: `repeat(${team.length}, minmax(0, 1fr))`,
          gap: 20, justifyContent: "center", maxWidth: 290 * team.length, margin: "0 auto", alignItems: "stretch",
        }}>
          {team.map(p => <TeamCard key={p.name} p={p} />)}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ onDonate, onSubscribe }) {
  const [email, setEmail] = useState("");
  const [subbed, setSubbed] = useState(false);
  const [sending, setSending] = useState(false);
  const submitNewsletter = async (e) => {
    e.preventDefault();
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) return;
    setSending(true);
    await submitForm({ email: email, source: "Homepage final CTA" }, "Newsletter");
    setSending(false);
    setSubbed(true);
    setEmail("");
  };
  return (
    <section id="contact" style={{
      padding: "64px 0", position: "relative", overflow: "hidden",
      background: "linear-gradient(180deg, oklch(0.54 0.12 305) 0%, oklch(0.44 0.11 305) 100%)",
      color: "#fff",
    }}>
      <Paw style={{ top: 40, left: "5%", width: 44, height: 44, opacity: 0.2, color: "#fff" }} />
      <Paw style={{ bottom: 30, right: "6%", width: 40, height: 40, opacity: 0.2, color: "#fff" }} />

      <div className="wrap" style={{ textAlign: "center", position: "relative", zIndex: 1 }}>
        <h2 className="display" style={{ fontSize: "clamp(40px, 6vw, 80px)", margin: "0 0 12px", color: "#fff" }}>
          Every Dog Deserves a Chance
        </h2>
        <p style={{ fontSize: 18, color: "rgba(255,255,255,0.88)", maxWidth: 560, margin: "0 auto 32px" }}>
          Your gift puts the next survivor on a plane home.
        </p>
        <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap", marginBottom: 56 }}>
          <button className="btn btn-light" onClick={onDonate}>Donate Now</button>
          <a href="#ways" className="btn btn-outline-light">Get Involved</a>
        </div>

        <div className="cta-connect" style={{
          maxWidth: 640, margin: "0 auto", paddingTop: 56,
          borderTop: "1px solid rgba(255,255,255,0.25)",
          display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.3fr)", gap: 32, alignItems: "start", textAlign: "left",
        }}>
          <div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 8, fontWeight: 600 }}>Stay Connected</div>
            <div style={{ fontSize: 13, color: "rgba(255,255,255,0.82)" }}>Get rescue updates and survivor stories in your inbox.</div>
          </div>
          <form className="cta-form" onSubmit={submitNewsletter}
            style={{ display: "flex", gap: 8 }}>
            <Botcheck />
            <input
              type="email" className="cta-email"
              placeholder={subbed ? "Subscribed ♡" : "Email address"}
              value={email} onChange={e => setEmail(e.target.value)}
              style={{
                flex: 1, padding: "14px 18px", borderRadius: 999,
                border: "1px solid rgba(255,255,255,0.4)", background: "rgba(255,255,255,0.12)",
                color: "#fff", fontSize: 14, outline: "none",
              }}
            />
            <button type="submit" className="btn btn-light" style={{ height: 46 }} disabled={sending || subbed}>{subbed ? "Subscribed" : sending ? "Sending..." : "Subscribe"}</button>
          </form>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="section-dark" style={{ padding: "72px 0 40px", borderTop: "1px solid var(--line-dark)" }}>
      <div className="wrap">
        <div className="footer-grid" style={{
          display: "grid", gridTemplateColumns: "minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr)", gap: 48,
          paddingBottom: 56, borderBottom: "1px solid var(--line-dark)",
        }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}>
              <img src="assets/r2r-logo.png" alt="" style={{ width: 52, height: 52 }} />
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 16, color: "#fff", lineHeight: 1.05 }}>Run 2 The<br />Rescue</div>
            </div>
            <p style={{ color: "var(--on-dark-2)", fontSize: 14, maxWidth: 340, margin: "0 0 20px" }}>
              Saving lives, one rescue at a time. Dedicated to rescuing dogs from the dog meat trade and giving them a second chance at life.
            </p>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 12, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--purple-400)" }}>
              <PawGlyph />Run · Rescue · Repeat
            </div>
            <div style={{ display: "flex", gap: 10, marginTop: 22 }}>
              <a href="https://www.facebook.com/people/Run-2-The-Rescue/61564710401329/" target="_blank" rel="noopener noreferrer" aria-label="Run 2 The Rescue on Facebook" style={{ width: 38, height: 38, borderRadius: "50%", background: "var(--plum-700)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--on-dark-2)", transition: "background .2s ease, color .2s ease, transform .2s ease" }} onMouseEnter={e => { e.currentTarget.style.background = "var(--purple-500)"; e.currentTarget.style.color = "#fff"; e.currentTarget.style.transform = "translateY(-2px)"; }} onMouseLeave={e => { e.currentTarget.style.background = "var(--plum-700)"; e.currentTarget.style.color = "var(--on-dark-2)"; e.currentTarget.style.transform = "none"; }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07c0 6.03 4.39 11.03 10.13 11.93v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.69.24 2.69.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.49h-2.8v8.44C19.61 23.1 24 18.1 24 12.07z"/></svg>
              </a>
              <a href="https://www.instagram.com/run2therescue" target="_blank" rel="noopener noreferrer" aria-label="Run 2 The Rescue on Instagram" style={{ width: 38, height: 38, borderRadius: "50%", background: "var(--plum-700)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--on-dark-2)", transition: "background .2s ease, color .2s ease, transform .2s ease" }} onMouseEnter={e => { e.currentTarget.style.background = "var(--purple-500)"; e.currentTarget.style.color = "#fff"; e.currentTarget.style.transform = "translateY(-2px)"; }} onMouseLeave={e => { e.currentTarget.style.background = "var(--plum-700)"; e.currentTarget.style.color = "var(--on-dark-2)"; e.currentTarget.style.transform = "none"; }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.16c3.2 0 3.58.01 4.85.07 3.25.15 4.77 1.69 4.92 4.92.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.15 3.23-1.66 4.77-4.92 4.92-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-3.26-.15-4.77-1.7-4.92-4.92-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85C2.4 3.92 3.92 2.38 7.15 2.23 8.42 2.17 8.8 2.16 12 2.16zM12 0C8.74 0 8.33.01 7.05.07 2.7.27.27 2.69.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.2 4.36 2.62 6.78 6.98 6.98C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c4.35-.2 6.78-2.62 6.98-6.98.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.2-4.35-2.62-6.78-6.98-6.98C15.67.01 15.26 0 12 0zm0 5.84A6.16 6.16 0 1 0 12 18.16 6.16 6.16 0 0 0 12 5.84zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.4-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z"/></svg>
              </a>
              <a href="https://www.tiktok.com/@_run2therescue_" target="_blank" rel="noopener noreferrer" aria-label="Run 2 The Rescue on TikTok" style={{ width: 38, height: 38, borderRadius: "50%", background: "var(--plum-700)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--on-dark-2)", transition: "background .2s ease, color .2s ease, transform .2s ease" }} onMouseEnter={e => { e.currentTarget.style.background = "var(--purple-500)"; e.currentTarget.style.color = "#fff"; e.currentTarget.style.transform = "translateY(-2px)"; }} onMouseLeave={e => { e.currentTarget.style.background = "var(--plum-700)"; e.currentTarget.style.color = "var(--on-dark-2)"; e.currentTarget.style.transform = "none"; }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.89-4.51c.3 0 .59.05.85.13V9.4a6.34 6.34 0 0 0-1-.08A6.34 6.34 0 0 0 5.6 20.92a6.34 6.34 0 0 0 10.86-4.43V8.69a8.16 8.16 0 0 0 3.13 1.27V6.69z"/></svg>
              </a>
              <a href="https://www.youtube.com/@R2TRDogs" target="_blank" rel="noopener noreferrer" aria-label="Run 2 The Rescue on YouTube" style={{ width: 38, height: 38, borderRadius: "50%", background: "var(--plum-700)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--on-dark-2)", transition: "background .2s ease, color .2s ease, transform .2s ease" }} onMouseEnter={e => { e.currentTarget.style.background = "var(--purple-500)"; e.currentTarget.style.color = "#fff"; e.currentTarget.style.transform = "translateY(-2px)"; }} onMouseLeave={e => { e.currentTarget.style.background = "var(--plum-700)"; e.currentTarget.style.color = "var(--on-dark-2)"; e.currentTarget.style.transform = "none"; }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M23.5 6.5a3 3 0 0 0-2.11-2.12C19.5 4 12 4 12 4s-7.5 0-9.39.38A3 3 0 0 0 .5 6.5 31.6 31.6 0 0 0 .12 12a31.6 31.6 0 0 0 .38 5.5 3 3 0 0 0 2.11 2.12C4.5 20 12 20 12 20s7.5 0 9.39-.38A3 3 0 0 0 23.5 17.5 31.6 31.6 0 0 0 23.88 12a31.6 31.6 0 0 0-.38-5.5zM9.75 15.5v-7l6.25 3.5-6.25 3.5z"/></svg>
              </a>
            </div>
          </div>
          <FooterCol title="Get Involved" links={[["Adopt","/adopt"],["Foster","/foster"],["Sponsor","/sponsor"],["Donate","/donate"]]} />
          <FooterCol title="Resources" links={[["News","/news"],["Contact","/contact"],["Home","/"]]} />
        </div>
        <div style={{
          paddingTop: 24, display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16,
          fontSize: 13, color: "var(--on-dark-3)",
        }}>
          <div>© 2026 Run 2 The Rescue · 501(c)(3) Nonprofit · EIN 99-4240461</div>
          <div style={{ display: "flex", gap: 20, flexWrap: "wrap" }}>
            <a href="assets/r2r-501c3-determination.pdf?v=1" target="_blank" rel="noopener noreferrer" style={{ color: "var(--on-dark-2)" }}>501(c)(3) Determination Letter</a>
            <a href="/privacy" style={{ color: "var(--on-dark-2)" }}>Privacy Policy</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", color: "#fff", marginBottom: 20, fontWeight: 600 }}>{title}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {links.map(([l, h]) => (
          <a key={l} href={h} style={{ color: "var(--on-dark-2)", fontSize: 14, transition: "color .2s" }}
            onMouseEnter={e => e.currentTarget.style.color = "var(--purple-400)"}
            onMouseLeave={e => e.currentTarget.style.color = "var(--on-dark-2)"}>{l}</a>
        ))}
      </div>
    </div>
  );
}

/* "Share your story" — a dedicated adopter-testimonial submission, kept
   separate from Contact: a story is content meant to be published, so it
   needs explicit consent. Stories email the team; a human reviews and
   features them — nothing here is auto-published.

   Wired through the shared submitForm helper in shared.jsx — all site
   forms route to the single Web3Forms access key (info@run2therescue.org).
   Until WEB3FORMS_KEY is set in shared.jsx, this still shows the thank-you
   without sending. Photos are not forwarded (Web3Forms JSON endpoint is
   text-only); if a photo is selected, we note it in the message body. */

function ShareStoryModal({ open, onClose }) {
  const [form, setForm] = useState({ name: "", email: "", dog: "", year: "", story: "", credit: "first", consent: false });
  const [photo, setPhoto] = useState(null);
  const [step, setStep] = useState("form"); // form | sending | done | error

  useEffect(() => {
    if (!open) return;
    setStep("form");
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open]);

  if (!open) return null;

  const emailOk = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email);
  const canSubmit = form.name.trim().length > 1 && emailOk && form.story.trim().length > 12 && form.consent;
  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  const submit = async (e) => {
    e.preventDefault();
    if (!canSubmit || step === "sending") return;
    setStep("sending");
    const result = await submitForm(
      {
        adopter: form.name,
        email: form.email,
        dog: form.dog,
        adoption_year: form.year,
        story: form.story,
        credit_as: form.credit === "full" ? "Full name" : "First name only",
        consent_to_publish: "Yes — granted in the submission form",
        photo_attached: photo ? `Yes — ${photo.name} (will be requested by email)` : "No",
      },
      `Share Your Story — ${form.dog || "a survivor"}`
    );
    // Graceful UX: show thank-you for demo mode OR successful send.
    // Only show the error state on a real network failure with the key set.
    if (result.ok || result.demo) {
      setStep("done");
    } else {
      setStep("error");
    }
  };

  const inputStyle = {
    width: "100%", padding: "12px 14px", borderRadius: 10,
    border: "1px solid var(--line-light)", background: "#fff",
    fontFamily: "var(--font-ui)", fontSize: 14, color: "var(--ink)", outline: "none",
  };
  const labelStyle = {
    display: "block", fontFamily: "var(--font-mono)", fontSize: 10,
    letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-3)",
    marginBottom: 6, fontWeight: 600,
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: "#fff", borderRadius: 24, maxWidth: 560, width: "100%",
        maxHeight: "calc(100vh - 48px)", overflowY: "auto", position: "relative",
        boxShadow: "var(--shadow)",
      }}>
        <button onClick={onClose} aria-label="Close" style={{
          position: "absolute", top: 16, right: 16, width: 34, height: 34, borderRadius: "50%",
          background: "var(--lav-100)", color: "var(--ink)", display: "grid", placeItems: "center", fontSize: 15,
        }}>✕</button>

        <div style={{ padding: "34px 36px 32px" }}>
          {(step === "form" || step === "sending") && (
            <form onSubmit={submit}>
              <Botcheck />
              <div className="eyebrow-dark" style={{ marginBottom: 10 }}>
                <span style={{ color: "var(--purple-500)" }}><PawGlyph /></span>A happy tail
              </div>
              <h2 className="display" style={{ fontSize: 30, margin: "0 0 8px", color: "var(--ink)", lineHeight: 1.15 }}>
                Share your survivor's story
              </h2>
              <p style={{ color: "var(--ink-2)", fontSize: 14, margin: "0 0 22px", lineHeight: 1.6 }}>
                Adopted from Run 2 The Rescue? We'd love to hear how they're settling in. Our team reads every story and may feature yours.
              </p>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 14 }}>
                <div>
                  <label style={labelStyle}>Your name *</label>
                  <input style={inputStyle} value={form.name} onChange={(e) => set("name", e.target.value)} />
                </div>
                <div>
                  <label style={labelStyle}>Email *</label>
                  <input type="email" style={inputStyle} value={form.email} onChange={(e) => set("email", e.target.value)} />
                </div>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 12, marginBottom: 14 }}>
                <div>
                  <label style={labelStyle}>Dog you adopted</label>
                  <input style={inputStyle} value={form.dog} onChange={(e) => set("dog", e.target.value)} placeholder="Their name" />
                </div>
                <div>
                  <label style={labelStyle}>Adoption year</label>
                  <input style={inputStyle} value={form.year} onChange={(e) => set("year", e.target.value)} placeholder="2026" />
                </div>
              </div>
              <div style={{ marginBottom: 14 }}>
                <label style={labelStyle}>Your story *</label>
                <textarea rows={4} style={{ ...inputStyle, resize: "vertical" }} value={form.story}
                  onChange={(e) => set("story", e.target.value)}
                  placeholder="How is your survivor doing? What would you tell a family considering adoption?" />
              </div>
              <div style={{ marginBottom: 16 }}>
                <label style={labelStyle}>A photo (optional)</label>
                <input type="file" accept="image/*" onChange={(e) => setPhoto((e.target.files && e.target.files[0]) || null)}
                  style={{ fontSize: 13, color: "var(--ink-2)" }} />
              </div>

              <div style={{ marginBottom: 16 }}>
                <label style={labelStyle}>How should we credit you?</label>
                <div style={{ display: "flex", background: "var(--lav-100)", borderRadius: 10, padding: 3 }}>
                  {[["first", "First name only"], ["full", "Full name"]].map(([v, l]) => (
                    <button type="button" key={v} onClick={() => set("credit", v)} style={{
                      flex: 1, padding: "9px 0", borderRadius: 8, fontSize: 13,
                      background: form.credit === v ? "#fff" : "transparent",
                      color: form.credit === v ? "var(--ink)" : "var(--ink-3)",
                      boxShadow: form.credit === v ? "var(--shadow-sm)" : "none", fontWeight: 500,
                    }}>{l}</button>
                  ))}
                </div>
              </div>

              <label style={{ display: "flex", gap: 10, alignItems: "flex-start", cursor: "pointer", marginBottom: 20 }}>
                <input type="checkbox" checked={form.consent} onChange={(e) => set("consent", e.target.checked)}
                  style={{ marginTop: 3, width: 16, height: 16, accentColor: "var(--purple-500)", flexShrink: 0 }} />
                <span style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.5 }}>
                  I give Run 2 The Rescue permission to share my story and photo on its website and social media.
                </span>
              </label>

              <button type="submit" className="btn btn-accent" disabled={!canSubmit || step === "sending"}
                style={{ width: "100%", justifyContent: "center", opacity: (!canSubmit || step === "sending") ? 0.55 : 1 }}>
                {step === "sending" ? "Sending…" : "Share my story"}
              </button>
            </form>
          )}

          {step === "done" && (
            <div style={{ textAlign: "center", padding: "16px 0" }}>
              <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--purple-soft)", display: "grid", placeItems: "center", margin: "0 auto 20px", fontSize: 28, color: "var(--purple-700)" }}>♡</div>
              <h2 className="display" style={{ fontSize: 28, margin: "0 0 10px", color: "var(--ink)" }}>
                Thank you{form.name ? `, ${form.name.split(" ")[0]}` : ""}.
              </h2>
              <p style={{ color: "var(--ink-2)", fontSize: 14, margin: "0 0 24px", lineHeight: 1.6 }}>
                Our team reads every story with care. If yours is featured, we'll reach out at {form.email || "your email"} first.
              </p>
              <button className="btn btn-accent" onClick={onClose}>Close</button>
            </div>
          )}

          {step === "error" && (
            <div style={{ textAlign: "center", padding: "16px 0" }}>
              <h2 className="display" style={{ fontSize: 26, margin: "0 0 10px", color: "var(--ink)" }}>That didn't go through.</h2>
              <p style={{ color: "var(--ink-2)", fontSize: 14, margin: "0 0 24px", lineHeight: 1.6 }}>
                Something interrupted the submission. Please try again, or email us directly at info@run2therescue.org.
              </p>
              <button className="btn btn-accent" onClick={() => setStep("form")}>Try again</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* Testimonial avatar: an adopter's pet photo when provided, otherwise the
   initials chip. Falls back to initials if the photo file is missing, so a
   not-yet-added image never shows as a broken image. */
function TestimonialAvatar({ img, initials, alt, imgPos }) {
  const [failed, setFailed] = useState(false);
  if (img && !failed) {
    return (
      <img src={img} alt={alt || ""} onError={() => setFailed(true)} loading="lazy" decoding="async"
        style={{ width: 42, height: 42, borderRadius: 12, objectFit: "cover", objectPosition: imgPos || "center 50%", flexShrink: 0, background: "var(--lav-300)" }} />
    );
  }
  return (
    <span style={{
      width: 36, height: 36, borderRadius: "50%", flexShrink: 0,
      background: "var(--purple-500)", color: "#fff",
      display: "flex", alignItems: "center", justifyContent: "center",
      fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 15,
    }}>{initials}</span>
  );
}

/* Adopter testimonials, real verbatim quotes, shown as speech bubbles.
   Add more by appending to `quotes`; each becomes another bubble. */
function Testimonials() {
  const [storyOpen, setStoryOpen] = useState(false);
  const quotes = [
    {
      quote: "Fig and Coal have brought so much love and joy into our home since adopting them from R2TR. They are sweet, fun little poodles who bonded beautifully with our family and our other dogs. We absolutely adore them.",
      name: "Megan Elizabeth",
      detail: "Adopted Fig & Coal",
      initials: "M",
      img: "assets/fig_coal.jpeg",
      imgPos: "center 42%",
      alt: "Fig and Coal, poodles adopted from Run 2 The Rescue",
      rotate: -1.8,
    },
    {
      quote: "We had a wonderful, stress-free experience adopting our amazing dog, Dash, from Run 2 The Rescue. Brandy and Bonnie know every dog in their care so well, and they helped us choose the perfect one for our family. The work they do to give these resilient dogs a second chance after a life of abuse is incredible. We'll be adopting our next family member from them!",
      name: "Laurie Eisenberg",
      detail: "Adopted Dash",
      initials: "L",
      img: "assets/Dash.jpg",
      imgPos: "center 33%",
      alt: "Dash, a yellow Labrador adopted from Run 2 The Rescue",
      rotate: 1.4,
    },
    {
      quote: "Choosing to adopt from Run 2 The Rescue was one of the best decisions we've ever made. Brandy, Bonnie, and their team champion the dogs who need it most, from dog meat trade survivors to those with special needs. For them it's never just about finding a home, it's about finding the right one. We're forever grateful they brought Romeo, Olive, and Junebug into our lives.",
      name: "Greg Carrico",
      detail: "Adopted Romeo, Olive & Junebug",
      initials: "G",
      img: "assets/Romeo_Olive.jpeg",
      imgPos: "center 45%",
      alt: "Romeo and Olive, adopted from Run 2 The Rescue",
      rotate: -1.2,
    },
    {
      quote: "Adopting Audrey was the best thing our family has done in a very long time. She fills our days with laughter, love, and joy, and somehow arrived with no bad habits whatsoever. The team made the whole experience honest, kind, and wonderful. We absolutely hit the canine jackpot!",
      name: "Katherine",
      detail: "Adopted Audrey “Dog Hepburn”",
      initials: "K",
      img: "assets/Audrey1.JPG",
      imgPos: "58% 26%",
      alt: "Audrey, a doodle adopted from Run 2 The Rescue",
      rotate: 1.6,
    },
    // Future verbatims drop in here.
  ];
  return (
    <section className="section-light" style={{ padding: "52px 0", position: "relative", overflow: "hidden" }}>
      <Paw className="paw-light" style={{ top: 44, left: "5%", width: 42, height: 42 }} />
      <Paw className="paw-light" style={{ bottom: 40, right: "6%", width: 50, height: 50 }} />
      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <div style={{ textAlign: "center", maxWidth: 640, margin: "0 auto 36px" }}>
          <div className="eyebrow" style={{ justifyContent: "center", marginBottom: 14, color: "var(--ink-3)" }}>
            <span style={{ color: "var(--purple-500)" }}><PawGlyph /></span>From families who said yes
          </div>
          <h2 className="display" style={{ fontSize: "clamp(32px, 4.4vw, 56px)", margin: 0, color: "var(--ink)" }}>
            A second chance, in their own words
          </h2>
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 18, justifyContent: "center", alignItems: "stretch" }}>
          {quotes.map((q, i) => (
            <figure key={i} className="reveal" style={{
              position: "relative", flex: "1 1 230px", maxWidth: 300, margin: 0,
              display: "flex", flexDirection: "column",
              background: "var(--lav-200)", borderRadius: 20, padding: "28px 22px 22px",
              transform: `rotate(${q.rotate * 0.45}deg)`,
              boxShadow: "0 2px 6px oklch(0.4 0.06 310 / 0.07), 0 12px 28px oklch(0.4 0.06 310 / 0.10)",
            }}>
              <span aria-hidden="true" className="display" style={{
                position: "absolute", top: 6, left: 18, fontSize: 64, lineHeight: 1,
                fontWeight: 800, color: "var(--purple-400)", opacity: 0.3,
              }}>&ldquo;</span>
              <span aria-hidden="true" style={{
                position: "absolute", left: 34, bottom: -9, width: 19, height: 19,
                background: "var(--lav-200)", transform: "rotate(45deg)", borderRadius: 4,
              }} />
              <blockquote style={{
                position: "relative", fontFamily: "var(--font-display)", fontWeight: 500,
                fontSize: "clamp(14px, 1.15vw, 16px)", lineHeight: 1.45, color: "var(--ink)",
                margin: "20px 0 18px", flex: 1,
              }}>{q.quote}</blockquote>
              <figcaption style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <TestimonialAvatar img={q.img} initials={q.initials} alt={q.alt} imgPos={q.imgPos} />
                <span style={{ display: "flex", flexDirection: "column", gap: 1, textAlign: "left" }}>
                  <span style={{ fontWeight: 600, fontSize: 13, color: "var(--ink)" }}>{q.name}</span>
                  <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 10.5, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--purple-600)" }}>{q.detail}</span>
                </span>
              </figcaption>
            </figure>
          ))}
          <button type="button" onClick={() => setStoryOpen(true)} className="reveal" style={{
            flex: "1 1 230px", maxWidth: 300, boxSizing: "border-box",
            border: "2px dashed var(--purple-400)", borderRadius: 20, background: "transparent",
            padding: "26px 22px", transform: "rotate(0.7deg)", cursor: "pointer",
            font: "inherit", textAlign: "left",
            display: "flex", flexDirection: "column", justifyContent: "center", gap: 8,
            transition: "background .2s ease, border-color .2s ease",
          }}
            onMouseEnter={e => { e.currentTarget.style.background = "oklch(0.92 0.05 305 / 0.45)"; }}
            onMouseLeave={e => { e.currentTarget.style.background = "transparent"; }}
          >
            <span aria-hidden="true" className="display" style={{ fontSize: 44, lineHeight: 0.6, color: "var(--purple-400)" }}>&ldquo;</span>
            <span className="display" style={{ fontSize: "clamp(17px, 1.4vw, 20px)", color: "var(--ink)" }}>
              Adopted from R2TR?
            </span>
            <span style={{ fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.5 }}>
              We'd love to add your story here. Tell us how your survivor is settling in.
            </span>
            <span style={{ marginTop: 2, fontWeight: 600, fontSize: 13, color: "var(--purple-600)" }}>Share your story →</span>
          </button>
        </div>
      </div>
      <ShareStoryModal open={storyOpen} onClose={() => setStoryOpen(false)} />
    </section>
  );
}

/* Homepage teaser linking to the standalone Reality page */
function RealityTeaser() {
  return (
    <section className="section-dark" style={{ padding: "52px 0", position: "relative", overflow: "hidden" }}>
      <Paw className="paw-dark" style={{ top: 28, left: "6%", width: 40, height: 40 }} />
      <Paw className="paw-dark" style={{ bottom: 28, right: "7%", width: 44, height: 44 }} />
      <div className="wrap" style={{ maxWidth: 700, margin: "0 auto", textAlign: "center", position: "relative", zIndex: 1 }}>
        <div className="eyebrow" style={{ justifyContent: "center", marginBottom: 16 }}>
          <span style={{ color: "var(--purple-400)" }}><PawGlyph /></span>Before the rescue
        </div>
        <h2 className="display" style={{ fontSize: "clamp(30px, 3.8vw, 50px)", margin: "0 0 14px", color: "#fff" }}>
          Every survivor comes from somewhere
        </h2>
        <p style={{ fontSize: 15, lineHeight: 1.65, color: "var(--on-dark-2)", margin: "0 auto 26px", maxWidth: 520 }}>
          The dogs we rescue come from horrible circumstances and brutal conditions. It's hard to look at. We put it behind a notice so you choose when to see it.
        </p>
        <a href="/reality" className="btn btn-outline-light">See the reality they face <span className="arrow">→</span></a>
      </div>
    </section>
  );
}

Object.assign(window, { Press, Mission, Survivors, Journey, Feature, RealityTeaser, Testimonials, Ways, Voices, Team, FinalCTA, Footer });
