/* ============================================================
   page-index.jsx — Anasayfa
   ============================================================ */

function HomeHero() {
  return React.createElement('section', { className: 'hero' },
    React.createElement('div', { className: 'container' },
      React.createElement('div', { className: 'hero-grid' },
        // Sol: tipografi
        React.createElement('div', null,
          React.createElement('div', { className: 'eyebrow hero-eyebrow' },
            'özel eğitim · rehabilitasyon · aile danışmanlığı'
          ),
          React.createElement('h1', { className: 'hero-title' },
            'Çocuğunuzun ',
            React.createElement('span', { className: 'gradient-text' }, 'sözünü'),
            ' dinliyoruz.'
          ),
          React.createElement('p', { className: 'hero-lede' },
            'İki yaştan başlayarak her çocuğun kendi gelişim hızında ilerlemesine eşlik ediyoruz. Dil-konuşma, öğrenme güçlüğü, zihin yetersizliği ve otizm spektrum alanlarında MEB-RAM modülleri temelli, aile katılımlı bir yapıyla çalışıyoruz.'
          ),
          React.createElement('span', { className: 'hero-handwrite' },
            '— önce bir tanışma görüşmesi yapalım.'
          ),
          React.createElement('div', { className: 'hero-cta-row' },
            React.createElement('a', {
              href: 'iletisim.html#randevu',
              className: 'btn btn-accent btn-arrow'
            }, 'özel seans talep et'),
            React.createElement('a', {
              href: 'surec.html',
              className: 'btn btn-outline'
            }, 'sürecimizi inceleyin')
          )
        ),
        // Sağ: logo + arka plan gradient
        React.createElement('div', { className: 'hero-visual' },
          React.createElement('img', {
            src: 'images/mekan/dis/yaz/img-20201230-162751.jpg?v=20260508',
            alt: 'Eğitimci Merkezi binası ve bahçesi',
            className: 'hero-mekan',
            loading: 'eager'
          })
        )
      )
    )
  );
}

/* Mekan tanıtımı — "Burası bir okul değil, bir ev" */
function HomeMekanTanitim() {
  return React.createElement('section', { className: 'section home-mekan-tanitim' },
    React.createElement('div', { className: 'container' },
      React.createElement('div', { className: 'home-mekan-tanitim__head' },
        React.createElement('span', { className: 'eyebrow' }, 'mekanımız'),
        React.createElement('h2', { className: 'home-mekan-tanitim__title' },
          'Burası bir okul değil, bir ev.'
        )
      ),
      React.createElement('div', { className: 'home-mekan-tanitim__grid' },
        React.createElement('figure', { className: 'home-mekan-tanitim__cell' },
          React.createElement(Img, {
            src: 'images/mekan/dis/yaz/img-20200922-192950.jpg?v=20260508',
            alt: 'Eğitimci Merkezi villa cephesi',
            className: 'home-mekan-tanitim__img'
          })
        ),
        React.createElement('figure', { className: 'home-mekan-tanitim__cell' },
          React.createElement(Img, {
            src: 'images/mekan/bahce/genel/img-20200923-150200.jpg?v=20260508',
            alt: 'Eğitimci Merkezi bahçesi',
            className: 'home-mekan-tanitim__img'
          })
        )
      ),
      React.createElement('p', { className: 'home-mekan-tanitim__caption' },
        'Tripleks bir villada, bahçesi, hayvanları, havuzuyla.'
      )
    )
  );
}

/* Atmosfer şeridi — 5 kare, footer'dan önce */
function HomeAtmosferSerit() {
  const items = [
    {
      src: 'images/mekan/dis/sonbahar/20241120-143835-frame-5.jpg?v=20260508',
      alt: 'Eğitimci Merkezi sonbahar',
      featured: true
    },
    {
      src: 'images/mekan/havuz/aktivite/img20210821171552-2.jpg?v=20260508',
      alt: 'Yaz günü bahçe havuzunda etkinlik'
    },
    {
      src: 'images/mekan/hayvanlar/kopek/vid20210725181258-frame-1.jpg?v=20260508',
      alt: 'Bahçedeki yavru köpek'
    },
    {
      src: 'images/mekan/bahce/agaclar/img-20200923-150240.jpg?v=20260508',
      alt: 'Bahçedeki ağaçlar'
    },
    {
      src: 'images/mekan/ic-mekan/img-20210105-172457.jpg?v=20260508',
      alt: 'Merkezin iç mekanından bir köşe'
    },
  ];

  return React.createElement('section', { className: 'section section-sm bg-milk home-atmosfer-serit' },
    React.createElement('div', { className: 'container' },
      React.createElement('div', { className: 'eyebrow mb-3 home-atmosfer-serit__kicker' },
        'mekanımızdan kareler'
      ),
      React.createElement('div', { className: 'home-atmosfer-serit__grid' },
        items.map((it, i) =>
          React.createElement('div', {
            key: i,
            className: `home-atmosfer-serit__cell ${it.featured ? 'is-featured' : ''}`
          },
            React.createElement(Img, {
              src: it.src,
              alt: it.alt,
              className: 'home-atmosfer-serit__img'
            })
          )
        )
      )
    )
  );
}

/* 3 ayırt edici nokta */
function Differentiators() {
  const items = [
    {
      title: 'RAM-öğretmen-aile mutabakatı',
      text: 'Bireysel Eğitim Planı (BEP) rastgele yazılmaz. RAM modüllerinden başlar, sınıf öğretmeni gözlemleriyle zenginleşir, ailenin onayıyla uygulanır. Üç tarafın katkısı yoksa plan eksik.'
    },
    {
      title: 'Esnek yasal yol',
      text: 'RAM modülleri esastır, ama tek belirleyici değildir. Öğretmen yönlendirme notu eklenir, RAM dışı hedefler ayrı bir kayıtla işaretlenir; çocuk kendi profiline takılı kalmaz.'
    },
    {
      title: 'Eğitim üreten merkez',
      text: 'Sadece terapi yapmıyoruz. Öğretmen Akademisi sayfamızdan anaokulu ve sınıf öğretmenlerine ulaşan video, sunum ve yazılarla mesleki gelişime de katkı sağlıyoruz.'
    },
  ];

  return React.createElement('section', { className: 'section differentiators' },
    React.createElement('div', { className: 'container' },
      React.createElement('div', { className: 'section-head' },
        React.createElement('span', { className: 'eyebrow' }, 'çalışma çerçevemiz'),
        React.createElement('h2', null, 'Bizi belirleyen üç şey.'),
        React.createElement('p', null,
          'Eğitimci, basit bir terapi merkezi değildir. Çocuk için bir plan kurarken üç ayrı disiplinin sözünü birleştirir; raporun arkasındaki çocuğa bakar.'
        )
      ),
      React.createElement('div', { className: 'diff-grid' },
        items.map((it, i) =>
          React.createElement('div', { key: i, className: 'diff-item' },
            React.createElement('div', { className: 'diff-num' }, i + 1),
            React.createElement('h3', null, it.title),
            React.createElement('p', null, it.text)
          )
        )
      )
    )
  );
}

/* 4 destek alanı */
function ServiceAreas() {
  const services = [
    {
      cls: 's1',
      num: '01',
      title: 'Dil ve Konuşma',
      text: 'Artikülasyon, akıcılık (kekemelik), dil gelişimi ve anlama alanlarında bireysel destek.',
      href: 'dil-konusma.html'
    },
    {
      cls: 's2',
      num: '02',
      title: 'Öğrenme Güçlüğü',
      text: 'Okuma, yazma ve matematik güçlüklerinde yapılandırılmış müdahale ve okul işbirliği.',
      href: 'oges.html'
    },
    {
      cls: 's3',
      num: '03',
      title: 'Zihinsel Destek',
      text: 'Bilişsel destek, yaşam becerileri ve sosyal uyum alanında bireye özel program.',
      href: 'zihin-yetersizligi.html'
    },
    {
      cls: 's4',
      num: '04',
      title: 'Otizm Spektrum',
      text: 'Sosyal-iletişim, davranışsal müdahale ve aile yönlendirmeli erken destek.',
      href: 'otizm.html'
    },
  ];

  return React.createElement('section', { className: 'section' },
    React.createElement('div', { className: 'container' },
      React.createElement('div', { className: 'section-head' },
        React.createElement('span', { className: 'eyebrow' }, 'destek alanları'),
        React.createElement('h2', null, 'Hangi alanda destek arıyorsunuz?'),
        React.createElement('p', null,
          'Dört ana çalışma alanımız var. Her biri MEB-RAM modüllerine dayalı bireysel programlarla yürütülür; çocuğun ihtiyacına göre birkaç alan birlikte çalışır.'
        )
      ),
      React.createElement('div', { className: 'service-grid' },
        services.map(s =>
          React.createElement('a', { key: s.cls, href: s.href, className: `service-card ${s.cls}` },
            React.createElement('div', { className: 'service-num' }, s.num),
            React.createElement('h3', null, s.title),
            React.createElement('p', null, s.text),
            React.createElement('div', { className: 'service-arrow' }, 'detayını gör →')
          )
        )
      )
    )
  );
}

/* Süreç özeti şeridi */
function ProcessStrip() {
  const steps = [
    { n: '01', t: 'Tanışma',           p: 'Önce bir görüşme. Çocuğa baskı yok.' },
    { n: '02', t: 'Gözlem',            p: '1-2 seans, çocuğu kendi haliyle görmek.' },
    { n: '03', t: 'RAM süreci',        p: 'Rapor varsa devam, yoksa yönlendirme.' },
    { n: '04', t: 'BEP hazırlama',     p: 'Veli, öğretmen ve RAM modülleri birlikte.' },
    { n: '05', t: 'Seanslar',          p: 'Bireysel, grup ya da aile odaklı.' },
    { n: '06', t: 'Revizyon',          p: 'Düzenli değerlendirme ve plan güncellemesi.' },
  ];

  return React.createElement('section', { className: 'section bg-paper' },
    React.createElement('div', { className: 'container' },
      React.createElement('div', { className: 'section-head' },
        React.createElement('span', { className: 'eyebrow' }, 'altı adımda süreç'),
        React.createElement('h2', null, 'Sıfırdan başlamak korkutucu değil.'),
        React.createElement('p', null,
          'Çocuğunuzla yola çıkmak için bir RAM raporunuz olmasına gerek yok. Tanışma görüşmesinden başlayıp size düşeni adım adım anlatıyoruz.'
        )
      ),
      React.createElement('div', { className: 'process-strip' },
        steps.map(s =>
          React.createElement('div', { key: s.n, className: 'process-step' },
            React.createElement('div', { className: 'process-step-num' }, s.n),
            React.createElement('h4', null, s.t),
            React.createElement('p', null, s.p)
          )
        )
      ),
      React.createElement('div', { className: 'text-center mt-4' },
        React.createElement('a', { href: 'surec.html', className: 'btn btn-ghost btn-arrow' },
          'tüm süreci ayrıntılı gör'
        )
      )
    )
  );
}

/* CTA bloğu */
function CTABlock() {
  return React.createElement('section', { className: 'section' },
    React.createElement('div', { className: 'container' },
      React.createElement('div', { className: 'cta-block' },
        React.createElement('h2', null, 'Önce tanışalım.'),
        React.createElement('p', null,
          'Çocuğunuzun durumuna birlikte bakalım. Tanışma görüşmesi ücretsizdir, çocuğun seansa girmesi gerekmez. Aileyi dinlemeden plan kurmuyoruz.'
        ),
        React.createElement('div', { style: { display: 'flex', gap: '12px', justifyContent: 'center', flexWrap: 'wrap' } },
          React.createElement('a', { href: 'iletisim.html#randevu', className: 'btn btn-primary btn-arrow' },
            'tanışma görüşmesi al'
          ),
          React.createElement('a', { href: 'sss.html', className: 'btn btn-ghost', style: { color: 'rgba(255,255,255,0.95)' } },
            'önce sorularıma bakayım'
          )
        )
      )
    )
  );
}

/* Anasayfa root */
function HomePage() {
  const tips = [
    {
      icon: '📋',
      title: 'RAM raporu nedir?',
      text: 'Süreci anlamak için kısa bir rehber.',
      href: 'veli-rehberi.html#ram-nedir'
    },
    {
      icon: '🎓',
      title: 'Öğretmen Akademisi',
      text: 'Sınıf öğretmenleri için video ve yazı arşivi.',
      href: 'akademi.html'
    },
    {
      icon: '❓',
      title: 'Sıkça sorulanlar',
      text: 'Ücret, devamsızlık, fatura ve daha fazlası.',
      href: 'sss.html'
    },
    {
      icon: '🤝',
      title: 'Başka kurumdan nakil',
      text: 'Devam eden seanslarınızı bize taşıyabilirsiniz.',
      href: 'veli-rehberi.html#nakil'
    },
  ];

  return React.createElement(React.Fragment, null,
    React.createElement(Nav,             { active: 'ana' }),
    React.createElement('main',          { id: 'main' },
      React.createElement(HomeHero,         null),
      React.createElement(HomeMekanTanitim, null),
      React.createElement(Differentiators,  null),
      React.createElement(ServiceAreas,     null),
      React.createElement(ProcessStrip,     null),
      React.createElement(CTABlock,         null),
      React.createElement(TipsStrip,        { tips }),
      React.createElement(HomeAtmosferSerit, null)
    ),
    React.createElement(FooterEl, null)
  );
}

ReactDOM.render(
  React.createElement(HomePage, null),
  document.getElementById('root')
);