/* Titans site: Sobre, Contato and legal pages + page registry */
(() => {
const { C, waLink, WAButton } = window.SiteKit;
const { Steps, Founder, FinalCTA, HomePage } = window.SiteSections;
const ext = { target: '_blank', rel: 'noopener noreferrer' };

function PageHead({ title, lead, cta }) {
  return (
    <header className="sec page-head" id="page-head">
      <div className="wrap">
        <h1 className="h1">{title}</h1>
        <p className="lead">{lead}</p>
        {cta}
      </div>
    </header>
  );
}

function SobrePage() {
  const S = C.sobre;
  return (
    <React.Fragment>
      <PageHead title={S.title} lead={S.lead} />
      <section className="sec alt evidence" aria-label="Por que a Titans existe">
        <div className="wrap">
          <p className="claim">{S.why.claim}</p>
          <p className="p">{S.why.body}</p>
        </div>
      </section>
      <section className="sec" aria-labelledby="what-t">
        <div className="wrap">
          <h2 className="h2" id="what-t">{S.what.title}</h2>
          <div className="duo">
            {S.what.items.map(([t, b]) => <article key={t}><h3 className="h3">{t}</h3><p className="p">{b}</p></article>)}
          </div>
        </div>
      </section>
      <section className="sec alt inv" aria-labelledby="ways-t">
        <div className="wrap">
          <h2 className="h2" id="ways-t">{S.ways.title}</h2>
          <div className="quad">
            {S.ways.items.map(([t, b]) => <article key={t}><h3 className="h3">{t}</h3><p className="p">{b}</p></article>)}
          </div>
        </div>
      </section>
      <Founder data={S.founder} withTest={false} className="inv" />
      <FinalCTA title={S.final.title} lead={S.final.lead} msg={C.msgs.sobre} />
    </React.Fragment>
  );
}

function ContatoPage() {
  const K = C.contato;
  const [msg, setMsg] = React.useState('');
  const out = msg.trim() || C.msgs.contato;
  const channels = [
    ['WhatsApp', C.wa.display, waLink(C.msgs.contato)],
    ['E-mail', C.email, 'mailto:' + C.email],
    ['Instagram', '@' + C.ig, 'https://instagram.com/' + C.ig],
    ['Endereço', C.city, null],
  ];
  return (
    <React.Fragment>
      <PageHead title={K.title} lead={K.lead} cta={<WAButton id="hero-cta" msg={C.msgs.contato} />} />
      <section className="sec alt" aria-labelledby="ch-t">
        <div className="wrap">
          <h2 className="h2" id="ch-t">{K.channelsTitle}</h2>
          <dl className="channels">
            {channels.map(([k, v, href]) => (
              <div key={k}><dt>{k}</dt><dd>{href ? <a href={href} {...(href.startsWith('http') ? ext : {})}>{v}</a> : v}</dd></div>
            ))}
          </dl>
        </div>
      </section>
      <section className="sec" aria-labelledby="st-t">
        <div className="wrap">
          <h2 className="h2" id="st-t">{K.stepsTitle}</h2>
          <Steps steps={K.steps} />
        </div>
      </section>
      <section className="sec alt inv" aria-labelledby="hr-t">
        <div className="wrap">
          <h2 className="h2" id="hr-t">{K.hoursTitle}</h2>
          <ul className="hours">
            {K.hours.map(([b, rest]) => <li key={b}><strong>{b}</strong> {rest}</li>)}
          </ul>
        </div>
      </section>
      <section className="sec inv" aria-labelledby="fm-t">
        <div className="wrap form-wrap">
          <h2 className="h2" id="fm-t">{K.formTitle}</h2>
          <form className="form" onSubmit={(e) => { e.preventDefault(); window.open(waLink(out), '_blank', 'noopener'); }}>
            <label htmlFor="msg">{K.formLabel}</label>
            <textarea id="msg" rows="4" value={msg} onChange={(e) => setMsg(e.target.value)} placeholder={K.formPlaceholder} aria-describedby="msg-help"></textarea>
            <p id="msg-help" className="help">{K.formHelp}</p>
            <WAButton msg={out} />
          </form>
        </div>
      </section>
    </React.Fragment>
  );
}

window.SitePages = {
  inicio: HomePage,
  sobre: SobrePage,
  contato: ContatoPage,
  privacidade: () => React.createElement(window.PrivacidadePage),
  termos: () => React.createElement(window.TermosPage),
};
})();