// campaign.jsx — Individual campaign / child detail page

function CampaignHero({ c, onBack }) {
  return (
    <div style={{ position: "relative" }}>
      <div style={{ position: "relative", height: 380, overflow: "hidden" }}>
        <ChildPhoto name={c.name} palette={c.palette} kind={c.kind} slotId={`campaign-hero-${c.id}`} shape="rect" img={c.img} />
        <div style={{
          position: "absolute", inset: 0, pointerEvents: "none",
          background: "linear-gradient(180deg, rgba(86,52,64,0.20), rgba(86,52,64,0.05) 30%, rgba(215,222,220,0) 60%, var(--bg-1) 100%)",
        }} />
      </div>

      {/* Title block */}
      <div style={{ padding: "0 22px", marginTop: -42, position: "relative" }}>
        <div className="card" style={{ padding: "20px 20px 22px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10, flexWrap: "wrap" }}>
            {c.tag === "Urgent" && <Pill variant="urgent" icon={<span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--ink-mid)" }} />}>Urgent · {c.days} days left</Pill>}
            <Pill variant="soft" icon={<VerifiedIcon size={11} color="var(--ink-mid)" />}>Verified case</Pill>
          </div>
          <h1 className="display" style={{ fontSize: 32, marginBottom: 10 }}>
            {c.name} is seven. She loves school. She has a hole in her heart — and her mum has been trying to fix it for two years.
          </h1>
          <div style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--ink-mute)", fontSize: 13.5 }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
              <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M8 1.5C5 1.5 3 3.5 3 6.2 3 9.5 8 14.5 8 14.5s5-5 5-8.3C13 3.5 11 1.5 8 1.5z M8 5.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" stroke="var(--ink-mute)" strokeWidth="1.4"/></svg>
              {c.location}
            </span>
            <span>·</span>
            <span>{c.age} years old</span>
            <span>·</span>
            <span>{c.verified.split("by ")[1] || c.verified}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// Sticky donate footer (mobile)
function StickyDonate({ c, onDonate }) {
  return (
    <div style={{
      position: "sticky", bottom: 0, zIndex: 8,
      background: "rgba(251,250,248,0.92)",
      backdropFilter: "blur(16px) saturate(160%)",
      WebkitBackdropFilter: "blur(16px) saturate(160%)",
      borderTop: "1px solid var(--line)",
      padding: "12px 16px 14px",
      display: "flex", gap: 10, alignItems: "center",
    }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-deep)" }}>
          {peso(c.raised)} <span style={{ color: "var(--ink-mute)", fontWeight: 500 }}>· {Math.round(c.raised/c.goal*100)}%</span>
        </div>
        <div style={{ fontSize: 11.5, color: "var(--ink-mute)" }}>of {peso(c.goal)} goal · {c.days} days left</div>
      </div>
      <button className="btn btn--primary btn--lg" onClick={onDonate} style={{ padding: "14px 22px" }}>
        Support {c.name}
      </button>
    </div>
  );
}

// Story / story body
function StorySection({ c }) {
  const story = c.longStory || c.summary;
  return (
    <Section>
      <div className="eyebrow" style={{ marginBottom: 8 }}>The story</div>
      <h2 className="section-title" style={{ marginBottom: 14, fontSize: 22 }}>
        {c.name}'s journey, in her family's words.
      </h2>
      <p style={{ margin: 0, fontSize: 15.5, lineHeight: 1.6, color: "var(--ink-text)", whiteSpace: "pre-wrap" }}>
        {story}
      </p>
      {/* signature */}
      <div style={{ marginTop: 22, padding: "16px", borderRadius: 14, background: "var(--bg-2)", display: "flex", gap: 12, alignItems: "center" }}>
        <Avatar name="Marisol" palette="cream" kind="flower" size={42} initial={false} />
        <div>
          <div style={{ fontSize: 14, fontWeight: 600, color: "var(--ink-deep)" }}>Marisol Reyes</div>
          <div style={{ fontSize: 12, color: "var(--ink-mute)" }}>{c.name}'s mother · Cebu City</div>
        </div>
      </div>
    </Section>
  );
}

// Cost breakdown
function CostBreakdown() {
  const items = [
    { l: "Surgical fees & operating room", v: "US$1,965 / A$3,027" },
    { l: "Inpatient care (5 days, post-op ICU 2)", v: "US$1,193 / A$1,838" },
    { l: "Anesthesia & medication", v: "US$596 / A$919" },
    { l: "Pre-op workup & post-op follow-up", v: "US$456 / A$703" },
  ];
  return (
    <Section bg="var(--bg-2)">
      <div className="eyebrow" style={{ marginBottom: 8 }}>Treatment cost</div>
      <h2 className="section-title" style={{ marginBottom: 6, fontSize: 22 }}>
        What US$4,211 / A$6,486 covers.
      </h2>
      <p className="body-md" style={{ marginBottom: 18, fontSize: 14 }}>
        All amounts converted from the Philippine Heart Center's billing estimate (March 14, 2026). Shown in USD and AUD.
      </p>
      <div className="card" style={{ padding: 0 }}>
        {items.map((it, i) => (
          <div key={i} style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            padding: "14px 18px",
            borderBottom: i < items.length - 1 ? "1px solid var(--line)" : "none",
          }}>
            <span style={{ fontSize: 14, color: "var(--ink-text)" }}>{it.l}</span>
            <span style={{ fontFamily: "var(--font-display)", fontSize: 17, fontWeight: 500, color: "var(--ink-deep)" }}>{it.v}</span>
          </div>
        ))}
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          padding: "16px 18px", background: "var(--ink-deep)", color: "#FBF7F4",
        }}>
          <span style={{ fontSize: 14, fontWeight: 600 }}>Total</span>
          <span style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 500 }}>US$4,211 / A$6,486</span>
        </div>
      </div>
    </Section>
  );
}

// Updates timeline
function CampaignUpdates({ c }) {
  const updates = [
    { date: "Apr 8, 2026", title: "Surgery scheduled", body: "Philippine Heart Center confirmed the surgical date: June 2, 2026. Pre-op workup begins May 24." },
    { date: "Mar 30, 2026", title: "US$2,632 / A$4,054 milestone reached", body: "Thank you to the 89 donors who made this possible. Released to PHC against case file PHC-26-0214." },
    { date: "Mar 14, 2026", title: "Case verified", body: "Diagnosis and treatment plan confirmed by Dr. Castro, Pediatric Cardiology." },
    { date: "Mar 9, 2026", title: "Application received", body: "Marisol submitted Ana's medical records and doctor's referral." },
  ];
  return (
    <Section>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 16 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 6 }}>Updates</div>
          <h2 className="section-title" style={{ fontSize: 22 }}>Every step, posted here.</h2>
        </div>
        <span style={{ fontSize: 12.5, color: "var(--ink-mute)" }}>{updates.length} posts</span>
      </div>
      <div style={{ position: "relative", paddingLeft: 22 }}>
        <div style={{ position: "absolute", left: 6, top: 6, bottom: 6, width: 2, background: "var(--line-strong)", borderRadius: 2 }} />
        {updates.map((u, i) => (
          <div key={i} style={{ position: "relative", paddingBottom: 18 }}>
            <div style={{
              position: "absolute", left: -22, top: 6,
              width: 14, height: 14, borderRadius: "50%",
              background: i === 0 ? "var(--ink-mid)" : "var(--bg-1)",
              border: `2px solid ${i === 0 ? "var(--ink-mid)" : "var(--ink-soft)"}`,
              boxShadow: "0 0 0 4px var(--bg-1)",
            }} />
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.10em", textTransform: "uppercase", color: "var(--ink-mid)", marginBottom: 4 }}>
              {u.date}
            </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>
  );
}

// Donor wall
function DonorWall() {
  const donors = [
    { name: "Maria L.", amount: 5000, time: "2h ago", note: "Praying for Ana 💛" },
    { name: "Anonymous", amount: 1000, time: "5h ago" },
    { name: "Ferdie Santos", amount: 2500, time: "yesterday", note: "Fight, Ana!" },
    { name: "The Cruz Family", amount: 10000, time: "2 days ago", note: "From all of us. Stay strong." },
    { name: "Anonymous", amount: 500, time: "3 days ago" },
  ];
  return (
    <Section bg="var(--bg-1)">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 16 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 6 }}>Donor wall</div>
          <h2 className="section-title" style={{ fontSize: 22 }}>89 people supporting Ana.</h2>
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {donors.map((d, i) => (
          <div key={i} className="card" style={{ padding: 14, display: "flex", gap: 12, alignItems: "flex-start" }}>
            <Avatar name={d.name} size={40} initial={true} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <span style={{ fontSize: 14, fontWeight: 600, color: "var(--ink-deep)" }}>{d.name}</span>
                <span style={{ fontSize: 12, color: "var(--ink-mute)" }}>{d.time}</span>
              </div>
              <div style={{ fontSize: 13.5, color: "var(--ink-mid)", fontWeight: 600, marginTop: 2 }}>{peso(d.amount)}</div>
              {d.note && <p style={{ margin: "6px 0 0", fontSize: 13, color: "var(--ink-mute)", lineHeight: 1.4 }}>"{d.note}"</p>}
            </div>
          </div>
        ))}
      </div>
      <button className="btn btn--ghost btn--sm" style={{ marginTop: 14, width: "100%" }}>See all 89 donors</button>
    </Section>
  );
}

// Trust ribbon
function TrustRibbon() {
  const items = [
    { t: "Funds released to treating practitioner", d: "We pay the doctor, not the family. It protects donors, it protects families, and it means every peso is traceable from the moment you give it." },
    { t: "Independent verification", d: "Cases reviewed by partner clinicians, not by us." },
    { t: "Outcomes posted publicly", d: "We post every outcome — including the ones that break your heart. You deserve to know what happened. And the families deserve that honesty too." },
  ];
  return (
    <Section bg="var(--bg-2)">
      <div className="eyebrow" style={{ marginBottom: 8 }}>Why you can trust this</div>
      <h2 className="section-title" style={{ marginBottom: 16, fontSize: 22 }}>Three commitments.</h2>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {items.map((it, i) => (
          <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
            <div style={{ width: 26, height: 26, borderRadius: "50%", background: "rgba(122,59,105,0.12)", display: "grid", placeItems: "center", flexShrink: 0, marginTop: 2 }}>
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3.5 8l3 3 6-6.5" stroke="var(--ink-mid)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </div>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 17, fontWeight: 500, color: "var(--ink-deep)", marginBottom: 4, letterSpacing: "-0.01em" }}>{it.t}</div>
              <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.5, color: "var(--ink-mute)" }}>{it.d}</p>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// Other campaigns to support
function MoreCampaigns({ currentId, onOpen }) {
  const others = CAMPAIGNS.filter(c => c.id !== currentId).slice(0, 3);
  return (
    <Section>
      <div className="eyebrow" style={{ marginBottom: 8 }}>More children waiting</div>
      <h2 className="section-title" style={{ marginBottom: 16, fontSize: 22 }}>Others you can help today.</h2>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {others.map(c => (
          <CampaignCard key={c.id} c={c} onOpen={() => onOpen(c.id)} compact />
        ))}
      </div>
    </Section>
  );
}

function CampaignPage({ campaignId, onBack, onOpenCampaign, onNavigate }) {
  const c = CAMPAIGNS.find(x => x.id === campaignId) || CAMPAIGNS[0];
  const onDonate = () => alert(`Donate flow for ${c.name} would open here. (Prototype: CTAs only.)`);
  return (
    <>
      <CampaignHero c={c} onBack={onBack} />
      {/* Funding card */}
      <div style={{ padding: "20px 22px 0" }}>
        <div className="card" style={{ padding: 18 }}>
          <ProgressBar value={c.raised} max={c.goal} height={10} />
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 12, marginBottom: 14 }}>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 500, color: "var(--ink-deep)" }}>{peso(c.raised)}</div>
              <div style={{ fontSize: 12, color: "var(--ink-mute)" }}>raised of {peso(c.goal)} goal</div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 500, color: "var(--ink-deep)" }}>{Math.round(c.raised/c.goal*100)}%</div>
              <div style={{ fontSize: 12, color: "var(--ink-mute)" }}>{c.days} days left · 89 donors</div>
            </div>
          </div>
          <button className="btn btn--primary btn--lg" style={{ width: "100%" }} onClick={onDonate}>
            Donate to {c.name}
          </button>
          <button className="btn btn--ghost btn--sm" style={{ width: "100%", marginTop: 8 }}>
            Share Ana's campaign
          </button>
        </div>
      </div>

      <StorySection c={c} />
      <CostBreakdown />
      <CampaignUpdates c={c} />
      <DonorWall />
      <TrustRibbon />
      <MoreCampaigns currentId={c.id} onOpen={onOpenCampaign} />
      <Footer onNavigate={onNavigate} />
      <StickyDonate c={c} onDonate={onDonate} />
    </>
  );
}

Object.assign(window, { CampaignPage });