/* 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.

   Per the 2026-07-06 design handoff the section is an inline ACCORDION:
   clicking a row expands the full Before / What we built / Outcome in place
   (grid-template-rows 0fr→1fr), one case open at a time, arrow rotates 90°.
   A "View solution" pill links to the product behind the 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 CaseRow({ caseItem, labels, slug, isOpen, onToggle, delay }) {
  return (
    <Reveal delay={delay}>
      <div className={`case-row${isOpen ? ' is-open' : ''}`}>
        <button type="button" className="case-row__head" aria-expanded={isOpen} aria-label={caseItem.status} onClick={onToggle}>
          <span className="case-row__text">
            <span className="case-card__meta mono">{caseItem.meta}</span>
            <span className="case-card__status">{caseItem.status}</span>
          </span>
          <span className="case-row__arrow" aria-hidden="true">→</span>
        </button>

        <div className="case-row__panel" aria-hidden={!isOpen}>
          <div className="case-row__clip">
            <div className="case-row__detail">
              <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-row__foot">
                <div className="case-card__badge mono">{caseItem.badge}</div>
                {slug && (
                  <a className="case-row__cta" href={`/products.html?p=${slug}`} tabIndex={isOpen ? 0 : -1}>
                    {labels.viewSolution} →
                  </a>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </Reveal>
  );
}

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) => (
            <CaseRow
              key={i}
              delay={i * 60}
              caseItem={c}
              labels={t}
              slug={CASE_SLUGS[i]}
              isOpen={activeIndex === i}
              onToggle={() => setActiveIndex(activeIndex === i ? null : i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

window.Cases = Cases;