// ff-cases.jsx — Portfolio grid with tag filter

const { useState: __c_useState, useMemo: __c_useMemo, useEffect: __c_useEffect } = React;

const CASE_TONES = ["ocean", "violet", "lime", "amber", "rose", "teal"];
const CASE_STACKS = [
  ["n8n", "openai", "supabase"],
  ["claude", "python", "metabase"],
  ["openai", "zendesk", "n8n"],
  ["langgraph", "browser-use", "hubspot"],
  ["openai", "postgres", "retool"],
  ["make", "openai", "figma-api"],
];

function CaseThumb({ tone, title }) {
  const tones = {
    ocean:  ["#1e3a8a", "#3b82f6", "#0ea5e9"],
    violet: ["#3b0764", "#8b5cf6", "#a78bfa"],
    lime:   ["#1a2e05", "#84cc16", "#a3e635"],
    amber:  ["#451a03", "#f59e0b", "#fbbf24"],
    rose:   ["#4c0519", "#e11d48", "#fb7185"],
    teal:   ["#042f2e", "#14b8a6", "#5eead4"],
  };
  const [c1, c2, c3] = tones[tone] || tones.ocean;
  return (
    <div className="case-thumb" aria-hidden="true">
      <svg viewBox="0 0 320 180" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id={`g-${tone}`} x1="0" x2="1" y1="0" y2="1">
            <stop offset="0%" stopColor={c1} />
            <stop offset="100%" stopColor={c2} stopOpacity="0.6" />
          </linearGradient>
          <pattern id={`p-${tone}`} width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
            <line x1="0" y1="0" x2="0" y2="6" stroke={c3} strokeOpacity="0.15" strokeWidth="1" />
          </pattern>
        </defs>
        <rect width="320" height="180" fill={`url(#g-${tone})`} />
        <rect width="320" height="180" fill={`url(#p-${tone})`} />
        {[
          [40, 90], [110, 50], [110, 130], [180, 90], [250, 60], [250, 120], [290, 90]
        ].map(([x, y], i) => (
          <circle key={i} cx={x} cy={y} r={i === 3 ? 6 : 4} fill={c3} fillOpacity={i === 3 ? 1 : 0.7} />
        ))}
        {[
          [40, 90, 110, 50], [40, 90, 110, 130], [110, 50, 180, 90], [110, 130, 180, 90],
          [180, 90, 250, 60], [180, 90, 250, 120], [250, 60, 290, 90], [250, 120, 290, 90],
        ].map(([x1, y1, x2, y2], i) => (
          <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={c3} strokeOpacity="0.45" strokeWidth="1" />
        ))}
      </svg>
      <span className="case-thumb-label">{title}</span>
    </div>
  );
}

function Cases({ s }) {
  const tags = s.cases.tags;
  const [tag, setTag] = __c_useState(tags[0]);
  // Reset filter to "All" when language switches (tag labels change)
  __c_useEffect(() => { setTag(tags[0]); }, [tags]);

  // Map localized tag back to the canonical industry (we filter by item.industry,
  // both come from the same locale's strings.cases array).
  const items = s.cases.items.map((it, i) => ({ ...it, tone: CASE_TONES[i % CASE_TONES.length], stack: CASE_STACKS[i] }));
  const list = __c_useMemo(
    () => (tag === tags[0] ? items : items.filter((c) => c.industry === tag)),
    [tag, items, tags]
  );

  return (
    <section id="cases" data-screen-label="04 Cases" className="section section-cases">
      <div className="wrap">
        <Reveal className="section-head" as="div">
          <div>
            <SectionEyebrow index={4} label={s.cases.eyebrow} />
            <h2>{s.cases.title}</h2>
          </div>
          <a href="#" className="btn btn-ghost btn-sm">
            {s.cases.allBtn} <span className="arrow">→</span>
          </a>
        </Reveal>

        <Reveal className="case-filter" as="div">
          {tags.map((t) => (
            <button key={t} type="button"
              className={`case-tag ${tag === t ? "on" : ""}`}
              onClick={() => setTag(t)}>
              {t}
            </button>
          ))}
        </Reveal>

        <div className="cases-grid">
          {list.map((c, i) => (
            <Reveal key={c.title} as="article" delay={(i % 3) + 1} className="case-card card">
              <CaseThumb tone={c.tone} title={c.title} />
              <div className="case-body">
                <div className="case-meta">
                  <span className="tag">{c.industry}</span>
                  <span className="case-client">{c.client}</span>
                </div>
                <h3 className="case-title">{c.title}</h3>
                <p className="case-desc">{c.desc}</p>
                <div className="case-metric">
                  <span className="case-metric-v">{c.mv}</span>
                  <span className="case-metric-l">{c.ml}</span>
                </div>
                <div className="case-stack">
                  {c.stack.map((st) => <span key={st} className="tag">{st}</span>)}
                </div>
              </div>
              <a href="#contact" className="case-link" aria-label={`Open ${c.title}`}>
                <span className="arrow">→</span>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Cases = Cases;