// Video Stories – 3 client testimonials with playable video modal.
// Real client videos to be supplied; sample MP4 from W3C public test bucket
// (interactive.coursera.org / archive.org would work too).

const VIDEO_STORIES = [
  {
    id: 'vs-portugal-family',
    poster: 'https://picsum.photos/seed/migronis-vs-portugal/900/1300',
    duration: '2:14',
    name: { ru: 'Семья Романовых', en: 'The Romanov family' },
    role: { ru: 'Founder, FinTech · переехали в Лиссабон 2023',
            en: 'Founder, FinTech · relocated to Lisbon 2023' },
    program: 'portugal-golden',
    headline: {
      ru: '«Сначала пугал НДС. Через 3 месяца – открыл компанию в одну дверь.»',
      en: '"VAT scared me at first. Three months in – opened a company through one door."',
    },
    kpis: [
      { l: { ru: 'Срок', en: 'Timeline' }, v: '11 mo' },
      { l: { ru: 'Семья', en: 'Family' }, v: '4 pax' },
      { l: { ru: 'Возврат', en: 'Net IRR' }, v: '+8.2%' },
    ],
    src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4',
  },
  {
    id: 'vs-grenada-entrepreneur',
    poster: 'https://picsum.photos/seed/migronis-vs-grenada/900/1300',
    duration: '3:08',
    name: { ru: 'Михаил К.', en: 'Mikhail K.' },
    role: { ru: 'CEO, e-commerce · паспорт Гренады + E-2 в США',
            en: 'CEO, e-commerce · Grenada passport → US E-2 visa' },
    program: 'grenada',
    headline: {
      ru: '«Сэкономил 4 года ожидания на EB-5. Через Гренаду E-2 за 7 месяцев.»',
      en: '"Saved 4 years of EB-5 waiting. Grenada → US E-2 in 7 months."',
    },
    kpis: [
      { l: { ru: 'Срок', en: 'Timeline' }, v: '7 mo' },
      { l: { ru: 'Бюджет', en: 'Budget' }, v: '$280k' },
      { l: { ru: 'E-2 visa', en: 'E-2 visa' }, v: 'issued' },
    ],
    src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
  },
  {
    id: 'vs-turkey-family',
    poster: 'https://picsum.photos/seed/migronis-vs-turkey/900/1300',
    duration: '1:46',
    name: { ru: 'Дарья и Артём', en: 'Daria & Artem' },
    role: { ru: 'Семья 5 · Стамбул, школа для троих',
            en: 'Family of 5 · Istanbul, school for three' },
    program: 'turkey',
    headline: {
      ru: '«Боялись бюрократии. Подписали 14 документов – паспорта на руках через 5 месяцев.»',
      en: '"We feared bureaucracy. Signed 14 forms – passports in hand in 5 months."',
    },
    kpis: [
      { l: { ru: 'Срок', en: 'Timeline' }, v: '5 mo' },
      { l: { ru: 'Семья', en: 'Family' }, v: '5 pax' },
      { l: { ru: 'Тип', en: 'Route' }, v: 'real estate' },
    ],
    src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4',
  },
];

function VideoModal({ open, onClose, story, lang }) {
  if (!open || !story) return null;
  return (
    <div onClick={onClose}
         style={{
           position: 'fixed', inset: 0, zIndex: 110,
           background: 'rgba(0,0,0,0.78)', backdropFilter: 'blur(14px)',
           display: 'grid', placeItems: 'center', padding: 24,
           animation: 'fade-up .2s var(--ease-out)',
         }}>
      <div onClick={(e) => e.stopPropagation()}
           style={{
             width: 'min(900px, 100%)', maxHeight: '92vh',
             background: 'var(--bg-elev-solid, var(--bg-elev))',
             border: '1px solid var(--border-strong)',
             borderRadius: 'var(--r-xl)', overflow: 'hidden',
             display: 'grid', gridTemplateRows: 'auto 1fr auto',
           }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '16px 20px', borderBottom: '1px solid var(--border)' }}>
          <div>
            <div style={{ fontWeight: 500 }}>{story.name[lang]}</div>
            <div style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{story.role[lang]}</div>
          </div>
          <div style={{ flex: 1 }} />
          <button className="btn btn-ghost btn-sm" onClick={onClose} style={{ width: 36, padding: 0 }}>×</button>
        </div>
        <div style={{ background: '#000', display: 'grid', placeItems: 'center', minHeight: 360 }}>
          <video src={story.src} controls autoPlay
                 poster={story.poster}
                 style={{ width: '100%', maxHeight: '70vh', display: 'block' }} />
        </div>
        <div style={{ padding: '14px 20px', display: 'flex', gap: 24, alignItems: 'center', borderTop: '1px solid var(--border)' }}>
          <div className="display" style={{ fontSize: 18, color: 'var(--fg)', flex: 1, fontStyle: 'italic' }}>
            "{story.headline[lang]}"
          </div>
          <div style={{ display: 'flex', gap: 16 }}>
            {story.kpis.map((k, i) => (
              <div key={i}>
                <div className="eyebrow" style={{ fontSize: 10 }}>{k.l[lang]}</div>
                <div className="mono" style={{ fontSize: 14, color: 'var(--accent)' }}>{k.v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function VideoStoriesSection({ lang, setRoute, filterKind }) {
  const [active, setActive] = React.useState(null);
  // filterKind: 'cbi' tilts the copy toward passports; story-level filtering
  // waits until the client picks the actual 3 clips per page.
  return (
    <section className="section" style={{ paddingTop: 72, paddingBottom: 56 }}>
      <div className="container-wide">
        <div style={{ marginBottom: 32, maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>
            {lang === 'ru' ? '– Истории семей · видео' : '– Family stories · video'}
          </div>
          <h2 className="display h-2" style={{ margin: 0 }}>
            {lang === 'ru'
              ? <>Не реклама<br/><em>Реальные</em> семьи</>
              : <>Not advertising<br/><em>Real</em> families</>}
          </h2>
          <p style={{ color: 'var(--fg-muted)', fontSize: 16, marginTop: 16, maxWidth: 540 }}>
            {filterKind === 'cbi'
              ? (lang === 'ru'
                  ? 'Три истории клиентов, прошедших путь от первого звонка до нового паспорта.'
                  : 'Three client stories — from the first call to a new passport.')
              : (lang === 'ru'
                  ? 'Три истории клиентов, прошедших путь от первого звонка до новой жизни.'
                  : 'Three client stories — from the first call to a new life.')}
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
        }}>
          {VIDEO_STORIES.map((s) => (
            <button key={s.id}
              onClick={() => setActive(s)}
              className="lift"
              style={{
                position: 'relative', textAlign: 'left',
                background: 'transparent', border: 0, padding: 0,
                aspectRatio: '3/4', borderRadius: 'var(--r-xl)',
                overflow: 'hidden', cursor: 'pointer',
              }}>
              <img src={s.poster} alt={s.name[lang]} loading="lazy"
                   style={{
                     position: 'absolute', inset: 0, width: '100%', height: '100%',
                     objectFit: 'cover', filter: 'saturate(1.05)',
                   }} />
              {/* Gradient */}
              <div style={{
                position: 'absolute', inset: 0,
                background: 'linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.8))',
              }} />
              {/* Play button */}
              <div style={{
                position: 'absolute', left: '50%', top: '50%',
                transform: 'translate(-50%, -50%)',
                width: 80, height: 80, borderRadius: 999,
                background: 'rgba(255,255,255,0.15)',
                backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
                border: '1px solid rgba(255,255,255,0.3)',
                display: 'grid', placeItems: 'center',
                color: '#fff', fontSize: 28,
                transition: 'transform .3s var(--ease-out)',
              }} className="vs-play">
                ▶
              </div>
              {/* Duration chip */}
              <div style={{
                position: 'absolute', top: 14, right: 14,
                padding: '4px 10px', borderRadius: 999,
                background: 'rgba(0,0,0,0.5)', color: '#fff', fontSize: 11,
                fontFamily: 'var(--f-mono)', backdropFilter: 'blur(8px)',
              }}>{s.duration}</div>
              {/* Content */}
              <div style={{
                position: 'absolute', left: 22, right: 22, bottom: 22,
                color: '#fff',
              }}>
                <div className="display" style={{ fontSize: 22, lineHeight: 1.15, fontStyle: 'italic', marginBottom: 12 }}>
                  "{s.headline[lang]}"
                </div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{s.name[lang]}</div>
                <div style={{ fontSize: 12, opacity: .8 }}>{s.role[lang]}</div>
              </div>
            </button>
          ))}
        </div>

        <VideoModal open={!!active} onClose={() => setActive(null)} story={active} lang={lang} />
      </div>

      <style dangerouslySetInnerHTML={{ __html: `
        .vs-play { transition: transform .3s var(--ease-out), background .3s; }
        .lift:hover .vs-play { transform: translate(-50%, -50%) scale(1.1); background: rgba(255,255,255,0.25); }
      `}} />
    </section>
  );
}

window.VideoStoriesSection = VideoStoriesSection;