// About, Programs, Contact pages
const { useState: useStateP, useEffect: useEffectP } = React;

function AboutPage({ setPage, dark, cardStyle }) {
  const values = [
    { icon: 'shield-check', title: 'Resmî Onay', body: 'Her belge E-Devlet üzerinden sorgulanabilir, üniversite akreditasyonlu ve MYK uyumludur.' },
    { icon: 'clock-3',      title: 'Hız',        body: 'Süreç en kısa zamanda yönetilir; her aşamada bilgilendirme yapılır.' },
    { icon: 'heart-handshake', title: 'Şeffaflık',  body: 'Süreç başında net ücret, net evrak listesi, net takvim. Sürpriz yok.' },
    { icon: 'users',        title: 'Danışmanlık', body: 'Her aday için adanmış bir danışman. WhatsApp üzerinden anlık iletişim.' },
  ];
  const milestones = [
    { y: '2009', t: 'Kuruluş', d: 'Samsun merkezli ilk belgelendirme danışmanlığı ofisi açıldı.' },
    { y: '2014', t: 'Üniversite Protokolü', d: 'İlk üniversite akreditasyon protokolü imzalandı.' },
    { y: '2018', t: 'Ankara Şubesi', d: 'Kızılay\'da yeni şube ile kapasitemiz iki katına çıktı.' },
    { y: '2024', t: '5.000. Aday', d: '5.000\'inci başarılı belgelendirme sürecini tamamladık.' },
  ];

  return (
    <>
      <section className="pt-16 md:pt-24 pb-12 md:pb-16">
        <div className="max-w-[1280px] mx-auto px-5 md:px-8">
          <div className="text-[0.72rem] tracking-[0.2em] uppercase font-semibold text-vred mb-5">— Kurumsal</div>
          <h1 className={`font-display font-light text-[clamp(2.5rem,7vw,6.5rem)] leading-[0.95] tracking-[-0.03em] max-w-4xl ${dark ? 'text-white' : 'text-ink'}`}>
            On beş yıldır mesleğin <em className="italic font-serif font-normal text-vred">resmî yüzü.</em>
          </h1>
          <p className={`mt-8 text-[1.15rem] md:text-[1.25rem] leading-[1.55] max-w-2xl ${dark ? 'text-white/70' : 'text-ink/70'}`}>
            Vizyon Gelişim Akademi, Türkiye'nin dört bir yanından gelen mesleki belgelendirme taleplerini karşılayan yetkili bir danışmanlık kuruluşudur. Tek işimiz: tecrübenizi yasal zemine taşımak.
          </p>
        </div>
      </section>

      <section className={`py-16 md:py-20 ${dark ? 'bg-white/[0.02]' : 'bg-paper-warm'}`}>
        <div className="max-w-[1280px] mx-auto px-5 md:px-8">
          <div className="grid md:grid-cols-12 gap-12">
            <div className="md:col-span-5">
              <div className="text-[0.72rem] tracking-[0.2em] uppercase font-semibold text-vred mb-4">— Misyon</div>
              <h2 className={`font-display font-light text-[clamp(2rem,4vw,3rem)] leading-[1.05] tracking-[-0.025em] ${dark ? 'text-white' : 'text-ink'}`}>
                Mesleğini icra eden her ustanın <em className="italic font-serif font-normal">belgesi olsun.</em>
              </h2>
            </div>
            <div className={`md:col-span-7 space-y-5 text-[1rem] leading-[1.65] ${dark ? 'text-white/70' : 'text-ink/70'}`}>
              <p>Türkiye'de tehlikeli ve çok tehlikeli sınıftaki yüzlerce mesleğin yasal olarak icra edilebilmesi için Kalfalık veya Ustalık belgesi zorunludur. Ancak süreç çoğu zaman bürokrasi nedeniyle aşılması zor bir engel olarak görülür.</p>
              <p>Vizyon Gelişim Akademi olarak bu denklemi tersine çeviriyoruz: <strong className={dark ? 'text-white' : 'text-ink'}>siz mesleğinize, biz evraklara.</strong> Başvurudan teslime tüm yazışma, denklik incelemesi ve sınav koordinasyonu adanmış danışmanlarımız tarafından yürütülür.</p>
              <p>15 yıl içinde 5.000'i aşkın adayın yanında olduk. Bu rakamı, her başvuruda aynı titizlikle çoğaltıyoruz.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="py-16 md:py-24">
        <div className="max-w-[1280px] mx-auto px-5 md:px-8">
          <div className="text-[0.72rem] tracking-[0.2em] uppercase font-semibold text-vred mb-4">— Değerler</div>
          <h2 className={`font-display font-light text-[clamp(2rem,4vw,3rem)] leading-[1.05] tracking-[-0.025em] mb-12 ${dark ? 'text-white' : 'text-ink'}`}>
            Çalışma <em className="italic font-serif font-normal">prensibimiz.</em>
          </h2>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {values.map(v => (
              <div key={v.title} className={`rounded-[20px] p-7 transition-all hover:-translate-y-1 ${dark ? 'bg-white/5 border border-white/10' : 'bg-white border border-ink/8'}`}>
                <div className="w-11 h-11 rounded-xl bg-vred/10 text-vred flex items-center justify-center mb-5">
                  <i data-lucide={v.icon} className="w-5 h-5"></i>
                </div>
                <h3 className={`font-display text-[1.15rem] tracking-tight font-medium mb-2 ${dark ? 'text-white' : 'text-ink'}`}>{v.title}</h3>
                <p className={`text-[0.92rem] leading-[1.55] ${dark ? 'text-white/60' : 'text-ink/60'}`}>{v.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className={`py-16 md:py-24 ${dark ? 'bg-white/[0.02]' : 'bg-paper-warm'}`}>
        <div className="max-w-[1100px] mx-auto px-5 md:px-8">
          <div className="text-[0.72rem] tracking-[0.2em] uppercase font-semibold text-vred mb-4">— Yol haritası</div>
          <h2 className={`font-display font-light text-[clamp(2rem,4vw,3rem)] leading-[1.05] tracking-[-0.025em] mb-12 ${dark ? 'text-white' : 'text-ink'}`}>
            Kısa hikâyemiz.
          </h2>
          <div className="space-y-1">
            {milestones.map((m, i) => (
              <div key={m.y} className={`grid grid-cols-[80px_1fr] md:grid-cols-[120px_1fr] gap-6 py-6 ${i < milestones.length - 1 ? `border-b ${dark ? 'border-white/10' : 'border-ink/10'}` : ''}`}>
                <div className={`font-display text-[1.6rem] md:text-[2rem] font-light tracking-tight ${dark ? 'text-white/80' : 'text-ink/80'}`}>{m.y}</div>
                <div>
                  <div className={`font-display text-[1.15rem] md:text-[1.3rem] tracking-tight font-medium mb-1 ${dark ? 'text-white' : 'text-ink'}`}>{m.t}</div>
                  <div className={`text-[0.95rem] leading-relaxed ${dark ? 'text-white/60' : 'text-ink/60'}`}>{m.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-16 md:py-24">
        <div className="max-w-[1280px] mx-auto px-5 md:px-8 text-center">
          <h2 className={`font-display font-light text-[clamp(2rem,4vw,3rem)] leading-[1.05] tracking-[-0.025em] mb-6 ${dark ? 'text-white' : 'text-ink'}`}>
            Bir <em className="italic font-serif font-normal text-vred">soru</em>nuz mu var?
          </h2>
          <button onClick={() => setPage('contact')} className="inline-flex items-center gap-2.5 px-7 py-4 rounded-full bg-vred text-white font-semibold tracking-tight shadow-xl shadow-vred/25">
            Bizimle Tanışın <i data-lucide="arrow-right" className="w-4 h-4"></i>
          </button>
        </div>
      </section>
    </>
  );
}

function ProgramsPage({ setPage, dark }) {
  const cats = ['Tümü', 'Yapı', 'Teknik', 'Güzellik', 'Sağlık', 'Hizmet', 'Tarım'];
  const [active, setActive] = useStateP('Tümü');
  const [hovered, setHovered] = useStateP(null);
  const programs = active === 'Tümü' ? window.PROGRAMS : window.PROGRAMS.filter(p => p.cat === active);

  return (
    <>
      <section className="pt-16 md:pt-24 pb-10 md:pb-12">
        <div className="max-w-[1280px] mx-auto px-5 md:px-8">
          <div className="grid md:grid-cols-12 gap-10 items-end">
            <div className="md:col-span-8">
              <div className="text-[0.72rem] tracking-[0.2em] uppercase font-semibold text-vred mb-5">— Programlar</div>
              <h1 className={`font-display font-light text-[clamp(2.5rem,7vw,6.5rem)] leading-[0.95] tracking-[-0.03em] ${dark ? 'text-white' : 'text-ink'}`}>
                Onaylı 50+ alan, <em className="italic font-serif font-normal text-vred">tek pencere.</em>
              </h1>
            </div>
            <div className="md:col-span-4">
              <p className={`text-[1rem] leading-[1.55] ${dark ? 'text-white/65' : 'text-ink/65'}`}>
                Aşağıda en sık talep edilen programlarımız. Listede aradığınız alanı bulamazsanız bize ulaşın — 50'yi aşkın alanda hizmet veriyoruz.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="pb-4">
        <div className="max-w-[1280px] mx-auto px-5 md:px-8">
          <div className={`flex flex-wrap gap-2 pb-6 border-b ${dark ? 'border-white/10' : 'border-ink/10'}`}>
            {cats.map(c => (
              <button key={c} onClick={() => setActive(c)}
                className={`px-4 py-2 rounded-full text-[0.85rem] font-medium tracking-tight transition-colors ${
                  active === c
                    ? 'bg-vred text-white'
                    : (dark ? 'bg-white/5 text-white/65 hover:bg-white/10' : 'bg-ink/5 text-ink/65 hover:bg-ink/10')
                }`}>{c}</button>
            ))}
            <div className="ml-auto self-center text-[0.85rem] tracking-tight">
              <span className={dark ? 'text-white/50' : 'text-ink/50'}>{programs.length} program</span>
            </div>
          </div>
        </div>
      </section>

      <section className="py-10 md:py-14">
        <div className="max-w-[1280px] mx-auto px-5 md:px-8">
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-5">
            {programs.map(p => (
              <button key={p.slug} onClick={() => setPage('contact')}
                onMouseEnter={() => setHovered(p.slug)} onMouseLeave={() => setHovered(null)}
                className={`group text-left rounded-[18px] overflow-hidden ${dark ? 'bg-white/5 border border-white/10' : 'bg-white border border-ink/8'} transition-all hover:-translate-y-1 hover:shadow-xl hover:shadow-ink/10`}>
                <div className="aspect-square overflow-hidden bg-ink/10 relative">
                  <img src={`assets/programs/${p.slug}.jpg`} alt={p.title} className="w-full h-full object-cover group-hover:scale-[1.05] transition-transform duration-700" loading="lazy" />
                  <div className="absolute top-3 left-3 px-2 py-1 rounded-full bg-white/95 backdrop-blur text-[0.65rem] tracking-[0.12em] uppercase font-semibold text-ink/70">{p.cat}</div>
                  <div className={`absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/40 to-transparent transition-opacity ${hovered === p.slug ? 'opacity-100' : 'opacity-0'}`} />
                </div>
                <div className="p-4 md:p-5 flex items-center justify-between gap-3">
                  <div className="min-w-0">
                    <div className={`font-display text-[1.02rem] md:text-[1.08rem] tracking-tight font-medium truncate ${dark ? 'text-white' : 'text-ink'}`}>{p.title}</div>
                    <div className={`text-[0.78rem] tracking-tight truncate mt-0.5 ${dark ? 'text-white/55' : 'text-ink/55'}`}>{p.subtitle}</div>
                  </div>
                  <div className={`w-9 h-9 rounded-full flex items-center justify-center shrink-0 transition-colors ${dark ? 'bg-white/10' : 'bg-ink/5'} group-hover:bg-vred group-hover:text-white`}>
                    <i data-lucide="arrow-up-right" className="w-4 h-4"></i>
                  </div>
                </div>
              </button>
            ))}

            <button onClick={() => setPage('contact')}
              className={`text-left rounded-[18px] border-2 border-dashed transition-all hover:-translate-y-1 ${dark ? 'border-white/15 hover:border-vred/50 bg-white/[0.02]' : 'border-ink/15 hover:border-vred/40 bg-paper-warm'}`}>
              <div className="aspect-square flex flex-col items-center justify-center gap-3 p-5 text-center">
                <div className="w-12 h-12 rounded-full bg-vred/10 text-vred flex items-center justify-center">
                  <i data-lucide="search" className="w-5 h-5"></i>
                </div>
                <div className={`font-display text-[1rem] tracking-tight font-medium ${dark ? 'text-white' : 'text-ink'}`}>Alanınızı bulamadınız mı?</div>
                <div className={`text-[0.78rem] ${dark ? 'text-white/55' : 'text-ink/55'}`}>50+ alanda hizmet veriyoruz.</div>
              </div>
              <div className={`p-4 md:p-5 flex items-center justify-between border-t ${dark ? 'border-white/10' : 'border-ink/10'}`}>
                <div className={`font-display text-[0.95rem] tracking-tight font-medium ${dark ? 'text-white' : 'text-ink'}`}>Bize danışın</div>
                <div className="w-9 h-9 rounded-full bg-vred text-white flex items-center justify-center">
                  <i data-lucide="arrow-up-right" className="w-4 h-4"></i>
                </div>
              </div>
            </button>
          </div>
        </div>
      </section>

      <section className={`py-16 md:py-20 ${dark ? 'bg-white/[0.02]' : 'bg-paper-warm'}`}>
        <div className="max-w-[1280px] mx-auto px-5 md:px-8">
          <div className="grid md:grid-cols-12 gap-8 items-center">
            <div className="md:col-span-7">
              <h2 className={`font-display font-light text-[clamp(1.75rem,3.5vw,2.6rem)] leading-[1.1] tracking-[-0.025em] ${dark ? 'text-white' : 'text-ink'}`}>
                Belgenizin <em className="italic font-serif font-normal text-vred">değerini</em> hesaplayalım.
              </h2>
              <p className={`mt-3 text-[1rem] leading-[1.55] max-w-lg ${dark ? 'text-white/65' : 'text-ink/65'}`}>
                Mesleğinize ve tecrübenize göre uygun belge tipini, süreyi ve ücreti 24 saat içinde bildiriyoruz.
              </p>
            </div>
            <div className="md:col-span-5 flex md:justify-end">
              <button onClick={() => setPage('contact')} className="inline-flex items-center gap-2 px-6 py-3.5 rounded-full bg-vred text-white font-semibold tracking-tight shadow-lg shadow-vred/25">
                Ücretsiz Değerlendirme Al <i data-lucide="arrow-right" className="w-4 h-4"></i>
              </button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function ContactPage({ setPage, dark }) {
  const [step, setStep] = useStateP(1);
  const [data, setData] = useStateP({ name: '', phone: '', email: '', program: '', experience: '', message: '', kvkk: false });
  const [submitted, setSubmitted] = useStateP(false);
  const [errors, setErrors] = useStateP({});

  const next = () => {
    const e = {};
    if (step === 1) {
      if (!data.name.trim()) e.name = 'Ad Soyad gerekli';
      if (!data.phone.trim() || data.phone.replace(/\D/g, '').length < 10) e.phone = 'Geçerli telefon numarası girin';
    }
    if (step === 2) {
      if (!data.program) e.program = 'Bir program seçin';
    }
    if (Object.keys(e).length) { setErrors(e); return; }
    setErrors({});
    setStep(s => s + 1);
  };
  const prev = () => setStep(s => Math.max(1, s - 1));
  const submit = () => {
    if (!data.kvkk) { setErrors({ kvkk: 'KVKK aydınlatma metnini onaylayın' }); return; }
    setSubmitted(true);
  };

  const inputCls = `w-full px-4 py-3.5 rounded-xl text-[0.95rem] tracking-tight transition-colors focus:outline-none focus:ring-2 focus:ring-vred/40 ${
    dark ? 'bg-white/5 border border-white/10 text-white placeholder-white/35 focus:border-vred' : 'bg-white border border-ink/15 text-ink placeholder-ink/35 focus:border-vred'
  }`;
  const labelCls = `block text-[0.78rem] tracking-[0.12em] uppercase font-semibold mb-2 ${dark ? 'text-white/70' : 'text-ink/65'}`;

  if (submitted) {
    return (
      <section className="py-24 md:py-32">
        <div className="max-w-[700px] mx-auto px-5 md:px-8 text-center">
          <div className="w-20 h-20 rounded-full bg-emerald-500/15 text-emerald-600 flex items-center justify-center mx-auto mb-8">
            <i data-lucide="check" className="w-10 h-10" style={{ width: 40, height: 40 }}></i>
          </div>
          <h1 className={`font-display font-light text-[clamp(2.25rem,5vw,3.75rem)] leading-[1.05] tracking-[-0.025em] mb-5 ${dark ? 'text-white' : 'text-ink'}`}>
            Başvurunuz <em className="italic font-serif font-normal text-vred">alındı.</em>
          </h1>
          <p className={`text-[1.05rem] leading-[1.55] max-w-md mx-auto ${dark ? 'text-white/65' : 'text-ink/65'}`}>
            Danışmanlarımız <strong className={dark ? 'text-white' : 'text-ink'}>24 saat içinde</strong> sizi arayacak. Acil durumlar için WhatsApp üzerinden ulaşabilirsiniz.
          </p>
          <div className={`mt-8 inline-flex items-center gap-2 px-4 py-2 rounded-full ${dark ? 'bg-white/5' : 'bg-paper-warm'}`}>
            <span className={`text-[0.75rem] tracking-[0.18em] uppercase font-semibold ${dark ? 'text-white/55' : 'text-ink/55'}`}>Referans No</span>
            <span className="font-mono text-[0.85rem] text-vred font-semibold">VGA-{Math.floor(Math.random() * 90000 + 10000)}</span>
          </div>
          <div className="mt-10 flex justify-center gap-3">
            <button onClick={() => setPage('home')} className={`px-5 py-3 rounded-full text-[0.92rem] font-medium ${dark ? 'bg-white/8 text-white' : 'bg-ink/5 text-ink'}`}>Anasayfaya Dön</button>
            <a href="https://wa.me/905467635391" target="_blank" rel="noreferrer" className="inline-flex items-center gap-2 px-5 py-3 rounded-full bg-[#25d366] text-white font-medium">
              <i data-lucide="message-circle" className="w-4 h-4"></i> WhatsApp ile Yaz
            </a>
          </div>
        </div>
      </section>
    );
  }

  return (
    <>
      <section className="pt-16 md:pt-24 pb-10">
        <div className="max-w-[1280px] mx-auto px-5 md:px-8">
          <div className="text-[0.72rem] tracking-[0.2em] uppercase font-semibold text-vred mb-5">— İletişim</div>
          <h1 className={`font-display font-light text-[clamp(2.5rem,6.5vw,5.5rem)] leading-[0.95] tracking-[-0.03em] max-w-4xl ${dark ? 'text-white' : 'text-ink'}`}>
            Belgeniz için <em className="italic font-serif font-normal text-vred">3 dakika</em>.
          </h1>
          <p className={`mt-7 text-[1.1rem] leading-[1.55] max-w-2xl ${dark ? 'text-white/65' : 'text-ink/65'}`}>
            Aşağıdaki kısa formu doldurun, danışmanımız 24 saat içinde sizi arasın. Hiçbir taahhüt yok.
          </p>
        </div>
      </section>

      <section className="pb-20">
        <div className="max-w-[1280px] mx-auto px-5 md:px-8">
          <div className="grid lg:grid-cols-12 gap-8">
            {/* Form card */}
            <div className="lg:col-span-8 order-2 lg:order-1">
              <div className={`rounded-[24px] p-6 md:p-10 ${dark ? 'bg-white/5 border border-white/10' : 'bg-white border border-ink/8'} shadow-xl shadow-ink/5`}>
                {/* progress */}
                <div className="flex items-center gap-2 mb-8">
                  {[1, 2, 3].map(s => (
                    <React.Fragment key={s}>
                      <div className={`flex items-center gap-2`}>
                        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-[0.8rem] font-semibold transition-colors ${
                          s < step ? 'bg-emerald-500 text-white' : s === step ? 'bg-vred text-white' : (dark ? 'bg-white/10 text-white/40' : 'bg-ink/8 text-ink/40')
                        }`}>
                          {s < step ? <i data-lucide="check" className="w-4 h-4"></i> : s}
                        </div>
                        <span className={`text-[0.85rem] tracking-tight font-medium hidden sm:inline ${
                          s === step ? (dark ? 'text-white' : 'text-ink') : (dark ? 'text-white/45' : 'text-ink/45')
                        }`}>
                          {s === 1 ? 'Bilgileriniz' : s === 2 ? 'Program' : 'Onay'}
                        </span>
                      </div>
                      {s < 3 && <div className={`flex-1 h-px ${s < step ? 'bg-emerald-500' : (dark ? 'bg-white/10' : 'bg-ink/10')}`} />}
                    </React.Fragment>
                  ))}
                </div>

                {/* step 1 */}
                {step === 1 && (
                  <div className="space-y-5">
                    <h2 className={`font-display text-[1.5rem] md:text-[1.75rem] tracking-tight font-medium mb-1 ${dark ? 'text-white' : 'text-ink'}`}>
                      Sizi nasıl arayalım?
                    </h2>
                    <p className={`text-[0.95rem] leading-relaxed mb-3 ${dark ? 'text-white/60' : 'text-ink/60'}`}>
                      Adınız ve telefon numaranız yeterli — başka bilgi istemiyoruz.
                    </p>
                    <div className="grid sm:grid-cols-2 gap-4">
                      <div>
                        <label className={labelCls}>Ad Soyad *</label>
                        <input type="text" value={data.name} onChange={e => setData({ ...data, name: e.target.value })}
                          placeholder="Adınız Soyadınız" className={inputCls + (errors.name ? ' !border-vred ring-2 ring-vred/30' : '')} />
                        {errors.name && <div className="mt-1.5 text-[0.78rem] text-vred">{errors.name}</div>}
                      </div>
                      <div>
                        <label className={labelCls}>Telefon *</label>
                        <input type="tel" value={data.phone} onChange={e => setData({ ...data, phone: e.target.value })}
                          placeholder="0(5xx) xxx xx xx" className={inputCls + (errors.phone ? ' !border-vred ring-2 ring-vred/30' : '')} />
                        {errors.phone && <div className="mt-1.5 text-[0.78rem] text-vred">{errors.phone}</div>}
                      </div>
                    </div>
                    <div>
                      <label className={labelCls}>E-posta <span className={`normal-case tracking-normal ${dark ? 'text-white/40' : 'text-ink/40'}`}>(opsiyonel)</span></label>
                      <input type="email" value={data.email} onChange={e => setData({ ...data, email: e.target.value })}
                        placeholder="ornek@mail.com" className={inputCls} />
                    </div>
                    <div className="pt-3 flex justify-end">
                      <button onClick={next} className="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-vred text-white font-semibold tracking-tight shadow-lg shadow-vred/20">
                        Devam <i data-lucide="arrow-right" className="w-4 h-4"></i>
                      </button>
                    </div>
                  </div>
                )}

                {/* step 2 */}
                {step === 2 && (
                  <div className="space-y-5">
                    <h2 className={`font-display text-[1.5rem] md:text-[1.75rem] tracking-tight font-medium mb-1 ${dark ? 'text-white' : 'text-ink'}`}>
                      Hangi alanda belge almak istiyorsunuz?
                    </h2>
                    <p className={`text-[0.95rem] leading-relaxed mb-3 ${dark ? 'text-white/60' : 'text-ink/60'}`}>
                      En çok talep edilen 10 program aşağıda. Diğer alanlar için "Diğer"i seçin.
                    </p>
                    <div className="grid grid-cols-2 sm:grid-cols-3 gap-2.5">
                      {window.PROGRAMS.map(p => {
                        const sel = data.program === p.slug;
                        return (
                          <button key={p.slug} type="button" onClick={() => setData({ ...data, program: p.slug })}
                            className={`text-left p-3.5 rounded-xl border transition-all ${
                              sel ? 'border-vred bg-vred/5' : (dark ? 'border-white/10 bg-white/[0.02] hover:bg-white/5' : 'border-ink/10 bg-white hover:bg-paper-warm')
                            }`}>
                            <div className={`text-[0.92rem] font-medium tracking-tight ${dark ? 'text-white' : 'text-ink'}`}>{p.title}</div>
                            <div className={`text-[0.72rem] mt-0.5 ${dark ? 'text-white/50' : 'text-ink/50'}`}>{p.subtitle}</div>
                          </button>
                        );
                      })}
                      <button type="button" onClick={() => setData({ ...data, program: 'diger' })}
                        className={`text-left p-3.5 rounded-xl border-2 border-dashed transition-all ${
                          data.program === 'diger' ? 'border-vred bg-vred/5' : (dark ? 'border-white/15 hover:border-white/30' : 'border-ink/15 hover:border-ink/30')
                        }`}>
                        <div className={`text-[0.92rem] font-medium tracking-tight ${dark ? 'text-white' : 'text-ink'}`}>Diğer</div>
                        <div className={`text-[0.72rem] mt-0.5 ${dark ? 'text-white/50' : 'text-ink/50'}`}>Listede yok</div>
                      </button>
                    </div>
                    {errors.program && <div className="text-[0.82rem] text-vred">{errors.program}</div>}
                    <div>
                      <label className={labelCls}>Tecrübe <span className={`normal-case tracking-normal ${dark ? 'text-white/40' : 'text-ink/40'}`}>(opsiyonel)</span></label>
                      <select value={data.experience} onChange={e => setData({ ...data, experience: e.target.value })} className={inputCls}>
                        <option value="">Seçiniz</option>
                        <option value="0-2">0-2 yıl</option>
                        <option value="2-5">2-5 yıl</option>
                        <option value="5-10">5-10 yıl</option>
                        <option value="10+">10+ yıl</option>
                      </select>
                    </div>
                    <div className="pt-3 flex justify-between">
                      <button onClick={prev} className={`inline-flex items-center gap-2 px-5 py-3 rounded-full font-medium ${dark ? 'bg-white/8 text-white' : 'bg-ink/5 text-ink'}`}>
                        <i data-lucide="arrow-left" className="w-4 h-4"></i> Geri
                      </button>
                      <button onClick={next} className="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-vred text-white font-semibold tracking-tight shadow-lg shadow-vred/20">
                        Devam <i data-lucide="arrow-right" className="w-4 h-4"></i>
                      </button>
                    </div>
                  </div>
                )}

                {/* step 3 */}
                {step === 3 && (
                  <div className="space-y-5">
                    <h2 className={`font-display text-[1.5rem] md:text-[1.75rem] tracking-tight font-medium mb-1 ${dark ? 'text-white' : 'text-ink'}`}>
                      Son adım — eklemek istediğiniz var mı?
                    </h2>
                    <div>
                      <label className={labelCls}>Mesajınız <span className={`normal-case tracking-normal ${dark ? 'text-white/40' : 'text-ink/40'}`}>(opsiyonel)</span></label>
                      <textarea rows="4" value={data.message} onChange={e => setData({ ...data, message: e.target.value })}
                        placeholder="Tecrübeniz, beklentiniz veya özel durumunuz hakkında..." className={inputCls + ' resize-none'} />
                    </div>
                    <label className={`flex items-start gap-3 cursor-pointer p-4 rounded-xl ${dark ? 'bg-white/5' : 'bg-paper-warm'}`}>
                      <input type="checkbox" checked={data.kvkk} onChange={e => setData({ ...data, kvkk: e.target.checked })}
                        className="mt-1 w-4 h-4 accent-vred shrink-0" />
                      <span className={`text-[0.85rem] leading-[1.5] ${dark ? 'text-white/70' : 'text-ink/70'}`}>
                        <strong className={dark ? 'text-white' : 'text-ink'}>KVKK aydınlatma metnini</strong> okudum, kişisel verilerimin yalnızca bu başvuru kapsamında işlenmesini onaylıyorum.
                      </span>
                    </label>
                    {errors.kvkk && <div className="text-[0.82rem] text-vred">{errors.kvkk}</div>}
                    <div className="pt-3 flex justify-between">
                      <button onClick={prev} className={`inline-flex items-center gap-2 px-5 py-3 rounded-full font-medium ${dark ? 'bg-white/8 text-white' : 'bg-ink/5 text-ink'}`}>
                        <i data-lucide="arrow-left" className="w-4 h-4"></i> Geri
                      </button>
                      <button onClick={submit} className="inline-flex items-center gap-2 px-7 py-3 rounded-full bg-vred text-white font-semibold tracking-tight shadow-lg shadow-vred/25">
                        Başvuruyu Gönder <i data-lucide="check" className="w-4 h-4"></i>
                      </button>
                    </div>
                  </div>
                )}
              </div>
            </div>

            {/* sidebar */}
            <div className="lg:col-span-4 order-1 lg:order-2 space-y-4">
              <div className={`rounded-[20px] p-6 ${dark ? 'bg-white/5 border border-white/10' : 'bg-paper-warm border border-ink/8'}`}>
                <div className="text-[0.72rem] tracking-[0.18em] uppercase font-semibold text-vred mb-4">— İletişim</div>
                <div className="space-y-4">
                  <div className="flex items-start gap-3">
                    <div className="w-9 h-9 rounded-lg bg-vred/10 text-vred flex items-center justify-center shrink-0">
                      <i data-lucide="phone" className="w-4 h-4"></i>
                    </div>
                    <div>
                      <div className={`text-[0.72rem] tracking-[0.14em] uppercase font-semibold ${dark ? 'text-white/50' : 'text-ink/50'}`}>Telefon</div>
                      <a href="tel:+905467635391" className={`text-[0.95rem] font-medium tracking-tight ${dark ? 'text-white' : 'text-ink'}`}>(0546) 763 53 91</a>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <div className="w-9 h-9 rounded-lg bg-vred/10 text-vred flex items-center justify-center shrink-0">
                      <i data-lucide="mail" className="w-4 h-4"></i>
                    </div>
                    <div>
                      <div className={`text-[0.72rem] tracking-[0.14em] uppercase font-semibold ${dark ? 'text-white/50' : 'text-ink/50'}`}>E-posta</div>
                      <a href="mailto:iletisim@vizyon-egitim.com" className={`text-[0.92rem] font-medium tracking-tight break-all ${dark ? 'text-white' : 'text-ink'}`}>iletisim@vizyon-egitim.com</a>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <div className="w-9 h-9 rounded-lg bg-vred/10 text-vred flex items-center justify-center shrink-0">
                      <i data-lucide="map-pin" className="w-4 h-4"></i>
                    </div>
                    <div>
                      <div className={`text-[0.72rem] tracking-[0.14em] uppercase font-semibold ${dark ? 'text-white/50' : 'text-ink/50'}`}>Ofis</div>
                      <div className={`text-[0.92rem] tracking-tight leading-[1.4] ${dark ? 'text-white/85' : 'text-ink/85'}`}>Atatürk Bulvarı No:85/19<br/>Kızılay · Çankaya / Ankara</div>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <div className="w-9 h-9 rounded-lg bg-vred/10 text-vred flex items-center justify-center shrink-0">
                      <i data-lucide="clock" className="w-4 h-4"></i>
                    </div>
                    <div>
                      <div className={`text-[0.72rem] tracking-[0.14em] uppercase font-semibold ${dark ? 'text-white/50' : 'text-ink/50'}`}>Çalışma Saatleri</div>
                      <div className={`text-[0.92rem] tracking-tight ${dark ? 'text-white/85' : 'text-ink/85'}`}>Hafta içi 09:00 — 18:00</div>
                    </div>
                  </div>
                </div>
              </div>

              <a href="https://wa.me/905467635391" target="_blank" rel="noreferrer"
                 className="block rounded-[20px] p-6 bg-[#25d366] text-white relative overflow-hidden hover:brightness-105 transition-all">
                <div className="absolute -top-6 -right-6 w-24 h-24 rounded-full bg-white/10" />
                <div className="relative flex items-start gap-4">
                  <div className="w-11 h-11 rounded-full bg-white/15 flex items-center justify-center shrink-0">
                    <i data-lucide="message-circle" className="w-5 h-5 fill-current"></i>
                  </div>
                  <div>
                    <div className="font-display text-[1.1rem] tracking-tight font-medium">WhatsApp ile yaz</div>
                    <div className="text-[0.85rem] text-white/85 mt-1 leading-snug">Form yerine sohbet etmek isteyenler için. Ortalama yanıt 8 dakika.</div>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

window.AboutPage = AboutPage;
window.ProgramsPage = ProgramsPage;
window.ContactPage = ContactPage;