// Header, Footer, FloatingActions
const { useState, useEffect } = React;

function Logo({ size = 'md', dark = false }) {
  const sz = size === 'sm' ? 'w-9 h-9' : 'w-11 h-11';
  return (
    <div className="flex items-center gap-3 shrink-0">
      <img src="assets/vizyonlogo2.png" alt="Vizyon" className={`${sz} object-contain`} />
      <div className="leading-[1.05]">
        <div className={`font-display font-bold text-[1.05rem] tracking-tight ${dark ? 'text-white' : 'text-ink'}`} style={{ letterSpacing: '-0.01em' }}>
          Vizyon
        </div>
        <div className="text-[0.62rem] tracking-[0.18em] uppercase font-semibold text-vred">
          Gelişim Akademi
        </div>
      </div>
    </div>
  );
}

function NavBar({ page, setPage, dark }) {
  const [open, setOpen] = useState(false);
  const links = [
    { id: 'home',     label: 'Anasayfa' },
    { id: 'about',    label: 'Hakkımızda' },
    { id: 'programs', label: 'Programlar' },
    { id: 'contact',  label: 'İletişim' },
  ];

  return (
    <header className={`sticky top-0 z-40 backdrop-blur-xl border-b transition-colors ${dark ? 'bg-ink/85 border-white/10' : 'bg-paper/85 border-ink/8'}`}>
      <div className="max-w-[1280px] mx-auto px-5 md:px-8 h-[72px] flex items-center justify-between">
        <button onClick={() => setPage('home')} className="cursor-pointer">
          <Logo dark={dark} />
        </button>

        <nav className="hidden md:flex items-center gap-1">
          {links.map(l => {
            const active = page === l.id;
            return (
              <button key={l.id} onClick={() => setPage(l.id)}
                className={`relative px-4 py-2 text-[0.92rem] font-medium tracking-tight transition-colors ${
                  active ? (dark ? 'text-white' : 'text-ink') : (dark ? 'text-white/60 hover:text-white' : 'text-ink/55 hover:text-ink')
                }`}>
                {l.label}
                {active && <span className="absolute left-1/2 -translate-x-1/2 bottom-0.5 w-1 h-1 rounded-full bg-vred" />}
              </button>
            );
          })}
        </nav>

        <div className="flex items-center gap-2.5">
          <a href="tel:+905467635391" className={`hidden lg:inline-flex items-center gap-2 px-3.5 py-2 text-[0.85rem] font-medium tracking-tight transition-colors ${dark ? 'text-white/70 hover:text-white' : 'text-ink/65 hover:text-ink'}`}>
            <i data-lucide="phone" className="w-3.5 h-3.5"></i>
            (0546) 763 53 91
          </a>
          <button onClick={() => setPage('contact')}
            className="hidden md:inline-flex items-center gap-2 px-4 py-2.5 text-[0.88rem] font-semibold tracking-tight bg-vred text-white rounded-full hover:bg-vred-dark transition-colors shadow-sm shadow-vred/20">
            Başvur
            <i data-lucide="arrow-right" className="w-3.5 h-3.5"></i>
          </button>
          <button onClick={() => setOpen(o => !o)} className={`md:hidden p-2 ${dark ? 'text-white' : 'text-ink'}`} aria-label="Menü">
            <i data-lucide={open ? 'x' : 'menu'} className="w-6 h-6"></i>
          </button>
        </div>
      </div>

      {open && (
        <div className={`md:hidden border-t ${dark ? 'border-white/10 bg-ink' : 'border-ink/8 bg-paper'}`}>
          <div className="px-5 py-4 flex flex-col gap-1">
            {links.map(l => (
              <button key={l.id} onClick={() => { setPage(l.id); setOpen(false); }}
                className={`text-left px-4 py-3 rounded-xl text-[0.95rem] font-medium ${
                  page === l.id ? 'bg-vred/10 text-vred' : (dark ? 'text-white/80' : 'text-ink/75')
                }`}>{l.label}</button>
            ))}
            <button onClick={() => { setPage('contact'); setOpen(false); }}
              className="mt-2 text-center py-3.5 rounded-full bg-vred text-white font-semibold">Başvur</button>
          </div>
        </div>
      )}
    </header>
  );
}

function Footer({ setPage, dark }) {
  return (
    <footer className={`mt-24 ${dark ? 'bg-black' : 'bg-ink'} text-white`}>
      <div className="max-w-[1280px] mx-auto px-5 md:px-8 pt-16 pb-8">
        {/* big wordmark */}
        <div className="border-b border-white/10 pb-12 mb-12">
          <div className="font-display font-light text-[clamp(3.5rem,10vw,9rem)] leading-[0.95] tracking-[-0.04em] text-white/95">
            Vizyon<span className="text-vred">.</span>
          </div>
          <div className="mt-4 text-[0.78rem] tracking-[0.22em] uppercase text-white/40 font-medium">
            Gelişim · Akademi · Belgelendirme
          </div>
        </div>

        <div className="grid md:grid-cols-12 gap-8 mb-16">
          <div className="md:col-span-5">
            <p className="text-[0.95rem] text-white/60 leading-relaxed max-w-md">
              Türkiye genelinde mesleki tecrübenizi yasal zemine taşıyan yetkili belgelendirme kuruluşu. Kalfalık, Ustalık ve Usta Öğreticilik belgelerinde 5.000'den fazla başarılı süreç.
            </p>
            <div className="flex items-center gap-2.5 mt-6">
              <a href="https://wa.me/905467635391" target="_blank" rel="noreferrer" className="inline-flex items-center gap-2 px-4 py-2.5 rounded-full bg-white/8 hover:bg-white/15 border border-white/10 text-[0.85rem] font-medium transition-colors">
                <i data-lucide="message-circle" className="w-3.5 h-3.5"></i> WhatsApp
              </a>
              <a href="tel:+905467635391" className="inline-flex items-center gap-2 px-4 py-2.5 rounded-full bg-white/8 hover:bg-white/15 border border-white/10 text-[0.85rem] font-medium transition-colors">
                <i data-lucide="phone" className="w-3.5 h-3.5"></i> Telefon
              </a>
            </div>
          </div>

          <div className="md:col-span-3">
            <div className="text-[0.7rem] tracking-[0.2em] uppercase text-white/40 mb-4 font-semibold">Sayfalar</div>
            <ul className="space-y-2.5 text-[0.95rem]">
              {[['home','Anasayfa'],['about','Hakkımızda'],['programs','Programlar'],['contact','İletişim']].map(([id, label]) => (
                <li key={id}><button onClick={() => setPage(id)} className="text-white/75 hover:text-white transition-colors">{label}</button></li>
              ))}
            </ul>
          </div>

          <div className="md:col-span-4">
            <div className="text-[0.7rem] tracking-[0.2em] uppercase text-white/40 mb-4 font-semibold">İletişim</div>
            <ul className="space-y-3 text-[0.95rem]">
              <li className="flex items-start gap-3">
                <i data-lucide="phone" className="w-4 h-4 text-vred mt-0.5 shrink-0"></i>
                <a href="tel:+905467635391" className="text-white/85 hover:text-white">(0546) 763 53 91</a>
              </li>
              <li className="flex items-start gap-3">
                <i data-lucide="mail" className="w-4 h-4 text-vred mt-0.5 shrink-0"></i>
                <a href="mailto:iletisim@vizyon-egitim.com" className="text-white/85 hover:text-white break-all">iletisim@vizyon-egitim.com</a>
              </li>
              <li className="flex items-start gap-3">
                <i data-lucide="map-pin" className="w-4 h-4 text-vred mt-0.5 shrink-0"></i>
                <span className="text-white/75">Atatürk Bulvarı No:85/19,<br/>Kızılay · Çankaya / Ankara</span>
              </li>
            </ul>
          </div>
        </div>

        <div className="pt-6 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-4 text-[0.78rem] text-white/40">
          <div>© 2025 Vizyon Gelişim Akademi · Tüm hakları saklıdır</div>
          <div className="flex flex-wrap gap-x-6 gap-y-1 justify-center">
            <a href="#" className="hover:text-white/80">Gizlilik Politikası</a>
            <a href="#" className="hover:text-white/80">Kullanım Şartları</a>
            <a href="#" className="hover:text-white/80">Çerez Politikası</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FloatingActions() {
  return (
    <div className="fixed bottom-5 right-5 md:bottom-7 md:right-7 flex flex-col gap-3 z-30">
      <a href="https://wa.me/905467635391" target="_blank" rel="noreferrer"
         className="group relative flex items-center justify-center w-12 h-12 md:w-14 md:h-14 rounded-full bg-[#25d366] text-white shadow-xl shadow-green-600/30 hover:scale-110 active:scale-95 transition-transform"
         aria-label="WhatsApp">
        <span className="absolute inset-0 rounded-full bg-[#25d366] animate-ping opacity-30" />
        <i data-lucide="message-circle" className="w-5 h-5 md:w-6 md:h-6 fill-current relative"></i>
      </a>
      <a href="tel:+905467635391"
         className="flex items-center justify-center w-12 h-12 md:w-14 md:h-14 rounded-full bg-vred text-white shadow-xl shadow-vred/30 hover:scale-110 active:scale-95 transition-transform"
         aria-label="Ara">
        <i data-lucide="phone" className="w-5 h-5 md:w-6 md:h-6 fill-current"></i>
      </a>
    </div>
  );
}

window.NavBar = NavBar;
window.Footer = Footer;
window.FloatingActions = FloatingActions;
window.Logo = Logo;