/* =====================================================================
   Brodemy · Landing
   Anasayfa — hero, 3 dikey, tier'lar, featured courses, 8 meslek,
   why Brodemy, vendor CTA, social proof, CTA band.
   ===================================================================== */

function Hero({ onAuth, onRoute }) {
  return (
    <section className="relative pt-8 md:pt-12 pb-16 md:pb-24 overflow-hidden">
      <Container>
        <div className="grid lg:grid-cols-[1.05fr_0.95fr] gap-12 lg:gap-16 items-center">
          {/* LEFT */}
          <div>
            <div className="inline-flex items-center gap-2.5 px-3.5 py-1.5 rounded-full bg-mist border border-rule mb-6">
              <span className="w-1.5 h-1.5 rounded-full bg-accent-400 shadow-[0_0_10px_rgba(224,162,58,0.6)]"></span>
              <span className="text-[11px] font-semibold tracking-[0.06em] text-brand-700 uppercase">Türkiye'nin mesleki gelişim platformu</span>
            </div>
            <h1 className="font-display font-bold text-[clamp(40px,7vw,84px)] leading-[0.95] tracking-[-0.045em] text-ink text-balance mb-6">
              Mesleğini öğren,<br/>
              belgelendir, <em className="text-accent-400 font-medium" style={{ fontStyle: 'normal' }}>iş bul</em>.
            </h1>
            <p className="text-lg leading-[1.55] text-fg-2 max-w-[540px] mb-8">
              Tek hesap, tek site, tek ödeme noktası — üç kazanç kanalı. Eğitimin, MYK belgen ve yurtdışı kariyerin Brodemy'de buluşur.
            </p>
            <div className="flex flex-wrap gap-3 mb-12">
              <Button variant="primary" size="lg" iconRight="arrow" onClick={() => onRoute && onRoute('catalog')}>
                Kursları Keşfet
              </Button>
              <Button variant="outline" size="lg" icon="play">
                Nasıl çalışır?
              </Button>
            </div>

            {/* Stat strip */}
            <div className="grid grid-cols-3 gap-6 md:gap-8 pt-8 border-t border-rule">
              <div>
                <div className="font-display font-bold text-3xl md:text-4xl tracking-[-0.03em] text-ink">120+</div>
                <div className="text-[12px] text-fg-3 mt-1 font-medium">Kurs · 8 meslek</div>
              </div>
              <div>
                <div className="font-display font-bold text-3xl md:text-4xl tracking-[-0.03em] text-ink">18</div>
                <div className="text-[12px] text-fg-3 mt-1 font-medium">Akademi vendor</div>
              </div>
              <div>
                <div className="font-display font-bold text-3xl md:text-4xl tracking-[-0.03em] text-ink">6.400+</div>
                <div className="text-[12px] text-fg-3 mt-1 font-medium">Mezun · 2024–2026</div>
              </div>
            </div>
          </div>

          {/* RIGHT — cross-sell journey stack */}
          <HeroJourney />
        </div>
      </Container>
    </section>
  );
}

function HeroJourney() {
  return (
    <div className="relative h-[560px] hidden lg:block">
      {/* Glow */}
      <div className="absolute inset-0 -m-12 rounded-[40px] opacity-50 blur-3xl"
           style={{ background: 'radial-gradient(circle at 50% 50%, rgba(37,36,116,0.15), transparent 70%)' }}></div>

      {/* Card 1: Kurs */}
      <div className="absolute top-0 right-12 w-[340px] bg-white border border-rule rounded-[18px] shadow-[0_24px_60px_rgba(19,24,43,0.08)] overflow-hidden rotate-[-2deg] hover:rotate-0 transition-transform duration-500">
        <div className="course-cover aspect-[16/10] relative p-3.5 flex flex-col justify-between text-white"
             style={{ '--cover-img': 'url(https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=600&q=70)' }}>
          <div className="flex justify-between">
            <TierBadge tier="pro" size="sm" />
            <ProfPill prof="emlak" variant="glass" size="sm" />
          </div>
          <div className="text-[10px] font-semibold tracking-[0.08em] uppercase opacity-85">Mart 2026 · 28/40</div>
        </div>
        <div className="p-4">
          <div className="text-[10px] font-mono uppercase tracking-[0.10em] text-fg-3 font-semibold mb-1.5">1. Eğitim</div>
          <div className="font-display font-semibold text-[15px] leading-[1.2] tracking-[-0.02em] text-ink">Sorumlu Emlak Danışmanı</div>
          <div className="flex justify-between items-end mt-3 pt-2.5 border-t border-rule">
            <div className="font-display font-bold text-[17px] text-ink">8.900 ₺</div>
            <div className="text-[11px] text-brand-600 font-semibold">8 hafta</div>
          </div>
        </div>
      </div>

      {/* Arrow 1 → 2 */}
      <div className="absolute top-[180px] right-[145px] z-10">
        <div className="w-9 h-9 rounded-full bg-accent-400 grid place-items-center shadow-[var(--shadow-accent)]">
          <Icon name="arrowDn" size={16} />
        </div>
      </div>

      {/* Card 2: Belge */}
      <div className="absolute top-[220px] right-0 w-[330px] bg-white border border-rule rounded-[18px] shadow-[0_24px_60px_rgba(19,24,43,0.08)] overflow-hidden rotate-[1.5deg] hover:rotate-0 transition-transform duration-500">
        <div className="p-4 bg-gradient-to-br from-accent-50 via-paper to-mist border-b border-rule">
          <div className="flex justify-between items-start">
            <div>
              <div className="text-[10px] font-mono uppercase tracking-[0.10em] text-brand-700 font-semibold mb-1.5">2. Belge</div>
              <div className="font-display font-semibold text-[15px] leading-[1.2] tracking-[-0.02em] text-ink mb-1">Sorumlu Emlak Danışmanı</div>
              <div className="text-[11px] text-fg-2">MYK Belgesi · seviye 5</div>
            </div>
            <div className="w-10 h-10 rounded-full bg-accent-400/20 grid place-items-center text-accent-600">
              <Icon name="award" size={20} strokeWidth={1.5} />
            </div>
          </div>
        </div>
        <div className="p-4 flex justify-between items-center">
          <div>
            <div className="text-[10px] font-mono uppercase tracking-[0.10em] text-fg-3 font-semibold mb-0.5">Vendor</div>
            <div className="text-[12px] font-medium text-ink">TURKAK akredite MYK firması</div>
          </div>
          <div className="text-right">
            <div className="font-display font-bold text-[17px] text-ink">16.500 ₺</div>
            <div className="text-[10px] text-fg-3">sınav + belge</div>
          </div>
        </div>
      </div>

      {/* Arrow 2 → 3 */}
      <div className="absolute top-[400px] right-[145px] z-10">
        <div className="w-9 h-9 rounded-full bg-accent-400 grid place-items-center shadow-[var(--shadow-accent)]">
          <Icon name="arrowDn" size={16} />
        </div>
      </div>

      {/* Card 3: İş */}
      <div className="absolute bottom-0 right-16 w-[340px] bg-brand-500 text-paper border border-brand-700 rounded-[18px] shadow-[0_24px_60px_rgba(37,36,116,0.40)] overflow-hidden rotate-[-1.5deg] hover:rotate-0 transition-transform duration-500">
        <div className="p-4">
          <div className="flex justify-between items-start mb-3">
            <div>
              <div className="text-[10px] font-mono uppercase tracking-[0.10em] text-accent-300 font-semibold mb-1.5">3. İş</div>
              <div className="font-display font-semibold text-[15px] leading-[1.2] tracking-[-0.02em]">Münih · Emlak Danışmanı</div>
              <div className="text-[11px] opacity-80 mt-0.5">Engel &amp; Völkers · DE</div>
            </div>
            <div className="px-2 py-0.5 rounded text-[9px] font-bold uppercase tracking-[0.08em] bg-accent-400 text-ink">Yurtdışı</div>
          </div>
          <div className="flex justify-between items-end pt-3 border-t border-white/15">
            <div>
              <div className="font-display font-bold text-[20px] tracking-[-0.025em]">€3.200<span className="text-[12px] opacity-70">/ay</span></div>
              <div className="text-[10px] opacity-70 mt-0.5">+ komisyon · vize destekli</div>
            </div>
            <div className="text-[11px] font-semibold text-accent-300 flex items-center gap-1">Başvur <Icon name="arrowR" size={12} /></div>
          </div>
        </div>
      </div>

      {/* Side label */}
      <div className="absolute -left-2 top-1/2 -translate-y-1/2 -rotate-90 origin-center">
        <div className="text-[10px] font-mono uppercase tracking-[0.18em] text-fg-3 font-semibold whitespace-nowrap">Tek hesap, üç adım</div>
      </div>
    </div>
  );
}

// ── 3 Vertical intro ──────────────────────────────────────────────
function VerticalIntros({ onRoute }) {
  const items = [
    { id: 'egitim',     icon: 'graduation', title: 'Eğitim', desc: 'Brodemy Akademisi + 18 3rd-party akademi. Plus / Pro / Meslek Okulu tier\'leri.', cta: 'Kursları gör', color: 'brand' },
    { id: 'credential', icon: 'award',      title: 'Belgelendirme', desc: 'MYK belgelendirme firmaları + üniversite SEM\'leri tek katalogta.', cta: 'Belgeleri gör', color: 'accent' },
    { id: 'career',     icon: 'brief',      title: 'Career', desc: 'Yurtiçi işverenler + yurtdışı recruitment ajansları. İş garantili programlar.', cta: 'İş ara', color: 'brand' },
  ];
  return (
    <Section className="bg-mist/40">
      <Container>
        <div className="grid md:grid-cols-3 gap-4 md:gap-5">
          {items.map((it, i) => (
            <div key={it.id} className="group relative bg-white border border-rule rounded-[20px] p-6 md:p-8 hover:shadow-[var(--shadow-card-hover)] hover:border-brand-300 transition-all duration-300">
              <div className="absolute top-6 right-6 font-mono text-[11px] font-semibold text-fg-3 tracking-[0.08em]">0{i+1}</div>
              <div className={`w-12 h-12 rounded-[14px] grid place-items-center mb-5 ${it.color === 'accent' ? 'bg-accent-100 text-accent-700' : 'bg-brand-50 text-brand-600'}`}>
                <Icon name={it.icon} size={22} strokeWidth={1.6} />
              </div>
              <h3 className="font-display font-semibold text-[26px] leading-[1.1] tracking-[-0.025em] text-ink mb-3">{it.title}</h3>
              <p className="text-[14px] text-fg-2 leading-[1.55] mb-6">{it.desc}</p>
              <a href="#" onClick={(e) => { e.preventDefault(); onRoute && onRoute('catalog'); }}
                 className="inline-flex items-center gap-1.5 text-[13px] font-semibold text-brand-600 group-hover:text-accent-500 transition-colors">
                {it.cta} <Icon name="arrowR" size={14} className="transition-transform group-hover:translate-x-1" />
              </a>
            </div>
          ))}
        </div>
      </Container>
    </Section>
  );
}

// ── 3 Tier showcase ───────────────────────────────────────────────
function TierShowcase({ onRoute }) {
  const tiers = [
    {
      tier: 'plus', name: 'Plus', tagline: 'Hızlı kazanım, esnek tempo',
      desc: 'Self-paced kurslar, eğitmenli ama bireysel. 2–6 haftalık programlar.',
      features: ['Anında erişim', 'Brodemy mezuniyet sertifikası', 'Forum erişimi', '1 yıl tekrar izleme'],
      from: '1.500 ₺',
      sample: { name: 'Konut Satış Müzakere Teknikleri', dur: '4 hafta · 18 ders' },
    },
    {
      tier: 'pro', name: 'Pro', tagline: 'Kohortlu, taahhütlü',
      desc: 'Eğitmen + mentor + canlı oturumlar. MYK belgesine hazırlık dahil.',
      features: ['Canlı oturum 2x/hafta', 'Mentor 1:1 görüşmeler', 'MYK belgesine hazırlık', 'Kohort topluluğu'],
      from: '4.500 ₺',
      sample: { name: 'Sorumlu Emlak Danışmanı MYK', dur: '8 hafta · 32 ders' },
      featured: true,
    },
    {
      tier: 'mo', name: 'Meslek Okulu', tagline: '90 gün iş garantili',
      desc: 'Yeni meslek edinme programı. Mezuniyet sonrası 90 gün içinde iş garantisi.',
      features: ['Tam zamanlı eğitim', 'Yurtdışı recruitment desteği', 'Vize danışmanlığı', '90 gün iş garantisi'],
      from: '12.000 ₺',
      sample: { name: 'Yaşlı Bakım Elemanı — Almanya', dur: '12 hafta · 60 ders' },
    },
  ];
  return (
    <Section>
      <Container>
        <div className="max-w-[680px] mb-12">
          <div className="text-[11px] font-mono uppercase tracking-[0.16em] text-brand-700 font-semibold mb-3">3 Katmanlı Eğitim Modeli</div>
          <h2 className="font-display font-bold text-4xl md:text-5xl leading-[0.98] tracking-[-0.035em] text-ink mb-4 text-balance">
            Mesleğine göre tempo, hedefe göre <em className="text-accent-500 font-medium" style={{ fontStyle: 'normal' }}>derinlik</em>.
          </h2>
          <p className="text-lg text-fg-2 leading-[1.55]">
            Aynı meslek için üç farklı yoğunlukta program. Hızlı sertifika mı, kohortlu derinlik mi, iş garantili kariyer değiştirme mi — sen seç.
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-4 md:gap-5">
          {tiers.map(t => {
            const tierC = `var(--tier-${t.tier})`;
            const tierSoft = `var(--tier-${t.tier}-soft)`;
            const tierDeep = `var(--tier-${t.tier}-deep)`;
            return (
              <div key={t.tier}
                   className={`relative bg-white border-2 rounded-[20px] p-6 md:p-7 transition-all hover:shadow-[var(--shadow-card-hover)] ${t.featured ? 'border-brand-500 shadow-[var(--shadow-primary-lg)] md:scale-[1.02]' : 'border-rule hover:border-brand-200'}`}>
                {t.featured && (
                  <div className="absolute -top-3 left-6 px-3 py-1 bg-brand-500 text-paper text-[10px] font-mono font-semibold tracking-[0.12em] uppercase rounded">
                    En çok tercih edilen
                  </div>
                )}
                <div className="flex items-start justify-between mb-5">
                  <TierBadge tier={t.tier} />
                  <div className="font-mono text-[10px] text-fg-3 font-semibold">tier · {t.tier}</div>
                </div>
                <h3 className="font-display font-bold text-3xl leading-[1] tracking-[-0.025em] text-ink mb-1.5">{t.name}</h3>
                <div className="text-[13px] text-fg-2 mb-5">{t.tagline}</div>
                <p className="text-[14px] text-fg-2 leading-[1.55] mb-6 min-h-[64px]">{t.desc}</p>

                <ul className="space-y-2.5 mb-6">
                  {t.features.map(f => (
                    <li key={f} className="flex items-start gap-2.5 text-[13px] text-ink">
                      <div className="w-4 h-4 rounded-full grid place-items-center flex-shrink-0 mt-0.5" style={{ background: tierSoft, color: tierDeep }}>
                        <Icon name="check" size={11} strokeWidth={3} />
                      </div>
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>

                <div className="pt-5 border-t border-rule">
                  <div className="text-[11px] text-fg-3 font-mono uppercase tracking-[0.06em] mb-1">Örnek kurs</div>
                  <div className="text-[13px] font-semibold text-ink leading-snug">{t.sample.name}</div>
                  <div className="text-[11px] text-fg-3 mt-0.5">{t.sample.dur}</div>
                </div>

                <div className="mt-5 flex items-center justify-between">
                  <div>
                    <div className="text-[11px] text-fg-3">Başlangıç</div>
                    <div className="font-display font-bold text-xl text-ink tracking-[-0.025em]">{t.from}</div>
                  </div>
                  <Button variant={t.featured ? 'primary' : 'outline'} size="sm" iconRight="arrow" onClick={() => onRoute && onRoute('catalog')}>İncele</Button>
                </div>
              </div>
            );
          })}
        </div>
      </Container>
    </Section>
  );
}

// ── Featured courses ──────────────────────────────────────────────
function FeaturedCourses({ onRoute }) {
  const courses = SAMPLE_COURSES.slice(0, 4);
  return (
    <Section className="bg-mist/40">
      <Container>
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-10">
          <div>
            <div className="text-[11px] font-mono uppercase tracking-[0.16em] text-brand-700 font-semibold mb-3">Öne çıkan kurslar</div>
            <h2 className="font-display font-bold text-4xl md:text-5xl leading-[0.98] tracking-[-0.035em] text-ink text-balance">
              Bu hafta <em className="text-accent-500 font-medium" style={{ fontStyle: 'normal' }}>başlayan</em> kohortlar.
            </h2>
          </div>
          <Button variant="outline" size="md" iconRight="arrow" onClick={() => onRoute && onRoute('catalog')}>Tümünü Gör</Button>
        </div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {courses.map(c => <CourseCard key={c.id} course={c} onClick={() => onRoute && onRoute('course-detail')} />)}
        </div>
      </Container>
    </Section>
  );
}

// ── 8 Meslek grid ─────────────────────────────────────────────────
function MeslekGrid({ onRoute }) {
  const meslekler = [
    { id: 'emlak',    name: 'Emlak',    count: '12 kurs · 3 belge',      icon: 'building',   color: '#3DB8E8' },
    { id: 'insaat',   name: 'İnşaat',   count: '18 kurs · 5 belge',      icon: 'hammer',     color: '#F59E0B' },
    { id: 'hizmet',   name: 'Hizmet',   count: '24 kurs · 8 belge',      icon: 'brief',      color: '#10B981' },
    { id: 'guzellik', name: 'Güzellik', count: '16 kurs · 4 belge',      icon: 'scissors',   color: '#EC4899' },
    { id: 'saglik',   name: 'Sağlık',   count: '10 kurs · 6 belge · iş', icon: 'heart',      color: '#DC2626' },
    { id: 'ulasim',   name: 'Ulaşım',   count: '8 kurs · 4 belge',       icon: 'truck',      color: '#6366F1' },
    { id: 'satis',    name: 'Satış',    count: '14 kurs · 2 belge',      icon: 'trending',   color: '#8B5CF6' },
    { id: 'teknik',   name: 'Teknik',   count: '20 kurs · 6 belge',      icon: 'wrench',     color: '#64748B' },
  ];
  return (
    <Section>
      <Container>
        <div className="max-w-[680px] mb-10">
          <div className="text-[11px] font-mono uppercase tracking-[0.16em] text-brand-700 font-semibold mb-3">8 Meslek Kategorisi</div>
          <h2 className="font-display font-bold text-4xl md:text-5xl leading-[0.98] tracking-[-0.035em] text-ink mb-3 text-balance">
            Mesleğini seç, <em className="text-accent-500 font-medium" style={{ fontStyle: 'normal' }}>yolun</em> başlasın.
          </h2>
          <p className="text-lg text-fg-2">8 ana meslek kategorisi · 120+ kurs · 38 MYK belge programı.</p>
        </div>

        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 md:gap-4">
          {meslekler.map(m => (
            <a key={m.id} href="#" onClick={(e) => { e.preventDefault(); onRoute && onRoute('catalog'); }}
               className="group bg-white border border-rule rounded-[16px] p-5 hover:shadow-[var(--shadow-card-hover)] hover:-translate-y-0.5 transition-all duration-200 relative overflow-hidden">
              <div className="absolute -right-6 -top-6 w-24 h-24 rounded-full opacity-[0.08] group-hover:opacity-[0.12] transition-opacity" style={{ background: m.color }}></div>
              <div className="relative">
                <div className="w-11 h-11 rounded-[12px] grid place-items-center mb-4 text-white" style={{ background: m.color }}>
                  <Icon name={m.icon} size={20} strokeWidth={1.6} />
                </div>
                <h3 className="font-display font-semibold text-[18px] leading-[1.1] tracking-[-0.02em] text-ink mb-1">{m.name}</h3>
                <div className="text-[12px] text-fg-3">{m.count}</div>
              </div>
            </a>
          ))}
        </div>
      </Container>
    </Section>
  );
}

// ── Why Brodemy ───────────────────────────────────────────────────
function WhyBrodemy() {
  const reasons = [
    { num: '01', title: 'Multi-vendor şeffaflık', desc: 'Tek bir akademinin değil, 18 farklı eğitim sağlayıcısının kurslarını yan yana karşılaştırırsın. Vendor adı her zaman görünür.', icon: 'shield' },
    { num: '02', title: 'MYK belgeli', desc: 'Pro ve Meslek Okulu tier kursları doğrudan MYK belgesine hazırlar. Kurs + belge tek pakette satın alınabilir.', icon: 'award' },
    { num: '03', title: 'Türkiye yereli',  desc: 'Çeviri olmayan, sıfırdan Türkiye için tasarlanmış bir platform. Türkçe içerik, Türk lirası, KVKK uyumlu.', icon: 'globe' },
    { num: '04', title: 'Yurtdışı iş bağlantısı', desc: 'Avrupa, Körfez, Kuzey Amerika\'da iş arayan üyelere doğrudan recruitment ajansları ile köprü. Vize danışmanlığı dahil.', icon: 'brief' },
  ];
  return (
    <Section className="bg-ink text-paper relative overflow-hidden">
      <div className="absolute inset-0 pointer-events-none" style={{
        background: 'radial-gradient(900px 600px at 80% 30%, rgba(224,162,58,0.10), transparent 60%), radial-gradient(700px 500px at 10% 80%, rgba(37,36,116,0.30), transparent 60%)'
      }}></div>
      <Container className="relative">
        <div className="max-w-[760px] mb-14">
          <div className="text-[11px] font-mono uppercase tracking-[0.16em] text-accent-400 font-semibold mb-3">Neden Brodemy?</div>
          <h2 className="font-display font-bold text-4xl md:text-5xl leading-[0.98] tracking-[-0.035em] text-paper text-balance">
            Coursera'nın klinik beyazlığı değil. <em className="text-accent-400 font-medium" style={{ fontStyle: 'normal' }}>Burası senin için.</em>
          </h2>
        </div>
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {reasons.map(r => (
            <div key={r.num} className="bg-slate-800/40 border border-slate-700 backdrop-blur-sm rounded-[16px] p-6">
              <div className="flex justify-between items-start mb-5">
                <div className="w-11 h-11 rounded-[12px] bg-accent-400 text-ink grid place-items-center">
                  <Icon name={r.icon} size={20} strokeWidth={1.6} />
                </div>
                <div className="font-mono text-[11px] font-semibold text-slate-500 tracking-[0.08em]">{r.num}</div>
              </div>
              <h3 className="font-display font-semibold text-[20px] leading-[1.15] tracking-[-0.02em] mb-2 text-paper">{r.title}</h3>
              <p className="text-[13px] text-slate-300 leading-[1.55]">{r.desc}</p>
            </div>
          ))}
        </div>
      </Container>
    </Section>
  );
}

// ── Vendor CTA ────────────────────────────────────────────────────
function VendorCTA() {
  return (
    <Section>
      <Container>
        <div className="bg-gradient-to-br from-accent-50 via-paper to-mist border border-accent-200 rounded-[24px] p-8 md:p-12 grid md:grid-cols-[1.4fr_1fr] gap-8 items-center">
          <div>
            <div className="text-[11px] font-mono uppercase tracking-[0.16em] text-accent-700 font-semibold mb-3">Vendor olarak katıl</div>
            <h2 className="font-display font-bold text-3xl md:text-4xl leading-[1] tracking-[-0.03em] text-ink mb-3 text-balance">
              Akademi mi yönetiyorsun? <em className="text-brand-600 font-medium" style={{ fontStyle: 'normal' }}>MYK belgelendirme</em> mi yapıyorsun?
            </h2>
            <p className="text-[15px] text-fg-2 leading-[1.55] mb-6 max-w-[480px]">
              Brodemy storefront aç, kendi marka kimliğin ile sat. Komisyon %15'ten başlar. PayTR + Bunny entegrasyonu hazır.
            </p>
            <div className="flex flex-wrap gap-3">
              <Button variant="primary" size="lg" iconRight="arrow">Başvur</Button>
              <Button variant="outline" size="lg">Komisyon yapısı</Button>
            </div>
          </div>
          <div className="hidden md:block">
            <div className="grid grid-cols-2 gap-3">
              <div className="bg-white rounded-[14px] p-5 border border-rule">
                <div className="font-display font-bold text-3xl tracking-[-0.025em] text-brand-600">%15</div>
                <div className="text-[12px] text-fg-2 mt-1">başlangıç komisyon</div>
              </div>
              <div className="bg-white rounded-[14px] p-5 border border-rule">
                <div className="font-display font-bold text-3xl tracking-[-0.025em] text-brand-600">18</div>
                <div className="text-[12px] text-fg-2 mt-1">aktif vendor</div>
              </div>
              <div className="bg-white rounded-[14px] p-5 border border-rule">
                <div className="font-display font-bold text-3xl tracking-[-0.025em] text-brand-600">14g</div>
                <div className="text-[12px] text-fg-2 mt-1">onboarding süresi</div>
              </div>
              <div className="bg-white rounded-[14px] p-5 border border-rule">
                <div className="font-display font-bold text-3xl tracking-[-0.025em] text-brand-600">T+7</div>
                <div className="text-[12px] text-fg-2 mt-1">ödeme aktarımı</div>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </Section>
  );
}

// ── Social proof ──────────────────────────────────────────────────
function SocialProof() {
  const reviews = [
    {
      name: 'Hatice G.', role: 'Mezun · Yaşlı Bakım MO', rating: 5,
      body: 'Almanya yerleştirmem 90 günden önce oldu. Brodemy hem kursta hem vizede yanımdaydı. Şimdi Stuttgart\'ta çalışıyorum.',
      city: 'Stuttgart, DE',
    },
    {
      name: 'Mehmet Y.', role: 'Eğitmen · Brodemy Akademi', rating: 5,
      body: 'Kendi kohortumdaki 28 kişi ile günlük diyalog kurdum. Mentor 1:1 sistemi gerçekten işliyor — Coursera\'da hiç böyle bir bağ olmamıştı.',
      city: 'İstanbul, TR',
    },
    {
      name: 'Ayşe K.', role: 'Mezun · Sorumlu Emlak Pro', rating: 5,
      body: 'MYK belgesini de aynı yerden aldım, sınava da Brodemy hazırladı. Üç ayrı yerden koşturmak yerine tek hesap, tek ödeme.',
      city: 'İzmir, TR',
    },
  ];
  return (
    <Section className="bg-mist/40">
      <Container>
        <div className="max-w-[680px] mb-12">
          <div className="text-[11px] font-mono uppercase tracking-[0.16em] text-brand-700 font-semibold mb-3">Mezunlardan</div>
          <h2 className="font-display font-bold text-4xl md:text-5xl leading-[0.98] tracking-[-0.035em] text-ink mb-3 text-balance">
            6.400+ mezun. <em className="text-accent-500 font-medium" style={{ fontStyle: 'normal' }}>Üçünden okuyalım.</em>
          </h2>
        </div>

        <div className="grid md:grid-cols-3 gap-4">
          {reviews.map((r, i) => (
            <div key={i} className="bg-white border border-rule rounded-[20px] p-6 md:p-7 flex flex-col">
              <div className="flex gap-0.5 text-accent-400 mb-4">
                {Array.from({ length: r.rating }).map((_, j) => <Icon key={j} name="star" size={16} fill="currentColor" strokeWidth={0} />)}
              </div>
              <p className="text-[15px] leading-[1.55] text-ink mb-6 flex-1">"{r.body}"</p>
              <div className="pt-4 border-t border-rule flex items-center gap-3">
                <div className="w-11 h-11 rounded-full bg-mist grid place-items-center text-brand-600 font-display font-semibold text-[16px]">{r.name.split(' ').map(s => s[0]).join('')}</div>
                <div>
                  <div className="font-semibold text-[14px] text-ink">{r.name}</div>
                  <div className="text-[12px] text-fg-3">{r.role} · {r.city}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </Section>
  );
}

// ── Final CTA band ────────────────────────────────────────────────
function CTABand({ onAuth }) {
  return (
    <Section className="bg-brand-500 text-paper relative overflow-hidden">
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute -right-32 -top-32 w-[480px] h-[480px] rounded-full opacity-30 blur-3xl" style={{ background: '#E0A23A' }}></div>
        <div className="absolute -left-32 -bottom-32 w-[480px] h-[480px] rounded-full opacity-20 blur-3xl" style={{ background: '#8B5CF6' }}></div>
      </div>
      <Container className="relative">
        <div className="text-center max-w-[800px] mx-auto py-8">
          <div className="text-[11px] font-mono uppercase tracking-[0.16em] text-accent-400 font-semibold mb-5">Hemen başla</div>
          <h2 className="font-display font-bold text-5xl md:text-6xl leading-[0.95] tracking-[-0.04em] mb-6 text-balance">
            Mesleğini öğren,<br/><em className="text-accent-400 font-medium" style={{ fontStyle: 'normal' }}>30 saniyede başla</em>.
          </h2>
          <p className="text-lg leading-[1.55] mb-8 max-w-[540px] mx-auto text-slate-300">
            Hesap oluştur, bedava önizleme dersleri izle, hazır olduğunda Plus, Pro veya Meslek Okulu programına başla.
          </p>
          <div className="flex flex-wrap gap-3 justify-center">
            <Button variant="accent" size="lg" iconRight="arrow" onClick={() => onAuth && onAuth('register')}>Hesap Oluştur</Button>
            <Button variant="inverse" size="lg" onClick={() => onAuth && onAuth('login')}>Giriş Yap</Button>
          </div>
        </div>
      </Container>
    </Section>
  );
}

// ── Landing root ──────────────────────────────────────────────────
function LandingPage({ onAuth, onRoute }) {
  return (
    <div data-screen-label="Landing">
      <Hero onAuth={onAuth} onRoute={onRoute} />
      <VerticalIntros onRoute={onRoute} />
      <TierShowcase onRoute={onRoute} />
      <FeaturedCourses onRoute={onRoute} />
      <MeslekGrid onRoute={onRoute} />
      <WhyBrodemy />
      <VendorCTA />
      <SocialProof />
      <CTABand onAuth={onAuth} />
    </div>
  );
}

Object.assign(window, { LandingPage });