const { Button } = window.VoxAwenDesignSystem_e48818;

const CV = "public/cv/";

// In-page contents, offered from the nav while this page is showing.
const cvSections = [
  { id: "cv-what",    label: "About Companion Voices" },
  { id: "cv-songs",   label: "The songs",       flush: true },
  { id: "cv-support", label: "Support",     flush: true },
];

// Short clips, not whole songs. Titles as they are named in the recordings.
const clips = [
  { file: "laoula-laoula.mp3", name: "Laoula Laoula", note: "Sung in the round, wordless to most ears — which is the point." },
  { file: "oj-poved-kolo.mp3", name: "Oj Poved Kolo", note: "A Balkan melody, simple and repetitive enough to hold a room." },
  { file: "yono-nikau.mp3",    name: "Yono Nikau",    note: "Close harmony, quiet enough to sit under a conversation." },
];

/* Newsletter and donation both belong to Companion Voices nationally rather
   than to Vox Awen.

   The newsletter link goes to the Mailchimp archive, which is where past issues
   live and where people join the mailing list — so this links out rather than
   embedding a signup form. An email field here would have to post somewhere,
   and there is no endpoint to post to.

   Donations go to Companion Voices nationally, not to Vox Awen. */
const NEWSLETTER_URL = "https://us5.campaign-archive.com/home/?u=994af754b43151db03ab7b08d&id=2b33a8d938";
const DONATE_URL = "https://companionvoices.org/donate/";

/* A tab pinned to the right edge, opening on click. Deliberately not automatic:
   a panel that appears over the reading column unprompted is the thing people
   dismiss without reading. */
function SupportDock() {
  const [open, setOpen] = React.useState(false);
  const shown = useAfterChapter();

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open]);

  return (
    <div className={"dock" + (shown ? " dock--in" : "")} aria-hidden={shown ? undefined : "true"}>
      {open ? (
        <div className="cv-panel" role="dialog" aria-label="Newsletter">
          <button className="cv-panel-close" type="button" onClick={() => setOpen(false)} aria-label="Close">Close ✕</button>
          <h3>Newsletter</h3>
          <p>News from the Companion Voices network, with an archive of past issues. You can join the mailing list here.</p>
          <a className="cv-panel-cta" href={NEWSLETTER_URL} target="_blank" rel="noopener noreferrer">
            Read and subscribe →
          </a>
        </div>
      ) : null}

      <div className="dock-tabs">
        <button className="dock-tab" type="button" onClick={() => setOpen((o) => !o)} aria-expanded={open}>
          Newsletter
        </button>
        <a className="dock-tab dock-tab--accent" href={DONATE_URL} target="_blank" rel="noopener noreferrer">
          Donate
        </a>
      </div>
    </div>
  );
}

function EndOfLife({ onNav }) {
  return (
    <section id="end-of-life" style={{ scrollMarginTop: 76 }}>

      {/* Hero — same pinned reveal as the other offering pages */}
      <ScrollReveal
        image="public/companion-voices.png"
        alt="Hands held together, an elder's and a younger person's"
        mark={["Companion", "Voices"]}
        layout="quiet"
        lightGround
        /* Held, like the Graceful Ignited Bodies hero: the chapter plate below
           carries the handover. Singing for the end of life used to resolve here
           and now opens across the plate as Singing / for the dying. */
        still
      />

      <div className="rise rise--compact">

      {/* Names the page before the sections begin */}
      <ChapterPlate
        image={CV + "meadow.jpg"}
        alt="Dew on meadow grasses, lit from behind"
        left="Singing"
        right="for the dying"
      />

      <SectionStrip sections={cvSections} startId="cv-what" />

      {/* What this is — a centred statement, the shape Graceful Ignited Bodies
          opens with. The picture that used to sit beside these words is gone:
          the words carry it, and the phrases that matter are picked out. */}
      <div className="cv-statement" id="cv-what">
        <p>
          {"Companion Voices is a network of singers based across the UK who are trained to "}<em>sing</em>{" at the bedside of those nearing the "}<em>end of life</em>{"."}
        </p>
        <p>
          {"At any time, you can get in touch on behalf of yourself or someone you love, and a small number of us — usually two to four — will come and sing "}<em>free of charge</em>{". It might be your family home, a residential home, a hospital, or a hospice, "}<em>wherever you are</em>{"."}
        </p>

        {/* Both actions the page used to spread over two sections: the ask, and
            the national guide that the bedside-visit section carried. */}
        <div className="cv-statement-actions">
          <Button variant="primary" onClick={() => onNav("contact")}>Ask about this work</Button>
          <a className="cv-statement-link" href="https://companionvoices.org/bedside-visits/" target="_blank" rel="noopener noreferrer">
            Read the full guide to what to expect →
          </a>
        </div>
      </div>

      {/* The songs, with the clips — one section: what the singing is, then
          the chance to hear it. */}
      <div className="cv-section cv-listen" id="cv-songs">
        <img src={CV + "crocus.jpg"} alt="" aria-hidden="true" loading="lazy" />
        <div className="cv-listen-scrim" />
        <div className="cv-inner">
          <div className="cv-lede">
            <h2 className="cv-heading">The songs we sing</h2>
            <p>
              Our songs are chosen to hold a soundscape that's comforting, relaxing and undemanding — simple and repetitive, drawn from a wide range of traditions, sometimes in languages the person won't recognise.
            </p>
          </div>
          <div className="cv-tracks">
            {clips.map((c) => (
              <div className="cv-track" key={c.file}>
                <div>
                  <h3 className="cv-track-name">{c.name}</h3>
                  <p className="cv-track-note">{c.note}</p>
                </div>
                <audio controls preload="none" src={CV + c.file}>
                  Your browser can't play audio — <a href={CV + c.file}>download the clip</a> instead.
                </audio>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Support */}
      <div className="cv-section cv-support" id="cv-support">
        <div className="cv-support-grid">
          <div className="cv-support-card">
            <h3>Newsletter</h3>
            <p>News from the Companion Voices network, with an archive of past issues. You can join the mailing list here.</p>
            <a className="cv-support-link" href={NEWSLETTER_URL} target="_blank" rel="noopener noreferrer">
              Read the archive and subscribe →
            </a>
          </div>
          <div className="cv-support-card">
            <h3>Donate</h3>
            <p>Bedside singing is free to everyone who asks for it. Donations keep it that way.</p>
            <a className="cv-support-link" href={DONATE_URL} target="_blank" rel="noopener noreferrer">
              Donate to Companion Voices →
            </a>
          </div>
        </div>

        <div className="cv-inner cv-support-closing" style={{ marginTop: "clamp(48px, 7vh, 76px)", maxWidth: 640 }}>
          <p style={{ font: "italic 500 19px/1.6 var(--font-display)", margin: 0 }}>
            Companion Voices is a national organisation. You can read more at{" "}
            <a href="https://companionvoices.org/" target="_blank" rel="noopener noreferrer">companionvoices.org ↗</a>
          </p>
          <p style={{ font: "var(--text-body-md)", margin: "12px 0 0" }}>
            You can also email them directly at{" "}
            <a href="mailto:info@companionvoices.org">info@companionvoices.org</a>.
          </p>
        </div>
      </div>

      </div>

      <SupportDock />
    </section>
  );
}

window.pageSections = Object.assign(window.pageSections || {}, { "end-of-life": cvSections });
Object.assign(window, { EndOfLife, cvSections });