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

/* ============================================================
   Our Work
   ============================================================ */
const cell = (bg, extra) => ({
  borderRadius: "var(--r-card-lg)", overflow: "hidden", position: "relative",
  background: bg, ...extra,
});
const pad = { padding: "clamp(20px,2.5vw,32px)" };
const tag = { fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", display: "block", marginBottom: 8 };

const IGFrame = ({ shortcode }) => (
  <iframe
    src={`https://www.instagram.com/reel/${shortcode}/embed/`}
    style={{ width: "100%", height: "100%", border: "none", display: "block" }}
    allowFullScreen scrolling="no" loading="lazy"
  />
);

function OurWork({ go }) {
  return (
    <div className="page-wrap">
      <header className="page-head">
        <div className="container">
          <Reveal>
            <span className="eyebrow">Our work</span>
            <h1 style={{ marginTop: 16 }}>Built by students.<br/><span className="ital">Felt by communities.</span></h1>
            <p className="lede" style={{ marginTop: 16 }}>Research, engineering, hospitals, law — four branches, one mission.</p>
          </Reveal>
        </div>
      </header>

      <section style={{ paddingTop: 0 }}>
        <div className="container">

          {/* ── BENTO GRID ── */}
          <Reveal>
            <div className="bento-grid">

              {/* Reel 1 — col 1, rows 1-2 (tall) */}
              <div style={{ ...cell("var(--sage-deep)"), gridColumn: "1", gridRow: "1 / 3", display: "flex", flexDirection: "column" }}>
                <div style={{ ...pad, paddingBottom: 12 }}>
                  <span style={{ ...tag, color: "rgba(241,237,228,0.4)" }}>@willowinitiative</span>
                  <div style={{ fontWeight: 500, fontSize: 15, color: "var(--bg)", letterSpacing: "-0.02em", lineHeight: 1.3 }}>See us in action.</div>
                </div>
                <div style={{ flex: 1, minHeight: 0 }}>
                  <IGFrame shortcode="DUEG5ehEXXg" />
                </div>
              </div>

              {/* Onboarding — cols 2-3, row 1 */}
              <div style={{ ...cell("var(--sage-tint)"), gridColumn: "2 / 4", gridRow: "1", display: "flex", gap: 0, flexDirection: "column", justifyContent: "space-between" }}>
                <div style={{ ...pad, paddingBottom: 12 }}>
                  <span style={{ ...tag, color: "var(--sage)" }}>Chapter Kickoff</span>
                  <div style={{ fontWeight: 500, fontSize: "clamp(17px,2vw,22px)", letterSpacing: "-0.025em", lineHeight: 1.2 }}>30+ students. One room. One mission.</div>
                  <p style={{ color: "var(--ink-soft)", fontSize: 13, lineHeight: 1.6, marginTop: 8 }}>Our onboarding brought together students from across the district — every department presenting their plans for the year.</p>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 6, padding: "0 16px 16px" }}>
                  {["onboarding-1.jpg","onboarding-2.jpg","onboarding-3.jpg"].map((img, i) => (
                    <div key={i} style={{ borderRadius: 10, overflow: "hidden", aspectRatio: "4/3" }}>
                      <img src={`images/${img}`} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 65%" }}/>
                    </div>
                  ))}
                </div>
              </div>

              {/* Fundraiser — col 4, row 1 */}
              <div style={{ ...cell("var(--surface)"), gridColumn: "4", gridRow: "1", border: "1px solid var(--line)", display: "flex", flexDirection: "column" }}>
                <div style={{ flex: "0 0 140px", overflow: "hidden" }}>
                  <img src="images/fundraiser.png" alt="Fundraiser" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 40%" }}/>
                </div>
                <div style={{ ...pad, flex: 1 }}>
                  <span style={{ ...tag, color: "var(--sage)" }}>Fundraiser</span>
                  <div style={{ fontWeight: 500, fontSize: 17, letterSpacing: "-0.02em", lineHeight: 1.2 }}>$870+<br/>total raised.</div>
                  <p style={{ color: "var(--ink-soft)", fontSize: 12.5, lineHeight: 1.6, marginTop: 8 }}>Door to door across neighborhoods, selling cookies for the cause.</p>
                </div>
              </div>

              {/* City Council — cols 2-3, row 2 (CENTER) */}
              <div style={{ ...cell("var(--sage-deep)"), gridColumn: "2 / 4", gridRow: "2", display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
                <div style={{ position: "absolute", inset: 0 }}>
                  <img src="images/meeting-1.png" alt="City council" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 55%", opacity: 0.35 }}/>
                  <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(44,61,46,0.98) 30%, rgba(44,61,46,0.4) 100%)" }}/>
                </div>
                <div style={{ ...pad, position: "relative", zIndex: 1 }}>
                  <span style={{ ...tag, color: "var(--sage-soft)" }}>Law · Frisco City Council</span>
                  <div style={{ fontWeight: 500, fontSize: "clamp(18px,2.2vw,26px)", color: "var(--bg)", letterSpacing: "-0.025em", lineHeight: 1.15, marginBottom: 10 }}>
                    From the classroom<br/>to the council chamber.
                  </div>
                  <p style={{ color: "rgba(241,237,228,0.65)", fontSize: 13, lineHeight: 1.65 }}>
                    Our law team met with Council Member Burt Thakur to discuss the local government's stance on teen substance abuse — and where student voices can drive policy.
                  </p>
                  <div style={{ display: "flex", gap: 6, marginTop: 14 }}>
                    {["meeting-2.png","meeting-3.png","meeting-4.png"].map((img, i) => (
                      <div key={i} style={{ width: 56, height: 40, borderRadius: 8, overflow: "hidden", border: "1.5px solid rgba(255,255,255,0.2)" }}>
                        <img src={`images/${img}`} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              {/* Reel 2 — col 4, row 2 */}
              <div style={{ ...cell("#0F1410"), gridColumn: "4", gridRow: "2", display: "flex", flexDirection: "column" }}>
                <div style={{ ...pad, paddingBottom: 12 }}>
                  <span style={{ ...tag, color: "rgba(241,237,228,0.35)" }}>@willowinitiative</span>
                  <div style={{ fontWeight: 500, fontSize: 14, color: "var(--bg)", letterSpacing: "-0.02em", lineHeight: 1.3 }}>Behind the scenes.</div>
                </div>
                <div style={{ flex: 1, minHeight: 0 }}>
                  <IGFrame shortcode="DTJvmNpkV63" />
                </div>
              </div>

              {/* 4 branch cards — row 3 */}
              {[
                {
                  lbl: "Research",
                  title: "Evidence that drives change.",
                  desc: "We study adolescent substance use patterns and publish findings that arm legislators, schools, and families with real data. Our team works alongside experts at Stanford, Harvard, USC, Yale, Johns Hopkins, and Rutgers — all publications freely available.",
                },
                {
                  lbl: "Engineering",
                  title: "Building tools for prevention.",
                  desc: "From implementing the CRAFFT screening tool to building data pipelines that track intervention outcomes, our engineering team creates the infrastructure that connects at-risk students with resources before it's too late.",
                },
                {
                  lbl: "Hospitals",
                  title: "Partnering with healthcare.",
                  desc: "We work alongside medical professionals and hospital systems to embed evidence-based early intervention directly into routine adolescent care visits — reaching students at the clinical level, not just the school level.",
                },
                {
                  lbl: "Law",
                  title: "Policy at the local level.",
                  desc: "Our law team engages city councils, school boards, and state legislators — advocating for stronger policies on teen substance abuse. We've already met with the Frisco City Council and are expanding to more districts nationwide.",
                },
              ].map((b, i) => (
                <div key={i} style={{ ...cell("var(--surface)"), gridColumn: `${i + 1}`, gridRow: "3", border: "1px solid var(--line)", ...pad, display: "flex", flexDirection: "column", gap: 10 }}>
                  <span style={{ ...tag, color: "var(--sage)", opacity: 1, fontSize: 11 }}>{b.lbl}</span>
                  <div style={{ fontWeight: 500, fontSize: 15, letterSpacing: "-0.02em", lineHeight: 1.25 }}>{b.title}</div>
                  <p style={{ color: "var(--ink-soft)", fontSize: 12.5, lineHeight: 1.65, margin: 0 }}>{b.desc}</p>
                </div>
              ))}

            </div>
          </Reveal>

        </div>
      </section>

      <FooterCTA go={go}
        title={<>Want to be part of <span className="ital">this?</span></>}
        sub="Join an organization active across 3 countries and 5 states in the US — and growing."
        buttons={[
          { label: "Apply now",    variant: "primary", page: "gethelp", withArrow: true },
          { label: "Get involved", variant: "ghost",   page: "gethelp" },
        ]}
      />
    </div>
  );
}

/* ============================================================
   Ambassador
   ============================================================ */
const AMB_QUESTIONS = [
  { key: "q1", label: "Why do you want to become a Willow Ambassador?", hint: "Tell us what draws you to this role — 3–4 sentences." },
  { key: "q2", label: "What challenge at your school would you tackle first?", hint: "Describe the substance abuse landscape at your school and what you'd focus on — 3–4 sentences." },
  { key: "q3", label: "How would you recruit and inspire other students to get involved?", hint: "Your plan for building peer support and awareness — 3–4 sentences." },
];

const SM_QUESTIONS = [
  { key: "q1", label: "Why do you want to be Willow's Social Media Officer?", hint: "Tell us why this role matters to you — 3–4 sentences." },
  { key: "q2", label: "How would you bring something different to Willow's content?", hint: "Share the style, ideas, and formats you'd bring — 3–4 sentences." },
  { key: "q3", label: "How would you handle members not following through on content?", hint: "Explain how you'd set expectations and keep the team accountable — 3–4 sentences." },
];

const AMB_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 getAmbQuestions(role) {
  if (role === "Social Media Officer") return SM_QUESTIONS;
  if (role === "Open a Chapter") return AMB_CHAPTER_QUESTIONS;
  return AMB_QUESTIONS;
}

function Ambassador({ go, applyTarget, clearApplyTarget }) {
  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("apply-form")?.scrollIntoView({ behavior: "smooth", block: "start" }));
  };

  React.useEffect(() => {
    if (!applyTarget || applyTarget.page !== "ambassador" || !ROLES.includes(applyTarget.role)) return;
    update("role", applyTarget.role);
    setStatus("idle");
    requestAnimationFrame(() => document.getElementById("apply-form")?.scrollIntoView({ behavior: "smooth", block: "start" }));
    if (clearApplyTarget) clearApplyTarget();
  }, [applyTarget?.key]);

  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 = getAmbQuestions(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">Ambassador program</span>
            <h1 style={{ marginTop: 16 }}>
              Advocates at <span className="ital">every school.</span>
            </h1>
            <p className="lede" style={{ marginTop: 16 }}>
              Student ambassadors lead awareness campaigns, connect peers with resources, and build
              systems of support from within their own communities.
            </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 className="tight">
        <div className="container">
          <div className="grid-2" style={{ gap: 64, alignItems: "start" }}>
            <Reveal>
              <span className="eyebrow">What you'll do</span>
              <h2 style={{ marginTop: 18 }}>Lead from <span className="ital">within.</span></h2>
              <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 28 }}>
                {[
                  "Run peer-led awareness campaigns at your school",
                  "Connect at-risk students with mental health and recovery resources",
                  "Host workshops and community conversations",
                  "Build lasting support systems that outlive your tenure",
                  "Represent Willow at community and policy events",
                ].map((item, i) => (
                  <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                    <span style={{ color: "var(--sage)", marginTop: 2, flexShrink: 0 }}><Icon name="check" size={16}/></span>
                    <span style={{ fontSize: 15.5, color: "var(--ink-soft)" }}>{item}</span>
                  </div>
                ))}
              </div>
            </Reveal>
            <Reveal delay={80}>
              <span className="eyebrow">Also: Open a chapter</span>
              <h2 style={{ marginTop: 18 }}>Bring Willow to <span className="ital">your school.</span></h2>
              <p className="lede" style={{ marginTop: 18 }}>
                Start a chapter at your school and join a growing network of students committed to
                creating substance-free communities across the country.
              </p>
              <p style={{ fontSize: 15.5, color: "var(--ink-soft)", marginTop: 16, lineHeight: 1.6 }}>
                We provide the brand, the curriculum, the training, and the support network.
                You co-found with at least one other student, get a faculty advisor signature,
                and submit a quarterly impact report.
              </p>
              <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
                <Button variant="primary" withArrow onClick={() => selectRoleAndScroll("Ambassador")}>Become an Ambassador</Button>
                <Button variant="ghost" onClick={() => selectRoleAndScroll("Open a Chapter")}>Open a Chapter</Button>
                <Button variant="ghost" onClick={() => selectRoleAndScroll("Social Media Officer")}>Social Media Officer</Button>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* photo pair */}
      <section style={{ background: "var(--bg-2)", padding: "clamp(32px,4vw,56px) 0" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 280px), 1fr))", gap: "clamp(12px,2vw,20px)" }}>
            {["onboarding-3.jpg","onboarding-4.jpg"].map((img, i) => (
              <div key={i} style={{ borderRadius: "var(--r-card)", overflow: "hidden", aspectRatio: "16/9" }}>
                <img src={`images/${img}`} alt="Willow ambassador session" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── APPLICATION FORM ── */}
      <section id="apply-form" style={{ background: "var(--sage-deep)", padding: "clamp(64px,9vw,112px) 0" }}>
        <div className="container" style={{ maxWidth: 760 }}>
          <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 3 countries & 5 states.</span></h2>
            <p style={{ color: "rgba(241,237,228,0.65)", fontSize: 17, lineHeight: 1.65, marginTop: 12 }}>We onboard weekly. You'll hear back within 72 hours.</p>
          </Reveal>
          <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 }}>
                {/* Role toggle */}
                <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>
                {getAmbQuestions(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="primary" size="lg" withArrow onClick={submit} disabled={status === "sending"}>
                    {status === "sending" ? "Sending…" : "Send application"}
                  </Button>
                </div>
              </div>
            )}
          </Reveal>
        </div>
      </section>
    </div>
  );
}

/* ============================================================
   Professors (was Research)
   ============================================================ */
const PROFESSORS = [
  { name: "Sion Kim Harris",       org: "Harvard Medical School",                abbr: "HMS",  color: "#A51C30", title: "Associate Professor of Pediatrics",      photo: "images/prof-sion.jpg",        desc: "Pioneered the CRAFFT screening tool — now the international standard for adolescent substance use screening in primary care. Directs the Boston Children's Hospital Center for Adolescent Substance Abuse Research." },
  { name: "Steve Sussman",         org: "University of Southern California",     abbr: "USC",  color: "#990000", title: "Professor of Preventive Medicine",       photo: "images/prof-steven.webp",     desc: "Specializes in etiology, prevention, and cessation of adolescent substance abuse through evidence-based programs like Project Towards No Drug Abuse. Co-director of a NIDA Transdisciplinary Drug Abuse Prevention Research Center." },
  { name: "Michael Cucciare",      org: "Univ. of Arkansas for Med. Sciences",  abbr: "UAMS", color: "#003865", title: "Professor of Psychiatry",                photo: "images/prof-michael.jpg",     desc: "Uses technology-enhanced interventions to improve substance use disorder outcomes, including virtual care and self-management tools for adolescents and adults dealing with hazardous substance use." },
  { name: "Rachel Ouellette",      org: "Yale School of Medicine",               abbr: "YALE", color: "#00356B", title: "Associate Research Scientist",           photo: "images/prof-rachel-alt.webp", desc: "Conducts mixed-methods research on youth substance abuse prevention through social connectedness, emotional well-being, and social media as a context for prevention messaging to adolescents." },
  { name: "Alexandria Bauer",      org: "Rutgers University",                    abbr: "RU",   color: "#CC0033", title: "Assistant Research Professor",           photo: "images/prof-alexandria.png",  desc: "Specializes in trauma and substance use co-occurrence in Black and ethnic minority youth. Employs community-based participatory strategies to address health disparities and develop culturally tailored mental health interventions." },
  { name: "Michael I. Fingerhood", org: "Johns Hopkins University",              abbr: "JHU",  color: "#002D62", title: "Professor of Medicine & Public Health",  photo: "images/prof-fingerhood.png",  desc: "Chief of the Division of Addiction Medicine at Johns Hopkins Bayview Medical Center. Has authored over 70 peer-reviewed publications with 30+ years of continuous NIH research funding in substance use disorder care." },
];

function Research({ go }) {
  return (
    <div className="page-wrap">
      <header className="page-head">
        <div className="container">
          <Reveal>
            <span className="eyebrow">Expert voices</span>
            <h1 style={{ marginTop: 16 }}>
              Researchers who've <span className="ital">shaped our thinking.</span>
            </h1>
            <p className="lede" style={{ marginTop: 16 }}>
              We've had the privilege of connecting with leading researchers across the country — learning from their work and letting it inform how we build Willow.
            </p>
          </Reveal>
        </div>
      </header>

      <section className="tight" style={{ paddingTop: 0 }}>
        <div className="container">
          <Reveal stagger style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 320px), 1fr))", gap: "clamp(16px,2vw,24px)" }}>
            {PROFESSORS.map((m, i) => (
              <div className="card interactive" key={i} style={{ padding: 0, overflow: "hidden", borderTop: "4px solid var(--sage)", display: "flex", flexDirection: "column" }}>
                <div style={{ height: 300, overflow: "hidden", background: "var(--bg-2)" }}>
                  <img src={m.photo} alt={m.name} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 15%" }} />
                </div>
                <div style={{ padding: "18px 20px 24px", display: "flex", flexDirection: "column", gap: 4, flex: 1 }}>
                  <div style={{ display: "inline-flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
                    <span style={{ background: m.color, color: "#fff", fontFamily: "var(--f-mono)", fontSize: 10, fontWeight: 700, letterSpacing: "0.06em", padding: "4px 8px", borderRadius: 6 }}>{m.abbr}</span>
                    <span style={{ fontSize: 11, color: "var(--ink-mute)", fontFamily: "var(--f-mono)" }}>{m.org}</span>
                  </div>
                  <div style={{ fontWeight: 600, fontSize: 16 }}>{m.name}</div>
                  <div style={{ fontSize: 11, color: "var(--sage)", fontFamily: "var(--f-mono)", letterSpacing: "0.05em", textTransform: "uppercase", lineHeight: 1.4, marginBottom: 8 }}>{m.title}</div>
                  <p style={{ fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.7, margin: 0 }}>{m.desc}</p>
                </div>
              </div>
            ))}
          </Reveal>
        </div>
      </section>

      <FooterCTA go={go}
        title={<>Want to learn from <span className="ital">the best?</span></>}
        sub="Our expert network connects students with researchers who have dedicated their careers to solving this problem."
        buttons={[
          { label: "Get involved", variant: "primary", page: "outreach", withArrow: true },
          { label: "Our work",     variant: "ghost",   page: "ourwork"  },
        ]}
      />
    </div>
  );
}

/* ============================================================
   Officers
   ============================================================ */
const OFFICERS_LIST = [
  { name: "Abbie",     photo: "images/officer-abbie.png"     },
  { name: "Manit",     photo: "images/officer-manit.png"     },
  { name: "Varun",     photo: "images/officer-varun.png"     },
  { name: "Amaan",     photo: "images/officer-amaan.jpg"     },
  { name: "Purvaja",   photo: "images/officer-purvaja.jpg"   },
  { name: "Shagun",    photo: "images/officer-shagun.jpg"    },
  { name: "Yshvi",     photo: "images/officer-yshvi.png"     },
  { name: "Kanishka",  photo: "images/officer-kanishka.png"  },
  { name: "Aditya",    photo: "images/officer-aditya.jpg"    },
  { name: "Abhineeth", photo: "images/officer-abhineeth.jpg" },
  { name: "Rhea",      photo: "images/officer-rhea.png"      },
  { name: "Pranati",   photo: "images/officer-pranati.jpg"   },
  { name: "Sparsh",    photo: "images/officer-sparsh.jpg"    },
];

function Officers({ go }) {
  return (
    <div className="page-wrap">
      <header className="page-head">
        <div className="container">
          <Reveal>
            <span className="eyebrow">The team</span>
            <h1 style={{ marginTop: 16 }}>13 students.<br/><span className="ital">One mission.</span></h1>
            <p className="lede" style={{ marginTop: 16 }}>
              Every officer is a student running real programs — campaigns, workshops, research, and policy advocacy — on top of school.
            </p>
          </Reveal>
        </div>
      </header>

      <section className="tight" style={{ paddingTop: 0 }}>
        <div className="container">
          <Reveal stagger className="grid-4">
            {OFFICERS_LIST.map((o, i) => (
              <div key={i} className="card interactive" style={{ padding: 0, overflow: "hidden" }}>
                <div style={{ aspectRatio: "1/1", overflow: "hidden", background: "var(--bg-2)" }}>
                  <img src={o.photo} alt={o.name} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 20%" }}/>
                </div>
                <div style={{ padding: "14px 18px 18px" }}>
                  <div style={{ fontWeight: 500, fontSize: 16 }}>{o.name}</div>
                  <span className="chip sage" style={{ marginTop: 6, fontSize: 10 }}>Willow Officer</span>
                </div>
              </div>
            ))}
          </Reveal>
        </div>
      </section>

      <FooterCTA go={go}
        title={<>Your name <span className="ital">belongs here.</span></>}
        sub="Join Willow and help build the next chapter of student-led prevention across 5 states and 3 countries."
        buttons={[
          { label: "Apply now",    variant: "primary", page: "outreach", withArrow: true },
          { label: "Learn more",   variant: "ghost",   page: "ourwork"  },
        ]}
      />
    </div>
  );
}

window.OurWork = OurWork;
window.Ambassador = Ambassador;
window.Research = Research;
window.Officers = Officers;