// Home page — editorial hero + process + benefits + testimonials + faq + cta
const { useState: useStateHome, useEffect: useEffectHome } = React;

function Marquee({ items, dark }) {
  return (
    <div className={`overflow-hidden border-y ${dark ? 'border-white/10' : 'border-ink/8'} py-5`}>
      <div className="flex gap-12 animate-[marquee_40s_linear_infinite] whitespace-nowrap">
        {[...items, ...items, ...items].map((it, i) => (
          <div key={i} className="flex items-center gap-3 shrink-0">
            <span className="w-1.5 h-1.5 rounded-full bg-vred shrink-0" />
            <span className={`text-[0.92rem] tracking-tight font-medium ${dark ? 'text-white/70' : 'text-ink/65'}`}>{it}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function HeroEditorial({ setPage, density, dark }) {
  const [phraseIdx, setPhraseIdx] = useStateHome(0);
  const phrases = [
    { a: 'Tecrübenizi', b: 'belgeyle', c: 'taçlandırın' },
    { a: 'Mesleğinizi', b: 'yasal zemine', c: 'taşıyın' },
    { a: 'Kariyerinizi', b: 'üniversite onayıyla', c: 'yükseltin' },
  ];
  useEffectHome(() => {
    const t = setInterval(() => setPhraseIdx(i => (i + 1) % phrases.length), 4500);
    return () => clearInterval(t);
  }, []);
  const p = phrases[phraseIdx];
  const padY = density === 'compact' ? 'py-12 md:py-16' : density === 'spacious' ? 'py-24 md:py-36' : 'py-16 md:py-24';

  return (
    <section className={`relative ${padY}`}>
      <div className="max-w-[1280px] mx-auto px-5 md:px-8">
        {/* eyebrow + meta row */}
        <div className="flex items-center justify-between flex-wrap gap-3 mb-8 md:mb-12">
          <div className={`inline-flex items-center gap-2.5 px-3 py-1.5 rounded-full text-[0.72rem] tracking-[0.18em] uppercase font-semibold ${dark ? 'bg-white/5 text-white/70 border border-white/10' : 'bg-ink/5 text-ink/65'}`}>
            <span className="relative flex h-1.5 w-1.5">
              <span className="absolute inline-flex h-full w-full rounded-full bg-vred opacity-75 animate-ping" />
              <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-vred" />
            </span>
            Yetkili Belgelendirme Merkezi
          </div>
          <div className={`text-[0.78rem] tracking-tight ${dark ? 'text-white/50' : 'text-ink/50'}`}>
            <span className="hidden sm:inline">Est. </span>2009 · Samsun &amp; Ankara
          </div>
        </div>

        {/* headline — reserve 3-line height so rotating phrases don't reflow the page */}
        <h1 className="font-display font-light leading-[0.95] tracking-[-0.035em] text-[clamp(3rem,9.5vw,9rem)] flex items-end"
            style={{ minHeight: 'calc(clamp(3rem,9.5vw,9rem) * 0.95 * 3)', transition: 'opacity 0.5s ease' }} key={phraseIdx}>
          <span>
            <span className={dark ? 'text-white' : 'text-ink'}>{p.a}</span>{' '}
            <em className="italic font-serif font-normal text-vred not-italic-on-mobile">{p.b}</em>{' '}
            <span className={dark ? 'text-white' : 'text-ink'}>{p.c}.</span>
          </span>
        </h1>

        {/* sub-grid */}
        <div className="grid md:grid-cols-12 gap-8 md:gap-12 mt-12 md:mt-16">
          <div className="md:col-span-7">
            <p className={`text-[1.1rem] md:text-[1.2rem] leading-[1.55] tracking-tight max-w-2xl ${dark ? 'text-white/70' : 'text-ink/70'}`}>
              <span className={dark ? 'text-white' : 'text-ink'}>E-Devlet</span> ve <span className={dark ? 'text-white' : 'text-ink'}>üniversite onaylı</span> Kalfalık, Ustalık ve Usta Öğreticilik belgelerinde 5.000'den fazla başarılı süreç. Bürokrasiyi biz yönetelim, siz mesleğinize odaklanın.
            </p>
            <div className="flex flex-wrap items-center gap-3 mt-8">
              <button onClick={() => setPage('contact')}
                className="inline-flex items-center gap-2.5 px-6 py-3.5 rounded-full bg-vred text-white text-[0.95rem] font-semibold tracking-tight shadow-lg shadow-vred/25 hover:bg-vred-dark transition-colors">
                Ücretsiz Ön Değerlendirme
                <i data-lucide="arrow-up-right" className="w-4 h-4"></i>
              </button>
              <button onClick={() => setPage('programs')}
                className={`inline-flex items-center gap-2 px-5 py-3.5 rounded-full text-[0.95rem] font-medium tracking-tight transition-colors ${dark ? 'text-white/85 hover:bg-white/8' : 'text-ink/75 hover:bg-ink/5'}`}>
                <i data-lucide="play-circle" className="w-4 h-4"></i>
                Programları İncele
              </button>
            </div>
          </div>

          {/* editorial brand composition */}
          <div className="md:col-span-5">
            <div className="grid grid-cols-3 gap-3 mt-3">
              <div className={`rounded-[14px] p-4 ${dark ? 'bg-white/5 border border-white/10' : 'bg-paper-warm border border-ink/8'}`}>
                <div className="text-[1.4rem] font-display font-medium tracking-tight">5K+</div>
                <div className={`text-[0.7rem] tracking-tight mt-0.5 ${dark ? 'text-white/55' : 'text-ink/55'}`}>Sertifika</div>
              </div>
              <div className={`rounded-[14px] p-4 ${dark ? 'bg-white/5 border border-white/10' : 'bg-paper-warm border border-ink/8'}`}>
                <div className="text-[1.4rem] font-display font-medium tracking-tight text-vred">81</div>
                <div className={`text-[0.7rem] tracking-tight mt-0.5 ${dark ? 'text-white/55' : 'text-ink/55'}`}>İl</div>
              </div>
              <div className={`rounded-[14px] p-4 ${dark ? 'bg-white/5 border border-white/10' : 'bg-paper-warm border border-ink/8'}`}>
                <div className="text-[1.4rem] font-display font-medium tracking-tight">15y+</div>
                <div className={`text-[0.7rem] tracking-tight mt-0.5 ${dark ? 'text-white/55' : 'text-ink/55'}`}>Deneyim</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroBold({ setPage, density, dark }) {
  const padY = density === 'compact' ? 'py-12 md:py-20' : density === 'spacious' ? 'py-24 md:py-40' : 'py-16 md:py-28';
  return (
    <section className="relative overflow-hidden bg-gradient-to-br from-vred via-vred-dark to-[#5a0a14] text-white">
      <div className="absolute inset-0 opacity-[0.07]" style={{ backgroundImage: 'radial-gradient(circle at 1px 1px, white 1px, transparent 0)', backgroundSize: '32px 32px' }} />
      <div className="absolute -top-40 -right-40 w-[500px] h-[500px] rounded-full bg-white/5 blur-3xl" />
      <div className="absolute -bottom-40 -left-40 w-[400px] h-[400px] rounded-full bg-black/20 blur-3xl" />
      <div className={`relative max-w-[1280px] mx-auto px-5 md:px-8 ${padY}`}>
        <div className="grid md:grid-cols-12 gap-12 items-center">
          <div className="md:col-span-7">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/15 border border-white/25 text-[0.72rem] tracking-[0.16em] uppercase font-semibold backdrop-blur-sm mb-7">
              <span className="w-1.5 h-1.5 rounded-full bg-white" />
              Resmî Belgelendirme Merkezi
            </div>
            <h1 className="font-display font-light leading-[0.95] tracking-[-0.03em] text-[clamp(3rem,8vw,7rem)]">
              Mesleğinizi <em className="italic font-serif font-normal">resmî belgeyle</em> taçlandırın.
            </h1>
            <p className="text-[1.1rem] text-white/85 leading-relaxed max-w-xl mt-7">
              <strong className="text-white">E-Devlet</strong> ve <strong className="text-white">üniversite onaylı</strong> Kalfalık, Ustalık ve Usta Öğreticilik belgeleriyle kariyerinizi zirveye taşıyın.
            </p>
            <div className="flex flex-wrap gap-3 mt-8">
              <button onClick={() => setPage('contact')} className="inline-flex items-center gap-2 px-6 py-3.5 rounded-full bg-white text-vred font-semibold shadow-xl active:scale-95">
                Hemen Başvur <i data-lucide="arrow-right" className="w-4 h-4"></i>
              </button>
              <a href="https://wa.me/905467635391" target="_blank" rel="noreferrer" className="inline-flex items-center gap-2 px-6 py-3.5 rounded-full bg-white/15 border border-white/30 text-white font-semibold backdrop-blur-sm">
                <i data-lucide="message-circle" className="w-4 h-4 text-[#25d366]"></i> WhatsApp
              </a>
            </div>
          </div>
          <div className="md:col-span-5 hidden md:block">
            <div className="relative">
              <div className="absolute -top-4 -right-4 w-32 h-32 rounded-full bg-white/10 blur-2xl" />
              <div className="relative bg-white rounded-3xl p-7 text-ink shadow-2xl">
                <div className="text-[0.7rem] tracking-[0.18em] uppercase font-semibold text-ink/45 mb-4">Belgelendirme · 2025</div>
                <div className="grid grid-cols-2 gap-3">
                  {window.STATS.map(s => (
                    <div key={s.label} className="p-4 rounded-2xl bg-paper-warm">
                      <div className="font-display text-[1.85rem] font-medium tracking-tight">{s.num}</div>
                      <div className="text-[0.75rem] text-ink/60 mt-0.5">{s.label}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProcessSection({ setPage, dark, density, cardStyle }) {
  const padY = density === 'compact' ? 'py-14' : density === 'spacious' ? 'py-32' : 'py-20 md:py-28';
  const steps = [
    { n: '01', icon: 'message-square', title: 'Başvuru', body: 'WhatsApp ya da telefonla danışmanlarımıza ulaşın, evraklarınızı paylaşın. Hızlı bir ön değerlendirmeyle başlıyoruz.' },
    { n: '02', icon: 'cog', title: 'Süreç Yönetimi', body: 'Denklik incelemesi, sınav koordinasyonu ve yazışmaların tamamı bizim sorumluluğumuzda.' },
    { n: '03', icon: 'badge-check', title: 'Belge Teslimi', body: 'Üniversite onaylı sertifikanız E-Devlet üzerinde aktif edilir, fizikî kopya kargoyla teslim.' },
  ];
  const cardCls = cardStyle === 'outlined'
    ? `border ${dark ? 'border-white/10' : 'border-ink/10'}`
    : cardStyle === 'elevated'
    ? `${dark ? 'bg-white/5' : 'bg-white'} shadow-lg shadow-ink/5`
    : `${dark ? 'bg-white/5' : 'bg-paper-warm'}`;

  return (
    <section className={padY}>
      <div className="max-w-[1280px] mx-auto px-5 md:px-8">
        <div className="grid md:grid-cols-12 gap-8 mb-14">
          <div className="md:col-span-5">
            <div className={`text-[0.72rem] tracking-[0.2em] uppercase font-semibold text-vred mb-4`}>— Süreç</div>
            <h2 className={`font-display font-light text-[clamp(2.25rem,5vw,3.75rem)] leading-[1] tracking-[-0.025em] ${dark ? 'text-white' : 'text-ink'}`}>
              Üç adım. <em className="italic font-serif font-normal text-vred">Net süreç.</em> Belgeniz elinizde.
            </h2>
          </div>
          <div className="md:col-span-6 md:col-start-7 self-end">
            <p className={`text-[1rem] leading-relaxed ${dark ? 'text-white/65' : 'text-ink/65'}`}>
              Karmaşık bürokrasi sizi yormasın. Vizyon Gelişim Akademi danışmanları, başvurudan teslime kadar her aşamayı titizlikle yönetir.
            </p>
          </div>
        </div>

        <div className="grid md:grid-cols-3 gap-5 md:gap-6">
          {steps.map((s, i) => (
            <div key={s.n} className={`relative rounded-[22px] p-7 md:p-8 ${cardCls} transition-all hover:-translate-y-1`}>
              <div className="flex items-start justify-between mb-10">
                <span className={`font-display text-[2.4rem] leading-none font-light tracking-tight ${dark ? 'text-white/30' : 'text-ink/25'}`}>{s.n}</span>
                <div className={`w-11 h-11 rounded-full flex items-center justify-center ${dark ? 'bg-white/10' : 'bg-ink/8'}`}>
                  <i data-lucide={s.icon} className={`w-4.5 h-4.5 ${dark ? 'text-white' : 'text-ink'}`} style={{ width: 18, height: 18 }}></i>
                </div>
              </div>
              <h3 className={`font-display text-[1.4rem] tracking-tight font-medium mb-3 ${dark ? 'text-white' : 'text-ink'}`}>{s.title}</h3>
              <p className={`text-[0.95rem] leading-[1.55] ${dark ? 'text-white/60' : 'text-ink/60'}`}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProgramsPreview({ setPage, dark }) {
  const all = window.PROGRAMS;
  const [active, setActive] = useStateHome(0);
  const visible = 5; // visible items in the list at once
  const [listStart, setListStart] = useStateHome(0);

  // Auto-advance
  useEffectHome(() => {
    const t = setInterval(() => {
      setActive(i => {
        const next = (i + 1) % all.length;
        setListStart(s => {
          if (next < s) return next;
          if (next >= s + visible) return next - visible + 1;
          return s;
        });
        return next;
      });
    }, 4500);
    return () => clearInterval(t);
  }, []);

  const select = (i) => {
    setActive(i);
    if (i < listStart) setListStart(i);
    else if (i >= listStart + visible) setListStart(i - visible + 1);
  };

  const cur = all[active];
  const listSlice = all.slice(listStart, listStart + visible);

  return (
    <section className="py-20 md:py-28">
      <div className="max-w-[1280px] mx-auto px-5 md:px-8">
        <div className="grid lg:grid-cols-12 gap-10 lg:gap-14 items-stretch">
          {/* LEFT: heading + list */}
          <div className="lg:col-span-5 flex flex-col">
            <div className="text-[0.72rem] tracking-[0.2em] uppercase font-semibold text-vred mb-4">— Sertifika Programları</div>
            <h2 className={`font-display font-light text-[clamp(2.25rem,5vw,3.5rem)] leading-[1] tracking-[-0.025em] mb-5 ${dark ? 'text-white' : 'text-ink'}`}>
              Hangi belge<br/>
              <em className="italic font-serif font-normal text-vred">sizin için?</em>
            </h2>
            <p className={`text-[1rem] leading-[1.6] tracking-tight max-w-md mb-8 ${dark ? 'text-white/65' : 'text-ink/65'}`}>
              {all.length}+ meslekî alanda <span className={dark ? 'text-white' : 'text-ink'}>Kalfalık, Ustalık ve Usta Öğreticilik</span> belgesi alabilirsiniz. Her biri E-Devlet ve üniversite onaylı.
            </p>

            <div className="flex flex-col gap-2.5 mb-6">
              {listSlice.map((p, idx) => {
                const realIdx = listStart + idx;
                const isActive = realIdx === active;
                return (
                  <button
                    key={p.slug}
                    onClick={() => select(realIdx)}
                    className={`group flex items-center justify-between gap-4 px-5 py-3.5 rounded-xl border text-left transition-all ${
                      isActive
                        ? (dark ? 'bg-vred/15 border-vred/50' : 'bg-vred/8 border-vred/40')
                        : (dark ? 'bg-white/[0.03] border-white/10 hover:bg-white/[0.06]' : 'bg-white border-ink/10 hover:border-ink/25')
                    }`}
                  >
                    <div className="min-w-0">
                      <div className={`font-display text-[1rem] tracking-tight font-medium truncate ${isActive ? 'text-vred' : (dark ? 'text-white' : 'text-ink')}`}>{p.title}</div>
                      <div className={`text-[0.78rem] tracking-tight truncate mt-0.5 ${dark ? 'text-white/50' : 'text-ink/55'}`}>{p.subtitle}</div>
                    </div>
                    <i data-lucide="arrow-right" className={`w-4 h-4 shrink-0 transition-transform ${isActive ? 'text-vred translate-x-0.5' : (dark ? 'text-white/40' : 'text-ink/40 group-hover:translate-x-0.5')}`}></i>
                  </button>
                );
              })}
            </div>

            <div className="flex items-center gap-3">
              <button onClick={() => setPage('programs')}
                className="inline-flex items-center gap-2 px-5 py-3 rounded-full bg-vred text-white text-[0.92rem] font-semibold tracking-tight hover:bg-vred-dark transition-colors">
                Tüm Programları Gör
                <i data-lucide="arrow-right" className="w-3.5 h-3.5"></i>
              </button>
              {/* progress dots */}
              <div className="flex items-center gap-1.5 ml-2">
                {all.map((_, i) => (
                  <button key={i} onClick={() => select(i)}
                    aria-label={`Slide ${i + 1}`}
                    className={`h-1.5 rounded-full transition-all ${i === active ? 'w-5 bg-vred' : (dark ? 'w-1.5 bg-white/25 hover:bg-white/40' : 'w-1.5 bg-ink/20 hover:bg-ink/40')}`} />
                ))}
              </div>
            </div>
          </div>

          {/* RIGHT: big preview */}
          <div className="lg:col-span-7">
            <div className={`relative rounded-[24px] overflow-hidden aspect-[4/5] sm:aspect-[5/4] lg:aspect-[4/5] ${dark ? 'bg-white/5 border border-white/10' : 'bg-ink/5 border border-ink/8'} shadow-xl shadow-ink/10`}>
              {all.map((p, i) => (
                <div key={p.slug}
                  className="absolute inset-0 transition-opacity duration-500"
                  style={{ opacity: i === active ? 1 : 0, pointerEvents: i === active ? 'auto' : 'none' }}>
                  <img src={`assets/programs/${p.slug}.jpg`} alt={p.title}
                    className="w-full h-full object-cover" loading={i === 0 ? 'eager' : 'lazy'} />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/65 via-black/15 to-transparent" />
                </div>
              ))}

              {/* "Popüler" badge */}
              <div className="absolute bottom-32 left-5 sm:left-7 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-vred text-white text-[0.7rem] font-semibold tracking-tight">
                <i data-lucide="flame" className="w-3 h-3"></i>
                Popüler
              </div>

              {/* bottom title block */}
              <div className="absolute bottom-0 left-0 right-0 p-5 sm:p-7 text-white">
                <div className="font-display text-[1.4rem] sm:text-[1.7rem] leading-tight tracking-tight font-semibold">{cur.title}</div>
                <div className="font-serif italic text-[1rem] sm:text-[1.15rem] mt-0.5 text-white/85">{cur.subtitle}</div>
                <button onClick={() => setPage('contact')} className="mt-4 inline-flex items-center gap-2 text-[0.85rem] font-medium hover:underline">
                  Başvurmak için tıklayın
                  <i data-lucide="arrow-right" className="w-3.5 h-3.5"></i>
                </button>
              </div>

              {/* prev/next arrows */}
              <button onClick={() => select((active - 1 + all.length) % all.length)}
                aria-label="Önceki"
                className="absolute top-1/2 -translate-y-1/2 left-4 w-10 h-10 rounded-full bg-white/90 hover:bg-white text-ink flex items-center justify-center shadow-lg transition-all">
                <i data-lucide="chevron-left" className="w-4 h-4"></i>
              </button>
              <button onClick={() => select((active + 1) % all.length)}
                aria-label="Sonraki"
                className="absolute top-1/2 -translate-y-1/2 right-4 w-10 h-10 rounded-full bg-white/90 hover:bg-white text-ink flex items-center justify-center shadow-lg transition-all">
                <i data-lucide="chevron-right" className="w-4 h-4"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function BenefitsSection({ dark, cardStyle }) {
  const items = [
    { icon: 'trending-up', title: 'Kariyerde yükseliş', body: 'Ustalık belgesi olan personel, olmayan emsallerine göre %35 daha yüksek ücret talep edebiliyor.' },
    { icon: 'scale',       title: 'Yasal güvence',     body: 'Tehlikeli sınıftaki işlerde Kalfalık-Ustalık belgesi 6331 sayılı kanun gereği zorunludur.' },
    { icon: 'plane',       title: 'Yurt dışı geçerliliği', body: 'Üniversite akreditasyonu sayesinde vize ve denklik başvurularında resmî belge olarak kabul edilir.' },
    { icon: 'briefcase',   title: 'İhale ehliyeti',    body: 'Kamu ve özel ihalelerde "yetkili teknik personel" şartı için belge ibraz edilebilir.' },
  ];
  return (
    <section className={`py-20 md:py-28 ${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 md:sticky md:top-28 self-start">
            <div className="text-[0.72rem] tracking-[0.2em] uppercase font-semibold text-vred mb-4">— Neden belge?</div>
            <h2 className={`font-display font-light text-[clamp(2.25rem,5vw,3.75rem)] leading-[1] tracking-[-0.025em] ${dark ? 'text-white' : 'text-ink'}`}>
              Yalnızca bir kâğıt değil; <em className="italic font-serif font-normal text-vred">kariyerinizin yasal mührü.</em>
            </h2>
            <p className={`mt-6 text-[1rem] leading-relaxed max-w-md ${dark ? 'text-white/65' : 'text-ink/65'}`}>
              İhale dosyalarında, yurt dışı vize başvurularında ve iş başvurularında sizi rakiplerinizden ayıran resmî bir kanıt.
            </p>
          </div>

          <div className="md:col-span-7 grid sm:grid-cols-2 gap-4">
            {items.map(it => (
              <div key={it.title} className={`rounded-[20px] p-6 transition-all hover:-translate-y-1 ${dark ? 'bg-white/5 border border-white/10' : 'bg-white border border-ink/8'}`}>
                <div className="w-10 h-10 rounded-xl bg-vred/10 text-vred flex items-center justify-center mb-5">
                  <i data-lucide={it.icon} className="w-4.5 h-4.5" style={{ width: 18, height: 18 }}></i>
                </div>
                <h3 className={`font-display text-[1.15rem] tracking-tight font-medium mb-2 ${dark ? 'text-white' : 'text-ink'}`}>{it.title}</h3>
                <p className={`text-[0.92rem] leading-[1.55] ${dark ? 'text-white/60' : 'text-ink/60'}`}>{it.body}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function TestimonialsSection({ dark }) {
  const [idx, setIdx] = useStateHome(0);
  const t = window.TESTIMONIALS[idx];
  return (
    <section className="py-20 md:py-28">
      <div className="max-w-[1100px] mx-auto px-5 md:px-8 text-center">
        <div className="text-[0.72rem] tracking-[0.2em] uppercase font-semibold text-vred mb-5">— Aday sesleri</div>
        <blockquote className={`font-serif font-light italic text-[clamp(1.6rem,3.6vw,2.6rem)] leading-[1.25] tracking-tight max-w-3xl mx-auto ${dark ? 'text-white' : 'text-ink'}`}>
          "{t.quote}"
        </blockquote>
        <div className="mt-10 flex items-center justify-center gap-4">
          <div className="w-11 h-11 rounded-full bg-vred text-white flex items-center justify-center font-semibold text-[0.92rem] tracking-tight">{t.initials}</div>
          <div className="text-left">
            <div className={`font-medium tracking-tight ${dark ? 'text-white' : 'text-ink'}`}>{t.name}</div>
            <div className={`text-[0.85rem] ${dark ? 'text-white/55' : 'text-ink/55'}`}>{t.role}</div>
          </div>
        </div>
        <div className="mt-8 flex items-center justify-center gap-2">
          {window.TESTIMONIALS.map((_, i) => (
            <button key={i} onClick={() => setIdx(i)} className={`h-1.5 rounded-full transition-all ${i === idx ? 'w-8 bg-vred' : `w-1.5 ${dark ? 'bg-white/20' : 'bg-ink/15'}`}`} aria-label={`Aday ${i+1}`} />
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQSection({ dark }) {
  const [open, setOpen] = useStateHome(0);
  return (
    <section className={`py-20 md:py-28 ${dark ? 'bg-white/[0.02]' : 'bg-paper-warm'}`}>
      <div className="max-w-[920px] mx-auto px-5 md:px-8">
        <div className="text-center mb-12">
          <div className="text-[0.72rem] tracking-[0.2em] uppercase font-semibold text-vred mb-3">— S.S.S.</div>
          <h2 className={`font-display font-light text-[clamp(2.25rem,5vw,3.5rem)] leading-[1] tracking-[-0.025em] ${dark ? 'text-white' : 'text-ink'}`}>
            Sıkça sorulanlar.
          </h2>
        </div>
        <div className={`divide-y ${dark ? 'divide-white/10' : 'divide-ink/10'} border-y ${dark ? 'border-white/10' : 'border-ink/10'}`}>
          {window.FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} className="w-full flex items-center justify-between gap-6 py-6 text-left">
                  <span className={`font-display text-[1.15rem] md:text-[1.3rem] tracking-tight font-medium ${dark ? 'text-white' : 'text-ink'}`}>{f.q}</span>
                  <span className={`shrink-0 w-9 h-9 rounded-full flex items-center justify-center transition-all ${isOpen ? 'bg-vred text-white rotate-45' : (dark ? 'bg-white/10 text-white' : 'bg-ink/8 text-ink')}`}>
                    <i data-lucide="plus" className="w-4 h-4"></i>
                  </span>
                </button>
                {isOpen && (
                  <div className={`pb-6 text-[1rem] leading-relaxed max-w-2xl ${dark ? 'text-white/65' : 'text-ink/65'}`}>
                    {f.a}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ setPage, dark }) {
  return (
    <section className="py-20 md:py-28">
      <div className="max-w-[1280px] mx-auto px-5 md:px-8">
        <div className="relative rounded-[28px] overflow-hidden bg-vred text-white p-10 md:p-20">
          <div className="absolute inset-0 opacity-10" style={{ backgroundImage: 'radial-gradient(circle at 1px 1px, white 1px, transparent 0)', backgroundSize: '28px 28px' }} />
          <div className="absolute -top-20 -right-20 w-80 h-80 rounded-full bg-white/10 blur-3xl" />
          <div className="relative grid md:grid-cols-12 gap-8 items-center">
            <div className="md:col-span-7">
              <div className="text-[0.72rem] tracking-[0.2em] uppercase font-semibold text-white/70 mb-4">— İlk adım</div>
              <h2 className="font-display font-light text-[clamp(2.25rem,5.5vw,4.5rem)] leading-[1] tracking-[-0.025em]">
                Belgeniz için <em className="italic font-serif font-normal">bugün başlayın.</em>
              </h2>
              <p className="text-[1.05rem] text-white/80 leading-relaxed mt-6 max-w-lg">
                Ücretsiz ön değerlendirme — uygunluğunuzu 24 saat içinde bildiriyoruz, hiçbir taahhüt yok.
              </p>
            </div>
            <div className="md:col-span-5 flex flex-col gap-3">
              <button onClick={() => setPage('contact')} className="w-full inline-flex items-center justify-center gap-2 px-7 py-4 rounded-full bg-white text-vred font-semibold shadow-xl hover:scale-[1.02] transition-transform">
                Formu Doldur <i data-lucide="arrow-right" className="w-4 h-4"></i>
              </button>
              <a href="https://wa.me/905467635391" target="_blank" rel="noreferrer" className="w-full inline-flex items-center justify-center gap-2 px-7 py-4 rounded-full bg-white/15 border border-white/30 text-white font-semibold backdrop-blur-sm hover:bg-white/25 transition-colors">
                <i data-lucide="message-circle" className="w-4 h-4 text-[#25d366]"></i> WhatsApp ile Yaz
              </a>
              <a href="tel:+905467635391" className="text-center text-[0.92rem] text-white/85 mt-1">veya <strong className="font-semibold">(0546) 763 53 91</strong></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePage({ setPage, density, cardStyle, heroVariant, dark }) {
  const Hero = heroVariant === 'bold' ? HeroBold : HeroEditorial;
  const tickerItems = [
    'E-Devlet onaylı', 'Üniversite akreditasyonlu', 'Kalfalık · Ustalık · Usta Öğreticilik',
    'MYK uyumlu', '5.000+ aday', '81 ilde geçerli', 'Türkiye genelinde danışmanlık',
  ];
  return (
    <>
      <Hero setPage={setPage} density={density} dark={dark} />
      <Marquee items={tickerItems} dark={dark} />
      <ProcessSection setPage={setPage} dark={dark} density={density} cardStyle={cardStyle} />
      <ProgramsPreview setPage={setPage} dark={dark} />
      <BenefitsSection dark={dark} cardStyle={cardStyle} />
      <TestimonialsSection dark={dark} />
      <FAQSection dark={dark} />
      <FinalCTA setPage={setPage} dark={dark} />
    </>
  );
}

window.HomePage = HomePage;