/**
 * Cases section — full-bleed slider, one case in focus, thumbnail strip below.
 *
 * Each case picks a `kind` that selects a preview composition. `kroi`,
 * `avangard`, `bilal` use real screenshots (in tilted browser frames);
 * `parser` and `tg` are fully mocked terminal / Telegram chat UIs because
 * the underlying tools are internal — see HANDOFF §2 for which are real.
 */

/* ─────────── Browser-chrome wrapper for screenshots ─────────── */

const BrowserFrame = ({ url, src, alt, accent = '#663af3', style, imgStyle }) => (
  <div style={{
    position: 'relative', borderRadius: 14, overflow: 'hidden',
    background: '#0a0d18',
    boxShadow: 'var(--shadow-card), 0 0 0 1px rgba(186,215,247,0.08)',
    ...style,
  }}>
    <div style={{
      display: 'flex', alignItems: 'center', gap: 8,
      padding: '10px 14px', background: '#0e1220',
      borderBottom: '1px solid rgba(186,215,247,0.06)',
    }}>
      <span style={{ width: 8, height: 8, borderRadius: 999, background: 'rgba(255,107,107,0.5)' }}></span>
      <span style={{ width: 8, height: 8, borderRadius: 999, background: 'rgba(255,193,107,0.5)' }}></span>
      <span style={{ width: 8, height: 8, borderRadius: 999, background: 'rgba(166,230,161,0.5)' }}></span>
      <div style={{
        marginLeft: 14, flex: 1, display: 'flex', alignItems: 'center', gap: 8,
        background: 'rgba(186,215,247,0.05)', borderRadius: 6, padding: '4px 10px',
        border: '1px solid rgba(186,215,247,0.05)',
      }}>
        <span style={{
          width: 6, height: 6, borderRadius: 999,
          background: accent, boxShadow: `0 0 6px ${accent}`,
        }}></span>
        <span className="font-mono" style={{
          fontSize: 10, color: 'var(--color-whisper-blue)', letterSpacing: '0.06em',
        }}>{url}</span>
      </div>
    </div>
    <img
      src={src}
      alt={alt}
      loading="lazy"
      style={{ display: 'block', width: '100%', height: 'auto', ...imgStyle }}
    />
  </div>
);

/* ─────────── Case-visual compositions per `kind` ─────────── */

const CaseVisualKroi = () => (
  <div style={{ position: 'relative', width: '100%', height: '100%' }}>
    <BrowserFrame
      url="kroi.site/drop-04"
      src="assets/kroi-catalog.webp"
      alt="Krói — каталог Drop·04"
      accent="#ff4520"
      style={{ position: 'absolute', top: '4%', left: 0, width: '78%', zIndex: 2 }}
      imgStyle={{ aspectRatio: '1397/640', objectFit: 'cover', objectPosition: 'top' }}
    />
    <BrowserFrame
      url="kroi.site/p/arc-04"
      src="assets/kroi-product.webp"
      alt="Krói — карточка товара"
      accent="#ff4520"
      style={{ position: 'absolute', bottom: '2%', right: 0, width: '52%', zIndex: 3, transform: 'rotate(1.5deg)' }}
      imgStyle={{ aspectRatio: '1280/940', objectFit: 'cover', objectPosition: 'top' }}
    />
    <div className="font-mono" style={{
      position: 'absolute', top: '52%', left: '4%', zIndex: 4,
      background: 'rgba(255, 69, 32, 0.16)', color: '#ffb39a',
      border: '1px solid rgba(255, 69, 32, 0.4)',
      padding: '6px 12px', borderRadius: 999,
      fontSize: 10, letterSpacing: '0.16em', backdropFilter: 'blur(6px)',
    }}>DROP·04 · LIVE</div>
  </div>
);

const CaseVisualAvangard = () => (
  <div style={{ position: 'relative', width: '100%', height: '100%' }}>
    <BrowserFrame
      url="avangardstyle.kg"
      src="assets/avangard-hero.webp"
      alt="Avangard — главная"
      accent="#5b96f7"
      style={{ position: 'absolute', top: '2%', left: 0, width: '76%', zIndex: 2 }}
      imgStyle={{ aspectRatio: '1900/890', objectFit: 'cover', objectPosition: 'center' }}
    />
    <BrowserFrame
      url="avangardstyle.kg/legenda"
      src="assets/avangard-legenda.webp"
      alt="Avangard — ЖК Легенда"
      accent="#5b96f7"
      style={{ position: 'absolute', top: '38%', right: 0, width: '50%', zIndex: 3, transform: 'rotate(2deg)' }}
      imgStyle={{ aspectRatio: '1900/890', objectFit: 'cover' }}
    />
    <BrowserFrame
      url="avangardstyle.kg/tamchy"
      src="assets/avangard-tamchy.webp"
      alt="Avangard — Tamchy Resort"
      accent="#5b96f7"
      style={{ position: 'absolute', bottom: '2%', left: '6%', width: '42%', zIndex: 4, transform: 'rotate(-1.5deg)' }}
      imgStyle={{ aspectRatio: '1900/870', objectFit: 'cover', objectPosition: 'top' }}
    />
    <div className="font-mono" style={{
      position: 'absolute', top: '2%', right: '4%', zIndex: 5,
      background: 'rgba(102, 58, 243, 0.18)', color: '#d4c5ff',
      border: '1px solid rgba(102, 58, 243, 0.45)',
      padding: '6px 12px', borderRadius: 999,
      fontSize: 10, letterSpacing: '0.16em', backdropFilter: 'blur(6px)',
      display: 'flex', alignItems: 'center', gap: 8,
    }}>
      <span style={{ width: 6, height: 6, borderRadius: 999, background: '#a6e6a1', boxShadow: '0 0 6px #a6e6a1' }}></span>
      3 ПРОЕКТА · LIVE
    </div>
  </div>
);

const CaseVisualBilal = () => (
  <div style={{ position: 'relative', width: '100%', height: '100%' }}>
    <BrowserFrame
      url="bilal.kg"
      src="assets/bilal-home.webp"
      alt="Bilal — главная"
      accent="#5b3ddc"
      style={{ position: 'absolute', top: '2%', left: 0, width: '74%', zIndex: 2 }}
      imgStyle={{ aspectRatio: '880/770', objectFit: 'cover', objectPosition: 'top', maxHeight: 360 }}
    />
    <BrowserFrame
      url="bilal.kg/mens"
      src="assets/bilal-mens.webp"
      alt="Bilal — мужская"
      accent="#5b3ddc"
      style={{ position: 'absolute', top: '36%', right: 0, width: '52%', zIndex: 3, transform: 'rotate(2deg)' }}
      imgStyle={{ aspectRatio: '780/770', objectFit: 'cover', objectPosition: 'top', maxHeight: 320 }}
    />
    <BrowserFrame
      url="bilal.kg/contact"
      src="assets/bilal-contact.webp"
      alt="Bilal — консультация"
      accent="#5b3ddc"
      style={{ position: 'absolute', bottom: '2%', left: '4%', width: '46%', zIndex: 4, transform: 'rotate(-1.5deg)' }}
      imgStyle={{ aspectRatio: '1240/470', objectFit: 'cover' }}
    />
    <div className="font-mono" style={{
      position: 'absolute', top: '2%', right: '4%', zIndex: 5,
      background: 'rgba(255, 58, 140, 0.18)', color: '#ffc1d8',
      border: '1px solid rgba(255, 58, 140, 0.45)',
      padding: '6px 12px', borderRadius: 999,
      fontSize: 10, letterSpacing: '0.16em', backdropFilter: 'blur(6px)',
    }}>OPTOVE · CIS</div>
  </div>
);

const CaseVisualParser = () => (
  <div style={{
    width: '100%', height: '100%', borderRadius: 14, background: '#08090f',
    boxShadow: 'var(--shadow-card)', overflow: 'hidden',
    display: 'grid', gridTemplateRows: '1fr 1fr',
  }}>
    <div style={{ padding: '18px 20px', borderBottom: '1px solid rgba(186,215,247,0.08)' }}>
      <div className="font-mono" style={{ fontSize: 10, color: 'var(--color-whisper-blue)', letterSpacing: '0.16em' }}>
        WB-PRICEWATCH · TAIL
      </div>
      <div className="font-mono" style={{ fontSize: 11, marginTop: 12, lineHeight: 1.7, color: 'var(--color-comet)' }}>
        <div><span style={{ color: 'var(--color-whisper-blue)' }}>14:02:11</span> <span style={{ color: '#a6e6a1' }}>✓</span> fetched 4 218 SKUs from wb.ru</div>
        <div><span style={{ color: 'var(--color-whisper-blue)' }}>14:02:14</span> <span style={{ color: '#a6e6a1' }}>✓</span> diff: 412 prices changed</div>
        <div><span style={{ color: 'var(--color-whisper-blue)' }}>14:02:14</span> <span style={{ color: '#ff8e8e' }}>!</span> map_violation: SKU 3082041 (1 290₽ &lt; min 1 490₽)</div>
        <div><span style={{ color: 'var(--color-whisper-blue)' }}>14:02:15</span> <span style={{ color: '#a6e6a1' }}>✓</span> alert sent → @price_alerts</div>
        <div><span style={{ color: 'var(--color-whisper-blue)' }}>14:02:15</span> <span style={{ color: '#a6e6a1' }}>✓</span> postgres write 412 rows in 184ms</div>
        <div style={{ color: 'var(--color-celestial-light)' }}>▍ next run in 28:42</div>
      </div>
    </div>
    <div style={{ padding: '18px 20px' }}>
      <div className="font-mono" style={{ fontSize: 10, color: 'var(--color-whisper-blue)', letterSpacing: '0.16em' }}>
        PRICE INDEX · 24H · TOP 12 SKU
      </div>
      <svg viewBox="0 0 400 130" style={{ width: '100%', height: 130, marginTop: 12 }}>
        <defs>
          <linearGradient id="parser-grad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%"   stopColor="#663af3" stopOpacity="0.4" />
            <stop offset="100%" stopColor="#663af3" stopOpacity="0" />
          </linearGradient>
        </defs>
        {[0, 30, 60, 90, 120].map((y) => (
          <line key={y} x1="0" x2="400" y1={y} y2={y} stroke="rgba(186,215,247,0.06)" />
        ))}
        <path
          d="M0,80 L33,72 L66,78 L100,60 L133,68 L166,52 L200,58 L233,42 L266,48 L300,32 L333,38 L366,28 L400,22 L400,130 L0,130 Z"
          fill="url(#parser-grad)"
        />
        <path
          d="M0,80 L33,72 L66,78 L100,60 L133,68 L166,52 L200,58 L233,42 L266,48 L300,32 L333,38 L366,28 L400,22"
          fill="none" stroke="#b6d9fc" strokeWidth="1.5"
        />
        <path
          d="M0,90 L33,86 L66,92 L100,84 L133,90 L166,80 L200,86 L233,74 L266,82 L300,68 L333,76 L366,62 L400,58"
          fill="none" stroke="#663af3" strokeWidth="1.5" strokeDasharray="3 4"
        />
      </svg>
      <div className="font-mono" style={{
        display: 'flex', justifyContent: 'space-between',
        marginTop: 6, fontSize: 9, color: 'var(--color-whisper-blue)',
      }}>
        <span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>NOW</span>
      </div>
    </div>
  </div>
);

const CaseVisualTelegram = ({ lang }) => {
  const budgetChips = T(lang,
    ['до 80к ₽', '80–200к ₽', '200к+ ₽'],
    ['under $1k', '$1k–2.5k', '$2.5k+'],
  );

  return (
    <div style={{
      width: '100%', height: '100%', borderRadius: 14, background: '#0d0e16',
      boxShadow: 'var(--shadow-card)', padding: '24px', overflow: 'hidden',
      display: 'flex', justifyContent: 'center', alignItems: 'center',
    }}>
      <div style={{
        width: 280, background: '#17212b', borderRadius: 18,
        padding: '14px 14px 16px', boxShadow: '0 24px 60px rgba(0,0,0,0.5)',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          paddingBottom: 12, borderBottom: '1px solid rgba(255,255,255,0.04)',
        }}>
          <div style={{
            width: 32, height: 32, borderRadius: 999,
            background: 'linear-gradient(135deg,#5b96f7,#3a7fd9)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff', fontSize: 14, fontWeight: 700,
          }}>C</div>
          <div>
            <div style={{ color: '#fff', fontSize: 12, fontWeight: 500 }}>@codaro_leads</div>
            <div style={{ color: '#7d8b9d', fontSize: 10 }}>
              {T(lang, 'онлайн · бот-воронка', 'online · funnel bot')}
            </div>
          </div>
        </div>
        <div style={{ paddingTop: 12, display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{ alignSelf: 'flex-start', maxWidth: '80%', background: '#182533', borderRadius: '12px 12px 12px 4px', padding: '8px 12px', color: '#e6ebf2', fontSize: 11 }}>
            {T(lang,
              'Привет 👋 Что хочется обсудить?',
              'Hey 👋 What can we help with?')}
          </div>
          <div style={{ alignSelf: 'flex-end', maxWidth: '80%', background: '#2b5278', borderRadius: '12px 12px 4px 12px', padding: '8px 12px', color: '#fff', fontSize: 11 }}>
            {T(lang, 'Лендинг для запуска', 'Landing page for a launch')}
          </div>
          <div style={{ alignSelf: 'flex-start', maxWidth: '80%', background: '#182533', borderRadius: '12px 12px 12px 4px', padding: '8px 12px', color: '#e6ebf2', fontSize: 11 }}>
            {T(lang, 'Бюджет?', 'Budget?')}
          </div>
          <div style={{ display: 'flex', gap: 6, alignSelf: 'flex-start', flexWrap: 'wrap', marginTop: 4 }}>
            {budgetChips.map((x) => (
              <span key={x} style={{
                background: '#1c2733', color: '#5b96f7',
                padding: '5px 10px', borderRadius: 14,
                fontSize: 10, border: '1px solid rgba(91,150,247,0.3)',
              }}>{x}</span>
            ))}
          </div>
          <div style={{ alignSelf: 'flex-end', maxWidth: '80%', background: '#2b5278', borderRadius: '12px 12px 4px 12px', padding: '8px 12px', color: '#fff', fontSize: 11, marginTop: 4 }}>
            {budgetChips[1]}
          </div>
          <div style={{ alignSelf: 'flex-start', maxWidth: '85%', background: '#182533', borderRadius: '12px 12px 12px 4px', padding: '8px 12px', color: '#e6ebf2', fontSize: 11 }}>
            {T(lang,
              '✓ заявка #1124 принята. Менеджер ответит за 47 мин.',
              '✓ lead #1124 received. A manager will reply in 47 min.')}
          </div>
        </div>
      </div>
    </div>
  );
};

const CASE_VISUALS = {
  kroi:     CaseVisualKroi,
  avangard: CaseVisualAvangard,
  bilal:    CaseVisualBilal,
  parser:   CaseVisualParser,
  tg:       CaseVisualTelegram,
};

const CaseVisual = ({ kind, lang }) => {
  const Visual = CASE_VISUALS[kind];
  return Visual ? <Visual lang={lang} /> : null;
};

/* ─────────── Slider ─────────── */

const CasePanel = ({ caseItem, lang }) => (
  <div style={{ width: '100%', position: 'relative' }}>
    <div style={{
      position: 'absolute', inset: 0,
      background: caseItem.bgGradient, opacity: 0.9, pointerEvents: 'none',
    }} />

    <div className="container" style={{ position: 'relative' }}>
      <div data-grid="case-panel" style={{
        display: 'grid', gridTemplateColumns: '0.85fr 1.15fr',
        gap: 56, alignItems: 'center', padding: '64px 0',
      }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
            <span className="badge violet">
              <span className="dot"></span>{pick(lang, caseItem.category)}
            </span>
            <span className="font-mono" style={{
              fontSize: 11, color: 'var(--color-whisper-blue)', letterSpacing: '0.16em',
            }}>
              CASE · {caseItem.n}
            </span>
          </div>

          <h3 className="font-display" style={{
            fontSize: 'clamp(36px, 4.4vw, 56px)', lineHeight: 1.05,
            letterSpacing: '-0.02em', color: 'var(--color-ghost-white)',
            fontWeight: 400, margin: 0,
          }}>
            {pick(lang, caseItem.headline)}
          </h3>

          <p style={{
            marginTop: 20, fontSize: 16, lineHeight: 1.55,
            color: 'var(--color-arctic-mist)', maxWidth: 480, letterSpacing: '-0.01em',
          }}>
            {pick(lang, caseItem.body)}
          </p>

          <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {caseItem.metrics.map((m, i) => (
              <div key={i}>
                <div className="font-mono" style={{
                  fontSize: 10, color: 'var(--color-whisper-blue)', letterSpacing: '0.16em',
                }}>
                  {pick(lang, m.label)}
                </div>
                <div className="font-display" style={{
                  fontSize: 28, color: 'var(--color-ghost-white)',
                  marginTop: 4, letterSpacing: '-0.01em',
                }}>
                  {m.value}
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 32, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {caseItem.tags.map((tag) => (
              <span key={tag} className="font-mono" style={{
                padding: '4px 8px', borderRadius: 4,
                fontSize: 10, color: 'var(--color-celestial-light)',
                background: 'rgba(11, 14, 26, 0.88)',
                boxShadow: 'rgba(186, 215, 247, 0.08) 0px 0px 0px 1px inset',
                letterSpacing: '0.04em',
              }}>{tag}</span>
            ))}
          </div>

          <div className="case-cta">
            <a href={`https://${caseItem.url}`} className="btn-pill">
              {T(lang, 'Открыть', 'Visit')}
              <span className="case-cta__url"> {caseItem.url}</span>
              <span> →</span>
            </a>
            <span className="font-mono case-cta__url-fallback">{caseItem.url}</span>
            <span className="font-mono" style={{ fontSize: 11, color: 'var(--color-whisper-blue)' }}>
              {caseItem.name}
            </span>
          </div>
        </div>

        <div data-case-visual style={{ height: 560, position: 'relative' }}>
          <CaseVisual kind={caseItem.kind} lang={lang} />
        </div>
      </div>
    </div>
  </div>
);

const CaseStrip = ({ index, setIndex, lang }) => (
  <div className="container" style={{ marginTop: 32 }}>
    <div data-grid="case-strip" style={{
      display: 'grid',
      gridTemplateColumns: `repeat(${CASES.length}, 1fr)`,
      gap: 8,
    }}>
      {CASES.map((cs, i) => (
        <button
          key={cs.id}
          onClick={() => setIndex(i)}
          aria-current={i === index}
          style={{
            padding: '14px 16px', borderRadius: 10, textAlign: 'left',
            background: i === index ? 'rgba(20, 24, 42, 0.92)' : 'rgba(11, 14, 26, 0.88)',
            backdropFilter: 'blur(14px)',
            WebkitBackdropFilter: 'blur(14px)',
            boxShadow: i === index
              ? 'rgba(186, 215, 247, 0.32) 0px 0px 0px 1px inset'
              : 'rgba(186, 215, 247, 0.10) 0px 0px 0px 1px inset',
            transition: 'all .2s',
          }}
        >
          <div className="font-mono" style={{
            fontSize: 9, color: 'var(--color-whisper-blue)', letterSpacing: '0.16em',
          }}>{cs.n}</div>
          <div style={{
            marginTop: 6, fontSize: 13, fontWeight: 500,
            color: i === index ? 'var(--color-ghost-white)' : 'var(--color-arctic-mist)',
          }}>{cs.name}</div>
          <div style={{ marginTop: 2, fontSize: 11, color: 'var(--color-whisper-blue)' }}>
            {pick(lang, cs.category)}
          </div>
        </button>
      ))}
    </div>
  </div>
);

const Cases = ({ lang }) => {
  const [index, setIndex] = React.useState(0);
  const next = () => setIndex((index + 1) % CASES.length);
  const prev = () => setIndex((index - 1 + CASES.length) % CASES.length);
  const current = CASES[index];

  return (
    <section id="cases" style={{ padding: '80px 0 120px', position: 'relative', overflow: 'hidden' }}>
      <div className="container" style={{ marginBottom: 40 }}>
        <div style={{
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          gap: 24, flexWrap: 'wrap',
        }}>
          <div>
            <span className="section-eyebrow">{T(lang, '02 / Кейсы', '02 / Work')}</span>
            <h2 className="section-title" style={{ marginTop: 16 }}>
              {T(lang,
                'Что мы строили в последнее время.',
                'What we’ve been shipping lately.')}
            </h2>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span className="font-mono" style={{
              fontSize: 11, color: 'var(--color-whisper-blue)', letterSpacing: '0.16em',
            }}>
              {String(index + 1).padStart(2, '0')} / {String(CASES.length).padStart(2, '0')}
            </span>
            <button
              onClick={prev}
              aria-label={T(lang, 'Предыдущий кейс', 'Previous case')}
              className="btn-outline"
              style={{ width: 36, height: 36, padding: 0, justifyContent: 'center' }}
            >←</button>
            <button
              onClick={next}
              aria-label={T(lang, 'Следующий кейс', 'Next case')}
              className="btn-outline"
              style={{ width: 36, height: 36, padding: 0, justifyContent: 'center' }}
            >→</button>
          </div>
        </div>
      </div>

      <CasePanel caseItem={current} lang={lang} />
      <CaseStrip index={index} setIndex={setIndex} lang={lang} />
    </section>
  );
};

window.Cases = Cases;