// Brosis Enstitü — Shared Components
// Used by all pages: BrosisLogo, TopBar, MainNav, Footer, WhatsAppFAB, PageShell

const C = {
  primary: '#0F2747',
  accent: '#3DB8E8',
  soft: '#EAF6FB',
  warm: '#FFB23F',
  deep: '#081530',
  bg: '#F7F9FC',
  border: '#E5E9F0',
  muted: '#94A3B8',
  text: '#475569',
};

function BrosisLogo({ height = 40, mono = false }) {
  return (
    <img
      src="/assets/brosis-logo-official.png"
      alt="Brosis Enstitü"
      style={{ height, width: 'auto', objectFit: 'contain', display: 'block',
        filter: mono ? 'brightness(0) invert(1)' : 'none' }}
    />
  );
}

function AccreditationBadge({ label, sublabel, color }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8,
      padding: '4px 10px 4px 4px', background: '#fff',
      border: `1px solid ${C.border}`, borderRadius: 6 }}>
      <div style={{ width: 28, height: 28, background: color, borderRadius: 4,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: '#fff', fontSize: 9, fontWeight: 800 }}>
        {label === 'TÜRKAK' ? '★' : 'M'}
      </div>
      <div style={{ lineHeight: 1.1 }}>
        <div style={{ fontSize: 10, fontWeight: 700, color: C.primary }}>{label}</div>
        <div style={{ fontSize: 9, color: C.muted }}>{sublabel}</div>
      </div>
    </div>
  );
}

function TopBar() {
  const [mobile, setMobile] = React.useState(typeof window !== 'undefined' && window.innerWidth < 900);
  React.useEffect(() => {
    const onResize = () => setMobile(window.innerWidth < 900);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  if (mobile) return null;
  return (
    <div style={{ borderBottom: `1px solid ${C.border}`, padding: '10px 64px',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      fontSize: 13, color: C.text, background: '#fff' }}>
      <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
        <a href="tel:+905336365678" style={{ display: 'flex', alignItems: 'center', gap: 8, color: C.text, textDecoration: 'none' }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M2 3.5C2 2.67 2.67 2 3.5 2H4.5L6 5L4.5 6C5.33 7.83 6.17 8.67 8 9.5L9 8L12 9.5V10.5C12 11.33 11.33 12 10.5 12C5.81 12 2 8.19 2 3.5Z" stroke={C.accent} strokeWidth="1.5" strokeLinejoin="round"/>
          </svg>
          0533 636 56 78
        </a>
        <a href="mailto:info@brosisenstitu.com" style={{ display: 'flex', alignItems: 'center', gap: 8, color: C.text, textDecoration: 'none' }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <rect x="1.5" y="3" width="11" height="8" rx="1" stroke={C.accent} strokeWidth="1.5"/>
            <path d="M2 4L7 8L12 4" stroke={C.accent} strokeWidth="1.5" strokeLinejoin="round"/>
          </svg>
          info@brosisenstitu.com
        </a>
      </div>
      <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
        <AccreditationBadge label="TÜRKAK" sublabel="AB-0169-P" color="#C8102E" />
        <AccreditationBadge label="MYK" sublabel="YB-0166" color="#1E5BA8" />
      </div>
    </div>
  );
}

function MainNav({ activePage = 'anasayfa' }) {
  const [openMenu, setOpenMenu] = React.useState(null);
  const [mobile, setMobile] = React.useState(typeof window !== 'undefined' && window.innerWidth < 900);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [mobileSubOpen, setMobileSubOpen] = React.useState(null);
  React.useEffect(() => {
    const onResize = () => setMobile(window.innerWidth < 900);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  const navItems = [
    { id: 'anasayfa', label: 'Ana Sayfa', href: '/' },
    { id: 'kurumsal', label: 'Kurumsal', href: '/hakkimizda', children: [
      { label: 'Hakkımızda', href: '/hakkimizda' },
      { label: 'Yetki Belgeleri', href: '/yetki-belgeleri' },
    ]},
    { id: 'hizmetler', label: 'Hizmetlerimiz', href: '/tier1', children: [
      { label: 'Sorumlu Emlak Danışmanı (Seviye 5)', href: '/tier1' },
      { label: 'Motorlu Kara Taşıtları Sorumlusu (S5) — Yakında', href: '/motorlu-kara-tasitlari-mesleki-yeterlilik-belgesi' },
    ]},
    { id: 'programlar', label: 'Programlar', href: '/tier2', children: [
      { label: '— Tüm Programlar (82) →', href: '/tier2' },
      { label: 'Çelik Kaynakçısı', href: '/celik-kaynakcisi-mesleki-yeterlilik-belgesi' },
      { label: 'Su Yalıtımcısı', href: '/su-yalitimcisi-mesleki-yeterlilik-belgesi' },
      { label: 'Isı Yalıtımcısı', href: '/isi-yalitimcisi-mesleki-yeterlilik-belgesi' },
      { label: 'Betoncu', href: '/betoncu-mesleki-yeterlilik-belgesi' },
      { label: 'Sıvacı', href: '/sivaci-mesleki-yeterlilik-belgesi' },
      { label: 'Duvarcı', href: '/duvarci-mesleki-yeterlilik-belgesi' },
      { label: 'Elektrik Tesisatçısı', href: '/elektrik-tesisatcisi-mesleki-yeterlilik-belgesi' },
      { label: 'Sıhhi Tesisatçı', href: '/sihhi-tesisatci-mesleki-yeterlilik-belgesi' },
      { label: 'Kuaför', href: '/kuafor-mesleki-yeterlilik-belgesi' },
      { label: 'Güzellik Uzmanı', href: '/guzellik-uzmani-mesleki-yeterlilik-belgesi' },
      { label: 'Otomotiv Mekanikçisi', href: '/otomotiv-mekanikcisi-mesleki-yeterlilik-belgesi' },
      { label: 'Kuyumcu Perakende', href: '/kuyumcu-perakende-mesleki-yeterlilik-belgesi' },
      { label: 'Vale Görevlisi', href: '/vale-gorevlisi-mesleki-yeterlilik-belgesi' },
      { label: 'Servis Aracı Sürücüsü', href: '/servis-araci-surucusu-mesleki-yeterlilik-belgesi' },
    ]},
    { id: 'belgelendirme', label: 'Belgelendirme', href: '/belgelendirme', children: [
      { label: 'Online Başvuru', href: 'https://brosisenstitu.voc-tester.com/giris' },
      { label: 'Sınav Takvimi', href: 'https://brosisenstitu.voc-tester.com/web' },
      { label: 'Sınav Sonuçları', href: 'https://brosisenstitu.voc-tester.com/giris' },
      { label: 'Belge Sorgulama', href: 'https://brosisenstitu.voc-tester.com/belge-sorgulama' },
      { label: '— Bilgi Sayfaları', href: '/belgelendirme' },
      { label: 'Başvuru Şartları', href: '/basvuru-sartlari' },
      { label: 'Sınav Ücretleri', href: '/sinav-ucretleri' },
      { label: 'Sınav Kuralları', href: '/sinav-kurallari' },
      { label: 'Başvuru Değerlendirme Süreci', href: '/degerlendirme-sureci' },
      { label: 'İlgili Dökümanlar', href: '/ilgili-dokumanlar' },
      { label: 'Hesap Numaraları', href: '/hesap-numaralari' },
      { label: 'Birim Birleştirme', href: '/birim-birlestirme' },
      { label: 'İtiraz ve Şikayet', href: '/itiraz-sikayet' },
      { label: 'Engellilere Sağlanan Hizmetler', href: '/engelli-hizmetler' },
      { label: 'Sınav Konuları', href: '/sinav-konulari' },
      { label: 'Çalışma Soruları (ücretsiz)', href: '/calisma-sorulari' },
    ]},
    { id: 'akademi', label: 'Akademi', href: '/akademi' },
    { id: 'blog', label: 'Blog', href: '/blog' },
    { id: 'haberler', label: 'Haberler', href: '/haberler' },
    { id: 'kariyer', label: 'Kariyer', href: '/kariyer' },
    { id: 'iletisim', label: 'İletişim', href: '/iletisim' },
  ];
  if (mobile) {
    return (
      <div style={{ position: 'sticky', top: 0, zIndex: 100, background: '#fff', borderBottom: `1px solid ${C.border}`, boxShadow: '0 1px 0 #E5E9F0' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 20px' }}>
          <a href="/" style={{ textDecoration: 'none' }}><BrosisLogo height={48} /></a>
          <button onClick={() => setMobileOpen(o => !o)} aria-label="Menü"
            style={{ width: 40, height: 40, background: C.bg, border: `1px solid ${C.border}`, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', padding: 0 }}>
            {mobileOpen ? (
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 3L13 13M13 3L3 13" stroke={C.primary} strokeWidth="1.8" strokeLinecap="round"/></svg>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <div style={{ width: 16, height: 1.8, background: C.primary, borderRadius: 1 }} />
                <div style={{ width: 16, height: 1.8, background: C.primary, borderRadius: 1 }} />
                <div style={{ width: 12, height: 1.8, background: C.primary, borderRadius: 1 }} />
              </div>
            )}
          </button>
        </div>
        {mobileOpen && (
          <div style={{ borderTop: `1px solid ${C.border}`, background: '#fff', maxHeight: 'calc(100vh - 70px)', overflowY: 'auto' }}>
            {navItems.map(item => {
              const hasChildren = item.children && item.children.length > 0;
              const isOpen = mobileSubOpen === item.id;
              return (
                <div key={item.id}>
                  {hasChildren ? (
                    <button onClick={() => setMobileSubOpen(isOpen ? null : item.id)} style={{
                      width: '100%', textAlign: 'left', padding: '14px 20px',
                      fontSize: 15, fontWeight: item.id === activePage ? 700 : 500,
                      color: item.id === activePage ? C.accent : C.primary,
                      borderBottom: `1px solid ${C.border}`, background: 'none', border: 'none', borderRadius: 0,
                      cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    }}>
                      {item.label}
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" style={{ transform: isOpen ? 'rotate(180deg)' : 'none', transition: 'transform .15s' }}>
                        <path d="M2 4L6 8L10 4" stroke={C.muted} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                    </button>
                  ) : (
                    <a href={item.href} style={{
                      display: 'block', padding: '14px 20px',
                      fontSize: 15, fontWeight: item.id === activePage ? 700 : 500,
                      color: item.id === activePage ? C.accent : C.primary,
                      borderBottom: `1px solid ${C.border}`, textDecoration: 'none',
                    }}>{item.label}</a>
                  )}
                  {hasChildren && isOpen && (
                    <div style={{ background: C.bg, borderBottom: `1px solid ${C.border}` }}>
                      {item.children.map((child, i) => (
                        <a key={i} href={child.href} {...(child.href && child.href.startsWith('http') ? { target: '_blank', rel: 'noopener' } : {})} style={{
                          display: 'block', padding: '11px 32px', fontSize: 13,
                          color: C.text, textDecoration: 'none',
                          borderBottom: i < item.children.length - 1 ? `1px solid ${C.border}` : 'none',
                        }}>{child.label}</a>
                      ))}
                    </div>
                  )}
                </div>
              );
            })}
            <div style={{ padding: '16px 20px' }}>
              <a href="/aday-girisi" style={{
                display: 'block', textAlign: 'center', textDecoration: 'none',
                padding: '13px 18px', background: C.primary, color: '#fff',
                borderRadius: 10, fontSize: 14, fontWeight: 600,
              }}>Aday Girişi →</a>
            </div>
          </div>
        )}
      </div>
    );
  }

  return (
    <nav style={{ padding: '0 64px', display: 'flex', alignItems: 'center',
      justifyContent: 'space-between', background: '#fff',
      borderBottom: `1px solid ${C.border}`, height: 96, position: 'sticky', top: 0, zIndex: 100,
      boxShadow: '0 1px 0 #E5E9F0' }}>
      <a href="/" style={{ textDecoration: 'none' }}>
        <BrosisLogo height={72} />
      </a>
      <div style={{ display: 'flex', gap: 28, alignItems: 'center', height: '100%' }}>
        {navItems.map(item => {
          const hasChildren = item.children && item.children.length > 0;
          const isOpen = openMenu === item.id;
          return (
            <div key={item.id}
              onMouseEnter={() => hasChildren && setOpenMenu(item.id)}
              onMouseLeave={() => setOpenMenu(null)}
              style={{ position: 'relative', height: '100%', display: 'flex', alignItems: 'center' }}
            >
              <a href={item.href} style={{
                fontSize: 14, fontWeight: item.id === activePage ? 600 : 500,
                color: item.id === activePage ? C.primary : C.text,
                textDecoration: 'none', paddingBottom: 4,
                borderBottom: item.id === activePage ? `2px solid ${C.accent}` : '2px solid transparent',
                display: 'inline-flex', alignItems: 'center', gap: 4,
              }}>
                {item.label}
                {hasChildren && (
                  <svg width="10" height="10" viewBox="0 0 10 10" fill="none" style={{ transition: 'transform .15s', transform: isOpen ? 'rotate(180deg)' : 'rotate(0)' }}>
                    <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                )}
              </a>
              {hasChildren && isOpen && (
                <div style={{
                  position: 'absolute', top: '100%', left: -16, minWidth: 280,
                  background: '#fff', border: `1px solid ${C.border}`, borderRadius: 10,
                  boxShadow: '0 16px 40px rgba(15,39,71,0.12)', padding: '8px 0',
                  zIndex: 200,
                }}>
                  {item.children.map((child, i) => {
                    const isFeatured = child.label.startsWith('—');
                    const isFirstFeatured = isFeatured && i === 0;
                    const isLastFeatured = isFeatured && i === item.children.length - 1;
                    return (
                      <a key={i} href={child.href} {...(child.href && child.href.startsWith('http') ? { target: '_blank', rel: 'noopener' } : {})} style={{
                        display: 'block', padding: '10px 18px', fontSize: 13,
                        color: isFeatured ? C.accent : C.text,
                        textDecoration: 'none', fontWeight: isFeatured ? 700 : 500,
                        borderBottom: isFirstFeatured ? `1px solid ${C.border}` : 'none',
                        marginBottom: isFirstFeatured ? 6 : 0,
                        borderTop: isLastFeatured ? `1px solid ${C.border}` : 'none',
                        marginTop: isLastFeatured ? 6 : 0,
                      }} onMouseOver={e => e.currentTarget.style.background = C.bg}
                         onMouseOut={e => e.currentTarget.style.background = 'transparent'}
                      >{child.label}</a>
                    );
                  })}
                </div>
              )}
            </div>
          );
        })}
      </div>
      <a href="/aday-girisi" style={{
        padding: '11px 22px', background: C.primary, color: '#fff',
        border: 'none', borderRadius: 8, fontSize: 14, fontWeight: 600,
        cursor: 'pointer', textDecoration: 'none',
        display: 'inline-flex', alignItems: 'center', gap: 8,
      }}>
        Aday Girişi
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
          <path d="M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </a>
    </nav>
  );
}

function Breadcrumb({ items }) {
  return (
    <div style={{ padding: '14px 64px', background: C.bg, borderBottom: `1px solid ${C.border}`,
      display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: C.muted }}>
      {items.map((item, i) => (
        <React.Fragment key={i}>
          {i > 0 && <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
            <path d="M4.5 3L7.5 6L4.5 9" stroke={C.muted} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>}
          {item.href ? (
            <a href={item.href} style={{ color: C.muted, textDecoration: 'none' }}>{item.label}</a>
          ) : (
            <span style={{ color: C.primary, fontWeight: 600 }}>{item.label}</span>
          )}
        </React.Fragment>
      ))}
    </div>
  );
}

function Footer() {
  const [mobile, setMobile] = React.useState(typeof window !== 'undefined' && window.innerWidth < 900);
  React.useEffect(() => {
    const onResize = () => setMobile(window.innerWidth < 900);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  const cols = [
    { title: 'Hızlı Erişim', items: [
      { label: 'Online Başvuru', href: 'https://brosisenstitu.voc-tester.com/giris' },
      { label: 'Sınav Sonuçları', href: 'https://brosisenstitu.voc-tester.com/giris' },
      { label: 'Belge Sorgulama', href: 'https://brosisenstitu.voc-tester.com/belge-sorgulama' },
      { label: 'Hesap Numaraları', href: '/hesap-numaralari' },
      { label: 'İlgili Dökümanlar', href: '/ilgili-dokumanlar' },
      { label: 'SSS', href: '/sss' },
    ]},
    { title: 'Belgelendirme', items: [
      { label: 'Sınav Takvimi', href: 'https://brosisenstitu.voc-tester.com/web' },
      { label: 'Sınav Ücretleri', href: '/sinav-ucretleri' },
      { label: 'Başvuru Şartları', href: '/basvuru-sartlari' },
      { label: 'İtiraz / Şikayet', href: '/itiraz-sikayet' },
      { label: 'Sınav Yerleri', href: '/sinav-yerleri' },
      { label: 'Akademi', href: '/akademi' },
    ]},
    { title: 'İletişim', items: [
      { label: '0533 636 56 78', href: 'tel:+905336365678' },
      { label: '0216 606 23 44', href: 'tel:+902166062344' },
      { label: 'info@brosisenstitu.com', href: 'mailto:info@brosisenstitu.com' },
      { label: 'İçerenköy Mh. Huzur Hoca Cd. No:53/4 Ataşehir', href: '/iletisim' },
    ]},
  ];
  return (
    <footer style={{ background: C.deep, color: 'rgba(255,255,255,0.7)', padding: mobile ? '48px 20px 24px' : '64px 64px 32px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.4fr 1fr 1fr 1fr', gap: mobile ? 32 : 48, marginBottom: mobile ? 32 : 48 }}>
        <div>
          <BrosisLogo height={52} mono />
          <p style={{ fontSize: 14, lineHeight: 1.6, marginTop: 20, maxWidth: 300, color: 'rgba(255,255,255,0.6)' }}>
            TÜRKAK tarafından akredite (AB-0169-P), MYK yetkili (YB-0166) belgelendirme kuruluşu.
          </p>
          <div style={{ display: 'flex', gap: 8, marginTop: 20 }}>
            {['f', 'x', 'in', 'ig'].map(s => (
              <div key={s} style={{ width: 34, height: 34, borderRadius: 8,
                background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 12, fontWeight: 700, color: 'rgba(255,255,255,0.7)', cursor: 'pointer' }}>{s}</div>
            ))}
          </div>
        </div>
        {cols.map(col => (
          <div key={col.title}>
            <div style={{ fontSize: 13, fontWeight: 700, color: '#fff', marginBottom: 20, letterSpacing: '0.05em' }}>{col.title}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {col.items.map(item => (
                <a key={item.label} href={item.href} {...(item.href && item.href.startsWith('http') ? { target: '_blank', rel: 'noopener' } : {})} style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)', textDecoration: 'none' }}>{item.label}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{ paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.08)',
        display: 'flex', flexDirection: mobile ? 'column' : 'row', gap: mobile ? 14 : 0,
        justifyContent: 'space-between', alignItems: mobile ? 'flex-start' : 'center', fontSize: 12 }}>
        <div>© 2026 Brosis Enstitü Belgelendirme Ltd. Şti. · Vergi No: 5800437745</div>
        <div style={{ display: 'flex', gap: mobile ? 16 : 24, flexWrap: 'wrap' }}>
          {['KVKK','Çerez Politikası','Gizlilik','Site Haritası'].map(t => (
            <a key={t} href="#" style={{ color: 'rgba(255,255,255,0.4)', textDecoration: 'none' }}>{t}</a>
          ))}
        </div>
      </div>
    </footer>
  );
}

function WhatsAppFAB() {
  const [open, setOpen] = React.useState(false);
  const phone = '905336365678';
  const msg = encodeURIComponent('Merhaba, MYK belgelendirme hakkında bilgi almak istiyorum.');
  return (
    <div style={{ position: 'fixed', right: 24, bottom: 24, zIndex: 200,
      display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 12 }}>
      {open && (
        <div style={{ width: 290, background: '#fff', borderRadius: 16,
          boxShadow: '0 20px 60px rgba(15,39,71,0.25)', overflow: 'hidden',
          border: `1px solid ${C.border}`, animation: 'waPop 280ms cubic-bezier(0.34,1.56,0.64,1)' }}>
          <div style={{ background: '#075E54', padding: '14px 16px', color: '#fff',
            display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 38, height: 38, borderRadius: '50%', background: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 15, fontWeight: 800, color: C.primary }}>B</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 700 }}>Brosis Enstitü</div>
              <div style={{ fontSize: 11, opacity: 0.8 }}>● Genelde 5 dk içinde yanıtlar</div>
            </div>
            <button onClick={() => setOpen(false)} style={{ background: 'none', border: 'none',
              color: '#fff', fontSize: 20, cursor: 'pointer' }}>×</button>
          </div>
          <div style={{ padding: '18px 16px 12px', background: '#ECE5DD' }}>
            <div style={{ background: '#fff', padding: '10px 12px', borderRadius: '0 12px 12px 12px',
              fontSize: 13, color: C.primary, lineHeight: 1.5, maxWidth: '85%' }}>
              Merhaba 👋 Size nasıl yardımcı olabiliriz?
              <div style={{ fontSize: 10, color: C.muted, marginTop: 4, textAlign: 'right' }}>şimdi</div>
            </div>
          </div>
          <a href={`https://wa.me/${phone}?text=${msg}`} target="_blank" rel="noopener"
            style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              padding: '13px 16px', background: '#25D366', color: '#fff',
              fontSize: 14, fontWeight: 700, textDecoration: 'none' }}>
            WhatsApp'tan Yaz
          </a>
        </div>
      )}
      <button onClick={() => setOpen(o => !o)} style={{ width: 58, height: 58, borderRadius: '50%',
        background: '#25D366', border: 'none', cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 8px 24px rgba(37,211,102,0.45)' }}>
        {open ? <span style={{ fontSize: 26, color: '#fff', lineHeight: 1 }}>×</span> :
          <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff">
            <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.2-.7.2-.2.3-.8.9-.9 1.1-.2.2-.3.2-.6.1-.3-.2-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3z"/>
            <path d="M12 2C6.5 2 2 6.5 2 12c0 1.7.4 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.2c-1.5 0-3-.4-4.3-1.2l-.3-.2-3.1.8.8-3-.2-.3c-.9-1.4-1.3-3-1.3-4.6 0-4.5 3.7-8.2 8.2-8.2s8.2 3.7 8.2 8.2-3.6 8.5-8 8.5z"/>
          </svg>}
      </button>
      <style>{`@keyframes waPop { from { opacity:0; transform:translateY(8px) scale(.95); } to { opacity:1; transform:none; } }`}</style>
    </div>
  );
}

function PageShell({ activePage, children, breadcrumb }) {
  return (
    <div style={{ width: '100%', minHeight: '100vh', background: C.bg,
      fontFamily: "'Inter', sans-serif", color: C.primary, display: 'flex', flexDirection: 'column' }}>
      <style>{`
        @media (max-width: 900px) {
          /* Section padding'leri küçült (inline style substring match) */
          main div[style*="padding: 72px 64px"],
          main div[style*="padding: 64px 64px"],
          main div[style*="padding: 80px 64px"],
          main div[style*="padding: 96px 64px"],
          main div[style*="padding: 56px 64px"],
          main div[style*="padding: 48px 64px"],
          main div[style*="padding: 40px 64px"],
          main div[style*="padding: 36px 64px"],
          main div[style*="padding: 64px"],
          main div[style*="padding: 80px"],
          main div[style*="padding: 96px"],
          main div[style*="0 64px"],
          main .section-pad { padding: 36px 18px !important; }
          /* Hero başlık fontu */
          main h1 { font-size: 32px !important; line-height: 1.15 !important; }
          main h2 { font-size: 24px !important; line-height: 1.2 !important; }
          /* Grid → tek sütun */
          main div[style*="grid-template-columns"][style*="1fr 1fr 1fr 1fr"],
          main div[style*="grid-template-columns"][style*="1fr 1fr 1fr"],
          main div[style*="grid-template-columns"][style*="repeat(4"],
          main div[style*="grid-template-columns"][style*="repeat(3"],
          main div[style*="grid-template-columns"][style*="1.1fr 1fr"],
          main div[style*="grid-template-columns"][style*="1.3fr 1fr"],
          main div[style*="grid-template-columns"][style*="1.4fr"],
          main div[style*="grid-template-columns"][style*="380px"],
          main div[style*="grid-template-columns"][style*="420px"],
          main div[style*="grid-template-columns"][style*="repeat(12"] {
            grid-template-columns: 1fr !important;
            gap: 14px !important;
          }
          /* Sticky kaldır */
          main div[style*="position: sticky"] { position: static !important; }
          /* Breadcrumb */
          main > div[style*="0 64px"] { padding: 12px 18px !important; }
        }
        @media (max-width: 560px) {
          main h1 { font-size: 26px !important; }
          main h2 { font-size: 20px !important; }
          main div[style*="grid-template-columns"][style*="1fr 1fr"] {
            grid-template-columns: 1fr !important;
          }
        }
      `}</style>
      <TopBar />
      <MainNav activePage={activePage} />
      {breadcrumb && <Breadcrumb items={breadcrumb} />}
      <main style={{ flex: 1 }}>{children}</main>
      <Footer />
      <WhatsAppFAB />
    </div>
  );
}

// Export all to window
Object.assign(window, { C, BrosisLogo, TopBar, MainNav, Footer, WhatsAppFAB, PageShell, Breadcrumb, AccreditationBadge });