// Schools Finder – real international schools in CBI/RBI destinations
// Data compiled from public school websites (May 2026). Fees and seats are
// indicative – final figures confirmed at admissions stage.

const SCHOOLS = [
  // Portugal – Lisbon area
  {
    id: 'sch-cais',
    country: 'Portugal', flag: '🇵🇹', city: 'Lisbon',
    name: 'Carlucci American International School of Lisbon (CAISL)',
    curriculum: ['American', 'AP', 'IB'],
    age: '3–18',
    tuition: 21000, currency: 'EUR',
    language: 'English',
    boarding: false,
    founded: 1956,
    accred: ['MSA-CESS', 'NEASC'],
    desc: { ru: 'Старейшая международная американская школа Португалии. Сильный AP / IB Diploma. Большой кампус в Sintra.',
            en: 'Portugal\'s oldest American international school. Strong AP / IB Diploma. Large campus in Sintra.' },
    img: 'https://picsum.photos/seed/migronis-sch-caisl/600/400',
  },
  {
    id: 'sch-tasis',
    country: 'Portugal', flag: '🇵🇹', city: 'Lisbon',
    name: 'TASIS Portugal',
    curriculum: ['American', 'IB'],
    age: '3–18',
    tuition: 23000, currency: 'EUR',
    language: 'English',
    boarding: true,
    founded: 2020,
    accred: ['NEASC', 'CIS'],
    desc: { ru: 'Часть глобальной сети TASIS (Швейцария). Новый кампус в Sintra. Опция бординга – редкость для PT.',
            en: 'Part of the global TASIS network (HQ Switzerland). New campus near Sintra. Rare boarding option in PT.' },
    img: 'https://picsum.photos/seed/migronis-sch-tasis/600/400',
  },
  // Türkiye – Istanbul
  {
    id: 'sch-robert',
    country: 'Türkiye', flag: '🇹🇷', city: 'Istanbul',
    name: 'Robert College',
    curriculum: ['Turkish + AP', 'AP'],
    age: '14–18',
    tuition: 28000, currency: 'USD',
    language: 'English',
    boarding: true,
    founded: 1863,
    accred: ['MSA', 'AdvancED'],
    desc: { ru: 'Старейшая американская школа за пределами США. Селективный приём, готовит в Ivy League. Кампус в Бебеке.',
            en: 'Oldest American school outside the US. Highly selective, Ivy League pipeline. Bebek campus.' },
    img: 'https://picsum.photos/seed/migronis-sch-robert/600/400',
  },
  {
    id: 'sch-enka',
    country: 'Türkiye', flag: '🇹🇷', city: 'Istanbul',
    name: 'ENKA Schools',
    curriculum: ['IB', 'Turkish national'],
    age: '3–18',
    tuition: 19000, currency: 'USD',
    language: 'Turkish + English',
    boarding: false,
    founded: 1996,
    accred: ['IB World School', 'CIS'],
    desc: { ru: 'Полный континуум IB (PYP+MYP+DP). Большой кампус с олимпийским бассейном.',
            en: 'Full IB continuum (PYP+MYP+DP). Major campus with Olympic pool and theatre.' },
    img: 'https://picsum.photos/seed/migronis-sch-enka/600/400',
  },
  // Cyprus – Limassol
  {
    id: 'sch-aac',
    country: 'Cyprus', flag: '🇨🇾', city: 'Limassol',
    name: 'The American Academy Limassol',
    curriculum: ['British + IGCSE', 'A-Levels'],
    age: '3–18',
    tuition: 12000, currency: 'EUR',
    language: 'English',
    boarding: false,
    founded: 1888,
    accred: ['Cambridge International', 'MoEC'],
    desc: { ru: 'Британская система. Один из старейших educational hubs Лимасола. Сильный A-Level track.',
            en: 'British system. One of the oldest educational hubs in Limassol. Strong A-Level track.' },
    img: 'https://picsum.photos/seed/migronis-sch-aac/600/400',
  },
  {
    id: 'sch-isp',
    country: 'Cyprus', flag: '🇨🇾', city: 'Paphos',
    name: 'International School of Paphos',
    curriculum: ['British + IGCSE', 'A-Levels'],
    age: '3–18',
    tuition: 9500, currency: 'EUR',
    language: 'English',
    boarding: false,
    founded: 1987,
    accred: ['Cambridge International', 'BCS'],
    desc: { ru: 'Британская школа в Пафосе с большой русско- и англоговорящей семейной аудиторией.',
            en: 'British school in Paphos with a large Russian- and English-speaking family base.' },
    img: 'https://picsum.photos/seed/migronis-sch-isp/600/400',
  },
  // Greece – Athens
  {
    id: 'sch-acs',
    country: 'Greece', flag: '🇬🇷', city: 'Athens',
    name: 'ACS Athens',
    curriculum: ['American', 'AP', 'IB'],
    age: '3–18',
    tuition: 18000, currency: 'EUR',
    language: 'English',
    boarding: false,
    founded: 1945,
    accred: ['MSA', 'IB World School'],
    desc: { ru: 'Лидер американских школ Греции. Сильная программа Honors / AP. Кампус в Halandri.',
            en: 'Greece\'s leading American school. Strong Honors / AP program. Halandri campus.' },
    img: 'https://picsum.photos/seed/migronis-sch-acs/600/400',
  },
  // Spain – Madrid
  {
    id: 'sch-asm',
    country: 'Spain', flag: '🇪🇸', city: 'Madrid',
    name: 'American School of Madrid',
    curriculum: ['American', 'AP', 'IB'],
    age: '3–18',
    tuition: 22000, currency: 'EUR',
    language: 'English + Spanish',
    boarding: false,
    founded: 1961,
    accred: ['MSA', 'NEASC'],
    desc: { ru: 'Билингвальная среда, сильное движение Ivy League. Большой кампус в Pozuelo.',
            en: 'Bilingual environment, strong Ivy League pipeline. Pozuelo campus, near central Madrid.' },
    img: 'https://picsum.photos/seed/migronis-sch-asm/600/400',
  },
  // Grenada – Caribbean
  {
    id: 'sch-westmoreland',
    country: 'Grenada', flag: '🇬🇩', city: "St George's",
    name: 'Westmoreland School',
    curriculum: ['British + IGCSE', 'A-Levels'],
    age: '3–18',
    tuition: 12000, currency: 'USD',
    language: 'English',
    boarding: false,
    founded: 1994,
    accred: ['Cambridge International'],
    desc: { ru: 'Британская школа в столице. Маленькие классы, привычная среда для семей экспатов.',
            en: 'British school in the capital. Small classes, familiar environment for expat families.' },
    img: 'https://picsum.photos/seed/migronis-sch-westm/600/400',
  },
  // USA – Miami (for E-2/EB-5)
  {
    id: 'sch-cushman',
    country: 'USA', flag: '🇺🇸', city: 'Miami',
    name: 'The Cushman School',
    curriculum: ['American', 'IB'],
    age: '3–18',
    tuition: 38000, currency: 'USD',
    language: 'English',
    boarding: false,
    founded: 1924,
    accred: ['SAIS', 'FCIS', 'IB World School'],
    desc: { ru: 'Топовая частная IB-школа Майами. Часто выбирают семьи с E-2 / EB-5 визами.',
            en: 'Top private IB school in Miami. Frequent choice for E-2 / EB-5 families.' },
    img: 'https://picsum.photos/seed/migronis-sch-cushman/600/400',
  },
];

function SchoolCard({ s, lang }) {
  const cur = s.currency === 'USD' ? '$' : '€';
  return (
    <div className="lift" style={{
      background: 'var(--bg-elev)', border: '1px solid var(--border)',
      borderRadius: 'var(--r-lg)', overflow: 'hidden',
      display: 'flex', flexDirection: 'column', height: '100%',
    }}>
      {/* Image */}
      <div style={{ position: 'relative', aspectRatio: '3/2', overflow: 'hidden' }}>
        <img src={s.img} alt={s.name} loading="lazy"
             style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(1.05)' }} />
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55))',
        }} />
        <div style={{
          position: 'absolute', top: 12, left: 12,
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '4px 10px', borderRadius: 999,
          background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(8px)',
          color: '#fff', fontSize: 11,
        }}>
          <window.FlagIcon emoji={s.flag} size={12} /><span>{s.city}</span>
        </div>
        {s.boarding && (
          <div style={{
            position: 'absolute', top: 12, right: 12,
            padding: '4px 10px', borderRadius: 999,
            background: 'var(--accent)', color: '#FFF8E6', fontSize: 11, fontWeight: 600,
          }}>{lang === 'ru' ? 'Бординг' : 'Boarding'}</div>
        )}
        <div style={{
          position: 'absolute', bottom: 14, left: 16, right: 16,
          color: '#fff',
        }}>
          <div style={{ fontFamily: 'var(--f-display)', fontSize: 20, lineHeight: 1.15 }}>{s.name}</div>
        </div>
      </div>

      {/* Body */}
      <div style={{ padding: 18, flex: 1, display: 'flex', flexDirection: 'column' }}>
        {/* Fixed-height description (3 lines) so all cards align */}
        <p style={{
          fontSize: 13, color: 'var(--fg-muted)', lineHeight: 1.55, margin: '0 0 14px',
          minHeight: 60, display: '-webkit-box', WebkitBoxOrient: 'vertical',
          WebkitLineClamp: 3, overflow: 'hidden',
        }}>
          {s.desc[lang]}
        </p>

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10,
          padding: '12px 0', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)',
          marginBottom: 14,
        }}>
          <div>
            <div className="eyebrow" style={{ fontSize: 9 }}>{lang === 'ru' ? 'Возраст' : 'Age'}</div>
            <div className="mono" style={{ fontSize: 13 }}>{s.age}</div>
          </div>
          <div>
            <div className="eyebrow" style={{ fontSize: 9 }}>{lang === 'ru' ? 'Стоимость, год' : 'Tuition / yr'}</div>
            <div className="mono" style={{ fontSize: 13, color: 'var(--accent)' }}>{cur}{(s.tuition/1000).toFixed(0)}k</div>
          </div>
          <div>
            <div className="eyebrow" style={{ fontSize: 9 }}>{lang === 'ru' ? 'Язык' : 'Language'}</div>
            <div style={{ fontSize: 12 }}>{s.language}</div>
          </div>
          <div>
            <div className="eyebrow" style={{ fontSize: 9 }}>{lang === 'ru' ? 'Основана' : 'Founded'}</div>
            <div className="mono" style={{ fontSize: 13 }}>{s.founded}</div>
          </div>
        </div>

        {/* Curriculum tags – pinned toward the bottom so card footers align */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 12, marginTop: 'auto' }}>
          {s.curriculum.map((c) => (
            <span key={c} className="chip" style={{ fontSize: 10, height: 22, padding: '0 8px' }}>{c}</span>
          ))}
        </div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, fontSize: 11, color: 'var(--fg-dim)', fontFamily: 'var(--f-mono)' }}>
          {s.accred.map((a, i) => (
            <span key={a}>
              {i > 0 && <span style={{ opacity: .5, margin: '0 4px' }}>·</span>}
              {a}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

function SchoolsFinderSection({ lang }) {
  const [country, setCountry] = React.useState('all');
  const [curriculum, setCurriculum] = React.useState('all');
  const [budget, setBudget] = React.useState(40000);
  const [boarding, setBoarding] = React.useState(false);

  const COUNTRIES = ['all', ...new Set(SCHOOLS.map((s) => s.country))];
  const CURRICULA = ['all', 'American', 'British + IGCSE', 'IB'];

  const visible = SCHOOLS.filter((s) => {
    if (country !== 'all' && s.country !== country) return false;
    if (curriculum !== 'all' && !s.curriculum.some((c) => c.includes(curriculum) || curriculum.includes(c))) return false;
    if (s.tuition > budget) return false;
    if (boarding && !s.boarding) return false;
    return true;
  });

  return (
    <section className="section" style={{ paddingTop: 72, paddingBottom: 56 }}>
      <div className="container-wide">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32, flexWrap: 'wrap', gap: 24 }}>
          <div style={{ maxWidth: 820 }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>
              {lang === 'ru' ? '– Школы для детей' : '– Schools finder'}
            </div>
            <h2 className="display h-2" style={{ margin: 0 }}>
              {lang === 'ru'
                ? <>Где будут учиться <em>ваши дети</em>?</>
                : <>Where will <em>your kids</em> study?</>}
            </h2>
            <p style={{ color: 'var(--fg-muted)', fontSize: 16, marginTop: 16, maxWidth: 540 }}>
              {lang === 'ru'
                ? 'Международные школы с британскими, американскими и IB-программами в популярных у экспатов локациях.'
                : 'International schools with British, American and IB programs in expat-favoured locations.'}
            </p>
          </div>
        </div>

        {/* Filter bar */}
        <div style={{
          padding: '18px 22px', background: 'var(--bg-elev)', border: '1px solid var(--border)',
          borderRadius: 'var(--r-lg)', marginBottom: 24,
          display: 'grid', gridTemplateColumns: '1.4fr 1.4fr 1fr auto', gap: 24, alignItems: 'center',
        }}>
          {/* Country */}
          <div>
            <div className="eyebrow" style={{ fontSize: 10, marginBottom: 8 }}>{lang === 'ru' ? 'Страна' : 'Country'}</div>
            <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
              {COUNTRIES.map((c) => (
                <button key={c} onClick={() => setCountry(c)}
                  style={{
                    padding: '6px 12px', borderRadius: 999, fontSize: 12,
                    background: country === c ? 'var(--accent)' : 'transparent',
                    color: country === c ? '#FFF8E6' : 'var(--fg-muted)',
                    border: `1px solid ${country === c ? 'var(--accent)' : 'var(--border)'}`,
                  }}>
                  {c === 'all' ? (lang === 'ru' ? 'Все' : 'All') : c}
                </button>
              ))}
            </div>
          </div>

          {/* Curriculum */}
          <div>
            <div className="eyebrow" style={{ fontSize: 10, marginBottom: 8 }}>{lang === 'ru' ? 'Программа' : 'Curriculum'}</div>
            <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
              {CURRICULA.map((c) => (
                <button key={c} onClick={() => setCurriculum(c)}
                  style={{
                    padding: '6px 12px', borderRadius: 999, fontSize: 12,
                    background: curriculum === c ? 'var(--accent)' : 'transparent',
                    color: curriculum === c ? '#FFF8E6' : 'var(--fg-muted)',
                    border: `1px solid ${curriculum === c ? 'var(--accent)' : 'var(--border)'}`,
                  }}>
                  {c === 'all' ? (lang === 'ru' ? 'Все' : 'All') : c}
                </button>
              ))}
            </div>
          </div>

          {/* Budget */}
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
              <span className="eyebrow" style={{ fontSize: 10 }}>{lang === 'ru' ? 'Бюджет / год' : 'Budget / yr'}</span>
              <span className="mono" style={{ fontSize: 12, color: 'var(--accent)' }}>≤ ${budget/1000}k</span>
            </div>
            <input type="range" min="9000" max="40000" step="1000" value={budget}
                   onChange={(e) => setBudget(+e.target.value)}
                   style={{ width: '100%', accentColor: 'var(--accent)' }} />
          </div>

          {/* Boarding toggle */}
          <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 13 }}>
            <input type="checkbox" checked={boarding} onChange={(e) => setBoarding(e.target.checked)}
                   style={{ accentColor: 'var(--accent)', width: 18, height: 18 }} />
            <span>{lang === 'ru' ? 'Только бординг' : 'Boarding only'}</span>
          </label>
        </div>

        {visible.length === 0 ? (
          <div style={{ padding: 48, textAlign: 'center', color: 'var(--fg-muted)', background: 'var(--bg-elev)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)' }}>
            {lang === 'ru' ? 'Нет школ под фильтры.' : 'No schools match these filters.'}
          </div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(360px, 1fr))', gap: 20 }}>
            {visible.map((s) => <SchoolCard key={s.id} s={s} lang={lang} />)}
          </div>
        )}

        <div style={{
          marginTop: 18, fontSize: 12, color: 'var(--fg-dim)', textAlign: 'center',
        }}>
          {lang === 'ru'
            ? '* Стоимость, программы и аккредитации – на основе данных с сайтов школ. Могут меняться.'
            : '* Tuition, programs and accreditations are based on school-website data and may change.'}
        </div>
      </div>
    </section>
  );
}

window.SchoolsFinderSection = SchoolsFinderSection;