/* global React */
// Success Stories — video testimonials. Fill VIDEO for each learner:
//   video: { type: "youtube", id: "VIDEO_ID" }  or  { type: "file", src: "assets/videos/name.mp4" }
// Leave video: null to show a placeholder slot.

const STORIES = [
{ name: "Reegan Batchelor", pathway: "Graduated Scholar", quote: "", video: { type: "youtube", id: "IlIa7vJ7Dsg" } },
{ name: "Jayden Walden & Harvey Barnes", pathway: "Current Scholar", quote: "", video: { type: "youtube", id: "fjWESfHLEZI" } },
{ name: "Harry French", pathway: "Graduated Scholar", quote: "", video: { type: "youtube", id: "IjzisEwrNBI" } },
{ name: "Harry Wilkshire", pathway: "Current Scholar", quote: "", video: { type: "youtube", id: "dk54Gs-Oono" } },
{ name: "Josh Bodibe", pathway: "Graduated Scholar", quote: "", video: { type: "youtube", id: "yxXyIsar1i8" } },
{ name: "Matty Leen", pathway: "Graduated Scholar", quote: "", video: { type: "youtube", id: "pf4AMcudwck" } },
{ name: "Zaid Sahil", pathway: "Graduated Scholar", quote: "", video: { type: "youtube", id: "LGuVMBVQREM" } }];


const ST_PLAY =
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z" /></svg>;


function StoryVideo({ s, featured }) {
  if (s.video && s.video.type === "youtube") {
    return (
      <div className="st-media">
        <iframe
          src={"https://www.youtube-nocookie.com/embed/" + s.video.id}
          title={s.name + " — " + s.pathway}
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
          loading="lazy"></iframe>
      </div>);
  }
  if (s.video && s.video.type === "file") {
    return (
      <div className="st-media">
        <video src={s.video.src} controls preload="metadata" poster={s.video.poster || undefined}></video>
      </div>);
  }
  return (
    <div className="st-media st-media-empty">
      <span className="st-play" aria-hidden="true">{ST_PLAY}</span>
      <span className="st-empty-label">{featured ? "Featured video on its way" : "Video on its way"}</span>
    </div>);
}

function SuccessStoriesPage() {
  const [featured, ...rest] = STORIES;
  return (
    <div data-screen-label="Success Stories">
      <header className="page-header">
        <div className="container">
          <div className="crumbs">
            <a href="#/">FEA</a><span className="sep">/</span><span className="here">Success Stories</span>
          </div>
          <div className="page-header-row">
            <h1>Real Learners.<br />Real Stories.</h1>
            <p className="lede">Hear directly from the learners and players building their futures at Holbeach United FEA — in their own words.</p>
          </div>
        </div>
      </header>
      <section className="container st-body">
        <article className="st-featured">
          <StoryVideo s={featured} featured={true} />
          <div className="st-meta">
            <span className="st-pathway">{featured.pathway}</span>
            <h2 className="st-name">{featured.name}</h2>
            {featured.quote ? <p className="st-quote">&ldquo;{featured.quote}&rdquo;</p> : null}
          </div>
        </article>
        <div className="st-grid">
          {rest.map((s, i) =>
          <article className="st-card" key={i}>
              <StoryVideo s={s} />
              <div className="st-meta">
                <span className="st-pathway">{s.pathway}</span>
                <h3 className="st-name">{s.name}</h3>
                {s.quote ? <p className="st-quote">&ldquo;{s.quote}&rdquo;</p> : null}
              </div>
            </article>
          )}
        </div>
      </section>
      <CtaStrip
        heading="Ready to write your own story?"
        body="Join the learners and players already building their futures through sport and education."
        primary={{ label: "Register Your Interest", href: "https://forms.gle/qhQPuDfyevaFHpQW7" }}
        secondary={{ label: "Contact us", href: "#/contact" }} />
    </div>);

}

Object.assign(window, { SuccessStoriesPage });