/* Services page */
const { useState } = React;

function ServicesPage() {
  return (
    <I18nProvider>
      <ServicesPageBody/>
    </I18nProvider>
  );
}

function ServicesPageBody() {
  const { t } = useI18n();
  const sp = t.servicesPage;
  return (
    <>
      <Nav active="services"/>
      <section className="page-hero">
        <div className="ambient-glow"/>
        <div className="grid-bg"/>
        <div className="container">
          <div className="page-hero-grid">
            <div>
              <span className="eyebrow">{sp.eyebrow}</span>
              <h1>{sp.title}</h1>
              <p className="lead">{sp.lead}</p>
            </div>
            <div className="page-hero-meta">
              {Object.values(sp.meta).map((m, i) => (
                <div className="row" key={i}><span>{m.k}</span><span>{m.v}</span></div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">{sp.detailsTitle}</div>
            <h2 className="h-2">{sp.pillarsH2}</h2>
          </div>

          {/* column heads */}
          <div className="svc-row" style={{paddingTop: 0, paddingBottom: 16, borderTop: 'none'}}>
            <div></div>
            <div></div>
            <div className="svc-col-head">{sp.depthTitles[0]}</div>
            <div className="svc-col-head">{sp.depthTitles[1]} · {sp.depthTitles[2]}</div>
          </div>

          {sp.pillars.map((p) => (
            <div className="svc-row" key={p.tag}>
              <div className="svc-row-tag">{p.tag}</div>
              <div>
                <h3 className="svc-row-title">{p.title}</h3>
                <div className="svc-row-time">{p.time}</div>
              </div>
              <ul className="svc-row-list">
                {p.what.map((w) => <li key={w}>{w}</li>)}
              </ul>
              <p className="svc-row-why">{p.why}</p>
            </div>
          ))}
        </div>
      </section>

      <CTASection/>
      <Footer/>
      <CookieBanner/>
    </>
  );
}

function CTASection() {
  const { t } = useI18n();
  return (
    <section className="cta-section" id="contact">
      <div className="container">
        <div className="cta-card">
          <div className="eyebrow" style={{justifyContent:'center', display:'inline-flex'}}>{t.cta.eyebrow}</div>
          <h2 className="cta-title">{t.cta.title}</h2>
          <p className="cta-desc">{t.cta.desc}</p>
          <div className="cta-button-wrap">
            <a href="mailto:info@futureconsulting.hu" className="btn btn-primary btn-lg">
              {t.cta.button}<ArrowRight size={16}/>
            </a>
            <span className="meta">{t.cta.sub}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<ServicesPage/>);