// Club Policies page. Reads POLICIES from policies-data.jsx.
// One policy shown at a time, picked by the tab row (or the URL hash, see app.jsx).
// Styled by the .pol* classes at the end of the index.html stylesheet.

const PolicyTabs = ({ active, onPick }) => (
  <div className="polTabs" role="tablist" aria-label="Club policies">
    {POLICIES.map((p, i) => (
      <button
        key={p.id}
        type="button"
        role="tab"
        aria-selected={active === p.id}
        className={'polTab' + (active === p.id ? ' is-active' : '')}
        onClick={() => onPick(p.id)}
      >
        <span className="polTab__num mono">0{i + 1}</span>
        <span className="polTab__name display">{p.short}</span>
      </button>
    ))}
  </div>
);

const SafeguardingContact = ({ c }) => (
  <aside className="polContact" aria-label="Report a safeguarding concern">
    <div className="polContact__kicker mono">WORRIED ABOUT A CHILD OR ADULT?</div>
    <div className="polContact__name display">{c.role}: {c.name}</div>
    <div className="polContact__links">
      <a href={'tel:' + c.phone.replace(/\s/g, '')}>{c.phone}</a>
      <a href={'mailto:' + c.email}>{c.email}</a>
    </div>
    <p className="polContact__note">
      If anyone is in immediate danger, call <a href="tel:999"><strong>999</strong></a> first.
      Full reporting contacts are in section 10 below.
    </p>
  </aside>
);

const Policies = ({ policy, setPolicy }) => {
  const p = POLICIES.find(x => x.id === policy) || POLICIES[0];
  const anchor = (s) => p.id + '--' + s.id;
  const compact = useIsMobile(760);

  const jump = (e, s) => {
    e.preventDefault();
    const el = document.getElementById(anchor(s));
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <section className="polPage">
      <div className="container">
        <p className="polLead">
          How we keep football at Brews Park safe, fair and well run. These policies apply to
          everyone involved with the club: players, parents and carers, coaches, volunteers,
          visitors and anyone hiring our facilities.
        </p>

        <PolicyTabs active={p.id} onPick={setPolicy} />

        <div className="polLayout">
          <nav className="polToc" aria-label={'Contents: ' + p.title}>
            <details key={p.id + (compact ? '-c' : '-w')} open={!compact}>
            <summary className="polToc__head mono" onClick={(e) => { if (!compact) e.preventDefault(); }}>CONTENTS</summary>
            <ol>
              {p.sections.map(s => (
                <li key={s.id}>
                  <a href={'#' + anchor(s)} onClick={(e) => jump(e, s)}>
                    <span className="mono">{s.num || ''}</span>{s.title}
                  </a>
                </li>
              ))}
            </ol>
            </details>
          </nav>

          <article className="polDoc" aria-labelledby={p.id + '-title'}>
            <header className="polDoc__head">
              <div className="polDoc__kicker mono">BLACKPOOL WREN ROVERS FC</div>
              <h2 id={p.id + '-title'} className="polDoc__title display">{p.title}</h2>
              <p className="polDoc__tagline">{p.tagline}</p>
              <dl className="polMeta">
                {p.meta.map(([k, v]) => (
                  <div key={k}>
                    <dt className="mono">{k}</dt>
                    <dd>{v}</dd>
                  </div>
                ))}
              </dl>
            </header>

            {p.contact && <SafeguardingContact c={p.contact} />}
            {p.intro && <p className="polDoc__intro" dangerouslySetInnerHTML={{ __html: p.intro }} />}

            {p.sections.map(s => (
              <div key={s.id} id={anchor(s)} className="polSection">
                <h3 className="polSection__title">
                  {s.num && <span className="polSection__num mono">{s.num.padStart(2, '0')}</span>}
                  <span>{s.title}</span>
                </h3>
                <div className="polBody" dangerouslySetInnerHTML={{ __html: s.html }} />
              </div>
            ))}

            <div className="polFoot">
              Questions about this policy? Email{' '}
              <a href="mailto:oliverperkins@blackpoolwrenrovers.co.uk">oliverperkins@blackpoolwrenrovers.co.uk</a>
              {p.id === 'pitch-hire' ? ' for pitch hire quotes and availability.' : '.'}
            </div>
          </article>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Policies });