/* global React, Button, Reveal, Icon, Particles, FooterCTA, WillowMark */
const { useState, useEffect, useRef } = React;

/* ── Typewriter ── */
function TypeWriter({ lines, speed = 38 }) {
  const full = lines.join("\n");
  const [count, setCount] = useState(0);
  const [done, setDone]   = useState(false);
  useEffect(() => {
    if (count >= full.length) { setDone(true); return; }
    const t = setTimeout(() => setCount(c => c + 1), speed);
    return () => clearTimeout(t);
  }, [count, full, speed]);
  const displayed = full.slice(0, count);
  return (
    <span style={{ whiteSpace: "pre-line" }}>
      {displayed}
      {!done && <span className="tw-cursor">|</span>}
    </span>
  );
}

/* ── Hero photo carousel ── */
const HERO_SLIDES = [
  { img: "images/onboarding-1.jpg",  caption: "Our first ever orientation."              },
  { img: "images/meeting-1.png",     caption: "Our law team at Frisco City Council."    },
  { img: "images/fundraiser.png",    caption: "$870+ total raised."                     },
  { img: "images/onboarding-2.jpg",  caption: "Every department building something real." },
  { img: "images/meeting-2.png",     caption: "Research backed by Harvard & Yale."       },
  { img: "images/onboarding-4.jpg",  caption: "Students across 5 states & 3 countries." },
];

function HeroCarousel() {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % HERO_SLIDES.length), 3800);
    return () => clearInterval(t);
  }, []);
  return (
    <div style={{ borderRadius: "var(--r-card-lg)", overflow: "hidden", boxShadow: "0 32px 80px rgba(0,0,0,0.4)", position: "relative", aspectRatio: "4/3" }}>
      {HERO_SLIDES.map((s, i) => (
        <img key={i} src={s.img} alt="" style={{
          position: "absolute", inset: 0, width: "100%", height: "100%",
          objectFit: "cover", objectPosition: "center 30%",
          opacity: i === idx ? 1 : 0,
          transition: "opacity 1s ease",
        }}/>
      ))}
      {/* gradient overlay + caption */}
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(15,20,16,0.85) 0%, transparent 55%)" }}/>
      <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, padding: "24px 20px 20px" }}>
        <p style={{ color: "rgba(241,237,228,0.9)", fontSize: 13, fontFamily: "var(--f-mono)", letterSpacing: "0.04em", margin: 0 }}>
          {HERO_SLIDES[idx].caption}
        </p>
        <div style={{ display: "flex", gap: 6, marginTop: 10 }}>
          {HERO_SLIDES.map((_, i) => (
            <button key={i} onClick={() => setIdx(i)} style={{
              width: i === idx ? 20 : 6, height: 6, borderRadius: 999,
              border: "none", cursor: "pointer", padding: 0,
              background: i === idx ? "var(--sage-soft)" : "rgba(241,237,228,0.3)",
              transition: "all 0.3s ease",
            }}/>
          ))}
        </div>
      </div>
      {/* left/right arrows */}
      {[{d:-1,s:"left",l:"‹"},{d:1,s:"right",l:"›"}].map(({d,s,l}) => (
        <button key={s} onClick={() => setIdx(i => (i+d+HERO_SLIDES.length)%HERO_SLIDES.length)}
          style={{ position:"absolute", top:"45%", [s]:12, transform:"translateY(-50%)", width:32, height:32, borderRadius:999, background:"rgba(15,20,16,0.5)", border:"none", color:"#fff", fontSize:20, cursor:"pointer", display:"grid", placeItems:"center", backdropFilter:"blur(4px)" }}>
          {l}
        </button>
      ))}
    </div>
  );
}


const CAROUSEL_IMAGES = [
  { src: "images/meeting-1.png", alt: "CRAFFT presentation session" },
  { src: "images/meeting-2.png", alt: "Engineering committee presentation" },
  { src: "images/meeting-3.png", alt: "Finance committee overview" },
  { src: "images/meeting-4.png", alt: "Willow chapter meeting in action" },
];

function PhotoCarousel() {
  const [active, setActive] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setActive(i => (i + 1) % CAROUSEL_IMAGES.length), 4000);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{ background: "var(--sage-deep)", padding: "clamp(64px,9vw,120px) 0" }}>
      <div className="container">

        {/* Heading — full width */}
        <div style={{ marginBottom: "clamp(40px,5vw,64px)" }}>
          <span style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(241,237,228,0.45)", display: "block", marginBottom: 16 }}>Law team — city council</span>
          <h2 style={{ color: "var(--bg)", fontSize: "clamp(36px,5vw,68px)", fontWeight: 500, letterSpacing: "-0.03em", lineHeight: 1.05, maxWidth: "18ch" }}>
            Policy change starts<br/>
            <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", color: "var(--sage-soft)" }}>at the local level.</span>
          </h2>
        </div>

        {/* Image + text row */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 320px), 1fr))", gap: "clamp(32px,4vw,56px)", alignItems: "start" }}>

          {/* Image — larger left column */}
          <div>
            <div style={{ position: "relative", borderRadius: "var(--r-card-lg)", overflow: "hidden", height: 420, boxShadow: "var(--shadow-3)" }}>
              {CAROUSEL_IMAGES.map((img, i) => (
                <img
                  key={i}
                  src={img.src}
                  alt={img.alt}
                  style={{
                    position: "absolute", inset: 0, width: "100%", height: "100%",
                    objectFit: "cover", objectPosition: "center top",
                    opacity: active === i ? 1 : 0,
                    transition: "opacity 0.9s ease",
                  }}
                />
              ))}
            </div>
            {/* Dot indicators under image */}
            <div style={{ display: "flex", gap: 8, marginTop: 16 }}>
              {CAROUSEL_IMAGES.map((_, i) => (
                <button
                  key={i}
                  onClick={() => setActive(i)}
                  style={{
                    width: active === i ? 28 : 8, height: 8,
                    borderRadius: 999, border: "none", cursor: "pointer",
                    background: active === i ? "var(--sage-soft)" : "rgba(241,237,228,0.25)",
                    transition: "all 0.35s var(--ease)",
                    padding: 0,
                  }}
                />
              ))}
            </div>
          </div>

          {/* Text — right column */}
          <div style={{ paddingTop: 8 }}>
            <p style={{ color: "rgba(241,237,228,0.78)", fontSize: 16, lineHeight: 1.8, marginBottom: 28 }}>
              Our law team took the fight beyond schools and into the halls of local government — presenting to city council members and advocating for stronger policies on teen substance abuse.
            </p>
            <p style={{ color: "rgba(241,237,228,0.55)", fontSize: 15, lineHeight: 1.75, marginBottom: 32 }}>
              By engaging directly with legislators, we're pushing for real change where it matters most — at the local level, before it becomes a national crisis.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {[
                { label: "City Council", icon: "🏛" },
                { label: "Policy Advocacy", icon: "📋" },
                { label: "Local Government", icon: "⚖️" },
              ].map(({ label, icon }) => (
                <div key={label} style={{ display: "flex", alignItems: "center", gap: 12, background: "rgba(197,210,190,0.08)", borderRadius: 12, padding: "10px 16px" }}>
                  <span style={{ fontSize: 16 }}>{icon}</span>
                  <span style={{ color: "var(--sage-soft)", fontSize: 13, fontFamily: "var(--f-mono)", letterSpacing: "0.05em" }}>{label}</span>
                </div>
              ))}
            </div>
          </div>

        </div>
      </div>
    </div>
  );
}

const REALITY_STATS = [
  { stat: "410,000", label: "Middle schoolers in the US who currently vape — and the number keeps rising.", color: "var(--danger)" },
  { stat: "44%",     label: "Of teen marijuana users show signs of addiction or use disorder within one year of regular use.", color: "var(--gold)" },
  { stat: "1 in 7",  label: "High schoolers has used a hard drug — cocaine, meth, heroin, or hallucinogens.", color: "var(--sage)" },
  { stat: "70%",     label: "Of adults with substance use disorders started using before age 18.", color: "var(--sage-deep)" },
];

const WORK_ITEMS = [
  { tag: "01", label: "RESEARCH",    title: "Evidence that drives change.",       desc: "Our research team studies adolescent substance use patterns, publishes findings, and arms legislators and schools with data to make real decisions.", page: "research" },
  { tag: "02", label: "ENGINEERING", title: "Building tools for prevention.",     desc: "We build apps, screening tools, and tech infrastructure that help identify at-risk students and connect them with resources before it's too late.", page: "ourwork" },
  { tag: "03", label: "HOSPITALS",   title: "Partnering with healthcare.",        desc: "Working alongside medical professionals and hospital systems to bring evidence-based early intervention directly into clinical settings.", page: "outreach" },
  { tag: "04", label: "LAW",         title: "Policy change at the local level.",  desc: "Our law team engages city councils, school boards, and legislators — advocating for stronger policies on teen substance abuse where it matters most.", page: "ourwork" },
];

const EXPERTS = [
  { 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." },
  { name: "James Armontrout",      org: "Stanford University",                     abbr: "STANFORD", color: "#8C1515", title: "Clinical Associate Professor",        photo: "images/prof-james-armontrout.png", desc: "Stanford psychiatrist whose work spans addiction medicine, forensic psychiatry, trauma-related disorders, and dual-diagnosis care. Serves in Stanford's PTSD and dual diagnosis clinics and is board certified in psychiatry, forensic psychiatry, and addiction medicine." },
];

const OFFICERS = [
  { 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 Home({ go }) {
  return (
    <div className="page-wrap">

      {/* ── HERO ── split layout: text left, carousel right */}
      <header className="hero-section" style={{ background: "var(--sage-deep)", color: "var(--bg)", padding: "clamp(64px,9vw,120px) 0", position: "relative", overflow: "hidden", minHeight: "90vh", display: "flex", alignItems: "center" }}>
        <div style={{ position: "absolute", inset: 0, opacity: 0.2, pointerEvents: "none" }}><Particles/></div>
        <div style={{ position: "absolute", left: "-5%", bottom: "-10%", width: "50vw", height: "50vw", borderRadius: "999px", background: "radial-gradient(circle, rgba(92,124,95,0.2), transparent 65%)", pointerEvents: "none" }}/>

        <div className="container" style={{ position: "relative", zIndex: 2, width: "100%" }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 340px), 1fr))", gap: "clamp(32px,6vw,80px)", alignItems: "center" }}>

            {/* LEFT: text */}
            <div className="hero-slide-left">
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 32, opacity: 0.7 }}>
                <WillowMark size={32}/>
                <span style={{ fontWeight: 500, fontSize: 16, letterSpacing: "-0.01em" }}>The Willow Initiative</span>
              </div>

              {/* animated line */}
              <div className="hero-line"/>

              <h1 style={{ fontWeight: 500, fontSize: "clamp(42px,6.5vw,96px)", letterSpacing: "-0.04em", lineHeight: 0.95, marginBottom: 28, marginTop: 24 }}>
                <TypeWriter lines={["Fighting drug abuse", "amongst teens."]} speed={40}/>
              </h1>

              <p className="hero-fade-up" style={{ fontSize: "clamp(16px,1.6vw,20px)", color: "rgba(241,237,228,0.72)", maxWidth: "44ch", lineHeight: 1.6, marginBottom: 36 }}>
                We're students who decided not to wait. 65 members. 7 university partners. Programs in 5 states and 3 countries.
              </p>

              <div className="hero-fade-up hero-ctas-row" style={{ display: "flex", gap: 12, flexWrap: "wrap", animationDelay: "0.15s" }}>
                <button className="btn btn-lg" style={{ background: "var(--bg)", color: "var(--ink)", borderRadius: "var(--r-pill)", fontWeight: 500 }} onClick={() => go("ambassador")}>
                  Open a Chapter →
                </button>
                <button className="btn btn-lg" style={{ boxShadow: "inset 0 0 0 1.5px rgba(241,237,228,0.35)", color: "var(--bg)", borderRadius: "var(--r-pill)", fontWeight: 500 }} onClick={() => go("ambassador")}>
                  Become an Ambassador
                </button>
              </div>

              {/* stat row */}
              <div className="hero-fade-up" style={{ display: "flex", gap: "clamp(16px,4vw,32px)", marginTop: 48, paddingTop: 32, borderTop: "1px solid rgba(241,237,228,0.12)", flexWrap: "wrap", animationDelay: "0.3s" }}>
                {[["65","Members"],["5","States"],["7","Universities"],["3","Countries"]].map(([v,l]) => (
                  <div key={l}>
                    <div style={{ fontSize: "clamp(24px,3vw,36px)", fontWeight: 500, letterSpacing: "-0.03em", lineHeight: 1 }}>{v}</div>
                    <div style={{ fontSize: 11, fontFamily: "var(--f-mono)", letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(241,237,228,0.45)", marginTop: 4 }}>{l}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* RIGHT: photo carousel */}
            <div className="hero-slide-right">
              <HeroCarousel/>
            </div>

          </div>
        </div>
      </header>

      {/* ── PHOTO CAROUSEL ── auto-rotating, 4 meeting images ── */}
      <PhotoCarousel />

      {/* ── THE REALITY — colorful stat cards ── */}
      <section>
        <div className="container">
          <Reveal className="section-head">
            <span className="eyebrow">The reality</span>
            <h2>The numbers don't lie.<br/><span className="ital">They demand action.</span></h2>
            <p className="lede">We don't just raise awareness. We build systems.</p>
          </Reveal>

          <Reveal stagger className="grid-2">
            {REALITY_STATS.map((s, i) => (
              <div key={i} className="card interactive" style={{ padding: "36px 40px", minHeight: 220, display: "flex", flexDirection: "column", gap: 16, borderTop: `4px solid ${s.color}` }}>
                <div style={{ fontSize: "clamp(52px,7vw,88px)", fontWeight: 500, letterSpacing: "-0.04em", lineHeight: 1, color: s.color }}>{s.stat}</div>
                <p style={{ fontSize: 16, color: "var(--ink-soft)", lineHeight: 1.55 }}>{s.label}</p>
              </div>
            ))}
          </Reveal>
        </div>
      </section>

      {/* ── ABOUT US ── dark, personal */}
      <section style={{ background: "var(--sage-deep)", color: "var(--bg)", padding: "clamp(80px,10vw,140px) 0" }}>
        <div className="container">
          <div className="grid-2" style={{ gap: "clamp(48px,6vw,96px)", alignItems: "center" }}>
            <Reveal>
              <span className="eyebrow" style={{ color: "rgba(241,237,228,0.55)" }}>About us</span>
              <h2 style={{ marginTop: 18, color: "var(--bg)", fontSize: "clamp(32px,4.5vw,60px)" }}>
                A movement, not<br/><span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", color: "var(--sage-soft)" }}>a charity.</span>
              </h2>
              <p style={{ color: "rgba(241,237,228,0.75)", fontSize: 17, lineHeight: 1.7, marginTop: 24, maxWidth: "50ch" }}>
                Willow is a student-led movement fighting drug abuse amongst teens — 65 members, 4 departments, 7 university partners, operating across 5 states and 3 countries.
              </p>
              <p style={{ color: "rgba(241,237,228,0.75)", fontSize: 17, lineHeight: 1.7, marginTop: 16, maxWidth: "50ch" }}>
                That doc became 13 student officers running real programs. We're partnered with hospitals and researchers at Stanford, Harvard, USC, and Yale. No adults in charge. No corporate speak. Just students who decided to act.
              </p>
              <div style={{ marginTop: 36, display: "flex", gap: 12, flexWrap: "wrap" }}>
                <button className="btn" style={{ background: "var(--bg)", color: "var(--ink)", borderRadius: "var(--r-pill)", padding: "14px 22px", fontWeight: 500 }} onClick={() => go("community")}>
                  Meet the team →
                </button>
                <button className="btn" style={{ boxShadow: "inset 0 0 0 1.5px rgba(241,237,228,0.3)", color: "var(--bg)", borderRadius: "var(--r-pill)", padding: "14px 22px" }} onClick={() => go("ourwork")}>
                  Our work
                </button>
              </div>
            </Reveal>
            <Reveal>
              <div className="about-img-wrap" style={{ borderRadius: "var(--r-card-lg)", overflow: "hidden", aspectRatio: "3/4", boxShadow: "var(--shadow-3)" }}>
                <img src="images/onboarding-1.jpg" alt="Willow meeting" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* ── WHAT WE DO ── */}
      <section>
        <div className="container">
          <Reveal className="section-head">
            <span className="eyebrow">The branches — our work</span>
            <h2>Four ways to <span className="ital">make an impact.</span></h2>
          </Reveal>
          <Reveal stagger className="sol-list">
            {WORK_ITEMS.map((p) => (
              <div className="sol-row" key={p.tag} onClick={() => go(p.page)}>
                <span className="idx">{p.tag}</span>
                <div className="body">
                  <span style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--sage)", marginBottom: 4, display: "block" }}>{p.label}</span>
                  <span className="title">{p.title}</span>
                  <span className="sub">{p.desc}</span>
                </div>
                <span className="cta"><Icon name="arrowRight" size={16}/></span>
              </div>
            ))}
          </Reveal>
        </div>
      </section>

      {/* ── RECENT ACTIVITY — fundraiser ── */}
      <section style={{ background: "var(--bg-2)" }}>
        <div className="container">
          <Reveal className="section-head">
            <span className="eyebrow">Recent activity</span>
            <h2>Making an impact,<br/><span className="ital">one neighborhood at a time.</span></h2>
          </Reveal>
          <Reveal>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 300px), 1fr))", gap: "clamp(28px,5vw,72px)", alignItems: "center" }}>
              <div>
                <img
                  src="images/fundraiser.png"
                  alt="Willow team selling cookies across neighborhoods"
                  style={{ width: "100%", borderRadius: "var(--r-card)", objectFit: "cover", aspectRatio: "4/3", boxShadow: "var(--shadow-2)" }}
                />
              </div>
              <div>
                <span className="chip sage" style={{ marginBottom: 20, display: "inline-block" }}>Fundraiser</span>
                <h3 style={{ fontSize: "clamp(26px,3vw,42px)", fontWeight: 500, letterSpacing: "-0.03em", lineHeight: 1.15, marginBottom: 18 }}>
                  $870+ total<br/><span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", color: "var(--sage)" }}>raised.</span>
                </h3>
                <p style={{ fontSize: 17, color: "var(--ink-soft)", lineHeight: 1.7 }}>
                  From selling baked cookies and homemade tea to lemonade stands across neighborhoods, our team has raised over $870 in total. Every dollar goes directly toward our programs and chapter expansion.
                </p>
                <div style={{ marginTop: 16, display: "flex", gap: 8 }}>
                  <span className="chip">Community</span>
                  <span className="chip">Fundraising</span>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ── EXPERTS ── */}
      <section>
        <div className="container">
          <Reveal className="section-head">
            <span className="eyebrow">Expert voices</span>
            <h2>Researchers who've <span className="ital">shaped our thinking.</span></h2>
            <p className="lede">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>
          <Reveal stagger style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 260px), 1fr))", gap: "clamp(16px,2vw,24px)" }}>
            {EXPERTS.map((m, i) => (
              <div className="card interactive" key={i} style={{ padding: 0, overflow: "hidden", borderTop: "4px solid var(--sage)", display: "flex", flexDirection: "column" }}>
                {/* Portrait photo — tall enough to show full face */}
                <div style={{ height: 280, 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 22px", display: "flex", flexDirection: "column", gap: 4, flex: 1 }}>
                  {/* University badge */}
                  <div style={{ display: "inline-flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
                    <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: 15 }}>{m.name}</div>
                  <div style={{ fontSize: 11, color: "var(--sage)", fontFamily: "var(--f-mono)", letterSpacing: "0.05em", textTransform: "uppercase", lineHeight: 1.4 }}>{m.title}</div>
                  <div style={{ fontSize: 12, color: "var(--ink-mute)", marginBottom: 8 }}>{m.org}</div>
                  <p style={{ fontSize: 13.5, color: "var(--ink-soft)", lineHeight: 1.65, margin: 0 }}>{m.desc}</p>
                </div>
              </div>
            ))}
          </Reveal>
        </div>
      </section>

      {/* ── CITY COUNCIL OUTREACH ── Frisco, TX ── */}
      <section style={{ background: "var(--sage-deep)", color: "var(--bg)", padding: "clamp(64px,9vw,120px) 0" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 300px), 1fr))", gap: "clamp(28px,6vw,96px)", alignItems: "start" }}>
            <Reveal>
              <span style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(241,237,228,0.45)", display: "block", marginBottom: 16 }}>Government outreach — Frisco, TX</span>
              <h2 style={{ color: "var(--bg)", fontSize: "clamp(32px,4.5vw,60px)", fontWeight: 500, letterSpacing: "-0.03em", lineHeight: 1.1, marginBottom: 24 }}>
                From a student idea<br/>
                <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", color: "var(--sage-soft)" }}>to the council chamber.</span>
              </h2>
              <p style={{ color: "rgba(241,237,228,0.75)", fontSize: 17, lineHeight: 1.75, marginBottom: 24 }}>
                We reached out to the Frisco City Council and were invited to sit down with Council Member Burt Thakur — learning firsthand how local government approaches teen substance abuse.
              </p>
              <p style={{ color: "rgba(241,237,228,0.55)", fontSize: 15, lineHeight: 1.7 }}>
                The conversation showed us exactly where student voices can move the needle at the policy level — before the problem becomes a national crisis.
              </p>
              <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 12 }}>
                {[
                  { label: "Frisco City Council", detail: "Direct meeting with elected officials" },
                  { label: "Council Member Burt Thakur", detail: "Local government stance on teen substance abuse" },
                  { label: "Policy Impact", detail: "Student voices shaping community legislation" },
                ].map(({ label, detail }) => (
                  <div key={label} style={{ display: "flex", gap: 16, alignItems: "flex-start", padding: "14px 18px", background: "rgba(197,210,190,0.08)", borderRadius: 14 }}>
                    <div style={{ width: 8, height: 8, borderRadius: 999, background: "var(--sage-soft)", flexShrink: 0, marginTop: 5 }} />
                    <div>
                      <div style={{ fontWeight: 500, fontSize: 14, color: "var(--bg)" }}>{label}</div>
                      <div style={{ fontSize: 13, color: "rgba(241,237,228,0.5)", marginTop: 2 }}>{detail}</div>
                    </div>
                  </div>
                ))}
              </div>
            </Reveal>
            <Reveal>
              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <div style={{ borderRadius: "var(--r-card-lg)", overflow: "hidden", aspectRatio: "4/3" }}>
                  <img src="images/onboarding-1.jpg" alt="Willow team" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                  <div style={{ borderRadius: "var(--r-card)", overflow: "hidden", aspectRatio: "1/1" }}>
                    <img src="images/meeting-1.png" alt="Willow meeting" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                  </div>
                  <div style={{ borderRadius: "var(--r-card)", overflow: "hidden", aspectRatio: "1/1" }}>
                    <img src="images/meeting-2.png" alt="Willow meeting" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                  </div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>


      {/* ── INSTAGRAM ── */}
      <section style={{ background: "var(--bg-2)", padding: "clamp(56px,8vw,96px) 0" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 300px), 1fr))", gap: "clamp(28px,6vw,80px)", alignItems: "start" }}>
            <Reveal>
              <span className="eyebrow">Follow along</span>
              <h2 style={{ marginTop: 12 }}>Our work, <span className="ital">in real time.</span></h2>
              <p style={{ color: "var(--ink-soft)", fontSize: 17, lineHeight: 1.75, marginTop: 20, maxWidth: "44ch" }}>
                See our latest events, research updates, fundraisers, and team moments — from city council visits to cookie sales to chapter launches across the country.
              </p>
              <div style={{ marginTop: 12, display: "flex", flexWrap: "wrap", gap: 8 }}>
                {["Research","Engineering","Hospitals","Law","Community"].map(t => (
                  <span key={t} className="chip sage" style={{ fontSize: 12 }}>{t}</span>
                ))}
              </div>
              <a
                href="https://www.instagram.com/willowinitiative/"
                target="_blank"
                rel="noopener noreferrer"
                style={{ marginTop: 32, display: "inline-flex", alignItems: "center", gap: 12, background: "var(--sage-deep)", color: "var(--bg)", borderRadius: "var(--r-pill)", padding: "14px 24px", textDecoration: "none", fontWeight: 500, fontSize: 15 }}
              >
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
                @willowinitiative
              </a>
            </Reveal>
            <Reveal>
              <InstagramReel url="https://www.instagram.com/reel/DUEG5ehEXXg/" />
            </Reveal>
          </div>
        </div>
      </section>

      {/* ── GET HELP ── sage green band */}
      <section style={{ background: "var(--sage)", color: "#fff", padding: "clamp(56px,8vw,96px) 0" }}>
        <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 32 }}>
          <div>
            <div style={{ fontFamily: "var(--f-mono)", fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", opacity: 0.75, marginBottom: 12 }}>Get Help — 24/7 · Free · Confidential</div>
            <h2 style={{ fontSize: "clamp(28px,4vw,52px)", color: "#fff", letterSpacing: "-0.03em" }}>
              You don't have to face<br/><span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic" }}>this alone.</span>
            </h2>
            <p style={{ opacity: 0.82, fontSize: 17, marginTop: 12 }}>SAMHSA Helpline · 988 Crisis Lifeline · Crisis Text Line</p>
          </div>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href="tel:18006624357" className="btn btn-lg" style={{ background: "#fff", color: "var(--sage-deep)", borderRadius: "var(--r-pill)", fontWeight: 500 }}>
              Call 1-800-662-4357
            </a>
            <button className="btn btn-lg" style={{ boxShadow: "inset 0 0 0 1.5px rgba(255,255,255,0.4)", color: "#fff", borderRadius: "var(--r-pill)" }} onClick={() => go("gethelp")}>
              All resources
            </button>
          </div>
        </div>
      </section>

      {/* ── DONATE CTA ── */}
      <FooterCTA go={go}
        title={<>Support the <span className="ital">cause.</span></>}
        sub="Every dollar funds ambassador training, research, and chapter expansion. Your contribution creates real, lasting change."
        buttons={[
          { label: "Donate now",   variant: "primary", page: "donate",  withArrow: true },
          { label: "Get involved", variant: "ghost",   page: "gethelp" },
        ]}
      />
    </div>
  );
}

window.Home = Home;
