/* global React */
// Safeguarding page — statement, reporting contacts, downloadable policies.

const SG_POLICIES = [
{ t: "Safeguarding & Child Protection Policy", org: "Holbeach United FEA × VLUK", d: "Our core policy covering the protection and welfare of every learner, in line with Keeping Children Safe in Education.", file: "assets/policies/Safeguarding and Child Protection Policy.pdf" },
{ t: "JPL Academy Safeguarding Policy", org: "Holbeach United FEA × JPL", d: "Safeguarding arrangements specific to our JPL Academy age groups (U12–U16).", file: "assets/policies/JPL Academy Safeguarding Policy.pdf" },
{ t: "Recruitment & Vetting Policy", org: "Holbeach United FEA × VLUK", d: "Safer recruitment: DBS checks, references and vetting for all staff, coaches and volunteers.", file: "assets/policies/Recruitment and Vetting Policy.pdf" },
{ t: "Preventing Radicalisation & Extremism Policy", org: "Holbeach United FEA × VLUK", d: "Our approach to the Prevent duty and protecting learners from radicalisation and extremism.", file: "assets/policies/Preventing Radicalisation and Extremism Policy.pdf" },
{ t: "SEND Policy", org: "Holbeach United FEA × VLUK", d: "How we support learners with special educational needs and disabilities.", file: "assets/policies/SEND Policy.pdf" },
{ t: "Modern Slavery Policy", org: "Holbeach United FEA × VLUK", d: "Our commitment to preventing modern slavery and human trafficking across our organisation.", file: "assets/policies/Modern Slavery Policy.pdf" }];


const SG_PDF_ICON =
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" /><path d="M14 3v6h6" /><path d="M12 12v6M9.5 15.5L12 18l2.5-2.5" /></svg>;


function SafeguardingPage() {
  const C = window.FEA_DATA.CONTACT;
  return (
    <div data-screen-label="Safeguarding">
      <header className="page-header">
        <div className="container">
          <div className="crumbs">
            <a href="#/">FEA</a><span className="sep">/</span><span className="here">Safeguarding</span>
          </div>
          <div className="page-header-row">
            <h1>Your safety<br />comes first.</h1>
            <p className="lede">Holbeach United FEA is committed to safeguarding and promoting the welfare of every child, young person and adult in our care — on the pitch, in the classroom and everywhere in between. Every member of staff shares this responsibility.</p>
          </div>
        </div>
      </header>
      <section className="container sg-body">
        <div className="sg-grid">
          <div>
            <span className="eyebrow">Our commitment</span>
            <p>All staff, coaches and volunteers are subject to safer recruitment procedures, including enhanced DBS checks, and receive regular safeguarding training. We work closely with our education partners, the leagues we compete in and local agencies to keep every learner and player safe.</p>
            <p>We expect everyone connected with the academy — staff, learners, players, parents and visitors — to share our commitment and to speak up if something doesn't feel right.</p>
          </div>
          <div className="sg-report">
            <span className="eyebrow">Report a concern</span>
            <p>If you are worried about the safety or welfare of a learner or player, contact us straight away:</p>
            {C.directors.map((d, i) =>
            <p className="sg-contact" key={i}>
                <strong>{d.name}</strong><br />
                <a href={"mailto:" + d.email}>{d.email}</a><br />
                <a href={"tel:" + d.phone.replace(/\s/g, "")}>{d.phone}</a>
              </p>
            )}
            <p className="sg-urgent">If a child is in immediate danger, call 999. You can also contact the NSPCC on 0808 800 5000.</p>
          </div>
        </div>
        <div className="sg-policies-head">
          <span className="eyebrow">Our policies</span>
          <p>Download our safeguarding and welfare policies below.</p>
        </div>
        <div className="sg-policies">
          {SG_POLICIES.map((p, i) =>
          <a className="sg-policy" href={p.file} target="_blank" rel="noreferrer" key={i}>
              <span className="sg-policy-ico" aria-hidden="true">{SG_PDF_ICON}</span>
              <span className="sg-policy-body">
                <span className="sg-policy-org">{p.org}</span>
                <span className="sg-policy-title">{p.t}</span>
                <span className="sg-policy-desc">{p.d}</span>
                <span className="sg-policy-cta">Download PDF <span className="arrow">↓</span></span>
              </span>
            </a>
          )}
        </div>
      </section>
    </div>);

}

Object.assign(window, { SafeguardingPage });