/* Cases page (i18n-ready) */
const { useState } = React;

function CasesPage() {
  return (
    <I18nProvider>
      <CasesPageBody/>
    </I18nProvider>
  );
}

function CasesPageBody() {
  const { t } = useI18n();
  const cp = t.casesPage;
  const [filter, setFilter] = useState(null);
  const filtered = filter ? cp.slots.filter((s) => s.ind === filter) : cp.slots;

  return (
    <>
      <Nav active="cases"/>
      <section className="page-hero">
        <div className="ambient-glow"/>
        <div className="grid-bg"/>
        <div className="container">
          <div className="page-hero-grid">
            <div>
              <span className="eyebrow">{cp.eyebrow}</span>
              <h1>{cp.title}</h1>
              <p className="lead">{cp.lead}</p>
            </div>
            <div className="page-hero-meta">
              <div className="row"><span>{cp.meta.status.k}</span><span style={{color:'var(--mint)'}}>{cp.meta.status.v}</span></div>
              <div className="row"><span>{cp.meta.slots.k}</span><span>{cp.slots.length}</span></div>
              <div className="row"><span>{cp.meta.industries.k}</span><span>{cp.industries.length}</span></div>
              <div className="row"><span>{cp.meta.format.k}</span><span>{cp.meta.format.v}</span></div>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{paddingTop: 64}}>
        <div className="container">
          <div className="case-filters">
            <span className="case-filter-label">{cp.filterIndustry}</span>
            <button className={"case-filter " + (filter === null ? 'on' : '')} onClick={() => setFilter(null)}>{cp.filterAll}</button>
            {cp.industries.map((i) => (
              <button key={i} className={"case-filter " + (filter === i ? 'on' : '')} onClick={() => setFilter(i)}>{i}</button>
            ))}
          </div>

          <div className="case-grid-2">
            {filtered.map((s, i) => (
              <div className="case-card case-detail" key={i}>
                <div className="case-placeholder-tag">
                  <Plus size={11}/>{cp.placeholder} · 0{i + 1}
                </div>
                <div className="case-industry">{s.ind} · {s.svc}</div>
                <h3 className="case-title">{s.title}</h3>
                <p className="case-desc">{s.desc}</p>
                <div className="case-rows">
                  <div className="case-row"><span className="case-row-key">{cp.challenge}</span><span className="case-row-val">{s.challenge}</span></div>
                  <div className="case-row"><span className="case-row-key">{cp.transformation}</span><span className="case-row-val">{s.transformation}</span></div>
                  <div className="case-row"><span className="case-row-key">{cp.systems}</span><span className="case-row-val">{s.systems}</span></div>
                  <div className="case-row"><span className="case-row-key">{cp.duration}</span><span className="case-row-val">{s.duration}</span></div>
                  <div className="case-row"><span className="case-row-key">{cp.outcome}</span><span className="case-row-val mint">{s.outcome}</span></div>
                </div>
              </div>
            ))}
          </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(<CasesPage/>);