/* Titans site: page sections, shared by mobile and desktop (each version styles them in its own site.css) */
(() => {
const { C, ASSET, waLink, Ico, WAButton, ChatDemo } = window.SiteKit;
const H = C.home;
const ext = { target: '_blank', rel: 'noopener noreferrer' };

function Hero() {
  return (
    <section className="hero" aria-labelledby="hero-t">
      <div className="wrap hero-in">
        <div className="hero-text">
          <h1 className="h1" id="hero-t">{H.hero.title}</h1>
          <p className="lead">{H.hero.lead}</p>
          <WAButton id="hero-cta" msg={C.msgs.hero} />
        </div>
        <figure className="demo">
          <ChatDemo />
          <figcaption>{H.hero.caption}</figcaption>
        </figure>
      </div>
    </section>
  );
}

function Evidence() {
  return (
    <section className="sec alt evidence" aria-labelledby="ev-t">
      <div className="wrap">
        <p className="claim" id="ev-t">{H.evidence.claim}</p>
        <p className="p">{H.evidence.body}</p>
        <p className="note">{H.evidence.source}</p>
      </div>
    </section>
  );
}

function Platform() {
  const P = H.platform;
  return (
    <section className="sec" id="plataforma" aria-labelledby="pl-t">
      <div className="wrap">
        <div className="sec-head"><h2 className="h2" id="pl-t">{P.title}</h2><p className="p">{P.lead}</p></div>
        <div className="feats-list">
          {P.items.map((f) => (
            <article className="feat" key={f.t}>
              <h3 className="h3">{f.t}</h3>
              <p className="p">{f.b}</p>
              <div className="mini" aria-label="Exemplo de conversa">
                {f.c.map(([from, text], i) => <div key={i} className={'b' + (from === 'out' ? ' out' : '')}>{text}</div>)}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Steps({ steps }) {
  return (
    <ol className="steps">
      {steps.map(([t, b], i) => (
        <li key={t}>
          <span className="n" aria-hidden="true">{i + 1}</span>
          <div><h3 className="h3">{t}</h3><p className="p">{b}</p></div>
        </li>
      ))}
    </ol>
  );
}

function HowItWorks() {
  return (
    <section className="sec alt" id="como" aria-labelledby="co-t">
      <div className="wrap">
        <div className="sec-head"><h2 className="h2" id="co-t">{H.how.title}</h2><p className="p">{H.how.lead}</p></div>
        <Steps steps={H.how.steps} />
      </div>
    </section>
  );
}

function Founder({ data = H.founder, withTest = true, className = '' }) {
  return (
    <section className={'sec founder ' + className} id="quem" aria-labelledby="fu-t">
      <div className="wrap">
        <h2 className="h2" id="fu-t">{data.title}</h2>
        <div className="founder-grid">
          <figure className="photo">
            <img src={ASSET.founder} alt="Filipe Apolinário, fundador da Titans" />
            <figcaption>{data.caption}</figcaption>
          </figure>
          <div className="founder-text">
            <p className="p">{data.body}</p>
            {withTest && <p className="p">{H.founder.testPre}<a href={waLink(C.msgs.test)} {...ext}>{H.founder.testLink}</a>.</p>}
          </div>
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const P = H.pricing;
  return (
    <section className="sec alt inv" id="planos" aria-labelledby="pr-t">
      <div className="wrap">
        <div className="sec-head"><h2 className="h2" id="pr-t">{P.title}</h2><p className="p">{P.lead}</p></div>
        <div className="plans">
          {P.plans.map((p) => (
            <article key={p.name} className={'plan' + (p.rec ? ' rec' : '')}>
              <p className="plan-rec">{p.rec ? P.recLabel : '\u00a0'}</p>
              <h3 className="plan-name">{p.name}</h3>
              <p className="plan-for">{p.for}</p>
              <div className="price">
                {p.price ? <React.Fragment><span>R$</span><b>{p.price}</b><span>{P.perMonth}</span></React.Fragment> : <span className="ask">{P.ask}</span>}
              </div>
              <ul className="feats">
                {p.feats.map((f) => <li key={f}><Ico name="check" size={17} /><span>{f}</span></li>)}
              </ul>
              <WAButton quiet={!p.rec} msg={C.msgs.plan(p.name)} />
            </article>
          ))}
        </div>
        <p className="p bespoke">{P.bespokePre}<a href={waLink(C.msgs.bespoke)} {...ext}>{P.bespokeLink}</a>.</p>
      </div>
    </section>
  );
}

function FAQ() {
  return (
    <section className="sec inv" id="faq" aria-labelledby="fq-t">
      <div className="wrap">
        <h2 className="h2" id="fq-t">{H.faq.title}</h2>
        <dl className="faq">
          {H.faq.items.map(([q, a]) => <div className="faq-item" key={q}><dt>{q}</dt><dd>{a}</dd></div>)}
        </dl>
      </div>
    </section>
  );
}

function FinalCTA({ title = H.final.title, lead = H.final.lead, msg = C.msgs.final }) {
  return (
    <section className="final" aria-labelledby="fi-t">
      <div className="final-bg" aria-hidden="true"><img src={ASSET.forest} alt="" /></div>
      <div className="wrap final-in">
        <h2 className="h2" id="fi-t">{title}</h2>
        <p>{lead}</p>
        <WAButton id="final-cta" msg={msg} />
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot inv">
      <div className="wrap foot-in">
        <div className="foot-brand">
          <img className="wm" src={ASSET.wm} alt="Titans" />
          <p>{C.footer.about}</p>
        </div>
        <ul className="foot-contacts">
          <li><a href={waLink(C.msgs.footer)} {...ext}>WhatsApp {C.wa.display}</a></li>
          <li><a href={'mailto:' + C.email}>{C.email}</a></li>
          <li><a href={'https://instagram.com/' + C.ig} {...ext}>Instagram @{C.ig}</a></li>
        </ul>
        <div className="foot-legal">
          <nav aria-label="Documentos"><a href="privacidade.html">Privacidade</a><a href="termos.html">Termos</a></nav>
          <span>© 2026 Titans Ag. CNPJ {C.cnpj}</span>
        </div>
      </div>
    </footer>
  );
}

function HomePage() {
  return (
    <React.Fragment>
      <Hero /><Evidence /><Platform /><HowItWorks /><Founder /><Pricing /><FAQ /><FinalCTA />
    </React.Fragment>
  );
}

window.SiteSections = { Hero, Evidence, Platform, Steps, HowItWorks, Founder, Pricing, FAQ, FinalCTA, Footer, HomePage };
})();