// =====================================================================
// CASE STUDIES · bilingual via window.useT()
// Grouped in two narrative blocks:
//   CLIENT WORK (02-08 · 7 cases) — includes VIALEDSA as 01 headliner
//   OWN PRODUCTS (09-12 · 4 cases · CryptoCultura ecosystem)
// =====================================================================

// Helper — build a case object from an id + t()
function buildCase(id, slug, t, opts = {}) {
  const surfaces = [];
  for (let i = 1; i <= 8; i++) {
    const v = t(`cs.${id}.surface${i}`);
    if (v && v !== `cs.${id}.surface${i}`) surfaces.push(v);
    else break;
  }
  const demos = [];
  const hrefs = opts.hrefs || [];
  for (let i = 1; i <= 3; i++) {
    const label = t(`cs.${id}.demo${i}`);
    if (label && label !== `cs.${id}.demo${i}` && hrefs[i - 1]) {
      const demo = { label, href: hrefs[i - 1].href };
      if (hrefs[i - 1].badge) demo.badge = hrefs[i - 1].badge;
      demos.push(demo);
    } else break;
  }
  const noteKey = `cs.${id}.note`;
  const note = t(noteKey);
  return {
    id, slug,
    name: t(`cs.${id}.name`),
    industry: t(`cs.${id}.industry`),
    problem: t(`cs.${id}.problem`),
    kpi: t(`cs.${id}.kpi`),
    surfaces, demos,
    note: (note && note !== noteKey) ? note : null,
    image: opts.image || null,
  };
}

function FeaturedCase({ t }) {
  const layers = [
    { label: t('cs.vialedsa.l1.name'), desc: t('cs.vialedsa.l1.desc') },
    { label: t('cs.vialedsa.l2.name'), desc: t('cs.vialedsa.l2.desc') },
    { label: t('cs.vialedsa.l3.name'), desc: t('cs.vialedsa.l3.desc') },
  ];
  const stats = [
    { k: t('cs.vialedsa.stat.units'),    v: '280' },
    { k: t('cs.vialedsa.stat.surfaces'), v: '2' },
    { k: t('cs.vialedsa.stat.industry'), v: t('cs.vialedsa.stat.industry.val') },
    { k: t('cs.vialedsa.stat.status'),   v: t('cs.vialedsa.stat.status.val') },
  ];

  return (
    <div style={fcStyles.wrap}>
      <div style={fcStyles.headerRow}>
        <div style={fcStyles.badge}>
          <span style={fcStyles.badgeStar}>★</span> {t('cs.vialedsa.badge')}
        </div>
        <div style={fcStyles.launchChip}>{t('cs.vialedsa.launch')}</div>
      </div>

      <div style={fcStyles.body}>
        <div style={fcStyles.leftCol}>
          <div style={fcStyles.logoRow}>
            <img src="./assets/logo-vialedsa-mark-wordmark.png" alt="" style={fcStyles.logoImg} />
            <div>
              <div style={fcStyles.clientName}>{t('cs.vialedsa.client')}</div>
              <div style={fcStyles.location}>{t('cs.vialedsa.location')}</div>
            </div>
          </div>

          <h3 style={fcStyles.h3}>{t('cs.vialedsa.title')}</h3>

          <div style={fcStyles.problemLabel}>{t('cs.vialedsa.problem.label')}</div>
          <p style={fcStyles.problem}>{t('cs.vialedsa.problem')}</p>

          <div style={fcStyles.layerLabel}>{t('cs.vialedsa.layers.label')}</div>
          <div style={fcStyles.layers}>
            {layers.map((l, i) => (
              <div key={l.label} style={fcStyles.layerRow}>
                <span style={fcStyles.layerCode}>L{String(i + 1).padStart(2, '0')}</span>
                <div>
                  <div style={fcStyles.layerName}>{l.label}</div>
                  <div style={fcStyles.layerDesc}>{l.desc}</div>
                </div>
              </div>
            ))}
          </div>

          <div style={fcStyles.actions}>
            <a href="https://tsfwomuh.gensparkspace.com/" target="_blank" rel="noreferrer" style={fcStyles.action}>
              {t('cs.vialedsa.cta.customer')} <span style={{marginLeft:6}}>↗</span>
            </a>
            <a href="https://tsfwomuh.gensparkspace.com/crm.html" target="_blank" rel="noreferrer" style={fcStyles.action}>
              {t('cs.vialedsa.cta.dashboard')} <span style={{marginLeft:6}}>↗</span>
            </a>
          </div>
        </div>

        <div style={fcStyles.rightCol}>
          <div style={fcStyles.statsPanel}>
            <div style={fcStyles.statsHead}>
              <span style={fcStyles.statsHeadLbl}>{t('cs.vialedsa.stats.label')}</span>
              <span style={fcStyles.statsHeadDot}>●</span>
            </div>
            <div style={fcStyles.statsGrid}>
              {stats.map(s => (
                <div key={s.k} style={fcStyles.stat}>
                  <div style={fcStyles.statK}>{s.k}</div>
                  <div style={fcStyles.statV}>{s.v}</div>
                </div>
              ))}
            </div>
            <div style={fcStyles.statsFooter}>{t('cs.vialedsa.scale')}</div>
          </div>

          <div style={fcStyles.archPanel}>
            <div style={fcStyles.archHead}>{t('cs.vialedsa.arch.label')}</div>
            <svg viewBox="0 0 260 180" style={fcStyles.archSvg}>
              <defs>
                <linearGradient id="fcWire" x1="0" y1="0" x2="1" y2="0">
                  <stop offset="0" stopColor="#2DCEFF" stopOpacity="0.6" />
                  <stop offset="1" stopColor="#1357EA" stopOpacity="0.4" />
                </linearGradient>
              </defs>
              <line x1="130" y1="90" x2="50"  y2="45" stroke="url(#fcWire)" strokeWidth="1.2" />
              <line x1="130" y1="90" x2="210" y2="45" stroke="url(#fcWire)" strokeWidth="1.2" />
              <line x1="130" y1="90" x2="130" y2="150" stroke="url(#fcWire)" strokeWidth="1.2" />
              <circle cx="50"  cy="45"  r="16" fill="#121F33" stroke="#2DCEFF" strokeWidth="1" />
              <circle cx="210" cy="45"  r="16" fill="#121F33" stroke="#2DCEFF" strokeWidth="1" />
              <circle cx="130" cy="150" r="16" fill="#121F33" stroke="#2DCEFF" strokeWidth="1" />
              <circle cx="130" cy="90"  r="22" fill="#0A1220" stroke="#FFD13A" strokeWidth="1.4" />
              <text x="50"  y="18"  fill="#8898B3" fontSize="8" fontFamily="JetBrains Mono, monospace" textAnchor="middle">{t('cs.vialedsa.arch.customer')}</text>
              <text x="210" y="18"  fill="#8898B3" fontSize="8" fontFamily="JetBrains Mono, monospace" textAnchor="middle">{t('cs.vialedsa.arch.automation')}</text>
              <text x="130" y="175" fill="#8898B3" fontSize="8" fontFamily="JetBrains Mono, monospace" textAnchor="middle">{t('cs.vialedsa.arch.crm')}</text>
              <text x="130" y="94"  fill="#FFD13A" fontSize="9" fontFamily="Montserrat" fontWeight="700" textAnchor="middle">{t('cs.vialedsa.arch.core')}</text>
            </svg>
          </div>
        </div>
      </div>
    </div>
  );
}

function CaseCard({ c, t }) {
  const isCryptoCultura = c.slug && c.slug.startsWith('cc-');
  return (
    <div style={ccStyles.card}>
      <div style={ccStyles.top}>
        <span style={{...ccStyles.id, color: isCryptoCultura ? 'var(--yellow-400)' : 'var(--cyan-400)'}}>
          {c.id}
        </span>
        <span style={ccStyles.industry}>{c.industry}</span>
      </div>

      <div style={ccStyles.name}>{c.name}</div>

      {c.image && (
        <div style={ccStyles.imgWrap}>
          <img src={c.image} alt="" style={ccStyles.img} />
        </div>
      )}

      <div style={ccStyles.problemLbl}>{t('cs.card.problem')}</div>
      <p style={ccStyles.problem}>{c.problem}</p>

      <div style={ccStyles.surfacesLbl}>{t('cs.card.surfaces')}</div>
      <div style={ccStyles.surfaces}>
        {c.surfaces.map(s => (
          <span key={s} style={ccStyles.surfaceChip}>{s}</span>
        ))}
      </div>

      <div style={ccStyles.footerRow}>
        <span style={ccStyles.kpi}>{c.kpi}</span>
      </div>

      <div style={ccStyles.actions}>
        {c.demos.map(d => (
          <a key={d.label} href={d.href} target="_blank" rel="noreferrer" style={ccStyles.action}>
            {d.label}
            {d.badge && <span style={ccStyles.actionBadge}>{d.badge}</span>}
            <span style={{marginLeft: 6}}>↗</span>
          </a>
        ))}
      </div>

      {c.note && <div style={ccStyles.note}>{c.note}</div>}
    </div>
  );
}

function CaseStudies() {
  const { t } = window.useT();

  // Client work (02-08)
  const clientWork = [
    buildCase('02', 'restaurant',       t, { hrefs: [
      { href: 'https://iwxcdxmu.gensparkspace.com/' },
      { href: 'https://youtu.be/3VQqdwJFZ8M' },
    ]}),
    buildCase('03', 'barber',           t, { hrefs: [
      { href: 'https://felhmoet.gensparkspace.com/' },
      { href: 'https://felhmoet.gensparkspace.com/dashboard.html' },
    ]}),
    buildCase('04', 'nails',            t, { hrefs: [
      { href: 'https://sbcnfipm.gensparkspace.com/' },
      { href: 'https://sbcnfipm.gensparkspace.com/dashboard.html' },
    ]}),
    buildCase('05', 'clinic',           t, { hrefs: [
      { href: 'https://qpkefjtm.gensparkspace.com/web.html' },
      { href: 'https://qpkefjtm.gensparkspace.com/dashboard.html' },
    ]}),
    buildCase('06', 'logistics',        t, { hrefs: [
      { href: 'https://srmqdlbn.gensparkspace.com/' },
    ]}),
    buildCase('07', 'customs-ai',       t, { hrefs: [
      { href: 'https://www.genspark.ai/agents?type=custom_super_agent&agent_id=d7f727ba-61ab-4db0-954c-a2bab783169b' },
    ]}),
    buildCase('08', 'ai-receptionist',  t, { hrefs: [
      { href: 'tel:+19568151714', badge: '(956) 815-1714' },
    ]}),
  ];

  // Own products (09-12)
  const ownProducts = [
    buildCase('09', 'cc-infra',    t, { hrefs: [{ href: 'https://cryptocultura.io/' }] }),
    buildCase('10', 'cc-agent',    t, { hrefs: [{ href: 'https://www.genspark.ai/agents?type=custom_super_agent&agent_id=c8b64747-bf3f-4a49-a61a-dfdb1212e89b' }] }),
    buildCase('11', 'cc-terminal', t, { hrefs: [
      { href: 'https://xsowkidg.gensparkspace.com/' },
      { href: 'https://cryptocultura.io/' },
    ]}),
    buildCase('12', 'cc-journal',  t, {
      image: './assets/case-cryptocultura-journal-pro.png',
      hrefs: [{ href: 'https://cryptocultura.io/' }],
    }),
  ];

  return (
    <section style={csStyles.wrap} id="cases">
      <div style={csStyles.inner}>
        <div style={csStyles.header}>
          <div style={csStyles.eyebrow}>{t('cs.eyebrow')}</div>
          <h2 style={csStyles.h2}>{t('cs.h2')}</h2>
          <p style={csStyles.lede}>
            {t('cs.lede.a')}<span style={{color:'var(--cyan-400)'}}>{t('cs.lede.b')}</span>{t('cs.lede.c')}
          </p>
        </div>

        {/* HEADLINER */}
        <FeaturedCase t={t} />

        {/* CLIENT WORK */}
        <div style={csStyles.groupHead}>
          <div style={csStyles.groupCode}>A</div>
          <div>
            <div style={csStyles.groupTitle}>{t('cs.group.a.title')}</div>
            <div style={csStyles.groupDesc}>{t('cs.group.a.desc')}</div>
          </div>
          <div style={csStyles.groupCount}>{t('cs.group.a.count')}</div>
        </div>
        <div style={csStyles.grid}>
          {clientWork.map(c => <CaseCard key={c.slug} c={c} t={t} />)}
        </div>

        {/* OWN PRODUCTS */}
        <div style={{...csStyles.groupHead, marginTop: 64}}>
          <div style={{...csStyles.groupCode, borderColor: 'rgba(255,209,58,0.35)', color: 'var(--yellow-400)'}}>B</div>
          <div>
            <div style={csStyles.groupTitle}>{t('cs.group.b.title')}</div>
            <div style={csStyles.groupDesc}>{t('cs.group.b.desc')}</div>
          </div>
          <div style={csStyles.groupCount}>{t('cs.group.b.count')}</div>
        </div>
        <div style={csStyles.grid}>
          {ownProducts.map(c => <CaseCard key={c.slug} c={c} t={t} />)}
        </div>
      </div>
    </section>
  );
}

// ---------- STYLES ----------
const csStyles = {
  wrap: { padding: '96px 32px', background: 'var(--ink-900)', borderTop: '1px solid var(--border-subtle)' },
  inner: { maxWidth: 1240, margin: '0 auto' },
  header: { display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 40, maxWidth: 780 },
  eyebrow: { fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: 'var(--cyan-400)', letterSpacing: '0.14em', textTransform: 'uppercase' },
  h2: { fontFamily: 'Montserrat', fontWeight: 700, fontSize: 40, lineHeight: 1.1, letterSpacing: '-0.02em', color: 'var(--fg-1)', margin: 0 },
  lede: { fontFamily: 'Inter', fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0 },

  groupHead: {
    display: 'flex', alignItems: 'center', gap: 18,
    marginTop: 56, marginBottom: 22,
    paddingBottom: 18, borderBottom: '1px solid var(--border-subtle)',
  },
  groupCode: {
    width: 44, height: 44, borderRadius: 10,
    background: 'var(--ink-800)', border: '1px solid var(--border-blue)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: 'Montserrat', fontWeight: 700, fontSize: 18, color: 'var(--cyan-400)',
  },
  groupTitle: { fontFamily: 'Montserrat', fontWeight: 600, fontSize: 22, color: 'var(--fg-1)', letterSpacing: '-0.01em' },
  groupDesc: { fontFamily: 'Inter', fontSize: 14, color: 'var(--fg-3)', marginTop: 4, maxWidth: 720 },
  groupCount: {
    marginLeft: 'auto',
    fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--fg-3)',
    letterSpacing: '0.12em',
    padding: '6px 12px', border: '1px solid var(--border-default)', borderRadius: 999,
    background: 'var(--ink-800)',
  },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 },
};

const fcStyles = {
  wrap: {
    marginTop: 8, marginBottom: 8,
    background: 'var(--ink-800)', border: '1px solid var(--border-blue)',
    borderRadius: 20, padding: 32,
    boxShadow: '0 0 0 1px rgba(47,118,255,0.15), 0 24px 60px rgba(0,0,0,0.35)',
    position: 'relative', overflow: 'hidden',
  },
  headerRow: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    marginBottom: 22, paddingBottom: 22, borderBottom: '1px solid var(--border-subtle)',
  },
  badge: {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
    color: 'var(--yellow-400)', letterSpacing: '0.14em',
    padding: '6px 12px', borderRadius: 4,
    background: 'rgba(255,209,58,0.08)', border: '1px solid rgba(255,209,58,0.30)',
  },
  badgeStar: { color: 'var(--yellow-400)' },
  launchChip: {
    fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
    color: 'var(--cyan-400)', letterSpacing: '0.14em',
    padding: '6px 12px', borderRadius: 4,
    background: 'rgba(45,206,255,0.06)', border: '1px solid rgba(45,206,255,0.30)',
  },

  body: { display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40 },
  leftCol: { display: 'flex', flexDirection: 'column', gap: 12 },
  logoRow: { display: 'flex', alignItems: 'center', gap: 16 },
  logoImg: {
    width: 72, height: 72, objectFit: 'contain',
    padding: 8, background: 'var(--ink-900)',
    border: '1px solid var(--border-default)', borderRadius: 12,
  },
  clientName: { fontFamily: 'Montserrat', fontWeight: 700, fontSize: 16, color: 'var(--fg-1)', letterSpacing: '-0.005em' },
  location: { fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.08em', marginTop: 4 },

  h3: {
    fontFamily: 'Montserrat', fontWeight: 700, fontSize: 26, lineHeight: 1.2,
    color: 'var(--fg-1)', margin: '4px 0 8px', letterSpacing: '-0.01em',
  },
  problemLabel: { fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.14em', marginTop: 8 },
  problem: { fontFamily: 'Inter', fontSize: 14.5, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0, maxWidth: 620 },

  layerLabel: { fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.14em', marginTop: 12 },
  layers: { display: 'flex', flexDirection: 'column', gap: 6, marginTop: 4 },
  layerRow: {
    display: 'flex', gap: 14, alignItems: 'flex-start',
    padding: '10px 14px', background: 'var(--ink-900)',
    border: '1px solid var(--border-subtle)', borderRadius: 8,
  },
  layerCode: {
    fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
    color: 'var(--cyan-400)', letterSpacing: '0.06em',
    minWidth: 32, marginTop: 2,
  },
  layerName: { fontFamily: 'Montserrat', fontWeight: 600, fontSize: 13, color: 'var(--fg-1)', letterSpacing: '0.005em' },
  layerDesc: { fontFamily: 'Inter', fontSize: 13, color: 'var(--fg-3)', lineHeight: 1.5, marginTop: 2 },

  actions: { display: 'flex', gap: 10, marginTop: 16, flexWrap: 'wrap' },
  action: {
    display: 'inline-flex', alignItems: 'center',
    fontFamily: 'Montserrat', fontWeight: 500, fontSize: 13, color: 'var(--fg-1)',
    padding: '10px 16px', borderRadius: 8,
    background: 'var(--ink-900)', border: '1px solid var(--border-strong)',
    textDecoration: 'none', cursor: 'pointer',
  },

  rightCol: { display: 'flex', flexDirection: 'column', gap: 12 },
  statsPanel: {
    padding: 20, background: 'var(--ink-900)',
    border: '1px solid var(--border-default)', borderRadius: 12,
  },
  statsHead: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    marginBottom: 14, paddingBottom: 12, borderBottom: '1px solid var(--border-subtle)',
  },
  statsHeadLbl: { fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--fg-3)', letterSpacing: '0.14em' },
  statsHeadDot: { color: 'var(--signal-success)', fontSize: 10 },
  statsGrid: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 },
  stat: { display: 'flex', flexDirection: 'column', gap: 4 },
  statK: { fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: 'var(--fg-4)', letterSpacing: '0.12em' },
  statV: { fontFamily: 'JetBrains Mono, monospace', fontSize: 18, color: 'var(--fg-1)' },
  statsFooter: {
    marginTop: 14, paddingTop: 12, borderTop: '1px solid var(--border-subtle)',
    fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--cyan-400)',
    letterSpacing: '0.06em',
  },

  archPanel: {
    padding: 16, background: 'var(--ink-900)',
    border: '1px solid var(--border-default)', borderRadius: 12,
  },
  archHead: { fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--fg-3)', letterSpacing: '0.14em', marginBottom: 8 },
  archSvg: { width: '100%', height: 180, display: 'block' },
};

const ccStyles = {
  card: {
    background: 'var(--ink-800)', border: '1px solid var(--border-default)',
    borderRadius: 12, padding: 22,
    display: 'flex', flexDirection: 'column', gap: 8,
    transition: 'border-color 220ms, background 220ms',
  },
  top: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 },
  id: { fontFamily: 'JetBrains Mono, monospace', fontWeight: 500, fontSize: 13, letterSpacing: '0.04em' },
  industry: { fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: 'var(--fg-3)', letterSpacing: '0.12em', textTransform: 'uppercase' },

  name: { fontFamily: 'Montserrat', fontWeight: 600, fontSize: 17, color: 'var(--fg-1)', letterSpacing: '-0.005em', lineHeight: 1.25, marginBottom: 4 },

  imgWrap: {
    margin: '8px 0 4px',
    borderRadius: 8, overflow: 'hidden',
    border: '1px solid var(--border-subtle)',
    background: 'var(--ink-900)', aspectRatio: '16 / 9',
  },
  img: {
    width: '100%', height: '100%',
    objectFit: 'cover', display: 'block',
    filter: 'saturate(0.85) contrast(1.05)',
  },

  problemLbl: { fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: 'var(--fg-4)', letterSpacing: '0.14em', marginTop: 8 },
  problem: { fontFamily: 'Inter', fontSize: 13, lineHeight: 1.55, color: 'var(--fg-2)', margin: 0 },

  surfacesLbl: { fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: 'var(--fg-4)', letterSpacing: '0.14em', marginTop: 12 },
  surfaces: { display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 6 },
  surfaceChip: {
    fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
    color: 'var(--fg-2)', letterSpacing: '0.04em',
    padding: '4px 8px', borderRadius: 4,
    background: 'var(--ink-900)', border: '1px solid var(--border-subtle)',
  },

  footerRow: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    marginTop: 14, paddingTop: 12, borderTop: '1px solid var(--border-subtle)',
  },
  kpi: { fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: 'var(--fg-1)' },

  actions: { display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 4 },
  action: {
    display: 'inline-flex', alignItems: 'center', gap: 4,
    fontFamily: 'Inter', fontWeight: 500, fontSize: 12, color: 'var(--fg-1)',
    padding: '7px 12px', borderRadius: 6,
    background: 'var(--ink-900)', border: '1px solid var(--border-strong)',
    textDecoration: 'none',
  },
  actionBadge: {
    marginLeft: 6,
    fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
    color: 'var(--cyan-400)', letterSpacing: '0.04em',
  },
  note: {
    marginTop: 8,
    fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
    color: 'var(--fg-4)', letterSpacing: '0.05em',
    lineHeight: 1.5,
  },
};