/* global React, Button, Reveal, Icon, FooterCTA, Counter */

/* ============================================================
   Outreach
   ============================================================ */
const CHAPTER_QUESTIONS = [
  { key: "q1", label: "Which school do you want to open a chapter at?", hint: "Include school name, city, and state." },
  { key: "q2", label: "Why does your school need a Willow chapter?", hint: "Describe the substance abuse landscape — 3–4 sentences." },
  { key: "q3", label: "How will you recruit members and build the chapter?", hint: "Your plan for getting students involved — 3–4 sentences." },
];

function OutreachForm({ activeTab = "ambassador", activeTabKey = 0 }) {
  const TABS = [
    { id: "ambassador",  label: "Become an Ambassador" },
    { id: "chapter",     label: "Open a Chapter"       },
    { id: "social",      label: "Social Media Officer"  },
  ];
  const [tab,    setTab]    = React.useState(activeTab);
  const [form,   setForm]   = React.useState({ name: "", email: "", city: "", school: "", q1: "", q2: "", q3: "" });
  const [status, setStatus] = React.useState("idle");
  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));
  React.useEffect(() => {
    setTab(activeTab);
    setStatus("idle");
  }, [activeTab, activeTabKey]);

  function getQuestions(t) {
    if (t === "social")    return SM_QUESTIONS;
    if (t === "chapter")   return CHAPTER_QUESTIONS;
    return AMB_QUESTIONS;
  }

  async function submit() {
    const baseOk = form.name && form.email && form.city && form.school;
    const answerOk = form.q1 && form.q2 && form.q3;
    if (!baseOk || !answerOk) { setStatus("error"); return; }
    setStatus("sending");
    const roleLabel = tab === "ambassador" ? "Ambassador" : tab === "chapter" ? "Chapter Opening" : "Social Media Officer";
    const qs = getQuestions(tab);
    try {
      const body = {
        access_key: "ec691fd2-287c-49c4-9c7a-5a1852c47f0a",
        subject: `[Willow] ${roleLabel} Application — ${form.name}`,
        from_name: form.name, email: form.email, city: form.city, school: form.school,
        [qs[0].label]: form.q1,
        [qs[1].label]: form.q2,
        [qs[2].label]: form.q3,
      };
      const res = await fetch("https://api.web3forms.com/submit", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
      if (!res.ok) throw new Error();
      setStatus("success");
      setForm({ name: "", email: "", city: "", school: "", q1: "", q2: "", q3: "" });
    } catch { setStatus("error"); }
  }

  const questions = getQuestions(tab);

  return (
    <section id="outreach-form" style={{ background: "var(--sage-deep)", padding: "clamp(64px,9vw,112px) 0" }}>
      <div className="container" style={{ maxWidth: 780 }}>
        <Reveal className="section-head">
          <span className="eyebrow" style={{ color: "rgba(241,237,228,0.45)" }}>Apply</span>
          <h2 style={{ color: "var(--bg)" }}>Be part of an organization<br/><span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", color: "var(--sage-soft)" }}>across 5 states & 3 countries.</span></h2>
          <p style={{ color: "rgba(241,237,228,0.6)", fontSize: 16, lineHeight: 1.65, marginTop: 8 }}>We onboard weekly. You'll hear back within 72 hours.</p>
        </Reveal>

        {/* Tab switcher */}
        <div style={{ display: "flex", gap: 8, marginBottom: 28, flexWrap: "wrap" }}>
          {TABS.map(t => (
            <button key={t.id} onClick={() => { setTab(t.id); setStatus("idle"); }}
              style={{ padding: "11px 20px", borderRadius: "var(--r-pill)", border: "none", cursor: "pointer", fontWeight: 500, fontSize: 14, transition: "all 200ms",
                background: tab === t.id ? "var(--bg)" : "rgba(241,237,228,0.12)",
                color: tab === t.id ? "var(--ink)" : "rgba(241,237,228,0.7)" }}>
              {t.label}
            </button>
          ))}
        </div>

        <Reveal>
          {status === "success" ? (
            <div className="card" style={{ padding: "clamp(28px,4vw,48px)", textAlign: "center", display: "flex", flexDirection: "column", gap: 16, alignItems: "center" }}>
              <span style={{ fontSize: 40 }}>🌿</span>
              <h3 style={{ fontSize: 24 }}>Application sent.</h3>
              <p style={{ color: "var(--ink-soft)", maxWidth: "38ch" }}>We'll reply within 72 hours. Keep an eye on your inbox.</p>
              <Button variant="ghost" onClick={() => setStatus("idle")}>Submit another</Button>
            </div>
          ) : (
            <div className="card" style={{ padding: "clamp(28px,4vw,48px)", display: "flex", flexDirection: "column", gap: 18 }}>
              {/* Base fields */}
              <div className="grid-2" style={{ gap: 14 }}>
                <div className="form-row"><label>Full name *</label><input value={form.name} onChange={e => update("name", e.target.value)} placeholder="Your name"/></div>
                <div className="form-row"><label>Email *</label><input type="email" value={form.email} onChange={e => update("email", e.target.value)} placeholder="you@school.edu"/></div>
                <div className="form-row"><label>City *</label><input value={form.city} onChange={e => update("city", e.target.value)} placeholder="Dallas, TX"/></div>
                <div className="form-row"><label>High School *</label><input value={form.school} onChange={e => update("school", e.target.value)} placeholder="Your school"/></div>
              </div>

              {/* Role-specific questions — always 3 */}
              {questions.map(q => (
                <div key={q.key} className="form-row">
                  <label>{q.label} *<span style={{ display: "block", fontWeight: 400, textTransform: "none", letterSpacing: 0, color: "var(--ink-mute)", fontSize: 11, marginTop: 2 }}>{q.hint}</span></label>
                  <textarea rows={3} value={form[q.key]} onChange={e => update(q.key, e.target.value)} placeholder="Write 3–4 sentences…"/>
                </div>
              ))}

              {status === "error" && <p style={{ color: "var(--danger)", fontSize: 14 }}>Please fill in all required fields.</p>}
              <div style={{ display: "flex", justifyContent: "flex-end" }}>
                <Button variant="primary" size="lg" withArrow onClick={submit} disabled={status === "sending"}>
                  {status === "sending" ? "Sending…" : "Send application"}
                </Button>
              </div>
            </div>
          )}
        </Reveal>
      </div>
    </section>
  );
}

function Outreach({ go }) {
  const [activeTabRequest, setActiveTabRequest] = React.useState({ tab: "ambassador", key: 0 });
  const applyForSocial = () => {
    setActiveTabRequest(r => ({ tab: "social", key: r.key + 1 }));
    requestAnimationFrame(() => document.getElementById("outreach-form")?.scrollIntoView({ behavior: "smooth", block: "start" }));
  };

  return (
    <div className="page-wrap">
      <header className="page-head">
        <div className="container">
          <Reveal>
            <span className="eyebrow">Contribute</span>
            <h1 style={{ marginTop: 16 }}>Be part of something<br/><span className="ital">bigger than your school.</span></h1>
            <p className="lede" style={{ marginTop: 16 }}>
              We're active across 5 states and 3 countries. Pick a role and apply — we onboard weekly.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
              <Button variant="primary" withArrow onClick={applyForSocial}>Apply for Social Media Officer</Button>
            </div>
          </Reveal>
        </div>
      </header>

      <OutreachForm activeTab={activeTabRequest.tab} activeTabKey={activeTabRequest.key} />
    </div>
  );
}

/* ============================================================
   Community — About / Our Story
   ============================================================ */
const ABOUT_SLIDES = [
  { img: "images/onboarding-1.jpg", caption: "Our chapter kickoff — 65 members, one room, one mission." },
  { img: "images/meeting-1.png",    caption: "Law team presenting at the Frisco City Council." },
  { img: "images/fundraiser.png",   caption: "$870+ total raised selling cookies across neighborhoods." },
  { img: "images/onboarding-2.jpg", caption: "Students from across the district showing up every week." },
  { img: "images/meeting-2.png",    caption: "CRAFFT screening tool — pioneered by our research partners at Harvard." },
  { img: "images/onboarding-3.jpg", caption: "Every department building something real, on top of school." },
];

function AboutCarousel() {
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % ABOUT_SLIDES.length), 4500);
    return () => clearInterval(t);
  }, []);
  const prev = () => setIdx(i => (i - 1 + ABOUT_SLIDES.length) % ABOUT_SLIDES.length);
  const next = () => setIdx(i => (i + 1) % ABOUT_SLIDES.length);
  const slide = ABOUT_SLIDES[idx];
  return (
    <div style={{ borderRadius: "var(--r-card-lg)", overflow: "hidden", boxShadow: "var(--shadow-3)", background: "var(--sage-deep)", position: "relative" }}>
      {/* Image */}
      <div style={{ aspectRatio: "4/3", overflow: "hidden", position: "relative" }}>
        {ABOUT_SLIDES.map((s, i) => (
          <img key={i} src={s.img} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 60%", opacity: i === idx ? 1 : 0, transition: "opacity 0.8s ease" }}/>
        ))}
        {/* Arrow buttons */}
        {[{fn: prev, side: "left", icon: "‹"}, {fn: next, side: "right", icon: "›"}].map(({fn, side, icon}) => (
          <button key={side} onClick={fn} style={{ position: "absolute", top: "50%", [side]: 12, transform: "translateY(-50%)", width: 36, height: 36, borderRadius: 999, background: "rgba(15,20,16,0.5)", border: "none", color: "#fff", fontSize: 22, cursor: "pointer", display: "grid", placeItems: "center", backdropFilter: "blur(4px)" }}>
            {icon}
          </button>
        ))}
      </div>
      {/* Caption + dots */}
      <div style={{ padding: "16px 20px 18px" }}>
        <p style={{ color: "rgba(241,237,228,0.8)", fontSize: 13.5, lineHeight: 1.6, margin: 0, minHeight: 40 }}>{slide.caption}</p>
        <div style={{ display: "flex", gap: 6, marginTop: 12 }}>
          {ABOUT_SLIDES.map((_, i) => (
            <button key={i} onClick={() => setIdx(i)} style={{ width: i === idx ? 22 : 6, height: 6, borderRadius: 999, border: "none", cursor: "pointer", padding: 0, background: i === idx ? "var(--sage-soft)" : "rgba(241,237,228,0.25)", transition: "all 0.3s ease" }}/>
          ))}
        </div>
      </div>
    </div>
  );
}

function Community({ go }) {
  return (
    <div className="page-wrap">
      <header className="page-head" style={{ background: "var(--sage-deep)", color: "var(--bg)" }}>
        <div className="container">
          <Reveal>
            <span className="eyebrow" style={{ color: "rgba(241,237,228,0.5)" }}>About us</span>
            <h1 style={{ marginTop: 16, color: "var(--bg)" }}>
              A movement, not<br/><span className="ital" style={{ color: "var(--sage-soft)" }}>a charity.</span>
            </h1>
            <p className="lede" style={{ marginTop: 16, color: "rgba(241,237,228,0.72)" }}>
              Students who refused to wait for someone else to fix it. 65 members. 4 departments. 7 universities. And we're just getting started.
            </p>
          </Reveal>
        </div>
      </header>

      <section>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 300px), 1fr))", gap: "clamp(48px,6vw,80px)", alignItems: "center" }}>
            <Reveal>
              <span className="eyebrow">Who we are</span>
              <h2 style={{ marginTop: 16 }}>Students who refused<br/><span className="ital">to wait.</span></h2>
              <p style={{ color: "var(--ink-soft)", fontSize: 17, lineHeight: 1.75, marginTop: 24 }}>
                Willow is a student-led organization fighting drug abuse amongst teens. We have 65 members across 4 departments — Research, Engineering, Hospitals, and Law — partnered with 7 universities including Harvard, USC, Yale, Johns Hopkins, and Rutgers.
              </p>
              <p style={{ color: "var(--ink-soft)", fontSize: 17, lineHeight: 1.75, marginTop: 16 }}>
                We operate across 5 states and 3 countries — with chapters, ambassadors, and advocates at every level of government and healthcare.
              </p>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 32 }}>
                {[
                  { stat: "65", label: "Members" },
                  { stat: "7",  label: "Universities" },
                  { stat: "3",  label: "Research papers" },
                  { stat: "4",  label: "Departments" },
                ].map((s, i) => (
                  <div key={i} style={{ background: "var(--sage-tint)", borderRadius: "var(--r-card-sm)", padding: "16px 20px" }}>
                    <div style={{ fontSize: "clamp(32px,4vw,48px)", fontWeight: 500, letterSpacing: "-0.04em", color: "var(--sage)", lineHeight: 1 }}>{s.stat}</div>
                    <div style={{ fontSize: 12, color: "var(--ink-soft)", fontFamily: "var(--f-mono)", letterSpacing: "0.06em", textTransform: "uppercase", marginTop: 4 }}>{s.label}</div>
                  </div>
                ))}
              </div>
            </Reveal>
            <Reveal>
              <AboutCarousel />
            </Reveal>
          </div>
        </div>
      </section>

      <section style={{ background: "var(--bg-2)" }}>
        <div className="container">
          <Reveal className="section-head">
            <span className="eyebrow">Our values</span>
            <h2>What we <span className="ital">stand for.</span></h2>
          </Reveal>
          <Reveal stagger className="grid-3">
            {[
              { title: "Student-led, always.", desc: "Every decision is made by students. We don't wait for adults to fix things — we build the systems ourselves and invite adults to support us." },
              { title: "Evidence over emotion.", desc: "We build everything on research. Every program, every campaign, every policy ask is backed by data from the world's leading experts in adolescent substance abuse." },
              { title: "Local first, national always.", desc: "Change starts at the school level. We build chapters, train ambassadors, and engage local governments — then scale what works across states and countries." },
            ].map((v, i) => (
              <div key={i} className="card" style={{ padding: "clamp(24px,3vw,36px)", display: "flex", flexDirection: "column", gap: 14, borderTop: "4px solid var(--sage)" }}>
                <h3 style={{ fontSize: "clamp(18px,2vw,22px)" }}>{v.title}</h3>
                <p style={{ color: "var(--ink-soft)", fontSize: 15, lineHeight: 1.65 }}>{v.desc}</p>
              </div>
            ))}
          </Reveal>
        </div>
      </section>

      <FooterCTA go={go}
        title={<>Meet the <span className="ital">team.</span></>}
        sub="13 student officers building something real. See who they are."
        buttons={[
          { label: "Meet the officers", variant: "primary", page: "officers", withArrow: true },
          { label: "Meet the professors", variant: "ghost", page: "research" },
        ]}
      />
    </div>
  );
}

/* ============================================================
   Donate
   ============================================================ */
const AMOUNTS = [
  { v: 25,   l: "1 student" },
  { v: 100,  l: "1 workshop" },
  { v: 500,  l: "1 chapter" },
  { v: 2500, l: "1 campaign" },
];

function Donate({ go }) {
  const [amount, setAmount] = React.useState(100);
  const [customAmount, setCustomAmount] = React.useState("");
  const [freq,   setFreq]   = React.useState("Monthly");
  const goalRaised = 84320, goal = 250000;
  const pct = Math.round((goalRaised / goal) * 100);
  const impact = {
    25:   "<b>$25</b> covers materials for one student in a peer-led workshop.",
    100:  "<b>$100</b> funds one full prevention workshop reaching ~20 students.",
    500:  "<b>$500</b> supplies a new chapter for its first semester.",
    2500: "<b>$2,500</b> bankrolls a complete state-level advocacy campaign.",
  };
  const choosePreset = (value) => {
    setAmount(value);
    setCustomAmount("");
  };
  const chooseCustom = (value) => {
    const clean = value.replace(/[^\d]/g, "").slice(0, 6);
    setCustomAmount(clean);
    setAmount(Number(clean) || 0);
  };
  const amountLabel = amount > 0 ? `$${amount.toLocaleString()}` : "";
  const impactText = impact[amount] || (amount > 0
    ? `<b>${amountLabel}</b> will go directly toward ambassador training, research, and chapter expansion.`
    : "Enter a custom amount to see your donation total.");
  return (
    <div className="page-wrap">
      <header className="page-head">
        <div className="container">
          <Reveal>
            <span className="eyebrow">Donate</span>
            <h1 style={{ marginTop: 16 }}>Support the <span className="ital">cause.</span></h1>
            <p className="lede" style={{ marginTop: 16, maxWidth: "44ch" }}>
              Every dollar funds ambassador training, research, and chapter expansion.
              Your contribution creates real, lasting change.
            </p>
          </Reveal>
        </div>
      </header>

      <section className="tight" style={{ paddingTop: 0 }}>
        <div className="container" style={{ maxWidth: 1080 }}>
          <div className="grid-2" style={{ gap: 32, alignItems: "start", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 300px), 1fr))" }}>
            <Reveal>
              <div className="donate-card">
                <div style={{ display: "flex", gap: 8 }}>
                  {["Monthly","One-time"].map(f => (
                    <button key={f} onClick={() => setFreq(f)} style={{ flex: 1, padding: "12px 16px", borderRadius: "var(--r-pill)", background: freq === f ? "var(--ink)" : "var(--bg-2)", color: freq === f ? "var(--bg)" : "var(--ink)", fontSize: 14, fontWeight: 500, transition: "all 160ms" }}>{f}</button>
                  ))}
                </div>
                <div>
                  <label className="eyebrow" style={{ marginBottom: 12, display: "block" }}>Choose an amount</label>
                  <div className="amounts">
                    {AMOUNTS.map(a => (
                      <button key={a.v} className={`amount-btn ${amount === a.v && !customAmount ? "active" : ""}`} onClick={() => choosePreset(a.v)}>
                        ${a.v.toLocaleString()}<span className="label">{a.l}</span>
                      </button>
                    ))}
                  </div>
                  <label className={`custom-amount ${customAmount ? "active" : ""}`}>
                    <span>$</span>
                    <input
                      inputMode="numeric"
                      pattern="[0-9]*"
                      value={customAmount}
                      onChange={e => chooseCustom(e.target.value)}
                      placeholder="Custom amount"
                      aria-label="Custom donation amount"
                    />
                  </label>
                </div>
                <div className="donate-impact">
                  <div className="icon"><Icon name="leaf" size={16}/></div>
                  <div className="txt" dangerouslySetInnerHTML={{ __html: impactText }}/>
                </div>
                <Button variant="primary" size="lg" withArrow disabled={amount <= 0} style={{ width: "100%", justifyContent: "center", opacity: amount > 0 ? 1 : 0.55 }}>
                  {amount > 0 ? (freq === "Monthly" ? `Donate ${amountLabel}/month` : `Donate ${amountLabel}`) : "Enter donation amount"}
                </Button>
                <div style={{ display: "flex", gap: 18, fontSize: 12.5, color: "var(--ink-mute)", flexWrap: "wrap", justifyContent: "center", paddingTop: 4 }}>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="shield" size={14}/> Secured</span>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="check" size={14}/> 100% to programs</span>
                </div>
              </div>
            </Reveal>
            <Reveal delay={120} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <div className="progress-block">
                <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-mute)", marginBottom: 8 }}>Every dollar goes directly to programs</div>
              </div>
              <div className="card" style={{ padding: 24, display: "flex", flexDirection: "column", gap: 14 }}>
                <span className="eyebrow no-dot" style={{ color: "var(--sage)" }}>What your money funds</span>
                {[{ l: "Ambassador training & materials", v: 55 }, { l: "Research & academic mentors", v: 25 }, { l: "Chapter expansion", v: 15 }, { l: "Operating overhead", v: 5 }].map((x, i) => (
                  <div key={i} className="bar-row">
                    <div className="bar-head"><span className="l">{x.l}</span><span className="v">{x.v}%</span></div>
                    <div className="bar"><div className="fill" style={{ width: `${x.v}%` }}/></div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ============================================================
   Get Help
   ============================================================ */
const HELPLINES = [
  { tag: "24/7 · FREE · CONFIDENTIAL", name: "SAMHSA Helpline",    desc: "National substance abuse & mental health line", contact: "1-800-662-4357", type: "phone" },
  { tag: "24/7",                        name: "988 Crisis Lifeline", desc: "Suicide & crisis support",                      contact: "988",            type: "phone" },
  { tag: "24/7 · FREE",                 name: "Crisis Text Line",    desc: "Text-based crisis counseling",                  contact: "Text HOME to 741741", type: "text" },
  { tag: "Daily meetings",              name: "Narcotics Anonymous", desc: "Recovery meetings and support",                 contact: "1-818-773-9999",  type: "phone" },
];

function GetHelp({ go }) {
  const ROLES = ["Ambassador", "Open a Chapter", "Social Media Officer"];
  const [form, setForm] = React.useState({ name: "", email: "", city: "", school: "", q1: "", q2: "", q3: "", role: "Ambassador" });
  const [status, setStatus] = React.useState("idle");
  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const selectRoleAndScroll = (role) => {
    update("role", role);
    setStatus("idle");
    requestAnimationFrame(() => document.getElementById("join-application")?.scrollIntoView({ behavior: "smooth", block: "start" }));
  };

  function getHelpQuestions(role) {
    if (role === "Social Media Officer") return SM_QUESTIONS;
    if (role === "Open a Chapter")       return CHAPTER_QUESTIONS;
    return AMB_QUESTIONS;
  }

  async function submit() {
    const baseOk = form.name && form.email && form.city && form.school;
    const answerOk = form.q1 && form.q2 && form.q3;
    if (!baseOk || !answerOk) { setStatus("error"); return; }
    setStatus("sending");
    const qs = getHelpQuestions(form.role);
    try {
      const body = {
        access_key: "ec691fd2-287c-49c4-9c7a-5a1852c47f0a",
        subject: `[Willow] ${form.role} Application — ${form.name}`,
        from_name: form.name, email: form.email, city: form.city, school: form.school,
        [qs[0].label]: form.q1,
        [qs[1].label]: form.q2,
        [qs[2].label]: form.q3,
      };
      const res = await fetch("https://api.web3forms.com/submit", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
      if (!res.ok) throw new Error();
      setStatus("success");
      setForm({ name: "", email: "", city: "", school: "", q1: "", q2: "", q3: "", role: form.role });
    } catch { setStatus("error"); }
  }

  return (
    <div className="page-wrap">
      <header className="page-head">
        <div className="container">
          <Reveal>
            <span className="eyebrow">Join the movement</span>
            <h1 style={{ marginTop: 16 }}>Be part of an organization<br/><span className="ital">across 3 countries & 5 states.</span></h1>
            <p className="lede" style={{ marginTop: 16 }}>
              We onboard new members weekly. Most people are running something real within a month.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
              <Button variant="primary" withArrow onClick={() => selectRoleAndScroll("Social Media Officer")}>Apply for Social Media Officer</Button>
            </div>
          </Reveal>
        </div>
      </header>

      <section id="join-application" style={{ background: "var(--bg-2)", paddingTop: 0 }}>
        <div className="container" style={{ maxWidth: 880 }}>
          <Reveal>
            {status === "success" ? (
              <div className="card" style={{ padding: "clamp(28px,4vw,48px)", textAlign: "center", display: "flex", flexDirection: "column", gap: 16, alignItems: "center" }}>
                <span style={{ fontSize: 40 }}>🌿</span>
                <h3 style={{ fontSize: 24 }}>Application sent.</h3>
                <p style={{ color: "var(--ink-soft)", maxWidth: "38ch" }}>We'll reply within 72 hours. Keep an eye on your inbox.</p>
                <Button variant="ghost" onClick={() => setStatus("idle")}>Submit another</Button>
              </div>
            ) : (
              <div className="card" style={{ padding: "clamp(28px,4vw,48px)", display: "flex", flexDirection: "column", gap: 20 }}>
                <div>
                  <label style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ink-mute)", display: "block", marginBottom: 10 }}>I want to</label>
                  <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                    {ROLES.map(r => (
                      <button key={r} onClick={() => update("role", r)} style={{ flex: 1, minWidth: 120, padding: "11px 14px", borderRadius: "var(--r-pill)", background: form.role === r ? "var(--ink)" : "var(--bg-2)", color: form.role === r ? "var(--bg)" : "var(--ink)", fontSize: 13, fontWeight: 500, border: "none", cursor: "pointer", transition: "all 160ms" }}>
                        {r}
                      </button>
                    ))}
                  </div>
                </div>
                <div className="grid-2" style={{ gap: 14 }}>
                  <div className="form-row"><label>Full name *</label><input value={form.name} onChange={e => update("name", e.target.value)} placeholder="Your name"/></div>
                  <div className="form-row"><label>Email *</label><input type="email" value={form.email} onChange={e => update("email", e.target.value)} placeholder="you@school.edu"/></div>
                  <div className="form-row"><label>City *</label><input value={form.city} onChange={e => update("city", e.target.value)} placeholder="Dallas, TX"/></div>
                  <div className="form-row"><label>High School *</label><input value={form.school} onChange={e => update("school", e.target.value)} placeholder="Your school"/></div>
                </div>
                {getHelpQuestions(form.role).map(q => (
                  <div key={q.key} className="form-row">
                    <label>{q.label} *<span style={{ display: "block", fontWeight: 400, textTransform: "none", letterSpacing: 0, color: "var(--ink-mute)", fontSize: 11, marginTop: 2 }}>{q.hint}</span></label>
                    <textarea rows={3} value={form[q.key]} onChange={e => update(q.key, e.target.value)} placeholder="Write 3–4 sentences…"/>
                  </div>
                ))}
                {status === "error" && (
                  <p style={{ color: "var(--danger)", fontSize: 14 }}>Please fill in all required fields.</p>
                )}
                <div style={{ display: "flex", justifyContent: "flex-end" }}>
                  <Button variant="sage" size="lg" withArrow onClick={submit} disabled={status === "sending"}>
                    {status === "sending" ? "Sending…" : "Send application"}
                  </Button>
                </div>
              </div>
            )}
          </Reveal>
        </div>
      </section>

      {/* ── HELPLINES — at the bottom ── */}
      <section>
        <div className="container">
          <Reveal className="section-head">
            <span className="eyebrow">Get help — 24/7 · Free · Confidential</span>
            <h2>You don't have to <span className="ital">face this alone.</span></h2>
            <p className="lede">If you or someone you know is struggling, these resources are free and available right now.</p>
          </Reveal>
          <Reveal stagger className="sol-list">
            {HELPLINES.map((h, i) => (
              <div className="card" key={i} style={{ padding: "24px 28px", display: "flex", flexWrap: "wrap", alignItems: "center", gap: 16, border: "1px solid var(--line)" }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--sage)", marginBottom: 6 }}>{h.tag}</div>
                  <h3 style={{ fontSize: 20 }}>{h.name}</h3>
                  <p style={{ color: "var(--ink-soft)", fontSize: 14.5, marginTop: 4 }}>{h.desc}</p>
                </div>
                <a href={h.type === "phone" ? `tel:${h.contact.replace(/\D/g,"")}` : "#"}
                   style={{ fontFamily: "var(--f-mono)", fontSize: 16, fontWeight: 500, color: "var(--sage)", letterSpacing: "-0.01em", textDecoration: "none", whiteSpace: "nowrap" }}>
                  {h.contact}
                </a>
              </div>
            ))}
          </Reveal>
        </div>
      </section>
    </div>
  );
}

window.Outreach  = Outreach;
window.Community = Community;
window.Donate    = Donate;
window.GetHelp   = GetHelp;