// Brosis Enstitü — Full Homepage (Bento direction)
// Sections: Hero · Services Grid · Process · Why Brosis · Stats · FAQ · CTA · Footer

function FullHomepage({ 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];

  // PageShell shared-components'tan TopBar + MainNav + Footer sarmalıyor
  // Bu component sadece içerik bölümlerini render eder
  return (
    <PageShell activePage="anasayfa">
      <div style={{
        background: '#F7F9FC',
        color: colors.primary,
      }}>
        <HeroSection colors={colors} />
        <HizliErisimSection colors={colors} />
        <WhyBrosisSection colors={colors} />
        <FAQSection colors={colors} />
        <CTASection colors={colors} />
      </div>
    </PageShell>
  );
}

// ---- WhatsApp Floating Button (homepage-local, unused — PageShell sağlıyor) ----
function HomeWhatsAppFAB() {
  const [open, setOpen] = React.useState(false);
  const phone = '905555555555';
  const msg = encodeURIComponent('Merhaba, MYK belgelendirme süreci hakkında bilgi almak istiyorum.');
  return (
    <div style={{
      position: 'absolute',
      right: 24, bottom: 24,
      zIndex: 50,
      display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 12,
      fontFamily: "'Inter', sans-serif",
    }}>
      {open && (
        <div style={{
          width: 300,
          background: '#fff',
          borderRadius: 16,
          boxShadow: '0 24px 60px -16px rgba(15, 39, 71, 0.35), 0 4px 12px rgba(15, 39, 71, 0.08)',
          overflow: 'hidden',
          animation: 'waPop 280ms cubic-bezier(0.34, 1.56, 0.64, 1)',
          border: '1px solid #E5E9F0',
        }}>
          <div style={{
            background: '#075E54',
            padding: '14px 16px',
            color: '#fff',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: '50%',
              background: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 16, fontWeight: 800, color: '#0F2747',
              letterSpacing: '-0.02em',
            }}>B</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 700 }}>Brosis Enstitü</div>
              <div style={{ fontSize: 11, opacity: 0.85, display: 'flex', alignItems: 'center', gap: 5 }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#34D399' }}/>
                Genelde 5 dk içinde yanıtlar
              </div>
            </div>
            <button onClick={() => setOpen(false)} style={{
              background: 'transparent', border: 'none', color: '#fff',
              fontSize: 20, cursor: 'pointer', padding: 4, lineHeight: 1, opacity: 0.8,
            }}>×</button>
          </div>
          <div style={{
            padding: '20px 16px 14px',
            background: '#ECE5DD',
            backgroundImage: `radial-gradient(circle at 20% 30%, rgba(255,255,255,0.4) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.3) 0%, transparent 50%)`,
            position: 'relative',
          }}>
            <div style={{
              background: '#fff',
              padding: '10px 12px',
              borderRadius: '0 12px 12px 12px',
              fontSize: 13,
              color: '#0F2747',
              lineHeight: 1.5,
              maxWidth: '85%',
              boxShadow: '0 1px 1px rgba(0,0,0,0.05)',
              position: 'relative',
            }}>
              Merhaba 👋 Brosis Enstitü destek hattına hoş geldiniz. MYK belgelendirme süreciniz hakkında size nasıl yardımcı olabiliriz?
              <div style={{ fontSize: 10, color: '#94A3B8', 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: '14px 16px',
            background: '#25D366',
            color: '#fff', fontSize: 14, fontWeight: 700,
            textDecoration: 'none',
            transition: 'background 200ms',
          }}>
            <svg width="18" height="18" 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: 60, height: 60,
        borderRadius: '50%',
        background: '#25D366',
        border: 'none',
        cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 8px 24px rgba(37, 211, 102, 0.45), 0 4px 8px rgba(0,0,0,0.1)',
        position: 'relative',
        transition: 'transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1)',
      }}
      onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.08)'}
      onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}>
        {!open && (
          <span style={{
            position: 'absolute',
            inset: 0,
            borderRadius: '50%',
            background: '#25D366',
            animation: 'waPulse 2s ease-out infinite',
            zIndex: -1,
          }}/>
        )}
        {open ? (
          <span style={{ fontSize: 26, color: '#fff', fontWeight: 300, lineHeight: 1 }}>×</span>
        ) : (
          <svg width="30" height="30" 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 waPulse {
          0% { transform: scale(1); opacity: 0.6; }
          100% { transform: scale(1.6); opacity: 0; }
        }
        @keyframes waPop {
          from { opacity: 0; transform: translateY(8px) scale(0.95); transform-origin: bottom right; }
          to { opacity: 1; transform: translateY(0) scale(1); }
        }
      `}</style>
    </div>
  );
}

// ---- REFERANS KARUSEL ----------------------------------------------------
function ReferansLogo({ name, color }) {
  // Inline brand logos (simplified, brand-correct colors)
  if (name === 'RE/MAX') return (
    <svg viewBox="0 0 80 30" style={{ height: 18, width: 'auto' }}>
      <rect x="0" y="0" width="36" height="14" fill="#DC1C2E"/>
      <rect x="0" y="14" width="36" height="8" fill="#fff"/>
      <rect x="0" y="22" width="36" height="8" fill="#003DA5"/>
      <text x="40" y="20" fontFamily="Inter, sans-serif" fontSize="13" fontWeight="800" fill="#003DA5">RE/MAX</text>
    </svg>
  );
  if (name === 'Coldwell Banker') return (
    <svg viewBox="0 0 100 30" style={{ height: 18, width: 'auto' }}>
      <rect x="0" y="4" width="22" height="22" fill="#002F6C"/>
      <text x="3" y="20" fontFamily="serif" fontSize="14" fontWeight="800" fill="#fff">CB</text>
      <text x="28" y="13" fontFamily="serif" fontSize="9" fontWeight="700" fill="#002F6C">COLDWELL</text>
      <text x="28" y="24" fontFamily="serif" fontSize="9" fontWeight="700" fill="#002F6C">BANKER</text>
    </svg>
  );
  if (name === 'Keller Williams') return (
    <svg viewBox="0 0 100 30" style={{ height: 18, width: 'auto' }}>
      <rect x="0" y="4" width="22" height="22" fill="#CC0000"/>
      <text x="4" y="20" fontFamily="serif" fontSize="13" fontWeight="800" fill="#fff">KW</text>
      <text x="28" y="13" fontFamily="serif" fontSize="9" fontWeight="700" fill="#CC0000">KELLER</text>
      <text x="28" y="24" fontFamily="serif" fontSize="9" fontWeight="700" fill="#CC0000">WILLIAMS</text>
    </svg>
  );
  if (name === 'Century 21') return (
    <svg viewBox="0 0 100 30" style={{ height: 18, width: 'auto' }}>
      <rect x="0" y="4" width="22" height="22" fill="#BEAF87"/>
      <text x="3" y="20" fontFamily="serif" fontSize="11" fontWeight="800" fill="#000">C21</text>
      <text x="28" y="13" fontFamily="sans-serif" fontSize="8" fontWeight="700" fill="#000" letterSpacing="1">CENTURY</text>
      <text x="28" y="24" fontFamily="serif" fontSize="13" fontWeight="800" fill="#000">21</text>
    </svg>
  );
  return null;
}

function PhotoGalleryCard({ colors }) {
  // Optimized small images via Unsplash CDN (auto compressed, ~50KB each at this size)
  const photos = [
    { src: 'https://images.unsplash.com/photo-1497366216548-37526070297c?w=600&q=70&auto=format&fit=crop', label: 'Sınav Salonu' },
    { src: 'https://images.unsplash.com/photo-1573164713988-8665fc963095?w=600&q=70&auto=format&fit=crop', label: 'Aday Görüşmesi' },
    { src: 'https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=600&q=70&auto=format&fit=crop', label: 'Eğitim Salonu' },
    { src: 'https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=600&q=70&auto=format&fit=crop', label: 'Sertifika Töreni' },
    { src: 'https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=600&q=70&auto=format&fit=crop', label: 'Ofis Resepsiyon' },
  ];
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % photos.length), 3500);
    return () => clearInterval(t);
  }, []);
  return (
    <div style={{
      gridColumn: 'span 4', gridRow: 'span 2',
      background: '#fff',
      borderRadius: 20,
      border: '1px solid #E5E9F0',
      overflow: 'hidden',
      position: 'relative',
      display: 'flex', flexDirection: 'column',
    }}>
      {/* Image stack */}
      <div style={{ position: 'relative', flex: 1, overflow: 'hidden' }}>
        {photos.map((p, i) => (
          <img key={i} src={p.src} alt={p.label} loading="lazy" style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover',
            opacity: i === idx ? 1 : 0,
            transform: i === idx ? 'scale(1)' : 'scale(1.04)',
            transition: 'opacity 800ms ease, transform 6000ms ease',
          }} />
        ))}
        {/* Gradient overlay */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(15,39,71,0) 40%, rgba(15,39,71,0.85) 100%)',
        }} />
        {/* Top label */}
        <div style={{
          position: 'absolute', top: 14, left: 14,
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '6px 12px',
          background: 'rgba(255,255,255,0.92)',
          backdropFilter: 'blur(8px)',
          borderRadius: 999,
          fontSize: 10, fontWeight: 700, letterSpacing: '0.12em',
          color: colors.primary, textTransform: 'uppercase',
        }}>
          <svg width="11" height="11" viewBox="0 0 12 12" fill="none">
            <rect x="1.5" y="2.5" width="9" height="7" rx="1" stroke={colors.primary} strokeWidth="1.2"/>
            <circle cx="6" cy="6" r="1.5" stroke={colors.primary} strokeWidth="1.2"/>
            <path d="M4 2.5L4.8 1.5H7.2L8 2.5" stroke={colors.primary} strokeWidth="1.2"/>
          </svg>
          Galeri
        </div>
        {/* Bottom caption + counter */}
        <div style={{
          position: 'absolute', bottom: 14, left: 14, right: 14,
          color: '#fff',
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 10,
        }}>
          <div style={{
            fontFamily: "'Instrument Serif', serif",
            fontSize: 18, lineHeight: 1.15,
            letterSpacing: '-0.01em',
          }}>{photos[idx].label}</div>
          <div style={{
            fontSize: 11, fontWeight: 700,
            background: 'rgba(255,255,255,0.18)',
            padding: '4px 8px', borderRadius: 6,
            backdropFilter: 'blur(6px)',
          }}>{idx + 1}/{photos.length}</div>
        </div>
      </div>
    </div>
  );
}

function ReferansKarusel({ colors }) {
  // Logos repeated for seamless marquee loop
  const logos = [
    { src: 'assets/remax-logo.svg', alt: 'RE/MAX', dark: false },
    { src: 'assets/cb-logo.png', alt: 'Coldwell Banker', dark: true },
    { src: 'assets/remax-logo.svg', alt: 'RE/MAX', dark: false },
    { src: 'assets/cb-logo.png', alt: 'Coldwell Banker', dark: true },
  ];
  const track = [...logos, ...logos];
  return (
    <div style={{
      gridColumn: 'span 6', gridRow: 'span 1',
      background: 'transparent', borderRadius: 20, padding: '20px 0', color: colors.primary,
      position: 'relative', overflow: 'hidden',
      display: 'flex', flexDirection: 'column', gap: 14,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 4px' }}>
        <div style={{ fontSize: 11, letterSpacing: '0.15em', textTransform: 'uppercase', fontWeight: 700, opacity: 0.6, color: colors.primary }}>Referanslarımız</div>
        <div style={{ fontSize: 11, fontWeight: 700, opacity: 0.5, color: colors.primary }}>Sürekli işbirliği</div>
      </div>
      <div style={{
        flex: 1,
        position: 'relative',
        overflow: 'hidden',
        maskImage: 'linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%)',
        WebkitMaskImage: 'linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%)',
      }}>
        <style>{`
          @keyframes brosis-marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
          }
        `}</style>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: 14,
          width: 'max-content',
          animation: 'brosis-marquee 22s linear infinite',
        }}>
          {track.map((l, i) => (
            <div key={i} style={{
              flex: '0 0 auto',
              width: 180,
              height: 72,
              background: l.dark ? '#002F6C' : '#fff',
              borderRadius: 14,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              padding: '14px 22px',
              boxShadow: '0 2px 8px rgba(15,39,71,0.08)',
              border: l.dark ? 'none' : '1px solid rgba(15,39,71,0.06)',
            }}>
              <img src={l.src} alt={l.alt} style={{ maxWidth: '100%', maxHeight: 38, objectFit: 'contain' }} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ReferansLogoBig({ name }) {
  // Larger, single-icon focused versions
  if (name === 'RE/MAX') return (
    <svg viewBox="0 0 90 28" style={{ height: 24, width: 'auto' }}>
      <rect x="0" y="0" width="36" height="9" fill="#DC1C2E"/>
      <rect x="0" y="9" width="36" height="10" fill="#fff" stroke="#E5E9F0" strokeWidth="0.3"/>
      <rect x="0" y="19" width="36" height="9" fill="#003DA5"/>
      <text x="42" y="20" fontFamily="Inter, sans-serif" fontSize="16" fontWeight="800" fill="#003DA5" letterSpacing="-0.5">RE/MAX</text>
    </svg>
  );
  if (name === 'Coldwell Banker') return (
    <svg viewBox="0 0 130 28" style={{ height: 24, width: 'auto' }}>
      <rect x="0" y="2" width="24" height="24" fill="#002F6C"/>
      <text x="3" y="20" fontFamily="Georgia, serif" fontSize="15" fontWeight="800" fill="#fff">CB</text>
      <text x="30" y="13" fontFamily="Georgia, serif" fontSize="10" fontWeight="700" fill="#002F6C" letterSpacing="0.5">COLDWELL</text>
      <text x="30" y="24" fontFamily="Georgia, serif" fontSize="10" fontWeight="700" fill="#002F6C" letterSpacing="0.5">BANKER</text>
    </svg>
  );
  if (name === 'Keller Williams') return (
    <svg viewBox="0 0 130 28" style={{ height: 24, width: 'auto' }}>
      <rect x="0" y="2" width="24" height="24" fill="#CC0000"/>
      <text x="4" y="20" fontFamily="Georgia, serif" fontSize="14" fontWeight="800" fill="#fff">KW</text>
      <text x="30" y="13" fontFamily="Georgia, serif" fontSize="10" fontWeight="700" fill="#CC0000" letterSpacing="0.5">KELLER</text>
      <text x="30" y="24" fontFamily="Georgia, serif" fontSize="10" fontWeight="700" fill="#CC0000" letterSpacing="0.5">WILLIAMS</text>
    </svg>
  );
  if (name === 'Century 21') return (
    <svg viewBox="0 0 110 28" style={{ height: 24, width: 'auto' }}>
      <rect x="0" y="2" width="24" height="24" fill="#BEAF87"/>
      <text x="3" y="20" fontFamily="Georgia, serif" fontSize="12" fontWeight="800" fill="#000">C21</text>
      <text x="30" y="13" fontFamily="Inter, sans-serif" fontSize="9" fontWeight="700" fill="#000" letterSpacing="1.5">CENTURY</text>
      <text x="30" y="24" fontFamily="Georgia, serif" fontSize="14" fontWeight="800" fill="#000">21</text>
    </svg>
  );
  return null;
}

// ---- GOOGLE REVIEWS CARD -------------------------------------------------
function GoogleReviewsCard({ colors }) {
  const FALLBACK = [
    { name:'Yorum yükleniyor...', initial:'…', avatarBg:'#94A3B8', time:'', stars:5, text:'Google İşletme yorumları yükleniyor.' },
  ];
  const AV_COLORS = ['#E11D48','#7C3AED','#0891B2','#16A34A','#EA580C','#0F766E','#9333EA','#DB2777'];
  const [data, setData] = React.useState({ rating: null, total: null, url: 'https://www.google.com/maps', reviews: FALLBACK });
  const [active, setActive] = React.useState(0);
  const [modalOpen, setModalOpen] = React.useState(false);

  React.useEffect(() => {
    fetch('/api/google-reviews').then(r => r.json()).then(d => {
      if (!d || !d.reviews || d.reviews.length === 0) return;
      const reviews = d.reviews.map((rv, i) => ({
        name: rv.author || 'Anonim',
        initial: (rv.author || '?').trim().charAt(0).toUpperCase(),
        avatarBg: AV_COLORS[i % AV_COLORS.length],
        avatar: rv.avatar,
        time: rv.relative || '',
        stars: rv.rating || 5,
        text: rv.text || '',
      }));
      setData({ rating: d.rating, total: d.total, url: d.url || 'https://www.google.com/maps', reviews });
    }).catch(() => {});
  }, []);

  React.useEffect(() => {
    if (data.reviews.length < 2) return;
    const t = setInterval(() => setActive((i) => (i + 1) % data.reviews.length), 5500);
    return () => clearInterval(t);
  }, [data.reviews.length]);

  React.useEffect(() => {
    if (!modalOpen) return;
    const onKey = e => { if (e.key === 'Escape') setModalOpen(false); };
    document.body.style.overflow = 'hidden';
    window.addEventListener('keydown', onKey);
    return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onKey); };
  }, [modalOpen]);

  const r = data.reviews[active] || FALLBACK[0];
  const ratingDisplay = data.rating != null ? data.rating.toFixed(1) : '5.0';
  const totalDisplay = data.total != null ? `${data.total} yorum` : '— yorum';
  const reviewsUrl = data.url;

  return (
    <div onClick={() => { console.log('[Reviews] kart click'); setModalOpen(true); }} style={{
      gridColumn: 'span 4', gridRow: 'span 2',
      background: '#fff',
      borderRadius: 20, padding: 28,
      border: '1px solid #E5E9F0',
      position: 'relative', overflow: 'hidden',
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      cursor: 'pointer',
    }}>
      {/* Header: Google logo + aggregate rating */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          {/* Google G mark */}
          <svg width="28" height="28" 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 style={{ lineHeight: 1.15 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: colors.primary }}>Google İşletme Yorumları</div>
            <div style={{ fontSize: 11, color: '#94A3B8' }}>Brosis Enstitü · Doğrulanmış</div>
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, justifyContent: 'flex-end' }}>
            <div style={{ fontSize: 32, fontWeight: 800, color: colors.primary, letterSpacing: '-0.02em', lineHeight: 1 }}>{ratingDisplay}</div>
            <div style={{ fontSize: 12, color: '#94A3B8', fontWeight: 500 }}>/ 5</div>
          </div>
          <div style={{ display: 'flex', gap: 2, justifyContent: 'flex-end', marginTop: 4 }}>
            {[1,2,3,4,5].map(i => (
              <svg key={i} width="13" height="13" 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 style={{ fontSize: 10, color: '#94A3B8', marginTop: 3, fontWeight: 500 }}>{totalDisplay}</div>
        </div>
      </div>

      {/* Active review */}
      <div key={active} style={{
        flex: 1, display: 'flex', flexDirection: 'column',
        margin: '20px 0',
        animation: 'reviewFade 600ms cubic-bezier(.2,.7,.2,1) both',
      }}>
        <style>{`@keyframes reviewFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }`}</style>
        {/* Quote mark */}
        <svg width="32" height="24" viewBox="0 0 32 24" fill={colors.accent} style={{ opacity: 0.25, marginBottom: 4 }}>
          <path d="M0 24V14C0 6 4 1 12 0L13 4C8 5 6 8 6 12H12V24H0ZM18 24V14C18 6 22 1 30 0L31 4C26 5 24 8 24 12H30V24H18Z"/>
        </svg>
        <div style={{
          fontFamily: "'Instrument Serif', serif",
          fontSize: 22, lineHeight: 1.35,
          color: colors.primary,
          fontWeight: 400,
          flex: 1,
          letterSpacing: '-0.005em',
          display: '-webkit-box',
          WebkitLineClamp: 5,
          WebkitBoxOrient: 'vertical',
          overflow: 'hidden',
        }}>
          {r.text}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 16 }}>
          <div style={{
            width: 38, height: 38, borderRadius: '50%',
            background: r.avatarBg,
            color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 15, fontWeight: 700,
            fontFamily: "'Inter', sans-serif",
            overflow: 'hidden',
          }}>
            {r.avatar
              ? <img src={r.avatar} alt={r.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} referrerPolicy="no-referrer"/>
              : r.initial}
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: colors.primary, fontFamily: "'Inter', sans-serif" }}>{r.name}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 2 }}>
              <div style={{ display: 'flex', gap: 1 }}>
                {[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 style={{ fontSize: 11, color: '#94A3B8' }}>· {r.time}</div>
            </div>
          </div>
        </div>
      </div>

      {/* Footer: dots + CTA */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 14, borderTop: '1px solid #F1F5F9' }}>
        <div style={{ display: 'flex', gap: 6 }}>
          {data.reviews.map((_, i) => (
            <button key={i} onClick={() => setActive(i)} style={{
              width: i === active ? 24 : 6, height: 6,
              borderRadius: 999, padding: 0,
              background: i === active ? colors.accent : '#E5E9F0',
              border: 'none', cursor: 'pointer',
              transition: 'all 400ms ease',
            }} />
          ))}
        </div>
        <button type="button" onClick={(e) => { e.preventDefault(); e.stopPropagation(); console.log('[Reviews] modal aç'); setModalOpen(true); }} style={{
          background: 'none', border: 'none', padding: 0, cursor: 'pointer',
          fontSize: 12, fontWeight: 600,
          color: colors.primary,
          display: 'inline-flex', alignItems: 'center', gap: 6,
          fontFamily: 'inherit',
          pointerEvents: 'auto', position: 'relative', zIndex: 2,
        }}>
          Tüm yorumları gör
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
            <path d="M3 6H9M9 6L6 3M9 6L6 9" stroke={colors.primary} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
      </div>

      {modalOpen && ReactDOM.createPortal(
        <div onClick={() => setModalOpen(false)} style={{
          position: 'fixed', inset: 0, background: 'rgba(8,21,48,0.65)',
          backdropFilter: 'blur(4px)',
          zIndex: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: 24, animation: 'mFade 200ms ease',
        }}>
          <style>{`@keyframes mFade { from {opacity:0} to {opacity:1} } @keyframes mSlide { from {opacity:0; transform: translateY(20px) scale(0.98)} to {opacity:1; transform:none} }`}</style>
          <div onClick={e => e.stopPropagation()} style={{
            background: '#fff', borderRadius: 20, maxWidth: 720, width: '100%',
            maxHeight: '85vh', display: 'flex', flexDirection: 'column',
            animation: 'mSlide 280ms cubic-bezier(.2,.7,.2,1)',
            boxShadow: '0 24px 60px rgba(8,21,48,0.4)',
          }}>
            {/* Header */}
            <div style={{ padding: '24px 28px', borderBottom: '1px solid #F1F5F9', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <svg width="32" height="32" 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: 16, fontWeight: 800, color: colors.primary, lineHeight: 1.2 }}>Google İşletme Yorumları</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 4 }}>
                    <div style={{ display: 'flex', gap: 1 }}>
                      {[1,2,3,4,5].map(i => (
                        <svg key={i} width="12" height="12" 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>
                    <span style={{ fontSize: 13, fontWeight: 700, color: colors.primary }}>{ratingDisplay}</span>
                    <span style={{ fontSize: 12, color: '#94A3B8' }}>· {totalDisplay}</span>
                  </div>
                </div>
              </div>
              <button onClick={() => setModalOpen(false)} style={{
                width: 36, height: 36, border: 'none', background: '#F1F5F9',
                borderRadius: 10, cursor: 'pointer', display: 'flex',
                alignItems: 'center', justifyContent: 'center',
              }}>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M3 3L11 11M11 3L3 11" stroke={colors.primary} strokeWidth="2" strokeLinecap="round"/>
                </svg>
              </button>
            </div>

            {/* Reviews list */}
            <div style={{ overflowY: 'auto', padding: '8px 28px 24px', flex: 1 }}>
              {data.reviews.map((rv, i) => (
                <div key={i} style={{ padding: '20px 0', borderBottom: i < data.reviews.length - 1 ? '1px solid #F1F5F9' : 'none' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
                    <div style={{
                      width: 44, height: 44, borderRadius: '50%',
                      background: rv.avatarBg, color: '#fff',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 17, fontWeight: 700, overflow: 'hidden', flexShrink: 0,
                    }}>
                      {rv.avatar ? <img src={rv.avatar} alt={rv.name} referrerPolicy="no-referrer" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/> : rv.initial}
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 14, fontWeight: 700, color: colors.primary }}>{rv.name}</div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 3 }}>
                        <div style={{ display: 'flex', gap: 1 }}>
                          {[1,2,3,4,5].map(s => (
                            <svg key={s} width="11" height="11" viewBox="0 0 24 24" fill={s <= (rv.stars || 5) ? '#FBBC05' : '#E5E9F0'}>
                              <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>
                        <span style={{ fontSize: 11, color: '#94A3B8' }}>· {rv.time}</span>
                      </div>
                    </div>
                  </div>
                  <p style={{ fontSize: 14, color: '#475569', lineHeight: 1.65, margin: 0, whiteSpace: 'pre-wrap' }}>{rv.text}</p>
                </div>
              ))}
            </div>

            {/* Footer */}
            <div style={{ padding: '18px 28px', borderTop: '1px solid #F1F5F9', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
              <div style={{ fontSize: 12, color: '#94A3B8' }}>Toplam {data.total ?? '—'} yorumdan ilk {data.reviews.length} tanesi.</div>
              <a href={reviewsUrl} target="_blank" rel="noopener" style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '10px 18px', background: colors.primary, color: '#fff',
                borderRadius: 8, fontSize: 13, fontWeight: 700,
              }}>
                Tümünü Google'da Gör
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M5 3H10V8M10 3L4 9" stroke="#fff" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </a>
            </div>
          </div>
        </div>,
        document.body
      )}
    </div>
  );
}

// ---- HEADLINE CAROUSEL ---------------------------------------------------
function HeadlineCarousel({ colors }) {
  const phrases = [
    { lead: 'Sertifikan,', mid: 'kariyerinin', accent: 'en sağlam', tail: 'temeli olsun.' },
    { lead: 'Emlak danışmanlığında', mid: 'Türkiye\'nin', accent: 'resmi adresi', tail: 'Brosis Enstitü.' },
    { lead: 'Mesleki yeterlilik,', mid: '', accent: 'belgeli güvence', tail: 'altında.' },
  ];
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % phrases.length), 4500);
    return () => clearInterval(t);
  }, []);
  const p = phrases[idx];
  return (
    <div style={{
      width: 720,
      maxWidth: '100%',
      height: 240,
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'flex-start',
      overflow: 'hidden',
      boxSizing: 'border-box',
      flexShrink: 0,
    }}>
      <h1 key={idx} style={{
        fontFamily: "'Inter', sans-serif",
        fontSize: 64, fontWeight: 800,
        lineHeight: 0.98, letterSpacing: '-0.04em',
        margin: 0, color: colors.primary,
        animation: 'fadeUp 700ms cubic-bezier(.2,.7,.2,1) both',
        height: 200,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
      }}>
        <span>{p.lead}</span>
        <span>
          {p.mid && <>{p.mid} </>}
          <span style={{
            background: `linear-gradient(120deg, transparent 0% 30%, ${colors.accent}50 30% 95%, transparent 95%)`,
            padding: '0 4px',
          }}>{p.accent}</span>
        </span>
        <span>{p.tail}</span>
      </h1>
      <style>{`@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }`}</style>
      <div style={{ display: 'flex', gap: 6, marginTop: 20, flexShrink: 0 }}>
        {phrases.map((_, i) => (
          <div key={i} style={{
            width: i === idx ? 24 : 6, height: 6,
            borderRadius: 999,
            background: i === idx ? colors.accent : '#E5E9F0',
            transition: 'all 400ms ease',
          }} />
        ))}
      </div>
    </div>
  );
}

// ---- HERO (existing bento) -----------------------------------------------
function HeroSection({ colors }) {
  return (
    <div style={{ padding: '56px 64px', display: 'flex', flexDirection: 'column', gap: 32 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40, alignItems: 'end' }}>
        <div>
          <HeadlineCarousel colors={colors} />
        </div>
        <div style={{ paddingBottom: 8 }}>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: '#475569', margin: '0 0 28px' }}>
            MYK adına Türkiye genelinde sınav ve belgelendirme yapan resmi yetkili kuruluş. 2018'den bu yana on binlerce profesyonelin kariyerine güven kazandırdık.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <a href="/basvuru" style={{
              padding: '16px 24px', background: colors.primary, color: '#fff',
              textDecoration: 'none',
              border: 'none', borderRadius: 10, fontSize: 15, fontWeight: 600,
              cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              boxShadow: `0 12px 24px ${colors.primary}30`,
            }}>
              <span>Hızlı Başvur</span>
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                <path d="M3 9H15M15 9L10 4M15 9L10 14" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </a>
            <a href="https://brosisenstitu.voc-tester.com/belge-sorgulama" target="_blank" rel="noopener" style={{
              padding: '16px 24px', background: '#fff', color: colors.primary,
              textDecoration: 'none',
              border: '1px solid #E5E9F0', borderRadius: 10, fontSize: 15, fontWeight: 600,
              cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            }}>
              <span>Belge sorgula</span>
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                <circle cx="8" cy="8" r="5.5" stroke={colors.primary} strokeWidth="1.6"/>
                <path d="M12 12L15 15" stroke={colors.primary} strokeWidth="1.8" strokeLinecap="round"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      {/* Bento grid */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gridAutoRows: '180px', gap: 16 }}>
        {/* Photo Gallery carousel — moved left */}
        <PhotoGalleryCard colors={colors} />

        {/* Google Reviews — moved right */}
        <GoogleReviewsCard colors={colors} />

        {/* Stats card — replaces process snapshot */}
        <div style={{
          gridColumn: 'span 4', gridRow: 'span 2',
          background: colors.primary, borderRadius: 20, padding: 28,
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          position: 'relative', overflow: 'hidden',
        }}>
          {/* subtle ring decoration */}
          <svg style={{ position: 'absolute', right: -60, bottom: -60, opacity: 0.08 }} width="280" height="280" viewBox="0 0 280 280">
            <circle cx="140" cy="140" r="130" stroke={colors.accent} strokeWidth="1" fill="none"/>
            <circle cx="140" cy="140" r="90" stroke={colors.accent} strokeWidth="1" fill="none"/>
            <circle cx="140" cy="140" r="50" stroke={colors.accent} strokeWidth="1" fill="none"/>
          </svg>
          <div style={{ position: 'relative', zIndex: 2 }}>
            <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: colors.accent, fontWeight: 700, marginBottom: 14 }}>Rakamlarla Brosis</div>
            <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 24, color: '#fff', lineHeight: 1.2, fontWeight: 400 }}>
              Türkiye genelinde<br/>güvenilir belgelendirme.
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, position: 'relative', zIndex: 2 }}>
            {[
              { val: '10.000+', label: 'Belgelendirilen Aday' },
              { val: '5 Yıl', label: 'Belge Geçerliliği' },
              { val: '7 İş Günü', label: 'Ortalama Süreç' },
              { val: '4.9 / 5', label: 'Google Puanı' },
            ].map((stat, i) => (
              <div key={i} style={{
                background: 'rgba(255,255,255,0.07)',
                borderRadius: 12, padding: '14px 16px',
                border: '1px solid rgba(255,255,255,0.1)',
              }}>
                <div style={{ fontSize: 22, fontWeight: 800, color: '#fff', letterSpacing: '-0.02em', lineHeight: 1 }}>{stat.val}</div>
                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', marginTop: 5, lineHeight: 1.3 }}>{stat.label}</div>
              </div>
            ))}
          </div>
        </div>

        <ReferansKarusel colors={colors} />

        <NewsTicker colors={colors} />
      </div>
    </div>
  );
}

// ---- SERVICES (Programs) -------------------------------------------------
function ServicesSection({ colors }) {
  const programs = [
    { code: 'A1', name: 'Emlak Danışmanı', level: 'Seviye 5', duration: '1 gün', featured: true },
    { code: 'A2', name: 'Sorumlu Emlak Danışmanı', level: 'Seviye 6', duration: '1 gün' },
    { code: 'B1', name: 'Emlak Brokeri', level: 'Seviye 6', duration: '1 gün' },
  ];
  return (
    <div style={{ padding: '96px 64px', background: '#fff' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48 }}>
        <div>
          <div style={{ fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: colors.accent, fontWeight: 700, marginBottom: 16 }}>
            Programlarımız
          </div>
          <h2 style={{
            fontSize: 52, fontWeight: 800, lineHeight: 1.05,
            letterSpacing: '-0.03em', margin: 0, maxWidth: 720,
          }}>
            Emlak sektörünün <span style={{
              fontFamily: "'Instrument Serif', serif", fontStyle: 'italic',
              fontWeight: 400, color: colors.accent,
            }}>her seviyesi</span> için belgelendirme.
          </h2>
        </div>
        <button style={{
          padding: '14px 22px', background: 'transparent', color: colors.primary,
          border: `1px solid ${colors.primary}`, borderRadius: 10,
          fontSize: 14, fontWeight: 600, cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          Tüm programlar
          <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.6" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {programs.map((p, i) => (
          <div key={p.code} style={{
            padding: 32,
            background: p.featured ? colors.primary : '#F7F9FC',
            color: p.featured ? '#fff' : colors.primary,
            borderRadius: 20,
            border: p.featured ? 'none' : '1px solid #E5E9F0',
            position: 'relative', overflow: 'hidden',
            minHeight: 320,
            display: 'flex', flexDirection: 'column',
          }}>
            <div style={{
              fontSize: 11, letterSpacing: '0.15em', textTransform: 'uppercase',
              fontWeight: 700, opacity: p.featured ? 0.6 : 1,
              color: p.featured ? '#fff' : '#94A3B8',
              marginBottom: 12,
            }}>
              {p.code} · {p.level}
            </div>
            <div style={{
              fontFamily: "'Instrument Serif', serif",
              fontSize: 32, fontWeight: 400,
              lineHeight: 1.1, letterSpacing: '-0.02em',
              marginBottom: 16,
            }}>
              {p.name}
            </div>
            <div style={{
              fontSize: 14, lineHeight: 1.55,
              color: p.featured ? 'rgba(255,255,255,0.7)' : '#475569',
              marginBottom: 'auto', paddingBottom: 24,
            }}>
              MYK Ulusal Yeterlilik kapsamında teorik ve performans sınavlarıyla belgelendirme.
            </div>
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              paddingTop: 20,
              borderTop: `1px solid ${p.featured ? 'rgba(255,255,255,0.15)' : '#E5E9F0'}`,
            }}>
              <div>
                <div style={{ fontSize: 11, opacity: p.featured ? 0.5 : 1, color: p.featured ? '#fff' : '#94A3B8', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600 }}>
                  Süre
                </div>
                <div style={{ fontSize: 16, fontWeight: 700, marginTop: 2 }}>{p.duration}</div>
              </div>
              <div style={{
                width: 44, height: 44, borderRadius: '50%',
                background: p.featured ? colors.accent : '#fff',
                border: p.featured ? 'none' : '1px solid #E5E9F0',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                cursor: 'pointer',
              }}>
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                  <path d="M4 9H14M14 9L9.5 4.5M14 9L9.5 13.5" stroke={p.featured ? colors.primary : colors.primary} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---- HIZLI ERİŞİM --------------------------------------------------------
function HizliErisimSection({ colors }) {
  const links = [
    {
      label: 'Online Başvuru',
      desc: 'Hemen başvur, formu doldur',
      href: 'https://brosisenstitu.voc-tester.com/giris',
      icon: (c) => <svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M6 4H18L22 8V24H6V4Z" stroke={c} strokeWidth="1.8" strokeLinejoin="round"/><path d="M18 4V8H22M10 13H18M10 17H15" stroke={c} strokeWidth="1.8" strokeLinecap="round"/></svg>,
      primary: true,
    },
    {
      label: 'Sınav Takvimi',
      desc: 'Yaklaşan sınav tarihlerini gör',
      href: 'https://brosisenstitu.voc-tester.com/web',
      icon: (c) => <svg width="28" height="28" viewBox="0 0 28 28" fill="none"><rect x="4" y="6" width="20" height="18" rx="2" stroke={c} strokeWidth="1.8"/><path d="M9 4V8M19 4V8M4 12H24" stroke={c} strokeWidth="1.8" strokeLinecap="round"/><path d="M9 17H10M14 17H15M19 17H20M9 21H10M14 21H15" stroke={c} strokeWidth="2" strokeLinecap="round"/></svg>,
    },
    {
      label: 'Belge Sorgula',
      desc: 'Sertifika geçerliliğini kontrol et',
      href: '/belge-sorgula',
      icon: (c) => <svg width="28" height="28" viewBox="0 0 28 28" fill="none"><circle cx="13" cy="13" r="8" stroke={c} strokeWidth="1.8"/><path d="M19 19L23 23" stroke={c} strokeWidth="2" strokeLinecap="round"/><path d="M10 13L12.5 15.5L16.5 10.5" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
    },
    {
      label: 'Sınav Ücretleri',
      desc: 'Güncel ücret tarifesi',
      href: '/sinav-ucretleri',
      icon: (c) => <svg width="28" height="28" viewBox="0 0 28 28" fill="none"><rect x="4" y="7" width="20" height="14" rx="2" stroke={c} strokeWidth="1.8"/><path d="M4 12H24" stroke={c} strokeWidth="1.8"/><path d="M9 17H11M14 17H19" stroke={c} strokeWidth="1.8" strokeLinecap="round"/></svg>,
    },
    {
      label: 'Akademi',
      desc: 'Online eğitim ve hazırlık kursu',
      href: '/akademi',
      icon: (c) => <svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M14 5L26 11L14 17L2 11L14 5Z" stroke={c} strokeWidth="1.8" strokeLinejoin="round"/><path d="M6 14V20C6 20 9 23 14 23C19 23 22 20 22 20V14" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/><path d="M26 11V17" stroke={c} strokeWidth="1.8" strokeLinecap="round"/></svg>,
    },
    {
      label: 'Yetki Belgelerimiz',
      desc: 'TÜRKAK & MYK resmi belgeler',
      href: '/yetki-belgeleri',
      icon: (c) => <svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M14 3L24 7V14C24 19.5 20 23.5 14 25C8 23.5 4 19.5 4 14V7L14 3Z" stroke={c} strokeWidth="1.8" strokeLinejoin="round"/><path d="M10 14L13 17L18 11" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
    },
  ];

  return (
    <div style={{ padding: '80px 64px', background: '#fff' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40 }}>
        <div>
          <div style={{ fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: colors.accent, fontWeight: 700, marginBottom: 14 }}>
            Hızlı Erişim
          </div>
          <h2 style={{
            fontSize: 44, 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>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 14 }}>
        {links.map((item, i) => (
          <a key={i} href={item.href || '#'} style={{
            padding: '28px 22px',
            background: item.primary ? colors.primary : '#F7F9FC',
            color: item.primary ? '#fff' : colors.primary,
            border: item.primary ? 'none' : '1px solid #E5E9F0',
            borderRadius: 18,
            cursor: 'pointer',
            textAlign: 'left',
            textDecoration: 'none',
            display: 'flex', flexDirection: 'column', gap: 16,
            transition: 'transform 180ms ease, box-shadow 180ms ease',
            position: 'relative',
            overflow: 'hidden',
          }}
          onMouseEnter={e => {
            e.currentTarget.style.transform = 'translateY(-3px)';
            e.currentTarget.style.boxShadow = item.primary
              ? `0 16px 36px ${colors.primary}40`
              : '0 12px 28px rgba(15,39,71,0.10)';
          }}
          onMouseLeave={e => {
            e.currentTarget.style.transform = 'translateY(0)';
            e.currentTarget.style.boxShadow = 'none';
          }}>
            {item.primary && (
              <svg style={{ position: 'absolute', right: -24, bottom: -24, opacity: 0.1 }} width="120" height="120" viewBox="0 0 120 120">
                <circle cx="60" cy="60" r="56" stroke={colors.accent} strokeWidth="1" fill="none"/>
                <circle cx="60" cy="60" r="38" stroke={colors.accent} strokeWidth="1" fill="none"/>
              </svg>
            )}
            <div style={{
              width: 50, height: 50, borderRadius: 12,
              background: item.primary ? 'rgba(255,255,255,0.12)' : `${colors.accent}15`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>
              {item.icon(item.primary ? '#fff' : colors.accent)}
            </div>
            <div style={{ position: 'relative', zIndex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 700, letterSpacing: '-0.01em', marginBottom: 5 }}>
                {item.label}
              </div>
              <div style={{
                fontSize: 12, lineHeight: 1.45,
                color: item.primary ? 'rgba(255,255,255,0.6)' : '#94A3B8',
              }}>
                {item.desc}
              </div>
            </div>
            <div style={{
              marginTop: 'auto',
              width: 28, height: 28, borderRadius: '50%',
              background: item.primary ? 'rgba(255,255,255,0.15)' : '#fff',
              border: item.primary ? 'none' : '1px solid #E5E9F0',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                <path d="M2.5 6H9.5M9.5 6L6.5 3M9.5 6L6.5 9" stroke={item.primary ? '#fff' : colors.primary} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
          </a>
        ))}
      </div>
    </div>
  );
}

// ---- WHY BROSIS ----------------------------------------------------------
function WhyBrosisSection({ colors }) {
  const features = [
    { t: 'TÜRKAK Akreditasyonu', d: 'AB-0169-P numarasıyla resmi akredite belgelendirme kuruluşu.', icon: 'shield' },
    { t: 'MYK Yetkili', d: '06.06.2018 tarih, 85 sayılı kararla YB-0166 koduyla yetkili.', icon: 'star' },
    { t: 'Hızlı Süreç', d: 'Başvurudan belgeye ortalama 7 iş günü içinde tamamlanır.', icon: 'clock' },
    { t: 'Online Sınav Desteği', d: 'Performans sınavları teknolojik altyapıyla yürütülür.', icon: 'monitor' },
  ];
  const Icon = ({ name, size = 26, color = colors.accent }) => {
    if (name === 'shield') return <svg width={size} height={size} viewBox="0 0 26 26" fill="none"><path d="M13 3L22 6V13C22 18 18 22 13 23C8 22 4 18 4 13V6L13 3Z" stroke={color} strokeWidth="1.8" strokeLinejoin="round"/><path d="M9 13L12 16L17 10" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>;
    if (name === 'star') return <svg width={size} height={size} viewBox="0 0 26 26" fill="none"><path d="M13 3L16 10L23 11L18 16L19 23L13 20L7 23L8 16L3 11L10 10L13 3Z" stroke={color} strokeWidth="1.8" strokeLinejoin="round"/></svg>;
    if (name === 'clock') return <svg width={size} height={size} viewBox="0 0 26 26" fill="none"><circle cx="13" cy="13" r="10" stroke={color} strokeWidth="1.8"/><path d="M13 7V13L17 15" stroke={color} strokeWidth="1.8" strokeLinecap="round"/></svg>;
    return <svg width={size} height={size} viewBox="0 0 26 26" fill="none"><rect x="3" y="5" width="20" height="13" rx="1" stroke={color} strokeWidth="1.8"/><path d="M9 22H17M13 18V22" stroke={color} strokeWidth="1.8" strokeLinecap="round"/></svg>;
  };
  return (
    <div style={{ padding: '96px 64px', background: '#F7F9FC' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'flex-start' }}>
        <div>
          <div style={{ fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: colors.accent, fontWeight: 700, marginBottom: 16 }}>
            Neden Brosis
          </div>
          <h2 style={{
            fontSize: 48, fontWeight: 800, lineHeight: 1.05,
            letterSpacing: '-0.03em', margin: '0 0 24px',
          }}>
            On binlerce profesyonelin <span style={{
              fontFamily: "'Instrument Serif', serif", fontStyle: 'italic',
              fontWeight: 400, color: colors.accent,
            }}>tercihi.</span>
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: '#475569', marginBottom: 32 }}>
            2018'den bu yana TÜRKAK akreditasyonu ve MYK yetkisiyle Türkiye genelinde mesleki yeterlilik sınavları gerçekleştiriyoruz.
          </p>
          {/* Logo strip placeholder */}
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
            <div style={{
              padding: '12px 16px', background: '#fff', border: '1px solid #E5E9F0',
              borderRadius: 10, fontSize: 12, fontWeight: 700, letterSpacing: '0.1em',
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#C8102E' }}/>
              TÜRKAK
            </div>
            <div style={{
              padding: '12px 16px', background: '#fff', border: '1px solid #E5E9F0',
              borderRadius: 10, fontSize: 12, fontWeight: 700, letterSpacing: '0.1em',
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: colors.accent }}/>
              MYK
            </div>
            <div style={{
              padding: '12px 16px', background: '#fff', border: '1px solid #E5E9F0',
              borderRadius: 10, fontSize: 12, fontWeight: 700, letterSpacing: '0.1em',
            }}>ISO/IEC 17024</div>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          {features.map((f, i) => (
            <div key={i} style={{
              padding: 28, background: '#fff',
              border: '1px solid #E5E9F0', borderRadius: 16,
            }}>
              <div style={{
                width: 52, height: 52, borderRadius: 12,
                background: `${colors.accent}15`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 20,
              }}>
                <Icon name={f.icon} />
              </div>
              <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 8, letterSpacing: '-0.01em' }}>{f.t}</div>
              <div style={{ fontSize: 14, color: '#475569', lineHeight: 1.55 }}>{f.d}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ---- FAQ -----------------------------------------------------------------
function FAQSection({ colors }) {
  const faqs = [
    { q: 'MYK belgesi neden zorunlu?', a: '6098 sayılı Türk Borçlar Kanunu ve Mesleki Yeterlilik Kurumu mevzuatı kapsamında bazı meslekler (emlak danışmanlığı dahil) 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ı belirlenen tarihte teorik (yazılı çoktan seçmeli) ve performans (uygulamalı) sınavları yapılır. İki sınavdan da 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 yeniden belgelendirme süreci başlatılır.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <div style={{ padding: '96px 64px', background: '#fff' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 64, alignItems: 'flex-start' }}>
        <div>
          <div style={{ fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: colors.accent, fontWeight: 700, marginBottom: 16 }}>
            Sıkça Sorulanlar
          </div>
          <h2 style={{
            fontSize: 44, fontWeight: 800, lineHeight: 1.05,
            letterSpacing: '-0.03em', margin: '0 0 24px',
          }}>
            Aklında <span style={{
              fontFamily: "'Instrument Serif', serif", fontStyle: 'italic',
              fontWeight: 400, color: colors.accent,
            }}>soru mu var?</span>
          </h2>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: '#475569', marginBottom: 24 }}>
            En çok sorulan soruları derledik. Daha fazlası için bizimle iletişime geçebilirsin.
          </p>
          <a href="/sss" style={{
            padding: '12px 18px', background: colors.primary, color: '#fff',
            border: 'none', borderRadius: 10, fontSize: 14, fontWeight: 600,
            cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 8,
            textDecoration: 'none',
          }}>
            Tüm soruları gör
            <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.8" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </a>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {faqs.map((f, i) => (
            <div key={i} style={{
              border: '1px solid #E5E9F0',
              borderRadius: 14,
              padding: 24,
              background: open === i ? colors.soft : '#fff',
              borderColor: open === i ? `${colors.accent}50` : '#E5E9F0',
              cursor: 'pointer',
            }} onClick={() => setOpen(open === i ? -1 : i)}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: '-0.01em' }}>{f.q}</div>
                <div style={{
                  width: 32, height: 32, borderRadius: '50%',
                  background: open === i ? colors.accent : '#F7F9FC',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0,
                }}>
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{
                    transform: open === i ? 'rotate(45deg)' : 'rotate(0deg)',
                    transition: 'transform 200ms',
                  }}>
                    <path d="M7 2V12M2 7H12" stroke={open === i ? '#fff' : colors.primary} strokeWidth="1.8" strokeLinecap="round"/>
                  </svg>
                </div>
              </div>
              {open === i && (
                <div style={{ fontSize: 14, color: '#475569', lineHeight: 1.6, marginTop: 14, paddingRight: 48 }}>
                  {f.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ---- CTA -----------------------------------------------------------------
function CTASection({ colors }) {
  return (
    <div style={{ padding: '64px 64px 96px', background: '#F7F9FC' }}>
      <div style={{
        background: `linear-gradient(135deg, ${colors.primary} 0%, ${colors.deep} 100%)`,
        borderRadius: 28,
        padding: '72px 64px',
        color: '#fff',
        position: 'relative',
        overflow: 'hidden',
        display: 'grid',
        gridTemplateColumns: '1.4fr 1fr',
        gap: 64,
        alignItems: 'center',
      }}>
        <svg style={{ position: 'absolute', right: -100, bottom: -100, opacity: 0.1 }} width="500" height="500" viewBox="0 0 500 500">
          <circle cx="250" cy="250" r="240" stroke={colors.accent} strokeWidth="1" fill="none"/>
          <circle cx="250" cy="250" r="180" stroke={colors.accent} strokeWidth="1" fill="none"/>
          <circle cx="250" cy="250" r="120" stroke={colors.accent} strokeWidth="1" fill="none"/>
        </svg>
        <div style={{ position: 'relative', zIndex: 2 }}>
          <div style={{ fontSize: 12, letterSpacing: '0.18em', color: colors.accent, fontWeight: 700, marginBottom: 16 }}>
            HEMEN BAŞLA
          </div>
          <h2 style={{
            fontSize: 52, fontWeight: 800, lineHeight: 1.02,
            letterSpacing: '-0.03em', margin: 0,
          }}>
            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>
        <div style={{ position: 'relative', zIndex: 2, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <a href="https://brosisenstitu.voc-tester.com/giris" target="_blank" rel="noopener" style={{
            padding: '18px 24px', background: colors.accent, color: colors.primary,
            border: 'none', borderRadius: 12, fontSize: 16, fontWeight: 700,
            cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            textDecoration: 'none',
          }}>
            Hemen başvur
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
              <path d="M3 9H15M15 9L10 4M15 9L10 14" stroke={colors.primary} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </a>
          <a href="/iletisim" style={{
            padding: '18px 24px', background: 'transparent', color: '#fff',
            border: '1px solid rgba(255,255,255,0.3)', borderRadius: 12,
            fontSize: 16, fontWeight: 600, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            textDecoration: 'none',
          }}>
            Bize ulaş
            <span style={{ fontSize: 13, opacity: 0.7 }}>+90 533 636 56 78</span>
          </a>
        </div>
      </div>
    </div>
  );
}

// ---- FOOTER --------------------------------------------------------------
function HomeFooter({ colors }) {
  return (
    <div style={{
      padding: '64px 64px 32px',
      background: colors.deep,
      color: 'rgba(255,255,255,0.7)',
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48,
        marginBottom: 48,
      }}>
        <div>
          <BrosisLogo height={40} mono />
          <div style={{ fontSize: 14, lineHeight: 1.6, marginTop: 20, maxWidth: 320 }}>
            TÜRKAK tarafından akredite, MYK yetkili belgelendirme kuruluşu. Mesleki yeterlilik sınavları için resmi adres.
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 24 }}>
            {['f', 'tw', 'in', 'ig'].map(s => (
              <div key={s} style={{
                width: 36, height: 36, borderRadius: 8,
                background: 'rgba(255,255,255,0.05)',
                border: '1px solid rgba(255,255,255,0.1)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 12, fontWeight: 700, color: '#fff',
              }}>{s}</div>
            ))}
          </div>
        </div>
        {[
          { t: 'Kurumsal', items: [
            { l: 'Hakkımızda', h: '/hakkimizda' },
            { l: 'Akreditasyonlar', h: '/hakkimizda' },
            { l: 'İnsan Kaynakları', h: '/kariyer' },
            { l: 'Kalite Politikası', h: '/hakkimizda' },
          ] },
          { t: 'Hizmetler', items: [
            { l: 'Emlak Danışmanı', h: '/sorumlu-emlak-danismani-mesleki-yeterlilik-belgesi' },
            { l: 'Sorumlu Emlak Danışmanı', h: '/sorumlu-emlak-danismani-mesleki-yeterlilik-belgesi' },
            { l: 'Emlak Brokeri', h: '/sorumlu-emlak-danismani-mesleki-yeterlilik-belgesi' },
            { l: 'Belge Sorgulama', h: '/belge-sorgula' },
          ] },
          { t: 'İletişim', items: [
            { l: '+90 533 636 5678', h: 'tel:+905336365678' },
            { l: 'info@brosisenstitu.com', h: 'mailto:info@brosisenstitu.com' },
            { l: 'İstanbul, Türkiye', h: 'https://maps.google.com/?q=İçerenköy+Ataşehir+İstanbul' },
            { l: 'İletişim formu', h: '/iletisim' },
          ] },
        ].map(col => (
          <div key={col.t}>
            <div style={{ fontSize: 13, fontWeight: 700, color: '#fff', marginBottom: 20, letterSpacing: '0.05em' }}>{col.t}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {col.items.map(it => (
                <a key={it.l} href={it.h} style={{ fontSize: 14, color: 'rgba(255,255,255,0.6)', cursor: 'pointer', textDecoration: 'none' }}>{it.l}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.1)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontSize: 12,
      }}>
        <div>© 2024 Brosis Enstitü Belgelendirme Ltd. Şti. Tüm hakları saklıdır.</div>
        <div style={{ display: 'flex', gap: 24 }}>
          <a href="/kvkk" style={{ color: 'rgba(255,255,255,0.5)', textDecoration: 'none' }}>KVKK</a>
          <a href="/cerez-politikasi" style={{ color: 'rgba(255,255,255,0.5)', textDecoration: 'none' }}>Çerez Politikası</a>
          <a href="/gizlilik" style={{ color: 'rgba(255,255,255,0.5)', textDecoration: 'none' }}>Gizlilik</a>
        </div>
      </div>
    </div>
  );
}

window.FullHomepage = FullHomepage;

// ---- News Ticker (animated text carousel) ---------------------------------
function NewsTicker({ colors }) {
  const items = [
    { tag: 'YENİ', text: 'Sorumlu Emlak Danışmanı Seviye 5 belgesi artık uzaktan online sınav ile yapılabilmektedir.' },
    { tag: 'GÜNCELLEME', text: 'Emlak Brokeri Seviye 6 başvuruları açıldı. Kontenjan sınırlıdır.' },
    { tag: 'DUYURU', text: 'TÜRKAK akreditasyonumuz AB-0169-P numarası ile 2024 yılında yenilenmiştir.' },
    { tag: 'YASAL', text: 'MYK belgesi olmadan emlak danışmanlığı yapmak idari para cezası gerektirir.' },
  ];
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % items.length), 4500);
    return () => clearInterval(t);
  }, []);
  return (
    <div style={{
      gridColumn: 'span 6', gridRow: 'span 1',
      background: '#fff',
      border: '1px solid #E5E9F0',
      borderRadius: 20,
      padding: 0,
      display: 'flex', alignItems: 'stretch',
      overflow: 'hidden',
      position: 'relative',
    }}>
      {/* Left rail with megaphone icon */}
      <div style={{
        width: 64, flexShrink: 0,
        background: colors.primary,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        position: 'relative',
      }}>
        <svg width="26" height="26" viewBox="0 0 26 26" fill="none">
          <path d="M4 10V16L13 19V7L4 10Z" stroke="#fff" strokeWidth="1.6" strokeLinejoin="round"/>
          <path d="M13 7V19L20 22V4L13 7Z" stroke={colors.accent} strokeWidth="1.6" strokeLinejoin="round"/>
          <path d="M7 16V20" stroke="#fff" strokeWidth="1.6" strokeLinecap="round"/>
        </svg>
      </div>
      <div style={{ flex: 1, padding: '20px 24px', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 10, position: 'relative', overflow: 'hidden' }}>
        {/* item */}
        <div key={idx} style={{ animation: 'tickerFade 600ms ease' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
            <span style={{
              fontSize: 10, fontWeight: 800, letterSpacing: '0.15em',
              color: colors.accent,
              padding: '3px 8px',
              background: `${colors.accent}15`,
              borderRadius: 4,
            }}>{items[idx].tag}</span>
            <span style={{ fontSize: 11, color: '#94A3B8', fontWeight: 600 }}>BROSİS DUYURU</span>
          </div>
          <div style={{ fontSize: 14, color: colors.primary, lineHeight: 1.5, fontWeight: 500 }}>
            {items[idx].text}
          </div>
        </div>
        {/* dots */}
        <div style={{ display: 'flex', gap: 6, position: 'absolute', right: 24, bottom: 16 }}>
          {items.map((_, i) => (
            <div key={i} style={{
              width: i === idx ? 16 : 6, height: 4, borderRadius: 2,
              background: i === idx ? colors.accent : '#E5E9F0',
              transition: 'all 400ms ease',
            }}/>
          ))}
        </div>
      </div>
      <style>{`
        @keyframes tickerFade {
          from { opacity: 0; transform: translateY(6px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
}