// stories.jsx — Stories listing + individual story detail pages

const STORY_ARTICLES = [
  {
    id: "anya",
    name: "Anya", age: 7, location: "Cebu City",
    condition: "Congenital heart defect",
    category: "Cardiology",
    img: "test.jpg",
    headline: "Anya heard music clearly for the first time the week after her surgery.",
    teaser: "Born with a hole in her heart, Anya spent her early years too breathless to keep up with other children. A corrective procedure at the Philippine Heart Center changed everything.",
    outcome: "Full recovery · Now in Grade 2",
    funded: "US$3,860 / A$5,946",
    date: "September 2025",
    partner: "Philippine Heart Center, Cebu",
    quote: "She ran to me after school on the first day back. She has never run before.",
    quoteName: "Leonora, Anya's mother",
    body: [
      "Anya was diagnosed with a ventricular septal defect — a small but significant hole in the wall between her heart's lower chambers — at three months old. Her family in Cebu City was told surgery would be needed before she started school, but the cost was far beyond what her parents, a jeepney driver and a market vendor, could reach.",
      "By the time she turned six, Anya tired easily, caught infections often, and had never been well enough to attend a full week of classes. Her cardiologist at the Philippine Heart Center confirmed the defect had not closed naturally and that a corrective open-heart procedure was now urgent.",
      "LittleCareFund verified Anya's case directly with PHC in July 2025. Donors from Australia and the United States covered the full surgical cost within eleven days of the campaign going live. The procedure was performed on 3 September 2025 by Dr. Reyes, Head of Paediatric Cardiology.",
      "Anya was discharged ten days later. At her six-week follow-up, her cardiologist confirmed the repair was complete and her heart function was normal. She enrolled in Grade 2 in October. Her mother says she now insists on walking to school herself.",
    ],
  },
  {
    id: "marco",
    name: "Marco", age: 10, location: "Tondo, Manila",
    condition: "Bilateral cleft lip and palate",
    category: "Reconstructive surgery",
    img: "test1.jpg",
    imgPosition: "center top",
    headline: "Marco gave his first clear speech at his school's end-of-year assembly.",
    teaser: "Marco was born with a bilateral cleft lip and palate. At ten, he had never been able to speak in a way others could fully understand — until Operation Smile's partner clinic changed that.",
    outcome: "Speech restored · Discharged Nov 2025",
    funded: "US$1,491 / A$2,297",
    date: "November 2025",
    partner: "Operation Smile partner clinic, Manila",
    quote: "He stood at the front of the class and introduced himself. Every word, perfectly clear.",
    quoteName: "Mrs Villanueva, Marco's teacher",
    body: [
      "Marco was born with a complete bilateral cleft — both his lip and palate were affected. His family in Tondo had accessed partial support for an initial lip repair when he was an infant, but the full palate repair, which is essential for normal speech development, remained unfunded.",
      "By the time Marco was nine, his speech difficulties had become a source of daily distress at school. He avoided answering questions in class and had withdrawn from most social activities. His mother, a seamstress, applied to LittleCareFund after seeing a flyer at their barangay health centre.",
      "Operation Smile's partner clinic in Manila reviewed Marco's records and confirmed he was a good candidate for palatal repair. LittleCareFund verified the case and the campaign was fully funded in six days. Surgery took place on 14 October 2025.",
      "Following the procedure, Marco worked with a speech therapist for eight weeks. At his school's December assembly, he introduced himself on stage — clearly, confidently, and to applause. His mother was in the front row.",
    ],
  },
  {
    id: "sofia",
    name: "Sofia", age: 6, location: "Davao City",
    condition: "Acute lymphoblastic leukaemia",
    category: "Oncology",
    img: "test2.jpg",
    headline: "Sofia's last chemotherapy cycle ended on her sixth birthday.",
    teaser: "Diagnosed with ALL at four, Sofia spent nearly two years in and out of Southern Philippines Medical Centre. Her family could not sustain the cost of treatment alone.",
    outcome: "In remission · Final cycle Dec 2025",
    funded: "US$4,807 / A$7,405",
    date: "December 2025",
    partner: "Southern Philippines Medical Centre, Davao",
    quote: "The nurses sang to her. She blew out candles in the ward. It was the best day.",
    quoteName: "Ramon, Sofia's father",
    body: [
      "Sofia was diagnosed with acute lymphoblastic leukaemia in March 2023, shortly before her fourth birthday. Her parents, both teachers at a public elementary school in Davao, immediately began treatment at Southern Philippines Medical Centre — but the cumulative cost of six chemotherapy cycles stretched far beyond their combined savings.",
      "By Cycle 3, the family had sold their motorcycle and borrowed from relatives. A social worker at SPMC referred them to LittleCareFund. Our team visited Sofia in the ward, reviewed her oncology case file, and launched a verified campaign within a week.",
      "Donors covered Cycles 4, 5, and 6 in full. Each cycle included inpatient chemotherapy, bloodwork, and supportive medication. Dr. Palma, Sofia's oncologist, reported strong response throughout. Sofia's bone marrow biopsy after Cycle 6 showed complete remission.",
      "Sofia's final cycle concluded on 12 December 2025 — her sixth birthday. The nursing team on Ward C decorated her room and the family brought a small cake. She goes back for monitoring every three months. So far, every result has come back clear.",
    ],
  },
  {
    id: "elias",
    name: "Elias", age: 12, location: "Iloilo City",
    condition: "Severe adolescent scoliosis",
    category: "Orthopaedic surgery",
    img: "test3.jpg",
    headline: "Elias stands straight for the first time. He measured himself every morning after surgery.",
    teaser: "Elias had a spinal curve of 68 degrees — severe enough to compress his lungs. Without surgery he faced permanent respiratory damage. His family had nowhere left to turn.",
    outcome: "Full correction · Discharged Feb 2026",
    funded: "US$5,000 / A$7,703",
    date: "February 2026",
    partner: "West Visayas State University Medical Centre",
    quote: "He put a mark on the doorframe at his old height. Then a new one. He calls them Before and After.",
    quoteName: "Celia, Elias's grandmother",
    body: [
      "Elias was referred to West Visayas State University Medical Centre in late 2024 with a primary spinal curve measuring 68 degrees — well past the threshold requiring surgical correction. At that degree of curvature, his spine had begun to compress his left lung, and his pulmonologist warned that without intervention, respiratory function would continue to deteriorate.",
      "His grandmother Celia, who raised Elias after his parents moved abroad for work, had been managing with bracing since he was nine. When bracing failed to halt progression, the family faced a surgery cost they could not cover. His parents sent what they could from overseas, but it was not enough.",
      "LittleCareFund's case team visited Elias at home, reviewed his imaging and surgical referral, and confirmed the case with the orthopaedic team at WVSUMC. The campaign reached its goal in eighteen days, supported largely by donors in Australia who had seen a social media post shared by Elias's school friends.",
      "Corrective spinal fusion surgery was performed on 3 February 2026 by Dr. Gonzalez. Elias spent twelve days recovering in post-operative care. At his eight-week check-up, imaging showed full correction and healthy fusion. He is now back at school, playing basketball with his classmates, and has grown 3.5 centimetres.",
    ],
  },
];

// ─────────────────────────────────────────────────────────────
// Story tile — used in the grid listing
// ─────────────────────────────────────────────────────────────
function StoryTile({ story, onOpen }) {
  return (
    <div
      className="card"
      onClick={() => onOpen(story.id)}
      style={{
        display: "flex", flexDirection: "column", overflow: "hidden",
        cursor: "pointer", transition: "transform 0.2s ease, box-shadow 0.2s ease",
      }}
      onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-3px)"; e.currentTarget.style.boxShadow = "var(--shadow-2)"; }}
      onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "var(--shadow-1)"; }}
    >
      {/* image */}
      <div style={{ position: "relative", width: "100%", aspectRatio: "3 / 2", overflow: "hidden", flexShrink: 0 }}>
        <img
          src={story.img}
          alt={story.name}
          style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: story.imgPosition || "center center", display: "block" }}
        />
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, rgba(86,52,64,0) 40%, rgba(86,52,64,0.55) 100%)",
          pointerEvents: "none",
        }} />
        <div style={{ position: "absolute", top: 12, left: 12 }}>
          <Pill variant="soft">{story.category}</Pill>
        </div>
        <div style={{
          position: "absolute", bottom: 12, left: 14, right: 14,
          fontSize: 11, fontWeight: 700, letterSpacing: "0.10em",
          textTransform: "uppercase", color: "rgba(251,247,244,0.85)",
          pointerEvents: "none",
        }}>
          {story.name}, {story.age} · {story.location}
        </div>
      </div>

      {/* text body */}
      <div style={{ padding: "18px 20px 20px", display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
        <h3 style={{
          margin: 0, fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 500,
          color: "var(--ink-deep)", letterSpacing: "-0.015em", lineHeight: 1.2,
        }}>
          {story.headline}
        </h3>
        <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.55, color: "var(--ink-mute)", flex: 1 }}>
          {story.teaser}
        </p>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 4 }}>
          <Pill variant="success">{story.outcome.split(" · ")[0]}</Pill>
          <span style={{ fontSize: 12.5, color: "var(--ink-mid)", fontWeight: 600 }}>Read story →</span>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Stories listing page
// ─────────────────────────────────────────────────────────────
function StoriesPage({ onOpenStory, onNavigate }) {
  return (
    <>
      {/* hero header */}
      <Section bg="var(--bg-2)">
        <div className="eyebrow" style={{ marginBottom: 10 }}>Outcomes</div>
        <h1 className="display" style={{ fontSize: 42, marginBottom: 16 }}>
          Funded. Healed.<br />Followed Up.
        </h1>
        <p className="body-md" style={{ marginBottom: 0, maxWidth: 520 }}>
          Every story here is a case LittleCareFund verified, funded, and tracked to completion. We publish outcomes — including the difficult ones — because life isn't always fair and trust is built on honesty.
        </p>
      </Section>

      {/* story grid */}
      <Section>
        <div className="stories-grid" style={{ display: "flex", flexDirection: "column", gap: 22 }}>
          {STORY_ARTICLES.map(s => (
            <StoryTile key={s.id} story={s} onOpen={onOpenStory} />
          ))}
        </div>
      </Section>

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

// ─────────────────────────────────────────────────────────────
// Individual story detail page
// ─────────────────────────────────────────────────────────────
function StoryDetailPage({ storyId, onBack, onNavigate }) {
  const s = STORY_ARTICLES.find(x => x.id === storyId) || STORY_ARTICLES[0];

  return (
    <>
      {/* hero image */}
      <div style={{ position: "relative", height: 400, overflow: "hidden" }}>
        <img
          src={s.img}
          alt={s.name}
          style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: s.imgPosition || "center center", display: "block" }}
        />
        <div style={{
          position: "absolute", inset: 0, pointerEvents: "none",
          background: "linear-gradient(180deg, rgba(86,52,64,0.25) 0%, rgba(86,52,64,0.05) 40%, rgba(86,52,64,0) 60%, var(--bg-1) 100%)",
        }} />
      </div>

      {/* title card */}
      <div style={{ padding: "0 22px", marginTop: -32, position: "relative", zIndex: 2 }}>
        <div className="card" style={{ padding: "22px 22px 24px" }}>
          <Pill variant="success" style={{ marginBottom: 12 }}>{s.outcome}</Pill>
          <h1 className="display" style={{ fontSize: 30, margin: "12px 0 14px", lineHeight: 1.1 }}>
            {s.headline}
          </h1>
          <div style={{ display: "flex", flexWrap: "wrap", gap: "6px 16px", fontSize: 13, color: "var(--ink-mute)" }}>
            <span>{s.name}, {s.age} · {s.location}</span>
            <span>·</span>
            <span>{s.condition}</span>
            <span>·</span>
            <span>{s.date}</span>
          </div>
        </div>
      </div>

      {/* story body */}
      <Section>
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          {s.body.map((para, i) => (
            <p key={i} style={{ margin: 0, fontSize: 15.5, lineHeight: 1.7, color: "var(--ink-text)" }}>
              {para}
            </p>
          ))}
        </div>
      </Section>

      {/* pull quote */}
      <Section bg="var(--ink-deep)">
        <blockquote style={{ margin: 0 }}>
          <p style={{
            fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 500,
            color: "#FBF7F4", lineHeight: 1.35, letterSpacing: "-0.015em",
            margin: "0 0 18px",
          }}>
            "{s.quote}"
          </p>
          <footer style={{ fontSize: 13, color: "#C9B5BC", fontWeight: 600, letterSpacing: "0.04em", textTransform: "uppercase" }}>
            — {s.quoteName}
          </footer>
        </blockquote>
      </Section>

      {/* outcome facts */}
      <Section bg="var(--bg-2)">
        <div className="eyebrow" style={{ marginBottom: 12 }}>Case summary</div>
        <div className="card" style={{ padding: 0 }}>
          {[
            { l: "Partner organisation", v: s.partner },
            { l: "Total funded", v: s.funded },
            { l: "Outcome confirmed", v: s.date },
            { l: "Condition treated", v: s.condition },
          ].map((row, 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,
            }}>
              <span style={{ fontSize: 13.5, color: "var(--ink-mute)", flexShrink: 0 }}>{row.l}</span>
              <span style={{ fontSize: 14, fontWeight: 600, color: "var(--ink-deep)", textAlign: "right" }}>{row.v}</span>
            </div>
          ))}
        </div>
      </Section>

      {/* CTA */}
      <Section bg="var(--bg-1)">
        <div className="eyebrow" style={{ marginBottom: 10 }}>There are more children waiting</div>
        <h2 className="display" style={{ fontSize: 32, marginBottom: 14 }}>
          Help write the next story.
        </h2>
        <p className="body-md" style={{ marginBottom: 22 }}>
          Every campaign on LittleCareFund is verified by a partner medical practitioner. Your donation goes directly to the treating practitioner — tracked from first peso to final outcome.
        </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, { StoriesPage, StoryDetailPage, STORY_ARTICLES });
