/* Cases — "Before → What we built → Outcome" proof block (#cases, dark).
   Sits after #work and before the products teaser. Anonymous cases, Dubai first
   (order is set by L.cases.items — do not re-sort). Honest copy only:
   industry/role, no client names, no invented numbers.

   The section shows a compact list of case headings; clicking a row opens a
   modal with the full Before / What we built / Outcome and a "View solution"
   link to the product behind that case. */

/* Product slug per case, index-aligned with L.cases.items (keep order in sync
   with the items array in i18n.jsx). Drives the "View solution" link to the
   existing product route /products.html?p=<slug>. */
const CASE_SLUGS = ['solo-track', 'koshi', 'teamhub', 'ava-erp', 'ava-crm'];

function CaseModal({ caseItem, labels, slug, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [onClose]);

  return (
    <div className="case-modal" role="dialog" aria-modal="true" aria-label={caseItem.status}>
      <button className="case-modal__backdrop" type="button" aria-label={labels.close} onClick={onClose} />
      <div className="case-modal__panel">
        <div className="case-modal__bar">
          <div className="case-modal__head">
            <div className="case-card__meta mono">{caseItem.meta}</div>
            <div className="case-card__status">{caseItem.status}</div>
          </div>
          <button className="case-modal__close" type="button" aria-label={labels.close} onClick={onClose}>×</button>
        </div>

        <div className="case-modal__body">
          <div className="case-card__block">
            <h4 className="mono">{labels.wasLabel}</h4>
            <p>{caseItem.was}</p>
          </div>

          <div className="case-card__block">
            <h4 className="mono">{labels.didLabel}</h4>
            <ul>{caseItem.did.map((d, j) => <li key={j}>{d}</li>)}</ul>
          </div>

          <div className="case-card__block">
            <h4 className="mono">{labels.resultLabel}</h4>
            <ul>{caseItem.result.map((r, j) => <li key={j}>{r}</li>)}</ul>
          </div>

          <div className="case-card__badge mono">{caseItem.badge}</div>

          {slug && (
            <a className="btn btn--yellow case-modal__cta" href={`/products.html?p=${slug}`}>
              {labels.viewSolution} →
            </a>
          )}
        </div>
      </div>
    </div>
  );
}

function Cases() {
  const { L } = useLang();
  const t = L.cases;
  const [activeIndex, setActiveIndex] = React.useState(null);
  return (
    <section id="cases" className="cases cream-on-black">
      <div className="wrap">
        <div className="page-chapter"><span>{t.chapter.left}</span><span>{t.chapter.right}</span></div>

        <Reveal as="h2" className="display display-md" style={{ marginTop:48, maxWidth:'18ch' }}>{t.title}</Reveal>
        <Reveal className="body-lg text-wrap-pretty cases__sub" style={{ marginTop:20 }}>{t.sub}</Reveal>

        <div className="cases__list">
          {t.items.map((c, i) => (
            <Reveal key={i} delay={i * 60}>
              <button type="button" className="case-row" aria-label={c.status} onClick={() => setActiveIndex(i)}>
                <span className="case-row__text">
                  <span className="case-card__meta mono">{c.meta}</span>
                  <span className="case-card__status">{c.status}</span>
                </span>
                <span className="case-row__arrow" aria-hidden="true">→</span>
              </button>
            </Reveal>
          ))}
        </div>
      </div>

      {activeIndex !== null && (
        <CaseModal
          caseItem={t.items[activeIndex]}
          labels={t}
          slug={CASE_SLUGS[activeIndex]}
          onClose={() => setActiveIndex(null)}
        />
      )}
    </section>
  );
}

window.Cases = Cases;