// Navbar + Footer + Mobile bottom bar + shared band components.

const { useState, useEffect } = React;

const NAV = [
  { id: "home", label: "Home" },
  { id: "services", label: "Services" },
  { id: "diagnostics", label: "Diagnostics" },
  { id: "team", label: "Our Vets" },
  { id: "about", label: "About" },
  { id: "contact", label: "Contact" },
];

function Navbar({ route, setRoute }) {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onS = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onS);
    onS();
    return () => window.removeEventListener("scroll", onS);
  }, []);

  const go = (id) => { setRoute({ page: id }); setOpen(false); };

  return (
    <header className={"nav " + (scrolled ? "nav-scrolled" : "")}>
      <div className="container nav-inner">
        <a href="#" onClick={(e) => { e.preventDefault(); go("home"); }} className="nav-brand" aria-label="Blue Oasis Veterinary Clinic — home">
          <BrandLogo size={38} />
        </a>

        <nav className="nav-links" aria-label="Primary">
          {NAV.map(n => (
            <a key={n.id}
               href={`#${n.id}`}
               className={"nav-link " + (route.page === n.id ? "active" : "")}
               onClick={(e) => { e.preventDefault(); go(n.id); }}>
              {n.label}
            </a>
          ))}
        </nav>

        <div className="nav-cta">
          <a href={`tel:${window.BOV_DATA.clinic.emergencyTel.replace(/\s+/g,'')}`} className="nav-emergency">
            <span className="dot alert pulse" style={{ color: "var(--alert)" }} />
            <span>
              <span className="nav-emergency-label">24/7 Emergency</span>
              <span className="nav-emergency-num">050 557 8834</span>
            </span>
          </a>
          <button className="btn btn-primary btn-sm" onClick={() => go("contact")}>
            Book an appointment
            <Icon name="arrow-right" size={14} stroke={2}/>
          </button>
        </div>

        <button className="nav-burger" aria-label="Menu" onClick={() => setOpen(o => !o)}>
          <Icon name={open ? "x" : "menu"} size={22} />
        </button>
      </div>

      {open && (
        <div className="nav-mobile">
          {NAV.map(n => (
            <a key={n.id} href={`#${n.id}`}
               className={"nav-mobile-link " + (route.page === n.id ? "active" : "")}
               onClick={(e) => { e.preventDefault(); go(n.id); }}>
              {n.label}
              <Icon name="arrow-right" size={14} stroke={2}/>
            </a>
          ))}
          <a href={`tel:${window.BOV_DATA.clinic.emergencyTel.replace(/\s+/g,'')}`} className="nav-mobile-emergency">
            <Icon name="phone" size={16}/> 24/7 Emergency — 050 557 8834
          </a>
        </div>
      )}

      <style>{`
        .nav {
          position: sticky; top: 0; z-index: 50;
          background: rgba(255,255,255,.78);
          backdrop-filter: saturate(1.1) blur(14px);
          -webkit-backdrop-filter: saturate(1.1) blur(14px);
          border-bottom: 1px solid transparent;
          transition: background .2s ease, border-color .2s ease;
        }
        .nav-scrolled {
          background: rgba(255,255,255,.92);
          border-bottom: 1px solid var(--line);
        }
        .nav-inner {
          display: grid;
          grid-template-columns: auto 1fr auto;
          gap: 24px;
          align-items: center;
          padding-top: 14px; padding-bottom: 14px;
        }
        .nav-brand { display: inline-flex; }
        .nav-links {
          display: flex; gap: 4px; justify-content: center;
        }
        .nav-link {
          padding: 8px 14px; border-radius: var(--r-pill);
          font-size: 14px; font-weight: 500; color: var(--slate);
          transition: color .15s ease, background .15s ease;
        }
        .nav-link:hover { color: var(--oasis-deep); background: var(--sky); }
        .nav-link.active { color: var(--oasis-deep); background: var(--sky); }
        .nav-cta { display: flex; gap: 14px; align-items: center; }
        .nav-emergency {
          display: inline-flex; align-items: center; gap: 10px;
          padding: 6px 12px 6px 10px;
          border-radius: var(--r-pill);
          border: 1px solid var(--line);
          background: var(--paper);
          transition: border-color .15s ease;
        }
        .nav-emergency:hover { border-color: var(--alert); }
        .nav-emergency .dot { background: var(--alert); }
        .nav-emergency-label {
          display: block; font-size: 10.5px; letter-spacing: .14em;
          font-family: var(--f-mono); text-transform: uppercase; color: var(--alert);
          line-height: 1.1;
        }
        .nav-emergency-num {
          display: block; font-size: 13.5px; font-weight: 600; color: var(--ink);
          letter-spacing: -.01em;
        }
        .nav-burger {
          display: none;
          padding: 10px;
          border-radius: 10px; border: 1px solid var(--line);
          color: var(--oasis-deep);
        }
        .nav-mobile {
          padding: 8px var(--pad) 18px;
          background: var(--paper);
          border-bottom: 1px solid var(--line);
          display: flex; flex-direction: column; gap: 2px;
        }
        .nav-mobile-link {
          display: flex; justify-content: space-between; align-items: center;
          padding: 14px 8px; border-bottom: 1px solid var(--line-soft);
          font-size: 16px; font-weight: 500;
        }
        .nav-mobile-link.active { color: var(--oasis); }
        .nav-mobile-emergency {
          margin-top: 10px;
          display: inline-flex; gap: 8px; align-items: center; justify-content: center;
          padding: 12px;
          background: var(--alert); color: #fff;
          border-radius: var(--r-pill);
          font-weight: 600; font-size: 14px;
        }
        @media (max-width: 980px) {
          .nav-links, .nav-cta { display: none; }
          .nav-burger { display: inline-flex; }
          .nav-inner { grid-template-columns: 1fr auto; }
        }
      `}</style>
    </header>
  );
}

function Footer({ setRoute }) {
  const c = window.BOV_DATA.clinic;
  return (
    <footer className="footer">
      <ECGLine color="rgba(255,255,255,.18)" />
      <div className="container footer-grid">
        <div className="footer-brand">
          <BrandLogo size={42} color="#fff"/>
          <p style={{ color: "rgba(255,255,255,.78)", maxWidth: 380, marginTop: 18 }}>
            A small-animal hospital in Dubai Investments Park 1, with an in-house MRI suite, a named international specialist team, and 24/7 emergency care.
          </p>
          <p className="footer-motto">"{c.motto}"</p>
        </div>

        <div>
          <h4 className="footer-h">Care</h4>
          {["Diagnostics & Imaging","Emergency & Critical Care","Surgical Care","Vaccinations","Dermatology","Internal Medicine"].map(s => (
            <a key={s} href="#services" onClick={(e)=>{e.preventDefault(); setRoute({page:"services"});}} className="footer-link">{s}</a>
          ))}
        </div>

        <div>
          <h4 className="footer-h">Visit</h4>
          <p className="footer-text">{c.address}<br/>{c.address2}</p>
          <div className="footer-line"><Icon name="phone" size={14}/> <a href={`tel:${c.phoneTel}`}>{c.phone}</a></div>
          <div className="footer-line"><Icon name="alert" size={14} style={{color:"var(--alert)"}}/> <a href={`tel:${c.emergencyTel.replace(/\s+/g,'')}`}>{c.emergency} — 24/7</a></div>
          <div className="footer-line"><Icon name="mail" size={14}/> <a href={`mailto:${c.email}`}>{c.email}</a></div>
        </div>

        <div>
          <h4 className="footer-h">Hours</h4>
          {c.hours.map(h => (
            <div key={h.d} className="footer-hours">
              <span>{h.d}</span><span>{h.t}</span>
            </div>
          ))}
          <a href={c.booking} target="_blank" rel="noreferrer" className="btn btn-leaf btn-sm" style={{ marginTop: 16 }}>
            Book online <Icon name="arrow-up-right" size={14} stroke={2}/>
          </a>
        </div>
      </div>

      <div className="container footer-bottom">
        <span>© {new Date().getFullYear()} Blue Oasis Veterinary Clinic. All rights reserved.</span>
        <span>Dubai Municipality &amp; MOCCAE licensed · Licence number to be displayed once supplied by clinic.</span>
      </div>

      <style>{`
        .footer {
          background: var(--oasis-deep);
          color: #fff;
          padding: 60px 0 24px;
          margin-top: 60px;
        }
        .footer-grid {
          display: grid;
          grid-template-columns: 1.4fr 1fr 1.3fr 1fr;
          gap: 48px;
          padding-top: 36px;
        }
        .footer-h {
          font-family: var(--f-mono);
          font-size: 11.5px; font-weight: 500;
          letter-spacing: .18em; text-transform: uppercase;
          color: rgba(255,255,255,.55);
          margin: 0 0 18px;
        }
        .footer-link {
          display: block; color: rgba(255,255,255,.82);
          padding: 5px 0; font-size: 14.5px;
        }
        .footer-link:hover { color: #fff; }
        .footer-text { color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.6; }
        .footer-line {
          display: flex; align-items: center; gap: 10px;
          color: rgba(255,255,255,.82);
          padding: 4px 0; font-size: 14px;
        }
        .footer-line a:hover { color: #fff; }
        .footer-hours {
          display: flex; justify-content: space-between;
          padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,.14);
          font-size: 13.5px; color: rgba(255,255,255,.86);
        }
        .footer-motto {
          margin-top: 22px;
          font-family: var(--f-display); font-style: italic; font-size: 22px;
          color: rgba(255,255,255,.95);
        }
        .footer-bottom {
          display: flex; justify-content: space-between; gap: 24px;
          margin-top: 48px; padding-top: 24px;
          border-top: 1px solid rgba(255,255,255,.14);
          font-size: 12.5px; color: rgba(255,255,255,.62);
        }
        @media (max-width: 900px) {
          .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
          .footer-bottom { flex-direction: column; gap: 6px; }
        }
        @media (max-width: 520px) {
          .footer-grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </footer>
  );
}

function MobileBottomBar({ setRoute }) {
  const c = window.BOV_DATA.clinic;
  return (
    <div className="mbar">
      <a href={`tel:${c.phoneTel}`} className="mbar-item">
        <Icon name="phone" size={18}/> <span>Call</span>
      </a>
      <a href={`tel:${c.emergencyTel.replace(/\s+/g,'')}`} className="mbar-item alert">
        <Icon name="alert" size={18}/> <span>Emergency</span>
      </a>
      <button className="mbar-item primary" onClick={() => setRoute({ page: "contact" })}>
        <Icon name="calendar" size={18}/> <span>Book</span>
      </button>

      <style>{`
        .mbar {
          display: none;
          position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
          background: var(--paper);
          border: 1px solid var(--line);
          border-radius: var(--r-pill);
          box-shadow: 0 10px 30px -10px rgba(15,26,36,.25);
          padding: 6px; gap: 4px;
        }
        .mbar-item {
          flex: 1;
          display: inline-flex; align-items: center; justify-content: center; gap: 8px;
          padding: 11px 10px; border-radius: var(--r-pill);
          font-size: 13px; font-weight: 600; color: var(--oasis-deep);
        }
        .mbar-item.alert { color: var(--alert); }
        .mbar-item.primary { background: var(--oasis); color: #fff; }
        @media (max-width: 720px) { .mbar { display: flex; } }
      `}</style>
    </div>
  );
}

window.Navbar = Navbar;
window.Footer = Footer;
window.MobileBottomBar = MobileBottomBar;