const __NAV_MAP = {"Ana Sayfa": "/", "Anasayfa": "/", "Kurumsal": "/hakkimizda", "Hakkımızda": "/hakkimizda", "Hizmetlerimiz": "/tier1", "Hizmetler": "/tier1", "Belgelendirme": "/belgelendirme", "Akademi": "/akademi", "Kariyer": "/kariyer", "Araçlar": "/araclar", "İletişim": "/iletisim", "Programlar": "/tier2", "Başvuru": "/basvuru", "Belge Sorgula": "/belge-sorgula", "Belge Sorgulama": "/belge-sorgula", "Emlak Danışmanı": "/tier1", "Sorumlu Danışman": "/tier1", "Emlak Brokeri": "/tier1"};

// Brosis Enstitü — Full Mobile Homepage v3
// Tüm desktop section'ların mobil uyarlaması
// Sections: MobileNav · Hero · HızlıErişim · WhyBrosis · Programs · FAQ · CTA · Footer · WhatsAppFAB

function MobileHomepage({ palette = 'navy' }) {
  const colors = {
    navy:  { primary: '#0F2747', accent: '#3DB8E8', soft: '#EAF6FB', warm: '#FFB23F', deep: '#081530' },
    royal: { primary: '#1E3A8A', accent: '#F97316', soft: '#FFF4EC', warm: '#3DB8E8', deep: '#0F2451' },
    teal:  { primary: '#0F2747', accent: '#10B981', soft: '#E8F7F0', warm: '#FFB23F', deep: '#081530' },
  }[palette];

  return (
    <div style={{ width: '100%', background: '#F7F9FC', fontFamily: "'Inter', sans-serif", color: colors.primary }}>
      <MobileNav colors={colors} />
      <MobileHero colors={colors} />
      <MobileStats colors={colors} />
      <MobileHizliErisim colors={colors} />
      <MobilePrograms colors={colors} />
      <MobileWhyBrosis colors={colors} />
      <MobileGoogleReviews colors={colors} />
      <MobileFAQ colors={colors} />
      <MobileCTA colors={colors} />
      <MobileFooter colors={colors} />
      <MobileWhatsAppFAB />
    </div>
  );
}

// ── NAV ──────────────────────────────────────────────────────────────────────
function MobileNav({ colors }) {
  const [open, setOpen] = React.useState(false);
  const items = ['Ana Sayfa', 'Kurumsal', 'Hizmetlerimiz', 'Programlar', 'Belgelendirme', 'Akademi', 'Kariyer', 'İletişim'];
  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 100, background: '#fff', borderBottom: '1px solid #E5E9F0' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 20px' }}>
        <img src="assets/brosis-logo-official.png" alt="Brosis Enstitü" style={{ height: 30, objectFit: 'contain' }} />
        <button
          onClick={() => setOpen(o => !o)}
          style={{ width: 38, height: 38, background: '#F7F9FC', border: '1px solid #E5E9F0', borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', padding: 0 }}
        >
          {open ? (
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 3L13 13M13 3L3 13" stroke={colors.primary} strokeWidth="1.8" strokeLinecap="round"/></svg>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              <div style={{ width: 16, height: 1.8, background: colors.primary, borderRadius: 1 }} />
              <div style={{ width: 16, height: 1.8, background: colors.primary, borderRadius: 1 }} />
              <div style={{ width: 12, height: 1.8, background: colors.primary, borderRadius: 1 }} />
            </div>
          )}
        </button>
      </div>
      {open && (
        <div style={{ borderTop: '1px solid #E5E9F0', background: '#fff' }}>
          {items.map((item, i) => (
            <a key={item} href={__NAV_MAP[item] || "#"} style={{
              display: 'block', padding: '13px 20px',
              fontSize: 14, fontWeight: i === 0 ? 700 : 500,
              color: i === 0 ? colors.accent : colors.primary,
              borderBottom: '1px solid #F1F5F9',
              textDecoration: 'none',
            }}>{item}</a>
          ))}
          <div style={{ padding: '14px 20px' }}>
            <a href="/aday-girisi" style={{
              display: 'block', textAlign: 'center', textDecoration: 'none',
              width: '100%', padding: '13px 18px', background: colors.primary, color: '#fff',
              border: 'none', borderRadius: 10, fontSize: 14, fontWeight: 600,
            }}>Aday Girişi →</a>
          </div>
        </div>
      )}
    </div>
  );
}

// ── HERO ─────────────────────────────────────────────────────────────────────
function MobileHero({ colors }) {
  const phrases = [
    { line1: 'Sertifikan,', line2: 'kariyerinin', accent: 'en sağlam', line3: 'temeli.' },
    { line1: 'MYK belgesi,', line2: '', accent: '7 günde', line3: 'elinde.' },
    { line1: 'Mesleki yeterlilik,', line2: '', accent: 'belgeli güvence', line3: '.' },
  ];
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % phrases.length), 4000);
    return () => clearInterval(t);
  }, []);
  const p = phrases[idx];

  return (
    <div style={{ padding: '28px 20px 24px', background: '#fff', borderBottom: '1px solid #E5E9F0' }}>
      {/* Akreditasyon pill */}
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: '5px 12px 5px 5px', background: '#F7F9FC', border: '1px solid #E5E9F0',
        borderRadius: 999, marginBottom: 18,
      }}>
        <span style={{ background: colors.accent, color: '#fff', padding: '3px 8px', borderRadius: 999, fontSize: 9, fontWeight: 800, letterSpacing: '0.08em' }}>TÜRKAK</span>
        <span style={{ fontSize: 11, fontWeight: 600, color: colors.primary }}>AB-0169-P Akredite</span>
      </div>

      {/* Başlık */}
      <div key={idx} style={{ animation: 'mHeroFadeUp 600ms cubic-bezier(.2,.7,.2,1) both' }}>
        <h1 style={{ fontSize: 42, fontWeight: 800, lineHeight: 1.0, letterSpacing: '-0.035em', margin: '0 0 16px', color: colors.primary }}>
          {p.line1}<br />
          {p.line2 && <>{p.line2}<br /></>}
          <span style={{
            background: `linear-gradient(120deg, transparent 0% 28%, ${colors.accent}55 28% 94%, transparent 94%)`,
            padding: '0 3px',
          }}>{p.accent}</span>{p.line3}
        </h1>
      </div>
      <style>{`@keyframes mHeroFadeUp { from { opacity:0; transform:translateY(10px);} to {opacity:1;transform:none;}}`}</style>

      <p style={{ fontSize: 14, lineHeight: 1.6, color: '#475569', margin: '0 0 20px' }}>
        MYK adına Türkiye genelinde sınav ve belgelendirme yapan resmi yetkili kuruluş. 2018'den bu yana güvenilir.
      </p>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 20 }}>
        <a href="https://brosisenstitu.voc-tester.com/giris" target="_blank" rel="noopener" style={{
          padding: '15px 18px', background: colors.primary, color: '#fff',
          border: 'none', borderRadius: 10, fontSize: 14, fontWeight: 600, cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          textDecoration: 'none',
        }}>
          <span>Online sınav başvurusu</span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8H13M13 8L8.5 3.5M13 8L8.5 12.5" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </a>
        <a href="/belge-sorgula" style={{
          padding: '14px 18px', background: '#fff', color: colors.primary,
          border: '1px solid #E5E9F0', borderRadius: 10, fontSize: 14, fontWeight: 600, cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          textDecoration: 'none',
        }}>
          <span>Belge sorgula</span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="4.5" stroke={colors.primary} strokeWidth="1.5"/><path d="M10.5 10.5L13 13" stroke={colors.primary} strokeWidth="1.5" strokeLinecap="round"/></svg>
        </a>
      </div>

      {/* Sertifika önizleme */}
      <div style={{
        background: `linear-gradient(135deg, ${colors.primary} 0%, ${colors.deep} 100%)`,
        borderRadius: 16, padding: '20px', color: '#fff', position: 'relative', overflow: 'hidden',
      }}>
        <svg style={{ position: 'absolute', right: -40, bottom: -40, opacity: 0.08 }} width="180" height="180" viewBox="0 0 180 180">
          <circle cx="90" cy="90" r="85" stroke={colors.accent} strokeWidth="1" fill="none"/>
          <circle cx="90" cy="90" r="55" stroke={colors.accent} strokeWidth="1" fill="none"/>
        </svg>
        <div style={{ fontSize: 9, letterSpacing: '0.18em', opacity: 0.55, fontWeight: 700, marginBottom: 6, textTransform: 'uppercase' }}>Mesleki Yeterlilik Belgesi</div>
        <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 24, lineHeight: 1.1, marginBottom: 14 }}>
          Emlak Danışmanı <span style={{ color: colors.accent, fontStyle: 'italic' }}>Seviye 5</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 12, borderTop: '1px solid rgba(255,255,255,0.12)', alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 9, opacity: 0.45, letterSpacing: '0.1em' }}>VERİLİŞ</div>
            <div style={{ fontSize: 12, fontWeight: 700, marginTop: 2 }}>14.03.2024</div>
          </div>
          <div>
            <div style={{ fontSize: 9, opacity: 0.45, letterSpacing: '0.1em' }}>GEÇERLİLİK</div>
            <div style={{ fontSize: 12, fontWeight: 700, marginTop: 2 }}>14.03.2029</div>
          </div>
          <div style={{
            width: 32, height: 32, borderRadius: '50%',
            background: `${colors.accent}25`, border: `1.5px solid ${colors.accent}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7L6 10L11 4" stroke={colors.accent} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
        </div>
      </div>

      {/* Headline dots */}
      <div style={{ display: 'flex', gap: 6, marginTop: 16, justifyContent: 'center' }}>
        {phrases.map((_, i) => (
          <div key={i} style={{
            width: i === idx ? 20 : 6, height: 6, borderRadius: 999,
            background: i === idx ? colors.accent : '#E5E9F0',
            transition: 'all 350ms ease',
          }} />
        ))}
      </div>
    </div>
  );
}

// ── STATS ─────────────────────────────────────────────────────────────────────
function MobileStats({ colors }) {
  const stats = [
    { val: '10.000+', label: 'Belgelendirilen' },
    { val: '5 Yıl', label: 'Belge Geçerliliği' },
    { val: '7 Gün', label: 'Ortalama Süreç' },
    { val: '4.9 ★', label: 'Google Puanı' },
  ];
  return (
    <div style={{ background: '#fff', borderBottom: '1px solid #E5E9F0' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr' }}>
        {stats.map((s, i) => (
          <div key={i} style={{
            padding: '16px 10px', textAlign: 'center',
            borderRight: i < 3 ? '1px solid #E5E9F0' : 'none',
          }}>
            <div style={{ fontSize: 17, fontWeight: 800, color: colors.accent, letterSpacing: '-0.02em', lineHeight: 1 }}>{s.val}</div>
            <div style={{ fontSize: 10, color: '#94A3B8', marginTop: 4, fontWeight: 500, lineHeight: 1.3 }}>{s.label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── HIZLI ERİŞİM ──────────────────────────────────────────────────────────────
function MobileHizliErisim({ colors }) {
  const links = [
    { label: 'Online Başvuru', desc: 'Formu doldur, hemen başvur', icon: 'form', primary: true, href: 'https://brosisenstitu.voc-tester.com/giris', external: true },
    { label: 'Sınav Takvimi', desc: 'Yaklaşan sınav tarihleri', icon: 'cal', href: 'https://brosisenstitu.voc-tester.com/web', external: true },
    { label: 'Belge Sorgula', desc: 'Sertifika geçerliliği', icon: 'search', href: '/belge-sorgula' },
    { label: 'Sınav Ücretleri', desc: 'Güncel ücret tarifesi', icon: 'card', href: '/sinav-ucretleri' },
    { label: 'Akademi', desc: 'Online eğitim & hazırlık', icon: 'hat', href: '/akademi' },
    { label: 'Yetki Belgelerimiz', desc: 'TÜRKAK & MYK belgeler', icon: 'shield', href: '/yetki-belgeleri' },
  ];
  const Icon = ({ name, color }) => {
    if (name === 'form') return <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M4 3H14L18 7V19H4V3Z" stroke={color} strokeWidth="1.6" strokeLinejoin="round"/><path d="M14 3V7H18M7 10H15M7 13H11" stroke={color} strokeWidth="1.6" strokeLinecap="round"/></svg>;
    if (name === 'cal') return <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><rect x="2" y="4" width="18" height="16" rx="2" stroke={color} strokeWidth="1.6"/><path d="M7 2V6M15 2V6M2 10H20" stroke={color} strokeWidth="1.6" strokeLinecap="round"/><path d="M6 14H7M11 14H12M16 14H17M6 17H7M11 17H12" stroke={color} strokeWidth="1.8" strokeLinecap="round"/></svg>;
    if (name === 'search') return <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><circle cx="10" cy="10" r="7" stroke={color} strokeWidth="1.6"/><path d="M15.5 15.5L19 19" stroke={color} strokeWidth="1.8" strokeLinecap="round"/><path d="M8 10L10 12L13 8" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>;
    if (name === 'card') return <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><rect x="2" y="5" width="18" height="12" rx="2" stroke={color} strokeWidth="1.6"/><path d="M2 9H20" stroke={color} strokeWidth="1.6"/><path d="M6 13H9M13 13H16" stroke={color} strokeWidth="1.6" strokeLinecap="round"/></svg>;
    if (name === 'hat') return <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M11 4L20 9L11 14L2 9L11 4Z" stroke={color} strokeWidth="1.6" strokeLinejoin="round"/><path d="M5 11V16C5 16 8 19 11 19C14 19 17 16 17 16V11" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/><path d="M20 9V14" stroke={color} strokeWidth="1.6" strokeLinecap="round"/></svg>;
    return <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M11 2L19 5V11C19 15.5 15.5 19 11 20C6.5 19 3 15.5 3 11V5L11 2Z" stroke={color} strokeWidth="1.6" strokeLinejoin="round"/><path d="M8 11L10 13L14 9" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>;
  };

  return (
    <div style={{ padding: '32px 20px', background: '#fff', borderBottom: '1px solid #E5E9F0' }}>
      <div style={{ marginBottom: 20 }}>
        <div style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: colors.accent, fontWeight: 700, marginBottom: 8 }}>Hızlı Erişim</div>
        <h2 style={{ fontSize: 26, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.03em', margin: 0 }}>
          İhtiyacın olan her şey,{' '}
          <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontWeight: 400, color: colors.accent }}>tek tıkla.</span>
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {links.map((item, i) => (
          <a key={i} href={item.href} {...(item.external ? { target: '_blank', rel: 'noopener' } : {})} style={{
            padding: '18px 16px',
            background: item.primary ? colors.primary : '#F7F9FC',
            color: item.primary ? '#fff' : colors.primary,
            border: item.primary ? 'none' : '1px solid #E5E9F0',
            borderRadius: 14, cursor: 'pointer', textAlign: 'left',
            display: 'flex', flexDirection: 'column', gap: 10,
            position: 'relative', overflow: 'hidden',
            textDecoration: 'none',
          }}>
            {item.primary && (
              <svg style={{ position: 'absolute', right: -20, bottom: -20, opacity: 0.1 }} width="90" height="90" viewBox="0 0 90 90">
                <circle cx="45" cy="45" r="42" stroke={colors.accent} strokeWidth="1" fill="none"/>
              </svg>
            )}
            <div style={{
              width: 38, height: 38, borderRadius: 10,
              background: item.primary ? 'rgba(255,255,255,0.15)' : `${colors.accent}18`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name={item.icon} color={item.primary ? '#fff' : colors.accent} />
            </div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '-0.01em', marginBottom: 3 }}>{item.label}</div>
              <div style={{ fontSize: 11, lineHeight: 1.4, color: item.primary ? 'rgba(255,255,255,0.6)' : '#94A3B8' }}>{item.desc}</div>
            </div>
          </a>
        ))}
      </div>
    </div>
  );
}

// ── PROGRAMS ──────────────────────────────────────────────────────────────────
function MobilePrograms({ colors }) {
  const programs = [
    { code: 'A1', name: 'Sorumlu Emlak Danışmanı', level: 'Seviye 5', duration: '1 gün', featured: true, href: '/tier1' },
    { code: 'A2', name: 'Emlak Danışmanı', level: 'Seviye 4', duration: '1 gün', href: '/emlak-danismani-mesleki-yeterlilik-belgesi' },
    { code: 'B1', name: 'Çelik Kaynakçısı', level: 'Seviye 3', duration: '1 gün', href: '/celik-kaynakcisi-mesleki-yeterlilik-belgesi' },
  ];
  return (
    <div style={{ padding: '32px 20px', background: '#F7F9FC', borderBottom: '1px solid #E5E9F0' }}>
      <div style={{ marginBottom: 20 }}>
        <div style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: colors.accent, fontWeight: 700, marginBottom: 8 }}>Programlarımız</div>
        <h2 style={{ fontSize: 26, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.03em', margin: 0 }}>
          Emlak sektörünün{' '}
          <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontWeight: 400, color: colors.accent }}>her seviyesi.</span>
        </h2>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {programs.map(p => (
          <a key={p.code} href={p.href} style={{
            padding: '20px', background: p.featured ? colors.primary : '#fff',
            color: p.featured ? '#fff' : colors.primary,
            borderRadius: 14, border: p.featured ? 'none' : '1px solid #E5E9F0',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            textDecoration: 'none',
          }}>
            <div>
              <div style={{ fontSize: 10, letterSpacing: '0.15em', fontWeight: 700, opacity: 0.55, marginBottom: 5, textTransform: 'uppercase' }}>
                {p.code} · {p.level}
              </div>
              <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 20, lineHeight: 1.1 }}>{p.name}</div>
              <div style={{ fontSize: 11, marginTop: 4, opacity: 0.6, fontWeight: 500 }}>Süre: {p.duration}</div>
            </div>
            <div style={{
              width: 36, height: 36, borderRadius: '50%', flexShrink: 0,
              background: p.featured ? colors.accent : '#F7F9FC',
              border: p.featured ? 'none' : '1px solid #E5E9F0',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <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={p.featured ? colors.primary : colors.primary} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </div>
          </a>
        ))}
      </div>
      <a href="/tier2" style={{
        width: '100%', marginTop: 14, padding: '13px 18px',
        background: 'transparent', color: colors.primary,
        border: `1px solid ${colors.primary}`, borderRadius: 10,
        fontSize: 14, fontWeight: 600, cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        textDecoration: 'none', boxSizing: 'border-box',
      }}>
        Tüm programlar
        <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={colors.primary} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
      </a>
    </div>
  );
}

// ── WHY BROSIS ────────────────────────────────────────────────────────────────
function MobileWhyBrosis({ colors }) {
  const features = [
    { t: 'TÜRKAK Akreditasyonu', d: 'AB-0169-P numarasıyla resmi akredite.', icon: 'shield' },
    { t: 'MYK Yetkili', d: '85 sayılı kararla YB-0166 koduyla yetkili.', icon: 'star' },
    { t: 'Hızlı Süreç', d: 'Ortalama 7 iş günü içinde tamamlanır.', icon: 'clock' },
    { t: 'Online Sınav', d: 'Teknolojik altyapıyla esnek sınav imkânı.', icon: 'monitor' },
  ];
  const Icon = ({ name, color }) => {
    if (name === 'shield') return <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M11 2L19 5V11C19 15.5 15.5 19 11 20C6.5 19 3 15.5 3 11V5L11 2Z" stroke={color} strokeWidth="1.7" strokeLinejoin="round"/><path d="M7.5 11L10 13.5L14.5 8.5" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>;
    if (name === 'star') return <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M11 2L13.5 8.5L20 9.5L15.5 14L16.5 20.5L11 17.5L5.5 20.5L6.5 14L2 9.5L8.5 8.5L11 2Z" stroke={color} strokeWidth="1.7" strokeLinejoin="round"/></svg>;
    if (name === 'clock') return <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><circle cx="11" cy="11" r="9" stroke={color} strokeWidth="1.7"/><path d="M11 6V11L14.5 13" stroke={color} strokeWidth="1.7" strokeLinecap="round"/></svg>;
    return <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><rect x="2" y="4" width="18" height="12" rx="1.5" stroke={color} strokeWidth="1.7"/><path d="M7 20H15M11 16V20" stroke={color} strokeWidth="1.7" strokeLinecap="round"/></svg>;
  };
  return (
    <div style={{ padding: '32px 20px', background: '#fff', borderBottom: '1px solid #E5E9F0' }}>
      <div style={{ marginBottom: 20 }}>
        <div style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: colors.accent, fontWeight: 700, marginBottom: 8 }}>Neden Brosis</div>
        <h2 style={{ fontSize: 26, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.03em', margin: '0 0 12px' }}>
          On binlerce profesyonelin{' '}
          <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontWeight: 400, color: colors.accent }}>tercihi.</span>
        </h2>
        <p style={{ fontSize: 13, lineHeight: 1.6, color: '#475569', margin: '0 0 16px' }}>
          2018'den bu yana TÜRKAK akreditasyonu ve MYK yetkisiyle Türkiye genelinde mesleki yeterlilik sınavları gerçekleştiriyoruz.
        </p>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {['TÜRKAK', 'MYK', 'ISO/IEC 17024'].map(b => (
            <div key={b} style={{ padding: '7px 12px', background: '#F7F9FC', border: '1px solid #E5E9F0', borderRadius: 8, fontSize: 11, fontWeight: 700, letterSpacing: '0.05em' }}>{b}</div>
          ))}
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {features.map((f, i) => (
          <div key={i} style={{ padding: '18px 16px', background: '#F7F9FC', border: '1px solid #E5E9F0', borderRadius: 14 }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: `${colors.accent}15`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
              <Icon name={f.icon} color={colors.accent} />
            </div>
            <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 4, letterSpacing: '-0.01em' }}>{f.t}</div>
            <div style={{ fontSize: 11, color: '#475569', lineHeight: 1.5 }}>{f.d}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── GOOGLE REVIEWS ────────────────────────────────────────────────────────────
function MobileGoogleReviews({ colors }) {
  const FALLBACK = [{ name:'Yorum yükleniyor...', initial:'…', avatarBg:'#94A3B8', time:'', text:'Yorumlar yükleniyor.' }];
  const AV = ['#E11D48','#7C3AED','#0891B2','#16A34A','#EA580C','#0F766E'];
  const [data, setData] = React.useState({ rating: null, total: null, reviews: FALLBACK });
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    fetch('/api/google-reviews').then(x => x.json()).then(d => {
      if (!d || !d.reviews?.length) return;
      const reviews = d.reviews.map((rv,i) => ({
        name: rv.author || 'Anonim',
        initial: (rv.author || '?').trim().charAt(0).toUpperCase(),
        avatarBg: AV[i % AV.length],
        avatar: rv.avatar,
        time: rv.relative || '',
        text: rv.text || '',
      }));
      setData({ rating: d.rating, total: d.total, reviews });
    }).catch(() => {});
  }, []);
  React.useEffect(() => {
    if (data.reviews.length < 2) return;
    const t = setInterval(() => setActive(i => (i + 1) % data.reviews.length), 5000);
    return () => clearInterval(t);
  }, [data.reviews.length]);
  const r = data.reviews[active] || FALLBACK[0];
  const reviews = data.reviews;
  const ratingDisplay = data.rating != null ? data.rating.toFixed(1) : '5.0';
  const totalDisplay = data.total != null ? `${data.total} yorum · Doğrulanmış` : '— · Doğrulanmış';
  return (
    <div style={{ padding: '32px 20px', background: '#F7F9FC', borderBottom: '1px solid #E5E9F0' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
        <svg width="24" height="24" viewBox="0 0 48 48">
          <path fill="#4285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z"/>
          <path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z"/>
          <path fill="#FBBC05" d="M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24c0 3.55.85 6.91 2.34 9.88l7.35-5.7z"/>
          <path fill="#EA4335" d="M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7C13.42 14.62 18.27 10.75 24 10.75z"/>
        </svg>
        <div>
          <div style={{ fontSize: 13, fontWeight: 700, color: colors.primary }}>Google İşletme Yorumları</div>
          <div style={{ fontSize: 10, color: '#94A3B8' }}>{totalDisplay}</div>
        </div>
        <div style={{ marginLeft: 'auto', textAlign: 'right' }}>
          <div style={{ fontSize: 22, fontWeight: 800, color: colors.primary, letterSpacing: '-0.02em', lineHeight: 1 }}>{ratingDisplay}</div>
          <div style={{ display: 'flex', gap: 1, justifyContent: 'flex-end', marginTop: 2 }}>
            {[1,2,3,4,5].map(i => <svg key={i} width="10" height="10" viewBox="0 0 24 24" fill="#FBBC05"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>)}
          </div>
        </div>
      </div>
      <div key={active} style={{
        background: '#fff', borderRadius: 14, padding: '20px',
        border: '1px solid #E5E9F0',
        animation: 'mReviewFade 500ms ease both',
      }}>
        <style>{`@keyframes mReviewFade { from {opacity:0;transform:translateY(6px);} to {opacity:1;transform:none;}}`}</style>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
          <div style={{ width: 36, height: 36, borderRadius: '50%', background: r.avatarBg, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 700, overflow: 'hidden' }}>
            {r.avatar ? <img src={r.avatar} alt={r.name} referrerPolicy="no-referrer" style={{ width:'100%', height:'100%', objectFit:'cover' }}/> : r.initial}
          </div>
          <div>
            <div style={{ fontSize: 13, fontWeight: 700, color: colors.primary }}>{r.name}</div>
            <div style={{ display: 'flex', gap: 1, marginTop: 2 }}>
              {[1,2,3,4,5].map(i => <svg key={i} width="9" height="9" viewBox="0 0 24 24" fill="#FBBC05"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>)}
            </div>
          </div>
          <div style={{ marginLeft: 'auto', fontSize: 10, color: '#94A3B8' }}>{r.time}</div>
        </div>
        <p style={{ fontSize: 13, lineHeight: 1.6, color: '#475569', margin: 0 }}>{r.text}</p>
      </div>
      <div style={{ display: 'flex', gap: 6, justifyContent: 'center', marginTop: 14 }}>
        {reviews.map((_, i) => (
          <button key={i} onClick={() => setActive(i)} style={{
            width: i === active ? 20 : 6, height: 6, borderRadius: 999, padding: 0,
            background: i === active ? colors.accent : '#E5E9F0',
            border: 'none', cursor: 'pointer', transition: 'all 300ms ease',
          }} />
        ))}
      </div>
    </div>
  );
}

// ── FAQ ───────────────────────────────────────────────────────────────────────
function MobileFAQ({ colors }) {
  const faqs = [
    { q: 'MYK belgesi neden zorunlu?', a: '6098 sayılı Türk Borçlar Kanunu kapsamında emlak danışmanlığı MYK belgesiyle icra edilebilir. Belgesiz çalışmak idari para cezası gerektirir.' },
    { q: 'Sınav süreci nasıl işliyor?', a: 'Online başvuru sonrası teorik (yazılı çoktan seçmeli) ve performans (uygulamalı) sınavları yapılır. Her ikisinden geçer not alan adaylar belgelendirilir.' },
    { q: 'Sınavda başarısız olursam?', a: 'Mevzuat gereği telafi sınav hakkı bulunmaktadır. Detaylar başvuru sonrası tarafınıza iletilir.' },
    { q: 'Belge kaç yıl geçerlidir?', a: 'MYK belgesi düzenlendiği tarihten itibaren 5 yıl geçerlidir. Sürenin sonunda yenileme süreci başlatılır.' },
  ];
  const [open, setOpen] = React.useState(null);
  return (
    <div style={{ padding: '32px 20px', background: '#fff', borderBottom: '1px solid #E5E9F0' }}>
      <div style={{ marginBottom: 20 }}>
        <div style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: colors.accent, fontWeight: 700, marginBottom: 8 }}>Sıkça Sorulanlar</div>
        <h2 style={{ fontSize: 26, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.03em', margin: 0 }}>
          Aklında{' '}
          <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontWeight: 400, color: colors.accent }}>soru mu var?</span>
        </h2>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {faqs.map((f, i) => (
          <div key={i} style={{
            border: `1px solid ${open === i ? colors.accent + '60' : '#E5E9F0'}`,
            borderRadius: 12, overflow: 'hidden',
            background: open === i ? colors.soft : '#fff',
            transition: 'all 200ms ease',
          }}>
            <button onClick={() => setOpen(open === i ? null : i)} style={{
              width: '100%', padding: '15px 16px', background: 'transparent', border: 'none',
              cursor: 'pointer', textAlign: 'left', display: 'flex',
              alignItems: 'center', justifyContent: 'space-between', gap: 12,
            }}>
              <span style={{ fontSize: 14, fontWeight: 600, color: colors.primary, lineHeight: 1.4 }}>{f.q}</span>
              <div style={{
                width: 28, height: 28, borderRadius: '50%', flexShrink: 0,
                background: open === i ? colors.accent : '#F7F9FC',
                border: open === i ? 'none' : '1px solid #E5E9F0',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" style={{ transform: open === i ? 'rotate(45deg)' : 'none', transition: 'transform 200ms' }}>
                  <path d="M6 2V10M2 6H10" stroke={open === i ? '#fff' : colors.primary} strokeWidth="1.6" strokeLinecap="round"/>
                </svg>
              </div>
            </button>
            {open === i && (
              <div style={{ padding: '0 16px 15px', fontSize: 13, color: '#475569', lineHeight: 1.65, borderTop: `1px solid ${colors.accent}30` }}>
                {f.a}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

// ── CTA ───────────────────────────────────────────────────────────────────────
function MobileCTA({ colors }) {
  return (
    <div style={{ padding: '24px 20px', background: '#F7F9FC' }}>
      <div style={{
        background: `linear-gradient(135deg, ${colors.primary} 0%, ${colors.deep} 100%)`,
        borderRadius: 20, padding: '32px 24px', position: 'relative', overflow: 'hidden',
      }}>
        <svg style={{ position: 'absolute', right: -50, bottom: -50, opacity: 0.09 }} width="220" height="220" viewBox="0 0 220 220">
          <circle cx="110" cy="110" r="104" stroke={colors.accent} strokeWidth="1" fill="none"/>
          <circle cx="110" cy="110" r="68" stroke={colors.accent} strokeWidth="1" fill="none"/>
        </svg>
        <div style={{ position: 'relative', zIndex: 2 }}>
          <div style={{ fontSize: 10, letterSpacing: '0.18em', color: colors.accent, fontWeight: 700, marginBottom: 10 }}>HEMEN BAŞLA</div>
          <h2 style={{ fontSize: 28, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.03em', color: '#fff', margin: '0 0 18px' }}>
            Kariyerini{' '}
            <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontWeight: 400, color: colors.accent }}>belgele</span>,
            geleceğini güvence altına al.
          </h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <a href="https://brosisenstitu.voc-tester.com/giris" target="_blank" rel="noopener" style={{
              padding: '15px 18px', background: colors.accent, color: colors.primary,
              border: 'none', borderRadius: 10, fontSize: 14, fontWeight: 700, cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              textDecoration: 'none',
            }}>
              Hemen başvur
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8H13M13 8L8.5 3.5M13 8L8.5 12.5" stroke={colors.primary} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
            <a href="/iletisim" style={{
              padding: '14px 18px', background: 'transparent', color: '#fff',
              border: '1px solid rgba(255,255,255,0.3)', borderRadius: 10,
              fontSize: 14, fontWeight: 600, cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              textDecoration: 'none',
            }}>
              Bize ulaş
              <span style={{ fontSize: 12, opacity: 0.7 }}>+90 533 636 56 78</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── FOOTER ────────────────────────────────────────────────────────────────────
function MobileFooter({ colors }) {
  return (
    <footer style={{ background: colors.deep, color: '#fff', padding: '32px 20px 24px' }}>
      <div style={{ marginBottom: 24 }}>
        <img src="assets/brosis-logo-official.png" alt="Brosis Enstitü" style={{ height: 28, objectFit: 'contain', filter: 'brightness(0) invert(1)', display: 'block', marginBottom: 14 }} />
        <p style={{ fontSize: 12, lineHeight: 1.6, color: 'rgba(255,255,255,0.55)', margin: '0 0 14px' }}>
          TÜRKAK tarafından akredite, MYK yetkili belgelendirme kuruluşu.
        </p>
        <div style={{ display: 'flex', gap: 6 }}>
          {['KVKK', 'TÜRKAK', 'MYK'].map(b => (
            <div key={b} style={{ padding: '5px 10px', background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 6, fontSize: 10, fontWeight: 700, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.06em' }}>{b}</div>
          ))}
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, paddingTop: 20, borderTop: '1px solid rgba(255,255,255,0.1)', marginBottom: 20 }}>
        <div>
          <div style={{ fontSize: 12, fontWeight: 700, color: '#fff', marginBottom: 10, letterSpacing: '0.04em' }}>Hizmetler</div>
          {['Emlak Danışmanı', 'Sorumlu Danışman', 'Emlak Brokeri', 'Belge Sorgula'].map(it => (
            <a key={it} href={__NAV_MAP[it] || "#"} style={{ display: 'block', fontSize: 12, color: 'rgba(255,255,255,0.5)', marginBottom: 8, textDecoration: 'none' }}>{it}</a>
          ))}
        </div>
        <div>
          <div style={{ fontSize: 12, fontWeight: 700, color: '#fff', marginBottom: 10, letterSpacing: '0.04em' }}>İletişim</div>
          <a href="tel:+905336365678" style={{ display: 'block', fontSize: 12, color: colors.accent, marginBottom: 8, textDecoration: 'none' }}>0533 636 56 78</a>
          <a href="mailto:info@brosisenstitu.com" style={{ display: 'block', fontSize: 12, color: colors.accent, marginBottom: 8, textDecoration: 'none', wordBreak: 'break-all' }}>info@brosisenstitu.com</a>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>İstanbul, Türkiye</div>
        </div>
      </div>
      <div style={{ paddingTop: 16, borderTop: '1px solid rgba(255,255,255,0.08)', textAlign: 'center', fontSize: 10, color: 'rgba(255,255,255,0.3)' }}>
        © 2026 Brosis Enstitü Belgelendirme Ltd. Şti.
      </div>
    </footer>
  );
}

// ── WHATSAPP FAB ──────────────────────────────────────────────────────────────
function MobileWhatsAppFAB() {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ position: 'fixed', right: 16, bottom: 24, zIndex: 200, display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 10 }}>
      {open && (
        <div style={{
          width: 272, background: '#fff', borderRadius: 14,
          boxShadow: '0 12px 40px rgba(0,0,0,0.18)', overflow: 'hidden',
          animation: 'mWaPop 260ms cubic-bezier(0.34,1.56,0.64,1)',
        }}>
          <div style={{ background: '#075E54', padding: '12px 14px', color: '#fff', display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 32, height: 32, borderRadius: '50%', background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 800, color: '#0F2747' }}>B</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700 }}>Brosis Destek</div>
              <div style={{ fontSize: 10, opacity: 0.8, display: 'flex', alignItems: 'center', gap: 4 }}>
                <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#34D399' }} />
                Genelde 5 dk içinde yanıtlar
              </div>
            </div>
            <button onClick={() => setOpen(false)} style={{ background: 'none', border: 'none', color: '#fff', fontSize: 18, cursor: 'pointer', opacity: 0.7, lineHeight: 1 }}>×</button>
          </div>
          <div style={{ padding: '14px', background: '#ECE5DD', fontSize: 13, lineHeight: 1.5, color: '#0F2747' }}>
            Merhaba 👋 MYK belgelendirme süreci hakkında bilgi almak ister misiniz?
          </div>
          <a href="https://wa.me/905555555555?text=Merhaba%20MYK%20belgesi%20hakkında%20bilgi%20almak%20istiyorum" target="_blank" rel="noopener" style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            padding: '13px', background: '#25D366', color: '#fff',
            fontSize: 13, fontWeight: 700, textDecoration: 'none',
          }}>
            <svg width="16" height="16" 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>
            WhatsApp'tan yaz
          </a>
        </div>
      )}
      <button onClick={() => setOpen(o => !o)} style={{
        width: 54, height: 54, borderRadius: '50%', background: '#25D366',
        border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 6px 20px rgba(37,211,102,0.4)',
        position: 'relative', transition: 'transform 200ms',
      }}>
        {!open && <span style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: '#25D366', animation: 'mWaPulse 2s ease-out infinite', zIndex: -1 }} />}
        {open ? (
          <span style={{ color: '#fff', fontSize: 22, lineHeight: 1 }}>×</span>
        ) : (
          <svg width="26" height="26" 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 mWaPulse { 0%{transform:scale(1);opacity:.6;} 100%{transform:scale(1.7);opacity:0;} }
        @keyframes mWaPop { from{opacity:0;transform:translateY(8px) scale(0.95);} to{opacity:1;transform:none;} }
      `}</style>
    </div>
  );
}

window.MobileHomepage = MobileHomepage;
