// Main app for Bağımlılıkla Mücadele Dijital Afiş Yarışması landing
const { useState, useEffect, useMemo, useRef } = React;

// ---------- Supabase client ----------
const _db = (() => {
  try {
    const url = window.SUPABASE_URL;
    const key = window.SUPABASE_ANON_KEY;
    if (url && key && !url.includes('PROJE_ID')) {
      return window.supabase.createClient(url, key);
    }
  } catch (e) {}
  return null; // graceful degradation if not configured yet
})();

// ---------- helpers ----------
function Icon({ name, size = 20, color = 'currentColor' }) {
  const paths = {
    'check': <path d="M5 12l5 5 9-11" stroke={color} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>,
    'check-circle': <><circle cx="12" cy="12" r="9" stroke={color} strokeWidth="2" fill="none"/><path d="M8 12l3 3 5-6" stroke={color} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></>,
    'sparkles': <path d="M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3zm6 9l.8 2.2L21 15l-2.2.8L18 18l-.8-2.2L15 15l2.2-.8L18 12z" fill={color}/>,
    'palette': <><path d="M12 22a10 10 0 1 1 0-20 8 8 0 0 1 8 8 4 4 0 0 1-4 4h-2a2 2 0 0 0-1.7 3 2 2 0 0 1-.3 3 4 4 0 0 1 0 2z" stroke={color} strokeWidth="2" fill="none"/><circle cx="7.5" cy="11" r="1" fill={color}/><circle cx="12" cy="7" r="1" fill={color}/><circle cx="16.5" cy="11" r="1" fill={color}/></>,
    'shield': <path d="M12 3l8 3v6c0 4.5-3 8.5-8 9-5-.5-8-4.5-8-9V6l8-3z" stroke={color} strokeWidth="2" fill="none" strokeLinejoin="round"/>,
    'graduation': <><path d="M2 9l10-4 10 4-10 4L2 9z" stroke={color} strokeWidth="2" fill="none" strokeLinejoin="round"/><path d="M6 11v5c2 1.5 4 2 6 2s4-.5 6-2v-5" stroke={color} strokeWidth="2" fill="none"/></>,
    'trophy': <><path d="M8 4h8v4a4 4 0 1 1-8 0V4z" stroke={color} strokeWidth="2" fill="none" strokeLinejoin="round"/><path d="M8 6H4v2a3 3 0 0 0 3 3M16 6h4v2a3 3 0 0 1-3 3M10 12v3h4v-3M8 19h8" stroke={color} strokeWidth="2" fill="none" strokeLinecap="round"/></>,
    'chevron-down': <path d="M6 9l6 6 6-6" stroke={color} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>,
    'arrow-right': <path d="M5 12h14m-5-5l5 5-5 5" stroke={color} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>,
    'link': <path d="M10 14a4 4 0 0 0 5.6 0l3-3a4 4 0 0 0-5.6-5.6l-1 1M14 10a4 4 0 0 0-5.6 0l-3 3a4 4 0 0 0 5.6 5.6l1-1" stroke={color} strokeWidth="2" fill="none" strokeLinecap="round"/>,
    'people': <><circle cx="9" cy="8" r="3" stroke={color} strokeWidth="2" fill="none"/><circle cx="17" cy="9" r="2.5" stroke={color} strokeWidth="2" fill="none"/><path d="M3 19c0-3.5 2.5-6 6-6s6 2.5 6 6M14 19c.3-2.5 2-4.5 5-4.5h2" stroke={color} strokeWidth="2" fill="none" strokeLinecap="round"/></>,
    'whatsapp': <path d="M17.5 14.4c-.3-.1-1.7-.8-2-1-.2-.1-.4-.1-.6.1-.2.2-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.2-1.2-.4-2.3-1.4-.8-.8-1.4-1.7-1.5-2-.2-.3 0-.4.1-.6l.4-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5l-.9-2.2c-.2-.6-.5-.5-.7-.5h-.5c-.2 0-.5.1-.7.3-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3 4.9 4.2.7.3 1.2.4 1.6.5.7.2 1.3.2 1.8.1.5-.1 1.7-.7 1.9-1.3.2-.7.2-1.2.2-1.3-.1-.1-.3-.2-.6-.3zM12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2z" fill={color}/>,
    'video': <><rect x="2" y="7" width="15" height="10" rx="2" stroke={color} strokeWidth="2" fill="none"/><path d="M17 10l5-3v10l-5-3" stroke={color} strokeWidth="2" fill="none" strokeLinejoin="round"/></>,
    'file': <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke={color} strokeWidth="2" fill="none"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke={color} strokeWidth="2" fill="none" strokeLinecap="round"/></>,
    'download': <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" stroke={color} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>,
    'gallery': <><rect x="3" y="3" width="18" height="18" rx="2" stroke={color} strokeWidth="2" fill="none"/><circle cx="8.5" cy="8.5" r="1.5" fill={color}/><path d="M21 15l-5-5L5 21" stroke={color} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      {paths[name]}
    </svg>
  );
}

// ---------- countdown ----------
function useCountdown(targetDate) {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, targetDate - now);
  const d = Math.floor(diff / (1000*60*60*24));
  const h = Math.floor(diff / (1000*60*60)) % 24;
  const m = Math.floor(diff / (1000*60)) % 60;
  const s = Math.floor(diff / 1000) % 60;
  return { d, h, m, s };
}

// ---------- nav ----------
function Nav({ onApply }) {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <div className="nav-brands">
          <img src="assets/logomem.svg" alt="Bartın İl Millî Eğitim Müdürlüğü" className="nav-mem-logo" />
          <div className="divider"></div>
          <img src="assets/logo-canva.svg" alt="Canva" className="nav-canva-logo" />
        </div>
        <div className="nav-links">
          <a href="#yarisma" className="nav-link">Yarışma</a>
          <a href="#takvim" className="nav-link">Takvim</a>
          <a href="#kriterler" className="nav-link">Kriterler</a>
          <a href="#oduller" className="nav-link">Ödüller</a>
          <a href="#sartlar" className="nav-link">Katılım Şartları</a>
          <a href="#sss" className="nav-link">Sıkça Sorulan Sorular</a>
        </div>
        <button className="btn btn-primary" onClick={onApply}>Başvur</button>
      </div>
    </nav>
  );
}

// ---------- hero ----------
function Hero({ onApply, showCountdown, heroLayout }) {
  const target = useMemo(() => new Date('2026-06-12T23:59:00+03:00'), []);
  const cd = useCountdown(target);
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 30000);
    return () => clearInterval(id);
  }, []);
  return (
    <header className="hero">
      <div className="container hero-grid">
        <div>
          <h1>
            Tasarımınla<br/>
            <span className="accent">bağ kur.</span>
          </h1>
          <p className="hero-sub">
            Bartın'ın ortaokul ve lise öğrencileri için bağımlılıkla mücadele temalı dijital afiş yarışması. Ücretsiz Canva eğitimi, jürili değerlendirme ve Canva'dan ödüller.
          </p>
          <div className="hero-cta">
            <button className="btn btn-primary btn-xl" onClick={onApply}>
              Başvuruya Başla
              <Icon name="arrow-right" size={18}/>
            </button>
            <a href="#yarisma" className="btn btn-secondary btn-xl">Yarışmayı keşfet</a>
          </div>
          {showCountdown && (
            <>
              <div className="countdown" aria-label="Son eser yükleme tarihine kalan süre">
                <div className="countdown-item"><div className="countdown-num">{String(cd.d).padStart(2,'0')}</div><div className="countdown-label">Gün</div></div>
                <div className="countdown-item"><div className="countdown-num">{String(cd.h).padStart(2,'0')}</div><div className="countdown-label">Saat</div></div>
                <div className="countdown-item"><div className="countdown-num">{String(cd.m).padStart(2,'0')}</div><div className="countdown-label">Dakika</div></div>
                <div className="countdown-item"><div className="countdown-num">{String(cd.s).padStart(2,'0')}</div><div className="countdown-label">Saniye</div></div>
              </div>
              <div className="countdown-caption">Son eser yükleme tarihi: <strong style={{color:'var(--colorGrey09)'}}>12 Haziran 2026 · 23:59</strong></div>
              <div style={{marginTop:20, background:'#fff', borderRadius:16, padding:'24px', boxShadow:'0 1px 8px rgba(0,0,0,.08)'}}>
                <div style={{width:40, height:40, borderRadius:10, background:'#ede9fe', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:14}}>
                  <Icon name="video" size={20} color="#7c3aed"/>
                </div>
                <div style={{fontWeight:700, fontSize:16, color:'#111', marginBottom:8}}>Çevrim İçi Tasarım Eğitimi</div>
                <p style={{fontSize:14, color:'#444', lineHeight:1.6, margin:0}}>Canva Elçisi öğretmenin eğitimine katılabilirsin. Eğitim kaydı daha sonra sitede yayınlanacak.</p>
                <div style={{marginTop:12, fontSize:14, color:'#333', fontWeight:600}}>20.05.2026 · 20:00 · Microsoft Teams</div>
                <p style={{fontSize:13, color:'#888', marginTop:8, marginBottom:8}}>Eğitime katılım zorunlu değildir, ancak yarışma sürecini daha nitelikli yönetmeni sağlar.</p>
                <div style={{marginBottom:16}}></div>
                {now >= TRAINING_ENDED ? (
                  <a
                    href="https://www.youtube.com/watch?v=4eF-cBYckQQ"
                    target="_blank"
                    rel="noopener"
                    className="btn btn-primary"
                    style={{display:'flex', alignItems:'center', justifyContent:'center', gap:8, width:'100%'}}
                  >
                    <Icon name="video" size={16}/> Eğitim kaydını izle
                  </a>
                ) : now >= TRAINING_ACTIVE ? (
                  <a
                    href="https://teams.microsoft.com/meet/38902138696122?p=nlM4q19zu8gKggTOng"
                    target="_blank"
                    rel="noopener"
                    className="btn btn-primary"
                    style={{display:'flex', alignItems:'center', justifyContent:'center', gap:8, width:'100%'}}
                  >
                    <Icon name="video" size={16}/> Eğitime Katıl
                  </a>
                ) : (
                  <button disabled className="btn btn-secondary" style={{display:'flex', alignItems:'center', justifyContent:'center', gap:8, width:'100%', opacity:0.55, cursor:'not-allowed'}}>
                    <Icon name="video" size={16}/> Eğitim 20.05.2026 · 20:00'de başlıyor
                  </button>
                )}
              </div>
            </>
          )}
        </div>
        <div className="hero-visual" aria-hidden="true">
          <div className="hero-emoji p0"><img src="assets/emojipng/2.png"/></div>
          <div className="hero-emoji p1"><img src="assets/emojipng/1.png"/></div>
          <div className="hero-emoji p2"><img src="assets/emojipng/3.png"/></div>
        </div>
      </div>
    </header>
  );
}

// ---------- about ----------
function About() {
  return (
    <section id="yarisma" className="section-alt">
      <div className="container">
        <div className="section-head">
          <span className="section-eyebrow">Yarışma Hakkında</span>
          <h2 className="section-title">Bağımlılığa karşı, afiş tasarımınla farkındalık oluştur!</h2>
          <p className="section-lead">
            Bartın İl Millî Eğitim Müdürlüğü tarafından "Güçlü Bağlar Sağlıklı Yarınlar" projesi kapsamında, Canva iş birliğiyle düzenlenen dijital afiş tasarım yarışması kapsamında, katılımcı öğrencilerin dijital tasarım becerilerini geliştirmek ve bağımlılıkla mücadele konusunda farkındalık oluşturmak hedeflenmektedir.
          </p>
        </div>
        <div className="about-grid">
          <div className="about-card">
            <div className="about-icon"><Icon name="palette" size={24}/></div>
            <h3>Yaratıcılığını dijitale taşı!</h3>
            <p>Canva'nın gelişmiş sürümüne EBA şifrenle ücretsiz erişim sağla! Yarışma öncesinde Canva Elçisi öğretmenden çevrim içi eğitim fırsatını yakala. Hayal gücünü harekete geçir, tasarımını oluştur! Haydi, şimdi Canva'ya giriş yap ve kendi dijital afişini tasarlamaya başla!</p>
          </div>
          <div className="about-card">
            <div className="about-icon"><Icon name="shield" size={24}/></div>
            <h3>Önemli bir mesaj ver!</h3>
            <p>Bağımlılığa karşı güçlü bir mesaj ver, sağlıklı yaşamı destekle, farkındalık yaratan bir tasarım hazırla! Sporu, sanatı, dostluğu ve güçlü sosyal bağları afişine taşı! Mesajı sen oluştur, görseli sen tasarla — tüm fikirlerini 50×70 cm dijital afişinde bir araya getir!</p>
          </div>
          <div className="about-card">
            <div className="about-icon"><Icon name="graduation" size={24}/></div>
            <h3>Ortaokul ve lise düzeyi geniş katılım</h3>
            <p>Bartın ili genelindeki MEB'e bağlı resmi ve özel okullarda öğrenim gören tüm ortaokul ve lise öğrencileri katılabilir. Katılım ücretsizdir, başvuru bireyseldir.</p>
          </div>
          <div className="about-card">
            <div className="about-icon"><Icon name="trophy" size={24}/></div>
            <h3>Ödül, sergi ve görünürlük</h3>
            <p>İlk 100 eser dijital galeride, ilk 20 eser ödül töreninde sergileniyor. Dereceye giren ortaokul ve lise kategorisinde ayrı ayrı ilk 3 eser Canva tarafından ödüllendiriliyor.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- timeline ----------
function Timeline() {
  const today = new Date();
  const rows = [
    {
      date: '11 Mayıs 2026',
      start: new Date('2026-05-11'), end: new Date('2026-05-11'),
      title: 'Yarışmanın okullara duyurulması',
      desc: 'İl ve ilçe Millî Eğitim Müdürlükleri yarışma duyurusunu okullara iletir.',
    },
    {
      date: '11 Mayıs – 12 Haziran 2026',
      start: new Date('2026-05-11'), end: new Date('2026-06-12'),
      title: 'Liste oluşturma ve belgelerin toplanması',
      desc: 'Okullar; eğitim başvurusu yapan öğrencileri listeler, KVKK/veli izin belgelerini toplar. Öğrenciler başvuruların son günü olan 12 Haziran tarihine kadar evraklarını idareye teslim etmelidir. Evraklarını teslim etmeyenler hak sahibi olamaz.',
    },
    {
      date: '20 – 21 Mayıs 2026',
      start: new Date('2026-05-20'), end: new Date('2026-05-21'),
      title: 'Çevrim içi Canva tasarım eğitimi, elektronik başvuru ve yarışma süreci bilgilendirmesi',
      desc: 'Canva Elçisi öğretmen tarafından ebailecanva.com sitesinde eğitim öncesi ilan edilecek linkten verilir; kaydı daha sonra siteden izlenebilir.',
    },
    {
      date: '22 Mayıs – 12 Haziran 2026',
      start: new Date('2026-05-22'), end: new Date('2026-06-12'),
      title: 'Tasarımların yüklenmesi, başvuruların tamamlanması',
      desc: 'Öğrenciler ebailecanva.com\'daki başvuru ekranına kişisel bilgilerini ve EBA şifresiyle Canva\'da hazırladıkları tasarımın görüntüleme bağlantısını ekler, başvurularını gönderir.',
    },
    {
      date: '15 – 18 Haziran 2026',
      start: new Date('2026-06-15'), end: new Date('2026-06-18'),
      title: 'Ön değerlendirme',
      desc: 'Canva Elçisi öğretmenler tasarım sahiplerinin kimlik bilgileri görünmeyecek şekilde tasarımları puanlar. Ortaokul ve lisede toplam 100 eser üst tura çıkar.',
    },
    {
      date: '19 Haziran 2026',
      start: new Date('2026-06-19'), end: new Date('2026-06-19'),
      title: 'Final değerlendirmesi',
      desc: 'Bartın İl MEM Ar-Ge birimi yarışma jürisi ve komitesi kazananları belirler.',
    },
    {
      date: '22 – 26 Haziran 2026',
      start: new Date('2026-06-22'), end: new Date('2026-06-26'),
      title: 'Ödül töreni ve sergi',
      desc: 'İlk 100 eser dijital galeride, ilk 20 eser ödül töreninde sergilenir; ortaokul ve lise kategorisinde ilk 3 eser Canva tarafından ayrı ayrı ödüllendirilir.',
    },
  ];
  return (
    <section id="takvim">
      <div className="container">
        <div className="section-head">
          <span className="section-eyebrow">Yarışma Takvimi</span>
          <h2 className="section-title">Tarihleri ajandana al.</h2>
          <p className="section-lead">Eğitim, başvuru ve ödül süreci yedi adımda tamamlanıyor. Dijital afişini yüklemek için son tarih: <strong>12 Haziran 2026, 23:59</strong>.</p>
        </div>
        <div className="timeline">
          {rows.map((r, i) => {
            const status = today > r.end ? 'done' : (today >= r.start && today <= r.end ? 'now' : 'upcoming');
            return (
              <div key={i} className={`tl-row ${status === 'done' ? 'done' : ''}`}>
                <div className="tl-date">{r.date}<small>Faaliyet {String(i+1).padStart(2,'0')}</small></div>
                <div className="tl-body">
                  <h4>
                    {r.title}
                    {status === 'now' && <span className="tl-status now">Devam ediyor</span>}
                    {status === 'done' && <span className="tl-status">Tamamlandı</span>}
                  </h4>
                  <p>{r.desc}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ---------- criteria + jury ----------
function Criteria() {
  const items = [
    { name: 'Konuya uygunluk', desc: 'Bağımlılıkla mücadele temasını kullan', points: 20 },
    { name: 'Yaratıcılık', desc: 'Özgün fikir ve görsel yorum', points: 20 },
    { name: 'Görsel düzen ve tasarım', desc: 'Kompozisyon, hiyerarşi, denge', points: 20 },
    { name: 'Mesajın açıklığı', desc: 'Anlaşılır ve etkili ifade', points: 20 },
    { name: 'Dijital araç kullanımı', desc: 'Canva\'nın yetkin kullanımı', points: 20 },
  ];
  const jury = [
    { initials: 'GS', role: 'Görsel Sanatlar Öğretmeni (2 kişi)' },
    { initials: 'BT', role: 'Bilişim Teknolojileri alanında akademisyen' },
    { initials: 'BÖ', role: 'Bilişim Teknolojileri Öğretmeni' },
    { initials: 'TÖ', role: 'Türkçe Öğretmeni' },
    { initials: 'C',  role: 'Canva Elçisi Öğretmen' },
    { initials: 'BM', role: 'Bağımlılıkla Mücadele Projesi Koordinatörü' },
  ];
  return (
    <section id="kriterler" className="section-alt">
      <div className="container">
        <div className="section-head">
          <span className="section-eyebrow">Değerlendirme</span>
          <h2 className="section-title">Beş kriter, yüz puan.</h2>
          <p className="section-lead">Üç aşamalı bir değerlendirme: Önce Canva Elçileri kimlik bilgileri görünmeksizin ön elemeyi yapar; ardından jüri ortaokul ve lise kategorisinde toplam 20 eser belirler. Son olarak Bartın İl MEM Ar-Ge komisyonu finalde kazananları ortaokul ve lise kategorisinde ayrı ayrı belirler.</p>
        </div>
        <div className="split-grid">
          <div className="criteria-card">
            {items.map((it, i) => (
              <div className="criteria-row" key={i}>
                <div>
                  <div className="name">{it.name}</div>
                  <div className="desc">{it.desc}</div>
                </div>
                <div className="points">{it.points}</div>
              </div>
            ))}
            <div className="criteria-row total">
              <div>
                <div className="name">Toplam</div>
                <div className="desc">Beş kriterin toplamı</div>
              </div>
              <div className="points">100</div>
            </div>
          </div>
          <div className="jury-card">
            <h3>Jüri</h3>
            <div className="jury-list">
              {jury.map((j, i) => (
                <div className="jury-item" key={i}>
                  <div className="avatar">{j.initials}</div>
                  <div className="role">{j.role}</div>
                </div>
              ))}
            </div>
            <h3 style={{marginTop: 24}}>Yarışma Komitesi</h3>
            <div className="jury-list">
              <div className="jury-item"><div className="avatar">CU</div><div className="role"><strong style={{color:'var(--colorGrey09)'}}>Canan Uçar</strong><br/>Strateji Geliştirme Ar-Ge Şube Müdürü</div></div>
              <div className="jury-item"><div className="avatar">PS</div><div className="role"><strong style={{color:'var(--colorGrey09)'}}>Pınar Sayar</strong><br/>Canva Elçisi</div></div>
              <div className="jury-item"><div className="avatar">BD</div><div className="role"><strong style={{color:'var(--colorGrey09)'}}>Betül Durmuş</strong><br/>Ar-Ge Birimi · Bağımlılıkla Mücadele Koordinatörü</div></div>
              <div className="jury-item"><div className="avatar">HA</div><div className="role"><strong style={{color:'var(--colorGrey09)'}}>Hatice Ata</strong><br/>Özel Büro · Koordinatör Yardımcısı</div></div>
            </div>
            <div style={{marginTop: 24, padding: 16, borderRadius: 12, background: 'var(--accentSoft)', color: 'var(--accentInk)', fontSize: 13, lineHeight: 1.5}}>
              <strong>Not:</strong> Ön değerlendirmede Canva Elçileri yalnızca tasarım üzerinden puan verir. Eserlerde okul, isim, logo veya imza bulunamaz.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- prizes ----------
function Prizes() {
  return (
    <section id="oduller">
      <div className="container">
        <div className="section-head">
          <span className="section-eyebrow">Ödüller</span>
          <h2 className="section-title">Sahnenin önünde olanlar.</h2>
          <p className="section-lead">Tüm finalistler dijital ve fiziksel platformlarda görünür olur. Ortaokul ve lise kademelerinde ayrı ayrı; ilk üç öğrenci Canva tarafından ödüllendirilir.</p>
        </div>
        <div className="prizes-grid">
          <div className="prize gold">
            <div className="num">1.</div>
            <h3>Tablet</h3>
            <p className="desc">Birinci olan öğrencilere Canva tarafından tablet hediye edilir. Hem ortaokul hem lise kademesinde ayrı ayrı.</p>
          </div>
          <div className="prize">
            <div className="num">2.</div>
            <h3>Akıllı saat</h3>
            <p className="desc">İkinci olan öğrencilere akıllı saat. Hem ortaokul hem lise kademesinde ayrı ayrı.</p>
          </div>
          <div className="prize">
            <div className="num">3.</div>
            <h3>Kulaklık</h3>
            <p className="desc">Üçüncü olan öğrencilere kulaklık. Hem ortaokul hem lise kademesinde ayrı ayrı.</p>
          </div>
        </div>
        <p style={{textAlign:'center', marginTop:24, fontSize:14, color:'var(--colorGrey05)'}}>
          Tüm ödüller <strong style={{color:'var(--colorGrey07)'}}>22–26 Haziran 2026 Ödül Töreni</strong>'nde takdim edilecektir.
        </p>
      </div>
    </section>
  );
}

// ---------- rules ----------
function Rules() {
  const rules = [
    'Yarışmaya Bartın ilindeki resmi ve özel ortaokul ve lise öğrencileri katılabilir.',
    'Katılım ücretsizdir ve bireyseldir.',
    'Her öğrenci yalnızca bir eserle başvurabilir.',
    'Tasarımlar yalnızca Canva platformunda hazırlanmalıdır.',
    'EBA şifresiyle Canva\'nın gelişmiş sürümüne ücretsiz erişim sağlanır. EBA üzerinden Canva\'ya giriş yapmayan öğrencilerin başvurusu geçersiz sayılır.',
    'Afiş ölçüsü 50×70 cm olarak düzenlenir.',
    'Tasarımlar özgün olmalı, daha önce başka yarışmada kullanılmamalıdır.',
    'Kullanılan görseller telif haklarına uygun olmalıdır.',
    'Eserde öğrenci ismi, okul adı, logo veya imza bulunamaz.',
    'Siyasi, ticari, reklam içerikli veya genel ahlaka aykırı eserler değerlendirme dışıdır.',
    'Veli izin belgesi/KVKK okul idaresine başvuruların geçerli olması için mutlaka teslim edilmelidir.',
    'Son yükleme tarihinden sonra gelen eserler değerlendirilmez.',
  ];
  return (
    <section id="sartlar" className="section-alt">
      <div className="container">
        <div className="section-head">
          <span className="section-eyebrow">Katılım Şartları</span>
          <h2 className="section-title">Başvurmadan önce oku.</h2>
          <p className="section-lead">Başvuru yapan tüm katılımcılar <a href="assets/sartname.docx" download style={{color:'var(--accent)'}}>bu şartnamede</a> yer alan hükümleri kabul etmiş sayılır.</p>
        </div>
        <div className="rules-grid">
          {rules.map((r, i) => (
            <div className="rule" key={i}>
              <div className="check"><Icon name="check" size={14}/></div>
              <p>{r}</p>
            </div>
          ))}
        </div>

        {/* Belgeler */}
        <div style={{marginTop: 40}}>
          <h3 style={{fontSize: 18, fontWeight: 700, marginBottom: 16, color: 'var(--colorGrey09)'}}>Belgeler ve Bağlantılar</h3>
          <div style={{display: 'flex', flexWrap: 'wrap', gap: 12}}>
            <a href="assets/sartname.docx" download className="btn btn-secondary" style={{display:'flex', alignItems:'center', gap:8, fontSize:14}}>
              <Icon name="download" size={16}/> Yarışma Şartnamesi
            </a>
            <a href="assets/veli-izin.docx" download className="btn btn-secondary" style={{display:'flex', alignItems:'center', gap:8, fontSize:14}}>
              <Icon name="file" size={16}/> Veli İzin Belgesi
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- community & education ----------
const TRAINING_ACTIVE = new Date('2026-05-20T19:40:00+03:00');
const TRAINING_ENDED  = new Date('2026-05-20T21:00:00+03:00');

function CommunityEdu() {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 30000);
    return () => clearInterval(id);
  }, []);
  const trainingActive = now >= TRAINING_ACTIVE;
  return (
    <section id="topluluk" style={{background: 'var(--colorGrey01)'}}>
      <div className="container">
        <div className="section-head">
          <span className="section-eyebrow">Topluluk ve Eğitim</span>
          <h2 className="section-title">Birlikte daha güçlü.</h2>
          <p className="section-lead">Yarışma sürecini yakından takip etmek, sorularını sormak ve eğitime katılmak için aşağıdaki bağlantıları kullan.</p>
        </div>
        <div className="about-grid">
          <div className="about-card" style={{gridColumn: 'span 1'}}>
            <div className="about-icon" style={{background:'#dcfce7', color:'#16a34a'}}>
              <Icon name="whatsapp" size={24}/>
            </div>
            <h3>WhatsApp Topluluğu</h3>
            <p>Yarışma sürecini nitelikli takip etmek ve sorularını iletmek için topluluğa katıl. Topluluğa katıldığında kişisel bilgilerin diğer üyeler tarafından görüntülenmez.</p>
            <p style={{fontSize:13, color:'var(--colorGrey05)', marginTop:8}}>Katılım zorunlu değildir.</p>
            <a
              href="https://chat.whatsapp.com/FhuDnMQh1wa6gnQB5rsPKm"
              target="_blank"
              rel="noopener"
              className="btn btn-secondary"
              style={{marginTop:16, display:'inline-flex', alignItems:'center', gap:8}}
            >
              <Icon name="whatsapp" size={16}/> Topluluğa Katıl
            </a>
          </div>
          <div className="about-card" style={{gridColumn: 'span 1'}}>
            <div className="about-icon" style={{background:'#ede9fe', color:'#7c3aed'}}>
              <Icon name="video" size={24}/>
            </div>
            <h3>Çevrim İçi Tasarım Eğitimi</h3>
            <p>Eğitim tamamlandı. Kaydı aşağıdan izleyebilirsin.</p>
            <div style={{marginTop:12, fontSize:14, color:'var(--colorGrey07)', lineHeight:1.8}}>
              <strong>20.05.2026</strong> · <strong>20:00</strong> · <strong>Microsoft Teams</strong>
            </div>
            <p style={{fontSize:13, color:'var(--colorGrey05)', marginTop:8}}>Eğitime katılım zorunlu değildir, ancak yarışma sürecini daha nitelikli yönetmeni sağlar.</p>
            {now >= TRAINING_ENDED ? (
              <a
                href="https://www.youtube.com/watch?v=4eF-cBYckQQ"
                target="_blank"
                rel="noopener"
                className="btn btn-primary"
                style={{marginTop:16, display:'inline-flex', alignItems:'center', gap:8}}
              >
                <Icon name="video" size={16}/> Eğitim kaydını izle
              </a>
            ) : trainingActive ? (
              <a
                href="https://teams.microsoft.com/meet/38902138696122?p=nlM4q19zu8gKggTOng"
                target="_blank"
                rel="noopener"
                className="btn btn-primary"
                style={{marginTop:16, display:'inline-flex', alignItems:'center', gap:8}}
              >
                <Icon name="video" size={16}/> Eğitime Katıl
              </a>
            ) : (
              <button disabled className="btn btn-secondary" style={{marginTop:16, display:'inline-flex', alignItems:'center', gap:8, opacity:0.55, cursor:'not-allowed'}}>
                <Icon name="video" size={16}/> Eğitim 20.05.2026 · 20:00'de başlıyor
              </button>
            )}
          </div>
          <div className="about-card" style={{gridColumn: 'span 1'}}>
            <div className="about-icon" style={{background:'#fef3c7', color:'#d97706'}}>
              <Icon name="gallery" size={24}/>
            </div>
            <h3>Dijital Galeri</h3>
            <p>İlk 100 finalist eserin sergileneceği dijital galeri, değerlendirme sonrası yayına alınacak. Ödül töreni ve sergi ile ilgili duyurular bu sayfada ve resmi sosyal medya hesaplarımızda paylaşılacak.</p>
            <p style={{fontSize:13, color:'var(--colorGrey05)', marginTop:8}}>Ödül töreni: 22–26 Haziran 2026</p>
            <a
              href="#"
              className="btn btn-secondary"
              style={{marginTop:16, display:'inline-flex', alignItems:'center', gap:8, opacity:0.6, cursor:'not-allowed'}}
              onClick={e => e.preventDefault()}
            >
              <Icon name="gallery" size={16}/> Galeri Yakında
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- FAQ ----------
function FAQ() {
  const items = [
    {
      q: 'Yarışmaya kimler katılabilir?',
      a: 'Bartın ili genelindeki MEB\'e bağlı resmi ve özel eğitim kurumlarında öğrenim gören tüm ortaokul ve lise öğrencileri katılabilir.',
    },
    {
      q: 'Başvuru ücretli mi?',
      a: 'Hayır. Katılım tamamen ücretsizdir.',
    },
    {
      q: 'Tasarımı nerede hazırlamalıyım?',
      a: 'Tasarımlar yalnızca Canva platformunda hazırlanmalıdır. EBA şifrenle Canva\'nın gelişmiş sürümüne ücretsiz erişim sağlayarak hazırlayabilirsin.',
    },
    {
      q: 'Kaç eserle başvurabilirim?',
      a: 'Her öğrenci yalnızca bir eserle başvurabilir. Birden fazla yüklemede son başvuru geçerli sayılır.',
    },
    {
      q: 'Afiş ölçüsü ne olmalı?',
      a: 'Afiş 50×70 cm olarak düzenlenmelidir. Canva\'da afiş şablon içeriğini seçtikten sonra yeniden boyutlandırma sekmesinden boyutlandırabilirsin.',
    },
    {
      q: 'Eserimi nasıl yüklerim?',
      a: 'Canva\'da tasarımını tamamla, ardından sağ üst panelden "Paylaş > Bağlantısı olan herkes görüntüleyebilir" izniyle bir görüntüleme bağlantısı oluştur ve başvuru formunun ilgili alanına yapıştır.',
    },
    {
      q: 'KVKK/Veli izin belgeleri nereye teslim edilir?',
      a: 'Doldurulan KVKK/veli izin belgeleri okul idaresine teslim edilir. Okul bu belgeleri muhafaza eder.',
    },
    {
      q: 'Sonuçlar nasıl duyurulur?',
      a: 'Sonuçlar yarışma takviminde belirtilen tarihte ebailecanva.com üzerinden ve Bartın MEM Ar-Ge biriminin resmi hesaplarından duyurulur; kazanan öğrenciler okullara resmi yazı ile iletilir.',
    },
    {
      q: 'Afiş tasarım eğitimine nasıl katılacağım?',
      a: '20–21 Mayıs tarihlerinde ebailecanva.com sitesinde anasayfada yer alan bağlantıdan eğitime katılım sağlanabilecektir.',
    },
    {
      q: 'Afiş tasarım eğitimine katılmak zorunlu mu?',
      a: 'Hayır, zorunlu değildir. Ücretsiz yapılacak bu eğitime katılım; yarışma sürecinde nitelikli eser oluşturmak, başvuru adımlarını eksiksiz tamamlamak ve aklına takılan soruları sormak adına önemlidir.',
    },
    {
      q: 'Afiş tasarım eğitimine katılamadım, ne yapacağım?',
      a: 'ebailecanva.com sitesine yüklenecek eğitim kayıt bağlantısından izleyebilirsin.',
    },
    {
      q: 'Dijital afiş tasarım yarışması topluluğuna katılmam şart mı?',
      a: 'Hayır, zorunlu değildir. Topluluk; yarışma sürecini nitelikli takip etmek ve sorularını iletmek için oluşturulmuştur. Topluluğa katılım sağladığında kişisel bilgilerin topluluk üyeleri tarafından görüntülenmez.',
    },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="sss">
      <div className="container">
        <div className="section-head">
          <span className="section-eyebrow">Sıkça Sorulan Sorular</span>
          <h2 className="section-title">Aklındaki ilk sorulara hızlı cevaplar.</h2>
        </div>
        <div className="faq">
          {items.map((it, i) => (
            <div className="faq-item" key={i} data-open={open === i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="chev"><Icon name="chevron-down" size={20}/></span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- veli izin popup ----------
function VeliIzinPopup({ onConfirm, onClose }) {
  const [answer, setAnswer] = useState(null); // null | 'yes' | 'no'
  return (
    <div style={{
      position:'fixed', inset:0, background:'rgba(0,0,0,.5)',
      display:'flex', alignItems:'center', justifyContent:'center', zIndex:500
    }}>
      <div style={{
        background:'#fff', borderRadius:20, padding:36, maxWidth:440,
        width:'calc(100% - 32px)', boxShadow:'0 16px 64px rgba(0,0,0,.2)', textAlign:'center'
      }}>
        {answer === null && (
          <>
            <div style={{fontSize:40, marginBottom:12}}>📋</div>
            <h3 style={{fontSize:20, fontWeight:700, marginBottom:10, color:'var(--colorGrey09)'}}>
              Veli İzin Belgesi
            </h3>
            <p style={{fontSize:15, color:'#555', lineHeight:1.6, marginBottom:28}}>
              İmzalı veli izin belgesini okul idaresine teslim ettiniz mi?
            </p>
            <div style={{display:'flex', gap:12, justifyContent:'center'}}>
              <button
                className="btn btn-primary"
                onClick={() => { setAnswer('yes'); onConfirm(); }}
                style={{minWidth:120}}
              >
                Evet, teslim ettim
              </button>
              <button
                className="btn btn-secondary"
                onClick={() => setAnswer('no')}
                style={{minWidth:120}}
              >
                Hayır, henüz teslim etmedim
              </button>
            </div>
          </>
        )}
        {answer === 'no' && (
          <>
            <div style={{fontSize:40, marginBottom:12}}>⚠️</div>
            <h3 style={{fontSize:20, fontWeight:700, marginBottom:10, color:'var(--colorGrey09)'}}>
              Başvurun geçersiz sayılabilir!
            </h3>
            <p style={{fontSize:15, color:'#555', lineHeight:1.6, marginBottom:24}}>
              Başvurunun geçerli olması için imzalı veli izin belgesini <strong>en kısa sürede okul idaresine teslim etmen</strong> gerekiyor.
            </p>
            <a
              href="assets/veli-izin.docx"
              download
              className="btn btn-primary"
              style={{display:'inline-flex', alignItems:'center', gap:8, marginBottom:12}}
            >
              <Icon name="download" size={16}/> Veli İzin Belgesini İndir
            </a>
            <br/>
            <button
              className="btn btn-secondary"
              onClick={onClose}
              style={{marginTop:8}}
            >
              Geri dön
            </button>
          </>
        )}
      </div>
    </div>
  );
}

// ---------- form ----------
function ApplyForm({ formRef }) {
  const [data, setData] = useState({
    fullName: '', school: '', grade: '', city: 'Bartın', district: '',
    email: '', parentName: '', parentPhone: '',
    canvaUrl: '', workTitle: '',
    kvkk: false, parentConsent: false, rules: false,
  });
  const [errors, setErrors] = useState({});
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState(null);
  const [showPopup, setShowPopup] = useState(false);
  const [showVideoPopup, setShowVideoPopup] = useState(false);

  function set(k, v) { setData(d => ({ ...d, [k]: v })); }

  function validate() {
    const e = {};
    if (!data.fullName.trim()) e.fullName = 'Ad ve soyad zorunlu';
    if (!data.school.trim()) e.school = 'Okul adı zorunlu';
    if (!data.grade) e.grade = 'Sınıf seçin';
    if (!data.district.trim()) e.district = 'İlçe zorunlu';
    if (!data.email.trim() || !/^[^@]+@[^@]+\.[^@]+$/.test(data.email)) e.email = 'Geçerli bir e-posta girin';
    if (!data.parentName.trim()) e.parentName = 'Veli adı zorunlu';
    if (!data.parentPhone.trim()) e.parentPhone = 'Veli telefonu zorunlu';
    if (!data.canvaUrl.trim() || !/^https?:\/\/.*(canva\.com|canva\.link)/.test(data.canvaUrl)) e.canvaUrl = 'Geçerli bir Canva görüntüleme bağlantısı girin';
    if (!data.workTitle.trim()) e.workTitle = 'Eser adı zorunlu';
    if (!data.kvkk) e.kvkk = 'KVKK onayı gerekli';
    if (!data.parentConsent) e.parentConsent = 'Veli izni gerekli';
    if (!data.rules) e.rules = 'Yönerge onayı gerekli';
    setErrors(e);
    return Object.keys(e).length === 0;
  }

  function onSubmit(ev) {
    ev.preventDefault();
    if (validate()) setShowPopup(true);
  }

  async function handleConfirm() {
    setShowPopup(false);
    setSubmitting(true);
    setSubmitError(null);

    const payload = {
      full_name:    data.fullName,
      school:       data.school,
      grade:        data.grade,
      district:     data.district,
      email:        data.email,
      parent_name:  data.parentName,
      parent_phone: data.parentPhone,
      work_title:   data.workTitle,
      canva_url:    data.canvaUrl,
      parent_consent: data.parentConsent,
      kvkk:         data.kvkk,
      rules:        data.rules,
    };

    if (_db) {
      const { error } = await _db.from('applications').insert(payload);
      if (error) {
        setSubmitting(false);
        setSubmitError('Başvurun kaydedilemedi: ' + error.message);
        return;
      }
    }

    setSubmitting(false);
    setSubmitted(true);
  }

  if (submitting) {
    return (
      <section id="basvuru" className="form-section" ref={formRef}>
        <div className="container">
          <div className="form-card" style={{textAlign:'center', padding:60}}>
            <div style={{fontSize:40, marginBottom:16}}>⏳</div>
            <p style={{fontSize:16, color:'var(--colorGrey06)'}}>Başvurun kaydediliyor…</p>
          </div>
        </div>
      </section>
    );
  }

  if (submitted) {
    return (
      <section id="basvuru" className="form-section" ref={formRef}>
        <div className="container">
          <div className="form-card">
            <div className="form-success">
              <div className="badge"><Icon name="check" size={36}/></div>
              <h3>Başvurun alındı.</h3>
              <p>Teşekkürler {data.fullName.split(' ')[0]}! Eserin Canva Elçisi öğretmenlerimize iletildi. KVKK/veli izin belgelerini okul idarene teslim etmeyi unutma. Sonuçlar 19 Haziran'da ebailecanva.com üzerinden duyurulacak.</p>
              <div style={{marginTop: 28}}>
                <button className="btn btn-secondary" onClick={() => { setSubmitted(false); setData({fullName:'', school:'', grade:'', city:'Bartın', district:'', email:'', parentName:'', parentPhone:'', canvaUrl:'', workTitle:'', kvkk:false, parentConsent:false, rules:false}); }}>Yeni başvuru</button>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <>
    {showPopup && <VeliIzinPopup onConfirm={handleConfirm} onClose={() => setShowPopup(false)}/>}
    {showVideoPopup && (
      <div onClick={() => setShowVideoPopup(false)} style={{
        position:'fixed', inset:0, background:'rgba(0,0,0,.75)',
        display:'flex', alignItems:'center', justifyContent:'center', zIndex:600
      }}>
        <div onClick={e => e.stopPropagation()} style={{
          background:'#000', borderRadius:16, overflow:'hidden',
          width:'min(800px, 95vw)', boxShadow:'0 24px 80px rgba(0,0,0,.5)', position:'relative'
        }}>
          <button onClick={() => setShowVideoPopup(false)} style={{
            position:'absolute', top:10, right:10, zIndex:10,
            background:'rgba(0,0,0,.6)', border:'none', borderRadius:'50%',
            width:36, height:36, color:'#fff', fontSize:20, cursor:'pointer',
            display:'flex', alignItems:'center', justifyContent:'center', lineHeight:1
          }}>×</button>
          <video
            src="assets/paylas.mp4"
            controls autoPlay
            style={{width:'100%', display:'block', maxHeight:'80vh'}}
          />
        </div>
      </div>
    )}
    <section id="basvuru" className="form-section" ref={formRef}>
      <div className="container">
        <div className="section-head">
          <span className="section-eyebrow">Başvuru Formu</span>
          <h2 className="section-title">Eserini buradan gönder.</h2>
          <p className="section-lead">Form yalnızca tasarımını Canva'da tamamladıktan ve görüntüleme bağlantısını oluşturduktan sonra doldurulmalıdır. <strong>Elektronik başvurunun tamamlanması için mutlaka tasarımının görüntüleme bağlantısını forma ekle!</strong></p>
        </div>

        {/* Uyarı notu */}
        <div style={{
          background: '#fef9c3', border: '1.5px solid #fbbf24', borderRadius: 12,
          padding: '14px 18px', marginBottom: 28, fontSize: 14, lineHeight: 1.6, color: '#78350f'
        }}>
          ⚠️ <strong>Dikkat:</strong> Yarışmaya yaptığın başvurunun geçerli olması için okul idarene <strong>KVKK/veli izin belgeni</strong> teslim etmeyi ve katılım bilgini iletmeyi unutma!
        </div>

        <form className="form-card" onSubmit={onSubmit} noValidate>
          <div className="form-grid">
            <div className={`field ${errors.fullName ? 'error' : ''}`}>
              <label>Ad ve soyad</label>
              <input value={data.fullName} onChange={e => set('fullName', e.target.value)} placeholder="Örn. Ayşe Yılmaz"/>
              {errors.fullName && <span className="err">{errors.fullName}</span>}
            </div>
            <div className={`field ${errors.school ? 'error' : ''}`}>
              <label>Okul</label>
              <input value={data.school} onChange={e => set('school', e.target.value)} placeholder="Örn. Bartın Anadolu Lisesi"/>
              {errors.school && <span className="err">{errors.school}</span>}
            </div>
            <div className={`field ${errors.grade ? 'error' : ''}`}>
              <label>Sınıf / kademe</label>
              <select value={data.grade} onChange={e => set('grade', e.target.value)}>
                <option value="">Seçin…</option>
                <optgroup label="Ortaokul">
                  <option>5. sınıf</option><option>6. sınıf</option><option>7. sınıf</option><option>8. sınıf</option>
                </optgroup>
                <optgroup label="Lise">
                  <option>9. sınıf</option><option>10. sınıf</option><option>11. sınıf</option><option>12. sınıf</option>
                </optgroup>
              </select>
              {errors.grade && <span className="err">{errors.grade}</span>}
            </div>
            <div className={`field ${errors.district ? 'error' : ''}`}>
              <label>İlçe</label>
              <input value={data.district} onChange={e => set('district', e.target.value)} placeholder="Örn. Merkez, Amasra, Kurucaşile, Ulus"/>
              {errors.district && <span className="err">{errors.district}</span>}
            </div>
            <div className={`field ${errors.email ? 'error' : ''}`}>
              <label>E-posta</label>
              <input type="email" value={data.email} onChange={e => set('email', e.target.value)} placeholder="ad.soyad@ogr.meb.gov.tr"/>
              <span className="hint">Sonuç bildirimleri ve sergi bilgisi için kullanılır.</span>
              {errors.email && <span className="err">{errors.email}</span>}
            </div>
            <div className={`field ${errors.parentName ? 'error' : ''}`}>
              <label>Veli adı soyadı</label>
              <input value={data.parentName} onChange={e => set('parentName', e.target.value)} placeholder="Örn. Mehmet Yılmaz"/>
              {errors.parentName && <span className="err">{errors.parentName}</span>}
            </div>
            <div className={`field ${errors.parentPhone ? 'error' : ''}`}>
              <label>Veli telefonu</label>
              <input value={data.parentPhone} onChange={e => set('parentPhone', e.target.value)} placeholder="0 5__ ___ __ __"/>
              {errors.parentPhone && <span className="err">{errors.parentPhone}</span>}
            </div>
            <div className={`field ${errors.workTitle ? 'error' : ''}`}>
              <label>Eserin adı</label>
              <input value={data.workTitle} onChange={e => set('workTitle', e.target.value)} placeholder="Afişine bir isim ver"/>
              {errors.workTitle && <span className="err">{errors.workTitle}</span>}
            </div>
            <div className={`field full ${errors.canvaUrl ? 'error' : ''}`}>
              <label style={{display:'flex', alignItems:'center', justifyContent:'space-between', flexWrap:'wrap', gap:8}}>
                <span>Canva görüntüleme bağlantısı</span>
                <button type="button" onClick={() => setShowVideoPopup(true)} style={{
                  display:'inline-flex', alignItems:'center', gap:6,
                  background:'var(--accentSoft)', color:'var(--accent)',
                  border:'none', borderRadius:8, padding:'5px 12px',
                  fontSize:13, fontWeight:600, cursor:'pointer'
                }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2"/><path d="M10 8l6 4-6 4V8z" fill="currentColor"/></svg>
                  Nasıl yapılır?
                </button>
              </label>
              <input value={data.canvaUrl} onChange={e => set('canvaUrl', e.target.value)} placeholder="https://www.canva.com/design/..."/>
              <span className="hint">Canva'da: Paylaş → Genel erişim → "Bağlantısı olan herkes" → "Görüntüleyebilir". Linki kopyala ve yukarıya yapıştır.</span>
              {errors.canvaUrl && <span className="err">{errors.canvaUrl}</span>}
            </div>

            <div className="field full">
              <label className={`checkbox-row ${errors.parentConsent ? 'error' : ''}`}>
                <input type="checkbox" checked={data.parentConsent} onChange={e => set('parentConsent', e.target.checked)}/>
                <span className="lbl">Veli iznim alındı, imzalı veli izin belgesi okul idaresine teslim edildi/edilecek.</span>
              </label>
              {errors.parentConsent && <span className="err">{errors.parentConsent}</span>}
            </div>
            <div className="field full">
              <label className={`checkbox-row ${errors.kvkk ? 'error' : ''}`}>
                <input type="checkbox" checked={data.kvkk} onChange={e => set('kvkk', e.target.checked)}/>
                <span className="lbl">KVKK kapsamında <a href="#">aydınlatma metnini</a> okudum; eserin eğitim, tanıtım, sergi ve sosyal medyada kullanılmasını kabul ediyorum.</span>
              </label>
              {errors.kvkk && <span className="err">{errors.kvkk}</span>}
            </div>
            <div className="field full">
              <label className={`checkbox-row ${errors.rules ? 'error' : ''}`}>
                <input type="checkbox" checked={data.rules} onChange={e => set('rules', e.target.checked)}/>
                <span className="lbl"><a href="assets/sartname.docx" download>Yarışma şartnamesini</a> okudum, katılım şartlarını kabul ediyorum.</span>
              </label>
              {errors.rules && <span className="err">{errors.rules}</span>}
            </div>
          </div>

          {submitError && (
            <div style={{
              background:'#fef2f2', border:'1.5px solid #f87171', borderRadius:10,
              padding:'12px 16px', marginBottom:12, color:'#7f1d1d', fontSize:14
            }}>
              ❌ {submitError}
            </div>
          )}

          <div className="form-foot">
            <div className="note">Son eser yükleme tarihi: <strong style={{color:'var(--colorGrey09)'}}>12 Haziran 2026 · 23:59</strong></div>
            <button type="submit" className="btn btn-primary btn-lg">
              Başvuruyu gönder
              <Icon name="arrow-right" size={18}/>
            </button>
          </div>
        </form>
      </div>
    </section>
    </>
  );
}

// ---------- stats ----------
function StatsBar() {
  return (
    <div className="container">
      <div className="stats">
        <div className="stat"><div className="num">2</div><div className="label">Kademe (ortaokul + lise)</div></div>
        <div className="stat"><div className="num">5</div><div className="label">Değerlendirme kriteri</div></div>
        <div className="stat"><div className="num">100</div><div className="label">Dijital galeride finalist</div></div>
        <div className="stat"><div className="num">20</div><div className="label">Ödül töreninde sergi</div></div>
      </div>
    </div>
  );
}

// ---------- footer ----------
function Footer() {
  return (
    <>
      <section style={{paddingTop: 0}}>
        <div className="container">
          <div className="cta-strip">
            <div>
              <h3>Hazırsan, başlamana 1 dakika kaldı.</h3>
              <p>Eğitime kaydol, Canva'da tasarla, formu doldur.</p>
            </div>
            <a href="#basvuru" className="btn btn-primary btn-xl">Başvuruyu aç</a>
          </div>
        </div>
      </section>
      <footer className="footer">
        <div className="container">
          <div className="footer-top">
            <div className="footer-brand">
              <div className="logos">
                <img src="assets/logomem.svg" alt="Bartın İl MEM" style={{height: 36, filter: 'brightness(0) invert(1)'}}/>
                <img src="assets/logo-canva-circle.svg" style={{width: 36, height: 36}}/>
              </div>
              <p>Bartın İl Millî Eğitim Müdürlüğü tarafından yürütülen "Güçlü Bağlar Sağlıklı Yarınlar" Bağımlılıkla Mücadele Projesi koordinatörlüğünde, Canva iş birliğiyle düzenlenmektedir.</p>
            </div>
            <div className="footer-col">
              <h5>Yarışma</h5>
              <a href="#yarisma">Hakkında</a>
              <a href="#takvim">Takvim</a>
              <a href="#kriterler">Kriterler</a>
              <a href="#oduller">Ödüller</a>
              <a href="#sartlar">Katılım Şartları</a>
              <a href="#sss">Sıkça Sorulan Sorular</a>
            </div>
            <div className="footer-col">
              <h5>Belgeler</h5>
              <a href="assets/sartname.docx" download>Yarışma Şartnamesi</a>
              <a href="assets/veli-izin.docx" download>Veli İzin Belgesi</a>
              <a href="https://chat.whatsapp.com/FhuDnMQh1wa6gnQB5rsPKm" target="_blank" rel="noopener">WhatsApp Topluluğu</a>
              <a href="#">İletişim</a>
            </div>
          </div>
          <div className="footer-bottom">
            <div>© 2026 Bartın İl Millî Eğitim Müdürlüğü</div>
            <div>ebailecanva.com</div>
          </div>
        </div>
      </footer>
    </>
  );
}

// ---------- Tweaks ----------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "purple",
  "showCountdown": true,
  "heroLayout": "split"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const formRef = useRef(null);

  useEffect(() => {
    document.documentElement.dataset.palette = tweaks.palette;
  }, [tweaks.palette]);

  // Track page view with unique visitor ID
  useEffect(() => {
    if (_db) {
      let vid = localStorage.getItem('_vid');
      if (!vid) {
        vid = (crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2) + Date.now().toString(36));
        localStorage.setItem('_vid', vid);
      }
      _db.from('page_views').insert({ page: 'landing', visitor_id: vid }).then(() => {});
    }
  }, []);

  function scrollToForm() {
    if (formRef.current) {
      const top = formRef.current.getBoundingClientRect().top + window.scrollY - 24;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  }

  return (
    <>
      <Nav onApply={scrollToForm}/>
      <Hero onApply={scrollToForm} showCountdown={tweaks.showCountdown} heroLayout={tweaks.heroLayout}/>
      <About/>
      <Timeline/>
      <Criteria/>
      <Prizes/>
      <Rules/>
      <CommunityEdu/>
      <FAQ/>
      <ApplyForm formRef={formRef}/>
      <StatsBar/>
      <Footer/>

      <ScrollToTop/>
      <TweaksPanel>
        <TweakSection label="Tema">
          <TweakRadio
            label="Renk paleti"
            value={tweaks.palette}
            options={['purple', 'teal', 'ink']}
            onChange={v => setTweak('palette', v)}
          />
        </TweakSection>
        <TweakSection label="Hero">
          <TweakToggle
            label="Geri sayım"
            value={tweaks.showCountdown}
            onChange={v => setTweak('showCountdown', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

// ---------- scroll to top ----------
function ScrollToTop() {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 400);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  if (!visible) return null;
  return (
    <button
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
      title="Sayfanın başına dön"
      style={{
        position: 'fixed',
        bottom: 68,
        right: 20,
        width: 40,
        height: 40,
        borderRadius: '50%',
        background: 'var(--accent)',
        color: '#fff',
        border: 'none',
        cursor: 'pointer',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        boxShadow: '0 4px 16px rgba(0,0,0,.18)',
        zIndex: 99,
        transition: 'background .2s, transform .15s',
      }}
      onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'}
      onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}
    >
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
        <path d="M18 15l-6-6-6 6" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </button>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);