// home.jsx — Little Care Fund homepage (mobile-first)

function HeroPortrait({ campaign, onOpen, onDonate }) {
  const c = campaign;
  const [email, setEmail] = React.useState("");
  const [subscribed, setSubscribed] = React.useState(false);

  function handleSubscribe(e) {
    e.preventDefault();
    if (email) setSubscribed(true);
  }

  return (
    <div style={{ position: "relative" }}>
      {/* hero image */}
      <div className="hero-img-wrap" style={{ position: "relative", height: 480, overflow: "hidden" }}>
        <img src="uploads/children/children-school-group.webp" alt="Children supported by LittleCareFund" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 40%", display: "block" }} />

        {/* gradient — stronger at bottom for desktop text overlay */}
        <div style={{
          position: "absolute", inset: 0, pointerEvents: "none",
          background: "linear-gradient(180deg, rgba(86,52,64,0.15) 0%, rgba(86,52,64,0) 30%, rgba(86,52,64,0.55) 55%, rgba(86,52,64,0.88) 100%)"
        }} />

        {/* heading + description — centered in image */}
        <div style={{
          position: "absolute", inset: 0, display: "flex", flexDirection: "column",
          alignItems: "center", justifyContent: "center", textAlign: "center",
          padding: "0 48px", pointerEvents: "none"
        }}>
          <div className="eyebrow" style={{ color: "rgba(251,247,244,0.7)", marginBottom: 12 }}>littlecarefund.org</div>
          <h1 className="display" style={{ fontSize: 42, color: "#FBF7F4", margin: 0, lineHeight: 1.08 }}>
            A sick child. A family that doesn't know where to turn. This is what we do.
          </h1>
          <div className="hero-desc-overlay" style={{ display: "none", marginTop: 16, pointerEvents: "none" }}>
            <p style={{ margin: 0, fontSize: 15, lineHeight: 1.65, color: "#FBF7F4", maxWidth: 960 }}>
              LittleCareFund helps children in the Philippines access the medical care, guidance, and support they need when their families do not know where to turn. We listen to each family, assess the child's situation, help identify the next step, and connect verified needs with people who want to give with confidence and purpose.
            </p>
          </div>
        </div>
      </div>

      {/* intro block */}
      <div className="hero-intro-block" style={{ background: "var(--bg-1)", padding: "28px 22px 32px" }}>
        {/* description — below image, mobile only */}
        <p className="hero-desc-below" style={{ margin: "0 0 26px", fontSize: 16, lineHeight: 1.7, color: "var(--ink-text)" }}>
          LittleCareFund helps children in the Philippines access the medical care, guidance, and support they need when their families do not know where to turn. We listen to each family, assess the child's situation, help identify the next step, and connect verified needs with people who want to give with confidence and purpose.
        </p>

        <div className="hero-actions" style={{ display: "flex", flexDirection: "column", gap: 0 }}>

          <div className="hero-donate" style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <button className="btn btn--primary btn--lg hero-donate-btn" style={{ flexShrink: 0 }} onClick={onDonate}>
              Donate monthly
            </button>
            <p style={{ margin: 0, fontSize: 13, lineHeight: 1.5, color: "var(--ink-mute)", maxWidth: 160 }}>
              Some kids are this close. They just need a few more people to say yes. A monthly gift means we can keep moving — and the most urgent cases don't have to wait.
            </p>
          </div>

          <div className="hero-newsletter" style={{ borderTop: "1px solid var(--line)", paddingTop: 24, marginTop: 28 }}>
            <div className="hero-newsletter-meta" style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 500, color: "var(--ink-deep)", marginBottom: 6, letterSpacing: "-0.01em" }}>
              Stay close to the children you help.
            </div>
            <p className="hero-newsletter-meta" style={{ margin: "0 0 14px", fontSize: 13.5, color: "var(--ink-mute)", lineHeight: 1.5 }}>
              Get updates on verified cases, outcomes, and new children joining the fund.
            </p>
            {subscribed ? (
              <div style={{
                background: "rgba(127,162,132,0.15)", border: "1px solid rgba(127,162,132,0.3)",
                borderRadius: 12, padding: "14px 16px",
                fontSize: 14, color: "#26452A", fontWeight: 500
              }}>
                You're subscribed. Thank you.
              </div>
            ) : (
              <form onSubmit={handleSubscribe} className="newsletter-form" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                <input
                  type="email"
                  placeholder="Your email address"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                  style={{
                    width: "100%", boxSizing: "border-box",
                    padding: "12px 14px", borderRadius: 999,
                    border: "1px solid var(--line-strong)",
                    background: "rgba(255,255,255,0.7)",
                    fontSize: 14, color: "var(--ink-text)",
                    fontFamily: "var(--font-sans)", outline: "none",
                  }}
                />
                <button type="submit" className="btn btn--dark btn--sm" style={{ width: "100%" }}>
                  Follow stories
                </button>
              </form>
            )}
          </div>

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

// Variant B: split — abstract portrait + headline/CTA stacked
function HeroSplit({ campaign, onOpen, onDonate, onNavigate }) {
  const c = campaign;
  return (
    <div style={{ padding: "20px 22px 32px", background: "var(--bg-1)" }}>
      <div className="eyebrow" style={{ marginBottom: 12 }}>Hope. Healing. Help.</div>
      <h1 className="display" style={{ fontSize: 40, marginBottom: 14 }}>
        Children in the Philippines deserve a chance to heal.
      </h1>
      <p className="body-md" style={{ marginBottom: 20 }}>
        Every campaign on littlecarefund.org is verified by a partner medical practitioner and tracked from first donation to final outcome.
      </p>
      {/* portrait card */}
      <div className="card" style={{ overflow: "hidden", marginBottom: 18 }}>
        <div style={{ position: "relative", aspectRatio: "5 / 4" }}>
          <ChildPhoto name={c.name} palette={c.palette} kind={c.kind} slotId={`hero-split-${c.id}`} shape="rect" img={c.img} />
          <div style={{ position: "absolute", left: 14, top: 14, pointerEvents: "none" }}>
            <Pill variant="light" icon={<span style={{ width: 6, height: 6, borderRadius: "50%", background: "#C4373A" }} />}>Urgent</Pill>
          </div>
          <div style={{ position: "absolute", left: 14, right: 14, bottom: 14, color: "#FBF7F4",
            background: "linear-gradient(180deg, transparent, rgba(86,52,64,0.85))",
            margin: -14, padding: 14, paddingTop: 60, pointerEvents: "none"
          }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.85 }}>{c.name}, {c.age} · {c.location}</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 500, marginTop: 6, lineHeight: 1.15 }}>{c.need}</div>
          </div>
        </div>
        <div style={{ padding: 14 }}>
          <ProgressBar value={c.raised} max={c.goal} />
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8 }}>
            <span style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-deep)" }}>{peso(c.raised)} of {peso(c.goal)}</span>
            <span style={{ fontSize: 13, color: "var(--ink-mute)" }}>{c.days} days left</span>
          </div>
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        <button className="btn btn--primary btn--lg" onClick={onDonate}>Donate now</button>
        <button className="btn btn--ghost btn--lg" onClick={() => onNavigate && onNavigate("find")}>See verified cases</button>
      </div>
    </div>);

}

// Variant C: quiet typographic
function HeroQuiet({ campaign, onOpen, onDonate, onNavigate }) {
  const c = campaign;
  return (
    <div style={{ padding: "32px 22px 28px", background: "var(--bg-1)" }}>
      <div className="eyebrow" style={{ marginBottom: 18 }}>littlecarefund.org</div>
      <h1 className="display" style={{ fontSize: 48, marginBottom: 22 }}>
        Hope, healing, and verified medical support for children in the Philippines.
      </h1>
      <p className="body-md" style={{ marginBottom: 26, fontSize: 16 }}>
        We connect families with donors, practitioner by practitioner, case by case. Every dollar is tracked.
      </p>
      <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 28 }}>
        <button className="btn btn--primary btn--lg" onClick={onDonate}>Donate now</button>
        <button className="btn btn--ghost btn--sm" onClick={() => onNavigate && onNavigate("find")}>See {CAMPAIGNS.length} verified children</button>
      </div>
      <div style={{ height: 1, background: "var(--line)", margin: "8px 0 18px" }} />
      <div className="eyebrow" style={{ marginBottom: 10 }}>Most urgent</div>
      <CampaignCard c={c} onOpen={onOpen} compact />
    </div>);

}

// Trust strip — 3 columns
function TrustStrip() {
  const items = [
  { n: "100%", l: "of children visited and vetted" },
  { n: "412", l: "children's procedures fully funded since launch in 2023" },
  { n: "26", l: "partner medical practitioners across Pangasinan" }];

  return (
    <Section bg="var(--bg-2)">
      <div style={{ maxWidth: 480, margin: "0 auto" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {items.map((it, i) =>
          <div key={i} style={{ display: "flex", alignItems: "baseline", gap: 16, paddingBottom: 16, borderBottom: i < items.length - 1 ? "1px solid rgba(86,52,64,0.10)" : "none" }}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 36, fontWeight: 500, color: "var(--ink-deep)", letterSpacing: "-0.02em", minWidth: 90 }}>{it.n}</div>
              <div style={{ fontSize: 14, lineHeight: 1.45, color: "var(--ink-text)" }}>{it.l}</div>
            </div>
          )}
        </div>
      </div>
    </Section>);

}

// Featured campaigns grid (mobile = stacked, desktop = grid)
function FeaturedCampaigns({ onOpen, onNavigate }) {
  return (
    <Section>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 16 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 6 }}>Verified campaigns</div>
          <h2 className="section-title">Children waiting for your help</h2>
        </div>
        <button onClick={() => onNavigate && onNavigate("find")} style={{
          background: "transparent", border: 0, color: "var(--ink-mid)",
          fontWeight: 600, fontSize: 13.5, cursor: "pointer", padding: 0
        }}>See all →</button>
      </div>
      <div className="campaigns-grid" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
        {[...CAMPAIGNS].sort((a, b) => (a.priority || 99) - (b.priority || 99)).slice(0, 3).map((c) =>
        <CampaignCard key={c.id} c={c} onOpen={() => onOpen(c.id)} />
        )}
      </div>
    </Section>);

}

// How it works — 3 steps
function HowItWorks() {
  const steps = [
  { n: "01", t: "Families apply", d: "A parent or guardian shares the child’s situation, including any symptoms, concerns, or medical information they already have." },
  { n: "02", t: "We verify", d: "Our team works directly with partner practitioners to confirm the diagnosis, treatment plan, and cost." },
  { n: "03", t: "You donate", d: "Funds are released straight to the treating practitioner. You get updates until treatment is complete." }];

  return (
    <Section bg="var(--bg-1)">
      <div className="eyebrow" style={{ marginBottom: 6 }}>How it works</div>
      <h2 className="section-title" style={{ marginBottom: 18 }}>Trust built into every step. We visit every child.</h2>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {steps.map((s) =>
        <div key={s.n} className="card" style={{ padding: 18, display: "flex", gap: 14, alignItems: "flex-start" }}>
            <div style={{
            width: 38, height: 38, borderRadius: "50%",
            background: "rgba(122,59,105,0.10)",
            color: "var(--ink-mid)",
            display: "grid", placeItems: "center",
            fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 14,
            flexShrink: 0
          }}>{s.n}</div>
            <div>
              <h3 style={{ margin: "2px 0 6px", fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 500, color: "var(--ink-deep)", letterSpacing: "-0.01em" }}>{s.t}</h3>
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.5, color: "var(--ink-mute)" }}>{s.d}</p>
            </div>
          </div>
        )}
      </div>
    </Section>);

}

// Where every peso goes — breakdown bar
function PesoBreakdown() {
  const slices = [
  { l: "Direct medical care", pct: 91, color: "var(--ink-mid)" },
  { l: "Case verification & follow-up", pct: 6, color: "var(--ink-soft)" },
  { l: "Platform operations", pct: 3, color: "var(--bg-2)" }];

  return (
    <Section bg="var(--bg-2)">
      <div style={{ maxWidth: 480, margin: "0 auto" }}>
        <div className="eyebrow" style={{ marginBottom: 6 }}>Transparency</div>
        <h2 className="section-title" style={{ marginBottom: 8 }}>Where every dollar goes.</h2>
        <p className="body-md" style={{ marginBottom: 20 }}>
          Donations are released directly to partner medical practitioners. We disclose every transfer in our public ledger.
        </p>

        <div style={{ display: "flex", height: 14, borderRadius: 999, overflow: "hidden", background: "rgba(86,52,64,0.06)", marginBottom: 16, border: "1px solid var(--line-strong)" }}>
          {slices.map((s) =>
          <div key={s.l} style={{ width: `${s.pct}%`, background: s.color }} />
          )}
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {slices.map((s) =>
          <div key={s.l} style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <div style={{ width: 14, height: 14, borderRadius: 4, background: s.color, border: s.color === "var(--bg-2)" ? "1px solid var(--line-strong)" : "none" }} />
              <div style={{ flex: 1, fontSize: 14, color: "var(--ink-text)" }}>{s.l}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 500, color: "var(--ink-deep)" }}>{s.pct}%</div>
            </div>
          )}
        </div>

        <a href="#" className="text-link" style={{ display: "inline-block", marginTop: 22, fontSize: 14, fontWeight: 600 }}>
          Read the 2025 transparency report →
        </a>
      </div>
    </Section>);

}

// Real-time updates feed
function UpdatesFeed() {
  const items = [
  { time: "2h ago", title: "Joy's surgery complete", meta: "Operation Smile · Tacloban", body: "Joy's cleft palate procedure went well. She's recovering with her mom; first follow-up next week." },
  { time: "Yesterday", title: "Miguel completed Cycle 4", meta: "Southern Phil. Medical Center", body: "Bloodwork stable. Dr. Palacio expects to begin maintenance in two weeks." },
  { time: "2 days ago", title: "Ramon's transplant match in workup", meta: "National Kidney Institute", body: "Initial cross-match looks promising. Donor and family undergoing final compatibility tests." }];

  return (
    <Section>
      <div className="eyebrow" style={{ marginBottom: 6 }}>Real-time updates</div>
      <h2 className="section-title" style={{ marginBottom: 16 }}>What just happened.</h2>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {items.map((u, i) =>
        <div key={i} className="card" style={{ padding: 16 }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
              <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.10em", textTransform: "uppercase", color: "var(--ink-mid)" }}>{u.time}</span>
              <span style={{ fontSize: 11.5, color: "var(--ink-mute)" }}>{u.meta}</span>
            </div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 500, color: "var(--ink-deep)", letterSpacing: "-0.01em", marginBottom: 6 }}>{u.title}</div>
            <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.5, color: "var(--ink-mute)" }}>{u.body}</p>
          </div>
        )}
      </div>
    </Section>);

}

// Stories — always pulls the latest 3 from STORY_ARTICLES in stories.jsx
function Stories({ onOpenStory, onNavigate }) {
  const latest = STORY_ARTICLES.slice(0, 3);
  return (
    <Section bg="var(--bg-1)">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 18 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 6 }}>Stories with outcomes</div>
          <h2 className="section-title">Funded. Healed. Followed up.</h2>
        </div>
        <button onClick={() => onNavigate && onNavigate("stories")} style={{
          background: "transparent", border: 0, color: "var(--ink-mid)",
          fontWeight: 600, fontSize: 13.5, cursor: "pointer", padding: 0, whiteSpace: "nowrap",
        }}>See all →</button>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {latest.map((s) =>
          <div
            key={s.id}
            className="card"
            onClick={() => onOpenStory && onOpenStory(s.id)}
            style={{
              padding: 0, overflow: "hidden", display: "flex", flexDirection: "column",
              cursor: "pointer", transition: "transform 0.15s ease, box-shadow 0.15s ease",
            }}
            onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "var(--shadow-2)"; }}
            onMouseLeave={e => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; }}
          >
            <div style={{ display: "flex", alignItems: "stretch" }}>
              <div style={{ width: 96, flexShrink: 0, overflow: "hidden" }}>
                <img src={s.img} alt={s.name} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              </div>
              <div style={{ flex: 1, padding: "14px 16px" }}>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.10em", textTransform: "uppercase", color: "var(--ink-mid)", marginBottom: 4 }}>{s.name} · {s.location}</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 17, fontWeight: 500, color: "var(--ink-deep)", letterSpacing: "-0.01em", lineHeight: 1.2 }}>{s.headline}</div>
              </div>
            </div>
            <div style={{ padding: "0 16px 16px" }}>
              <p style={{ margin: "8px 0 12px", fontSize: 13.5, lineHeight: 1.5, color: "var(--ink-mute)" }}>{s.teaser}</p>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                <Pill variant="success">{s.outcome.split(" · ")[0]}</Pill>
                <Pill variant="soft">{s.funded} raised</Pill>
              </div>
            </div>
          </div>
        )}
      </div>
    </Section>
  );
}

// Final CTA
function FinalCTA({ onDonate, onNavigate }) {
  return (
    <Section bg="var(--ink-deep)" style={{ color: "#FBF7F4" }}>
      <div style={{ textAlign: "left" }}>
        <h2 className="display" style={{ fontSize: 36, color: "#FBF7F4", marginBottom: 12 }}>A child is waiting.

        </h2>
        <p style={{ fontSize: 15.5, lineHeight: 1.55, color: "#D6BFC6", marginBottom: 22 }}>
          Some kids are this close. They just need a few more people to say yes. A monthly gift means we can keep moving — and the most urgent cases don't have to wait.
        </p>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <button className="btn btn--primary btn--lg" onClick={onDonate}>Donate monthly</button>
        </div>
      </div>
    </Section>);

}

function HomePage({ onOpenCampaign, onNavigate, onOpenStory, heroVariant }) {
  const featured = [...CAMPAIGNS].sort((a, b) => (a.priority || 99) - (b.priority || 99))[0];
  const onDonate = () => onNavigate("donate");
  const onOpen = () => onOpenCampaign(featured.id);

  let Hero;
  if (heroVariant === "split") Hero = <HeroSplit campaign={featured} onOpen={onOpen} onDonate={onDonate} onNavigate={onNavigate} />;else
  if (heroVariant === "quiet") Hero = <HeroQuiet campaign={featured} onOpen={onOpen} onDonate={onDonate} onNavigate={onNavigate} />;else
  Hero = <HeroPortrait campaign={featured} onOpen={onOpen} onDonate={onDonate} />;

  return (
    <>
      {Hero}
      <TrustStrip />
      <FeaturedCampaigns onOpen={onOpenCampaign} onNavigate={onNavigate} />
      <HowItWorks />
      <PesoBreakdown />
      <Stories onOpenStory={onOpenStory} onNavigate={onNavigate} />
      <FinalCTA onDonate={onDonate} onNavigate={onNavigate} />
      <Footer onNavigate={onNavigate} />
    </>);

}

Object.assign(window, { HomePage });