// cases.jsx - Editorial impact section with 2 layout variants via tweak
const CASE_ARTS = [CaseArtGrid, CaseArtRings, CaseArtWaves];

const Cases = () => {
  const { t } = useLang();
  const c = t.cases;
  const [variant, setVariant] = React.useState('feature');

  React.useEffect(() => {
    const onTweak = () => setVariant(document.body.dataset.cases || 'feature');
    onTweak();
    const obs = new MutationObserver(onTweak);
    obs.observe(document.body, { attributes: true, attributeFilter: ['data-cases'] });
    return () => obs.disconnect();
  }, []);

  return (
    <section className="cases" id="cases">
      <div className="cases-head">
        <div>
          <Reveal><div className="eyebrow">{c.eyebrow}</div></Reveal>
          <Reveal delay={1}><h2 className="section-title">{c.title}</h2></Reveal>
        </div>
        <Reveal delay={2}><p className="cases-intro">{c.intro}</p></Reveal>
      </div>

      <div className="cases-grid">
        {c.items.map((it, i) => {
          const Art = CASE_ARTS[i % CASE_ARTS.length];
          const isFeature = variant === 'feature' && it.feature;
          return (
            <Reveal key={i} delay={Math.min(i+1, 4)} as="article" className={`case-card ${isFeature ? 'feature' : ''}`}>
              <div className="case-art">
                <Art className="bg"/>
                <div className="case-metric">
                  <span className="case-metric-val">{it.metric}</span>
                  <span className="case-metric-label">{it.metricLabel}</span>
                </div>
                <div className="case-glyph">{it.glyph}</div>
              </div>
              <div className="case-body">
                <span className="case-tag">{it.tag}</span>
                <h3 className="case-title">{it.title}</h3>
                <p className="case-desc">{it.desc}</p>
                <span className="case-link">{c.readMore} <ArrowDiag/></span>
              </div>
            </Reveal>
          );
        })}
      </div>
    </section>
  );
};

window.Cases = Cases;