// shared.jsx — Header, MobileHeader, Footer, MobileBottomNav, WhatsAppFab

// ─────────── MOBILE HEADER + DRAWER ───────────
const MobileHeader = ({ page, setPage }) => {
  const [open, setOpen] = React.useState(false);
  const close = () => setOpen(false);

  const navItems = [
    { icon: "home",    label: "Ana Sayfa",   pg: "home" },
    { icon: "car",     label: "Araçlarımız", pg: "results" },
    { icon: "sparkle", label: "Hizmetler",   pg: "about" },
    { icon: "user",    label: "Hakkımızda",  pg: "about" },
    { icon: "mail",    label: "İletişim",    pg: "contact" },
  ];

  return (
    <>
      <div className="mobile-header">
        <div className="logo" onClick={() => { setPage("home"); close(); }} style={{ cursor:"pointer" }}>
          <div className="logo-mark">E</div>
          <div>
            <div className="logo-name">ENG<span> Transfer</span></div>
            <span className="logo-sub">Alanya · Premium</span>
          </div>
        </div>
        <button className="hamburger-btn" onClick={() => setOpen(true)}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5">
            <line x1="3" y1="6"  x2="21" y2="6"/>
            <line x1="3" y1="12" x2="21" y2="12"/>
            <line x1="3" y1="18" x2="21" y2="18"/>
          </svg>
        </button>
      </div>

      {open && (
        <div className="mobile-drawer">
          <div className="mobile-drawer-overlay" onClick={close}/>
          <div className="mobile-drawer-panel">
            <div className="mobile-drawer-header">
              <div className="logo">
                <div className="logo-mark">E</div>
                <div>
                  <div className="logo-name">ENG<span> Transfer</span></div>
                  <span className="logo-sub">Alanya · Premium</span>
                </div>
              </div>
              <button className="mobile-drawer-close" onClick={close}>✕</button>
            </div>

            <nav className="mobile-drawer-nav">
              {navItems.map(item => (
                <a key={item.label}
                   className={page === item.pg ? "active" : ""}
                   onClick={() => { setPage(item.pg); close(); }}
                   style={{ cursor:"pointer" }}>
                  <span className="nav-icon">
                    <Icon name={item.icon} size={18} style={{ color:"var(--red-bright)" }}/>
                  </span>
                  {item.label}
                </a>
              ))}
            </nav>

            <div className="mobile-drawer-divider"/>

            <div className="mobile-drawer-contact">
              <a href="tel:+905394311308">
                <span style={{ width:36,height:36,borderRadius:10,background:"rgba(185,28,28,.2)",display:"grid",placeItems:"center",flexShrink:0 }}>
                  <Icon name="phone" size={16} style={{ color:"var(--red-bright)" }}/>
                </span>
                +90 539 431 13 08
              </a>
              <a href="https://wa.me/905394311308" target="_blank">
                <span style={{ width:36,height:36,borderRadius:10,background:"rgba(37,211,102,.2)",display:"grid",placeItems:"center",flexShrink:0 }}>
                  <Icon name="whatsapp" size={16} style={{ color:"#25D366" }}/>
                </span>
                WhatsApp
              </a>
              <a href="mailto:rezervasyon@engtransfer.com">
                <span style={{ width:36,height:36,borderRadius:10,background:"rgba(11,61,145,.2)",display:"grid",placeItems:"center",flexShrink:0 }}>
                  <Icon name="mail" size={16} style={{ color:"var(--blue)" }}/>
                </span>
                rezervasyon@engtransfer.com
              </a>
            </div>

            <div style={{ padding:"16px 20px 0" }}>
              <button className="btn btn-primary btn-block"
                      onClick={() => { setPage("results"); close(); }}
                      style={{ borderRadius:12,fontSize:15 }}>
                <Icon name="plane" size={16}/> Araç Ara / Rezervasyon
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

// ─────────── DESKTOP HEADER ───────────
const Header = ({ lang, setLang, ccy, setCcy, page, setPage }) => {
  const [langOpen, setLangOpen] = React.useState(false);
  const [ccyOpen, setCcyOpen] = React.useState(false);
  const t = TRANSLATIONS[lang];

  React.useEffect(() => {
    const close = () => { setLangOpen(false); setCcyOpen(false); };
    document.addEventListener("click", close);
    return () => document.removeEventListener("click", close);
  }, []);

  return (
    <>
      <div className="topbar">
        <div className="topbar-inner">
          <div className="topbar-left">
            <a href="tel:+905394311308" className="topbar-item" style={{ textDecoration:"none" }}>
              <Icon name="phone" size={13}/> +90 539 431 13 08
            </a>
            <span className="topbar-item"><Icon name="clock" size={13}/> 7/24 Destek</span>
            <a href="mailto:rezervasyon@engtransfer.com" className="topbar-item" style={{ textDecoration:"none" }}>
              <Icon name="mail" size={13}/> rezervasyon@engtransfer.com
            </a>
          </div>
          <div className="topbar-right">
            <span className="topbar-item">★ 4.9/5 · 2.847 yorum</span>
          </div>
        </div>
      </div>

      <header className="header">
        <div className="header-inner">
          <div className="logo" onClick={() => setPage("home")} style={{ cursor:"pointer" }}>
            <div className="logo-mark">E</div>
            <div>
              <div className="logo-name">ENG<span> Transfer</span></div>
              <div className="logo-sub">Alanya · Premium</div>
            </div>
          </div>
          <nav className="nav">
            <a className={page==="home"    ?"active":""} onClick={()=>setPage("home")}    style={{cursor:"pointer"}}>{t.nav.home}</a>
            <a className={page==="results" ?"active":""} onClick={()=>setPage("results")} style={{cursor:"pointer"}}>{t.nav.vehicles}</a>
            <a className={page==="about"   ?"active":""} onClick={()=>setPage("about")}   style={{cursor:"pointer"}}>{t.nav.services}</a>
            <a className={page==="about"   ?"active":""} onClick={()=>setPage("about")}   style={{cursor:"pointer"}}>{t.nav.about}</a>
            <a className={page==="contact" ?"active":""} onClick={()=>setPage("contact")} style={{cursor:"pointer"}}>{t.nav.contact}</a>
          </nav>
          <div className="header-right">
            <div style={{ position:"relative" }} onClick={e=>e.stopPropagation()}>
              <button className="lang-switch" onClick={()=>{ setLangOpen(v=>!v); setCcyOpen(false); }}>
                <Flag code={lang}/>{LANGUAGES[lang].short}<Icon name="chevronDown" size={13}/>
              </button>
              {langOpen && (
                <div className="dropdown" style={{ zIndex:9999 }}>
                  {Object.values(LANGUAGES).map(l=>(
                    <div key={l.code} className={"dropdown-item "+(l.code===lang?"active":"")}
                         onClick={()=>{ setLang(l.code); setLangOpen(false); }}>
                      <Flag code={l.code}/><span>{l.name}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
            <div style={{ position:"relative" }} onClick={e=>e.stopPropagation()}>
              <button className="currency-switch" onClick={()=>{ setCcyOpen(v=>!v); setLangOpen(false); }}>
                {CURRENCIES[ccy].symbol} {ccy}<Icon name="chevronDown" size={13}/>
              </button>
              {ccyOpen && (
                <div className="dropdown" style={{ zIndex:9999 }}>
                  {Object.values(CURRENCIES).map(c=>(
                    <div key={c.code} className={"dropdown-item "+(c.code===ccy?"active":"")}
                         onClick={()=>{ setCcy(c.code); setCcyOpen(false); }}>
                      <span style={{ fontFamily:"var(--font-mono)",fontWeight:700,width:22 }}>{c.symbol}</span>
                      <span>{c.code} — {c.name}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
            <a href="tel:+905394311308" className="btn-call">
              <Icon name="phone" size={14}/> +90 539 431 13 08
            </a>
          </div>
        </div>
      </header>

      {/* Mobil header her zaman render edilir, CSS ile gösterilir/gizlenir */}
      <MobileHeader page={page} setPage={setPage}/>
    </>
  );
};

// ─────────── MOBİL BOTTOM NAVIGATION ───────────
const MobileBottomNav = ({ page, setPage }) => {
  const WaSvg = () => (
    <svg viewBox="0 0 24 24" fill="currentColor" width="26" height="26">
      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
    </svg>
  );

  return (
    <nav className="mobile-bottom-nav">
      {/* Ana Sayfa */}
      <button className={"mob-nav-item" + (page==="home" ? " active" : "")}
              onClick={()=>{ setPage("home"); window.scrollTo(0,0); }}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="22" height="22">
          <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
          <polyline points="9 22 9 12 15 12 15 22"/>
        </svg>
        Ana Sayfa
      </button>

      {/* Araçlar */}
      <button className={"mob-nav-item" + (page==="results" ? " active" : "")}
              onClick={()=>{ setPage("results"); window.scrollTo(0,0); }}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="22" height="22">
          <rect x="1" y="3" width="15" height="13" rx="2"/>
          <path d="M16 8h4l3 3v5h-7V8z"/>
          <circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/>
        </svg>
        Araçlar
      </button>

      {/* WhatsApp — orta, öne çıkan */}
      <a href="https://wa.me/905394311308" target="_blank" className="mob-nav-item whatsapp">
        <WaSvg/>
        WhatsApp
      </a>

      {/* Ara */}
      <a href="tel:+905394311308" className="mob-nav-item">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="22" height="22">
          <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.8 19.79 19.79 0 01.02 1.18 2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92z"/>
        </svg>
        Ara
      </a>

      {/* Rezervasyon */}
      <button className={"mob-nav-item" + (page==="booking"||page==="results" ? " active" : "")}
              onClick={()=>{ setPage("results"); window.scrollTo(0,0); }}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="22" height="22">
          <rect x="3" y="4" width="18" height="18" rx="2"/>
          <line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/>
          <line x1="3" y1="10" x2="21" y2="10"/>
          <line x1="8" y1="14" x2="8" y2="14" strokeLinecap="round" strokeWidth="3"/>
          <line x1="12" y1="14" x2="12" y2="14" strokeLinecap="round" strokeWidth="3"/>
          <line x1="16" y1="14" x2="16" y2="14" strokeLinecap="round" strokeWidth="3"/>
        </svg>
        Rezervasyon
      </button>
    </nav>
  );
};

// ─────────── FOOTER ───────────
const Footer = ({ lang, setPage }) => {
  const t = TRANSLATIONS[lang].footer;
  const nav = (p) => { if (setPage) { setPage(p); window.scrollTo(0,0); } };
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div>
          <div className="logo" style={{ marginBottom:18 }}>
            <div className="logo-mark">E</div>
            <div>
              <div className="logo-name" style={{ color:"white" }}>ENG<span> Transfer</span></div>
              <div className="logo-sub">Alanya · Premium</div>
            </div>
          </div>
          <p style={{ fontSize:14,color:"var(--gray-400)",maxWidth:320,lineHeight:1.6 }}>
            Antalya'nın en güvenilir havaalanı transfer firması. 2014'ten beri 200.000+ başarılı transfer.
          </p>
          <div style={{ marginTop:14,display:"flex",flexDirection:"column",gap:8 }}>
            <a href="tel:+905394311308" style={{ color:"var(--gray-400)",fontSize:14,textDecoration:"none" }}>
              <Icon name="phone" size={14}/> +90 539 431 13 08
            </a>
            <a href="https://wa.me/905394311308" style={{ color:"#25D366",fontSize:14,textDecoration:"none" }}>
              <Icon name="whatsapp" size={14}/> WhatsApp
            </a>
            <a href="mailto:rezervasyon@engtransfer.com" style={{ color:"var(--gray-400)",fontSize:14,textDecoration:"none" }}>
              <Icon name="mail" size={14}/> rezervasyon@engtransfer.com
            </a>
          </div>
        </div>
        <div>
          <h4>Hızlı Linkler</h4>
          <ul>
            <li><a onClick={()=>nav("home")}    style={{cursor:"pointer"}}>Ana Sayfa</a></li>
            <li><a onClick={()=>nav("results")} style={{cursor:"pointer"}}>Araç Filosu</a></li>
            <li><a onClick={()=>nav("about")}   style={{cursor:"pointer"}}>Hizmetler</a></li>
            <li><a onClick={()=>nav("about")}   style={{cursor:"pointer"}}>Hakkımızda</a></li>
            <li><a onClick={()=>nav("contact")} style={{cursor:"pointer"}}>İletişim</a></li>
          </ul>
        </div>
        <div>
          <h4>Hizmetlerimiz</h4>
          <ul>
            <li><a onClick={()=>nav("results")} style={{cursor:"pointer"}}>Shuttle Transfer</a></li>
            <li><a onClick={()=>nav("results")} style={{cursor:"pointer"}}>Taksi Transfer</a></li>
            <li><a onClick={()=>nav("results")} style={{cursor:"pointer"}}>VIP Transfer</a></li>
            <li><a onClick={()=>nav("results")} style={{cursor:"pointer"}}>Minivan Transfer</a></li>
          </ul>
        </div>
        <div>
          <h4>Adres</h4>
          <ul>
            <li style={{ color:"var(--gray-400)",fontSize:14,lineHeight:1.6 }}>
              Oba Mah. Fabrika Cad.<br/>
              Seven Trio Park Sit. No:11/B<br/>
              Alanya / Antalya, Türkiye
            </li>
          </ul>
        </div>
        <div>
          <h4>Yasal</h4>
          <ul>
            <li><a onClick={()=>nav("privacy")}      style={{cursor:"pointer"}}>Gizlilik Politikası</a></li>
            <li><a onClick={()=>nav("terms")}        style={{cursor:"pointer"}}>Kullanım Şartları</a></li>
            <li><a onClick={()=>nav("cancellation")} style={{cursor:"pointer"}}>İptal Politikası</a></li>
            <li><a onClick={()=>nav("kvkk")}         style={{cursor:"pointer"}}>KVKK</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 ENG Transfer · Tüm hakları saklıdır · Alanya, Türkiye</span>
        <div className="footer-payments">
          <span className="pay-badge">VISA</span>
          <span className="pay-badge">MASTERCARD</span>
          <span className="pay-badge">TROY</span>
          <span className="pay-badge">PAYPAL</span>
          <span className="pay-badge">SSL · 256BIT</span>
        </div>
      </div>
    </footer>
  );
};

// Desktop WhatsApp FAB (mobilde CSS ile gizlenir)
const WhatsAppFab = () => (
  <a className="fab-whatsapp" href="https://wa.me/905394311308"
     title="WhatsApp" target="_blank">
    <Icon name="whatsapp" size={28}/>
  </a>
);

window.Header = Header;
window.MobileHeader = MobileHeader;
window.Footer = Footer;
window.WhatsAppFab = WhatsAppFab;
window.MobileBottomNav = MobileBottomNav;
