// about.jsx — About page for LittleCareFund

const FOUNDER_BIO_PARAS = [
  "Todd has spent most of his adult life showing up in places where people needed practical help and didn't have enough of it. That's taken him to Zimbabwe, South Africa, Russia, and for many years, back to the Philippines — again and again.",
  "His relationship with the Philippines started through church and community work — leading teams, running feeding programs, supporting families in remote villages, partnering with organisations like Compassion Australia. But the thing that stayed with him wasn't the programs. It was the parents. Particularly the ones whose children were sick, and who had nowhere to turn.",
  "LittleCareFund grew out of that. Not from a boardroom or a strategy session — from years of sitting with families who had exhausted every option they knew of, and realising that what was missing wasn't goodwill. It was a reliable, trustworthy bridge between people who needed help and people who wanted to give it.",
  "Todd brings more than compassion to this work. Over fifteen years of pastoral leadership — as Youth Pastor, Associate Pastor, and Senior Pastor — he learned to lead teams, manage complexity, and support people through genuinely hard situations. More recently he's built deep experience in marketing, digital systems, and communications, business management and development, which is why LittleCareFund works the way it does: each child's story told with care, each donor's trust handled seriously.",
  "Every child deserves to be seen. Every family deserves to feel heard. And the right kind of help — practical, respectful, and honest — can change everything.",
];

const PRINCIPLES = [
  {
    icon: (
      <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
        <path d="M14 3L16.4 10.2H24L17.8 14.6L20.2 21.8L14 17.4L7.8 21.8L10.2 14.6L4 10.2H11.6L14 3Z" fill="var(--ink-soft)" opacity="0.35"/>
        <path d="M8 16l4 4 8-9" stroke="var(--ink-mid)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
    heading: "Verified before we publish",
    body: "We don't post a child's story until we've spoken to their doctor ourselves. We've seen the diagnosis. We know the cost. If we can't stand behind it completely, it doesn't go up. Simple as that.",
  },
  {
    icon: (
      <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
        <rect x="4" y="6" width="20" height="16" rx="3" stroke="var(--ink-mid)" strokeWidth="1.8" fill="none"/>
        <path d="M9 13h10M9 17h6" stroke="var(--ink-soft)" strokeWidth="1.6" strokeLinecap="round"/>
        <circle cx="14" cy="3" r="1.5" fill="var(--ink-mid)" opacity="0.5"/>
      </svg>
    ),
    heading: "Transparent to the last peso",
    body: "Your donation goes directly to the clinic. Not to the family. We keep a record of every transfer, every line item. And whatever happens, we post the outcome. Even the hard ones.",
  },
  {
    icon: (
      <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
        <path d="M14 5C9 5 5 9 5 14s4 9 9 9 9-4 9-9-4-9-9-9z" stroke="var(--ink-mid)" strokeWidth="1.8" fill="none"/>
        <path d="M10 14c1.5 2 5 4 8 0" stroke="var(--ink-soft)" strokeWidth="1.6" strokeLinecap="round"/>
        <circle cx="11" cy="11.5" r="1.2" fill="var(--ink-mid)" opacity="0.6"/>
        <circle cx="17" cy="11.5" r="1.2" fill="var(--ink-mid)" opacity="0.6"/>
      </svg>
    ),
    heading: "Built around real families",
    body: "These are real people going through something really hard. We listen carefully, we ask the right questions, and we tell their story the way they'd want it told. We'd never post something a family wouldn't be proud of.",
  },
];

const STATS = [
  { n: "52", label: "Children funded" },
  { n: "12", label: "Partner practitioners" },
  { n: "A$412k", label: "Raised to date" },
  { n: "3", label: "Donor countries" },
];

function AboutPage({ onNavigate }) {
  return (
    <>
      {/* ── Hero ─────────────────────────────────────────────── */}
      <Section bg="var(--bg-2)">
        <div className="eyebrow" style={{ marginBottom: 10 }}>About us</div>
        <h1 className="display" style={{ fontSize: 40, marginBottom: 20, maxWidth: 600 }}>
          Helping children in the Philippines<br />access the care they need.
        </h1>
        <p className="body-md" style={{ maxWidth: 560, marginBottom: 0 }}>
          Most of the families we work with have already spent months trying to find help — and getting nowhere. LittleCareFund exists for that moment. We sit with families, hear what's actually happening, and figure out what can be done. Then we find the people who want to help, and we make sure the help actually lands.
        </p>
      </Section>

      {/* ── Three principles ─────────────────────────────────── */}
      <Section>
        <h2 className="section-title" style={{ marginBottom: 22 }}>How we work</h2>
        <div className="about-principles-grid" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {PRINCIPLES.map((p, i) => (
            <div key={i} className="card" style={{ padding: "22px 22px 24px", display: "flex", gap: 18, alignItems: "flex-start" }}>
              <div style={{
                width: 52, height: 52, borderRadius: 14, flexShrink: 0,
                background: "var(--bg-3)", display: "grid", placeItems: "center",
              }}>
                {p.icon}
              </div>
              <div>
                <h3 style={{
                  margin: "0 0 8px", fontFamily: "var(--font-display)", fontSize: 19,
                  fontWeight: 500, color: "var(--ink-deep)", letterSpacing: "-0.015em",
                }}>{p.heading}</h3>
                <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: "var(--ink-mute)" }}>{p.body}</p>
              </div>
            </div>
          ))}
        </div>
      </Section>

      {/* ── Stats bar ────────────────────────────────────────── */}
      <section style={{ background: "var(--ink-deep)", padding: "32px 24px" }}>
        <div className="about-stats-row" style={{ display: "flex", flexWrap: "wrap", gap: 28, justifyContent: "space-around" }}>
          {STATS.map((s, i) => (
            <div key={i} style={{ textAlign: "center" }}>
              <div style={{
                fontFamily: "var(--font-display)", fontSize: 42, fontWeight: 500,
                color: "#FBF7F4", letterSpacing: "-0.03em", lineHeight: 1,
              }}>{s.n}</div>
              <div style={{ fontSize: 12.5, fontWeight: 600, color: "#C9B5BC", marginTop: 6, letterSpacing: "0.04em", textTransform: "uppercase" }}>
                {s.label}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ── Partner hospitals ────────────────────────────────── */}
      <Section bg="var(--bg-3)">
        <h2 className="section-title" style={{ marginBottom: 10 }}>Our partner network</h2>
        <p className="body-md" style={{ marginBottom: 20, maxWidth: 520 }}>
          We work exclusively with accredited medical centres, specialist clinics, and private practitioners. Every partner is vetted before any case referral, and all funds are remitted directly to the treating practitioner.
        </p>
        <div style={{ display: "flex", flexDirection: "column", gap: 0 }} className="card" >
          {[
            ["Philippine Heart Center", "Quezon City, Metro Manila", "Cardiology"],
            ["Operation Smile Partner Clinic", "Manila & regional centres", "Reconstructive surgery"],
            ["Southern Philippines Medical Centre", "Davao City", "Oncology · General surgery"],
            ["West Visayas State University Medical Centre", "Iloilo City", "Orthopaedics · Neurology"],
            ["Cebu Velez General Hospital", "Cebu City", "Paediatrics · General"],
          ].map(([name, loc, spec], i, arr) => (
            <div key={i} style={{
              display: "flex", justifyContent: "space-between", alignItems: "flex-start",
              padding: "14px 18px",
              borderBottom: i < arr.length - 1 ? "1px solid var(--line)" : "none",
              gap: 12, flexWrap: "wrap",
            }}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600, color: "var(--ink-deep)" }}>{name}</div>
                <div style={{ fontSize: 12.5, color: "var(--ink-mute)", marginTop: 2 }}>{loc}</div>
              </div>
              <Pill variant="soft">{spec}</Pill>
            </div>
          ))}
        </div>
      </Section>

      {/* ── Founder bio ──────────────────────────────────────── */}
      <Section bg="var(--bg-2)">
        <div className="eyebrow" style={{ marginBottom: 12 }}>Founder</div>
        <h2 className="section-title" style={{ marginBottom: 24 }}>Founder Bio</h2>

        <div className="about-founder-layout" style={{ display: "flex", flexDirection: "column", gap: 28 }}>

          {/* photo */}
          <div className="about-founder-img" style={{ width: "100%", borderRadius: "var(--r-lg)", overflow: "hidden", flexShrink: 0 }}>
            <img
              src="toddbio.jpg"
              alt="Todd Murray — Founder, LittleCareFund"
              style={{ width: "100%", display: "block", objectFit: "cover", maxHeight: 420 }}
            />
          </div>

          {/* text */}
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div>
              <div style={{
                fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 500,
                color: "var(--ink-deep)", letterSpacing: "-0.02em", lineHeight: 1.1,
              }}>Todd Murray</div>
              <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-mid)", marginTop: 4, letterSpacing: "0.02em" }}>
                Founder &amp; Director · LittleCareFund
              </div>
            </div>

            {FOUNDER_BIO_PARAS.slice(0, -1).map((para, i) => (
              <p key={i} style={{ margin: 0, fontSize: 15, lineHeight: 1.7, color: "var(--ink-text)" }}>
                {para}
              </p>
            ))}

            {/* closing quote styled differently */}
            <p style={{
              margin: 0, fontFamily: "var(--font-display)", fontSize: 17.5,
              fontStyle: "italic", lineHeight: 1.5, color: "var(--ink-deep)",
              borderLeft: "3px solid var(--ink-soft)", paddingLeft: 16,
            }}>
              {FOUNDER_BIO_PARAS[FOUNDER_BIO_PARAS.length - 1]}
            </p>
          </div>
        </div>
      </Section>

      {/* ── CTA ──────────────────────────────────────────────── */}
      <Section bg="var(--bg-1)">
        <div className="eyebrow" style={{ marginBottom: 10 }}>Ready to help?</div>
        <h2 className="display" style={{ fontSize: 32, marginBottom: 14 }}>
          Every case is waiting for someone like you.
        </h2>
        <p className="body-md" style={{ marginBottom: 22, maxWidth: 480 }}>
          A monthly gift — whatever you can manage — means a child somewhere doesn't have to wait as long and urgent needs can be prioritised.
        </p>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <button className="btn btn--primary btn--lg" onClick={() => onNavigate && onNavigate("donate")}>
            Donate monthly
          </button>
          <button className="btn btn--ghost btn--sm" onClick={() => onNavigate && onNavigate("find")}>
            See verified cases
          </button>
        </div>
      </Section>

      <Footer onNavigate={onNavigate} />
    </>
  );
}

Object.assign(window, { AboutPage });
