// Nav, Footer, FAB, MobileNav, Logo
const { useState, useEffect, useContext } = React;

const PAGES_NL = [
  {id:"home",        label:"Home"},
  {id:"shop",        label:"Modellen"},
  {id:"accessories", label:"Accessoires"},
  {id:"about",       label:"Over Zyro"},
  {id:"service",     label:"Service"},
  {id:"regels",      label:"FAQ"},
  {id:"contact",     label:"Contact"},
];
const PAGES_EN = [
  {id:"home",        label:"Home"},
  {id:"shop",        label:"Models"},
  {id:"accessories", label:"Accessories"},
  {id:"about",       label:"About Zyro"},
  {id:"service",     label:"Service"},
  {id:"regels",      label:"FAQ"},
  {id:"contact",     label:"Contact"},
];
const PAGES = PAGES_NL; // kept for backwards-compat code that imported PAGES

const Logo = ({ onClick, small=false }) => (
  <div className="logo" onClick={onClick}>
    <div className="logo-mark"><span>Z</span></div>
    <div className="logo-text">
      ZYRO ELECTRIC
      {!small && <small>NEDERLAND</small>}
    </div>
  </div>
);

const ComplianceBar = () => {
  const langCtx = useContext(window.LangContext || React.createContext({ lang: "nl", t: (nl) => nl }));
  const t = langCtx.t || ((nl) => nl);
  return (
    <div className="compliance">
      <span className="accent">●</span>&nbsp;
      {t(
        "250W motor · trapondersteuning tot 25 km/u · walk-assist tot 6 km/u · EU goedgekeurd · service in NL",
        "250W motor · pedal assist up to 25 km/h · walk-assist up to 6 km/h · EU approved · service in the Netherlands"
      )}
    </div>
  );
};

const Nav = ({ page, setPage, onLoginClick }) => {
  const cart = useContext(CartContext);
  const auth = useContext(window.AuthContext || React.createContext({ user: null, isAdmin: false }));
  const langCtx = useContext(window.LangContext || React.createContext({ lang: "nl", setLang: () => {}, t: (nl) => nl }));
  const themeCtx = useContext(window.ThemeContext || React.createContext({ theme: "light", toggleTheme: () => {} }));
  const t = langCtx.t || ((nl) => nl);
  const lang = langCtx.lang || "nl";
  const LP = window.LP || ((o, f) => o && o[f]);
  const navPages = (langCtx.lang === "en") ? PAGES_EN : PAGES_NL;
  // If a modal handler is provided AND the user isn't signed in, opening the
  // login modal is preferred over navigating to /#login — keeps the URL clean.
  const goAccount = () => {
    if (auth && auth.user) {
      setPage(auth.isAdmin ? "admin" : "account");
    } else if (typeof onLoginClick === "function") {
      onLoginClick();
    } else {
      setPage("login");
    }
  };
  const [mobileOpen, setMobileOpen] = useState(false);
  const [searchOpen, setSearchOpen] = useState(false);
  const [q, setQ] = useState("");
  return (
    <>
      <header className="nav">
        <div className="nav-inner">
          <Logo onClick={() => setPage("home")}/>
          <nav className="nav-links">
            {navPages.map(p => (
              <button key={p.id} className={page === p.id ? "active" : ""} onClick={() => setPage(p.id)}>{p.label}</button>
            ))}
          </nav>
          <div className="nav-actions">
            <button className="icon-btn" onClick={() => setSearchOpen(s => !s)} aria-label={t("Zoeken","Search")}><Icon name="search" size={20}/></button>
            <button className="nav-toggle-btn hide-mobile"
              onClick={() => langCtx.setLang(langCtx.lang === "en" ? "nl" : "en")}
              aria-label={t("Taal wisselen","Switch language")}
              title={t("Taal wisselen","Switch language")}>
              <span className="flag" aria-hidden="true">{langCtx.lang === "en" ? "🇬🇧" : "🇳🇱"}</span>
              <span>{langCtx.lang === "en" ? "EN" : "NL"}</span>
            </button>
            <button className="icon-btn hide-mobile"
              onClick={() => themeCtx.toggleTheme()}
              aria-label={t("Donker thema wisselen","Toggle dark mode")}
              title={themeCtx.theme === "dark" ? t("Lichte modus","Light mode") : t("Donkere modus","Dark mode")}>
              <Icon name={themeCtx.theme === "dark" ? "sun" : "moon"} size={20}/>
            </button>
            <button className="icon-btn hide-mobile" aria-label={t("Account","Account")}
              onClick={goAccount}
              title={auth && auth.user ? (auth.profile && auth.profile.full_name) || auth.user.email : t("Inloggen","Sign in")}>
              <Icon name="user" size={20}/>
              {auth && auth.user && <span style={{position:"absolute", top:6, right:6, width:7, height:7, borderRadius:50, background:"var(--ok)"}}/>}
            </button>
            <button className="icon-btn" onClick={() => cart.setOpen(true)} aria-label={t("Winkelmand","Cart")}>
              <Icon name="cart" size={20}/>
              {cart.count > 0 && <span className="cart-badge">{cart.count}</span>}
            </button>
            <button className="icon-btn mobile-toggle" onClick={() => setMobileOpen(true)} aria-label={t("Menu","Menu")}><Icon name="menu" size={22}/></button>
          </div>
        </div>
        {searchOpen && (
          <div style={{borderTop:"1px solid var(--line)", padding: "16px 28px", background:"var(--paper)"}}>
            <div style={{maxWidth: 720, margin: "0 auto", position:"relative"}}>
              <Icon name="search" size={18} style={{position:"absolute", left: 14, top: "50%", transform:"translateY(-50%)", color:"var(--ink-mute)"}}/>
              <input
                autoFocus value={q} onChange={e => setQ(e.target.value)}
                className="input" placeholder={t("Zoek modellen, accessoires…","Search models, accessories…")}
                style={{paddingLeft: 42}}
                onKeyDown={e => { if (e.key === "Enter") { setPage("shop"); setSearchOpen(false); }}}
              />
              {q && (
                <div className="card" style={{marginTop: 8, position:"absolute", left: 0, right: 0, padding: 8, zIndex: 60}}>
                  {[...Object.values(PRODUCTS), ...ACCESSORIES]
                    .filter(p => ((LP(p,"name",lang) || p.name || "") + " " + (LP(p,"short",lang) || p.short || "") + " " + (LP(p,"desc",lang) || p.desc || "")).toLowerCase().includes(q.toLowerCase()))
                    .slice(0, 6).map(p => (
                      <button key={p.id} onClick={() => { setPage(p.type === "accessoire" ? "accessories" : p.id); setSearchOpen(false); setQ(""); }}
                        style={{display:"flex", alignItems:"center", gap:12, padding: "10px 12px", borderRadius: 8, width:"100%", textAlign:"left"}}
                        onMouseEnter={e => e.currentTarget.style.background = "var(--bg)"}
                        onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
                        <div style={{width: 40, height: 40, borderRadius: 6, background:"var(--bg)", display:"grid", placeItems:"center"}}>
                          <Icon name={p.icon || "bike"} size={18}/>
                        </div>
                        <div>
                          <div style={{fontWeight:600, fontSize:14}}>{LP(p,"name",lang) || LP(p,"short",lang) || p.name || p.short}</div>
                          <div className="mono" style={{fontSize: 11, color:"var(--ink-mute)"}}>{formatEUR(p.price)}</div>
                        </div>
                      </button>
                    ))}
                </div>
              )}
            </div>
          </div>
        )}
      </header>
      {mobileOpen && (
        <>
          <div className="mob-overlay" onClick={() => setMobileOpen(false)}/>
          <div className="mob-panel">
            <header>
              <Logo small/>
              <button className="icon-btn" onClick={() => setMobileOpen(false)}><Icon name="x" size={22}/></button>
            </header>
            <nav>
              {navPages.map(p => (
                <button key={p.id} className={page === p.id ? "active" : ""}
                  onClick={() => { setPage(p.id); setMobileOpen(false); }}>{p.label}</button>
              ))}
              <button className={page === "account" || page === "login" ? "active" : ""}
                onClick={() => {
                  setMobileOpen(false);
                  if (auth && auth.user) {
                    setPage("account");
                  } else if (typeof onLoginClick === "function") {
                    onLoginClick();
                  } else {
                    setPage("login");
                  }
                }}>
                {auth && auth.user ? t("Mijn account","My account") : t("Inloggen","Sign in")}
              </button>
              {auth && (auth.isAdmin || auth.isStaff) && (
                <button className={page === "admin" ? "active" : ""}
                  onClick={() => { setPage("admin"); setMobileOpen(false); }}>{t("Adminpaneel","Admin panel")}</button>
              )}
              <div style={{display:"flex", gap:8, padding:"12px 0", borderTop:"1px solid var(--line)", marginTop:8}}>
                <button className="nav-toggle-btn" style={{flex:1}}
                  onClick={() => langCtx.setLang(langCtx.lang === "en" ? "nl" : "en")}>
                  <span className="flag">{langCtx.lang === "en" ? "🇬🇧" : "🇳🇱"}</span>
                  <span>{langCtx.lang === "en" ? "EN" : "NL"}</span>
                </button>
                <button className="nav-toggle-btn" style={{flex:1}}
                  onClick={() => themeCtx.toggleTheme()}>
                  <Icon name={themeCtx.theme === "dark" ? "sun" : "moon"} size={14}/>
                  <span>{themeCtx.theme === "dark" ? t("Licht","Light") : t("Donker","Dark")}</span>
                </button>
              </div>
            </nav>
            <footer>
              <a href={getWhatsAppHref(t("Ik wil advies over een Zyro Electric fiets","I would like advice about a Zyro Electric bike"))} target="_blank" rel="noopener" className="btn btn-whats btn-block">
                <Icon name="whatsapp" size={16} fill="#06281a"/> {t("WhatsApp advies","WhatsApp support")}
              </a>
              <button className="btn btn-ghost btn-block" onClick={() => { setPage("contact"); setMobileOpen(false); }}>
                <Icon name="bike" size={16}/> {t("Plan proefrit","Book a test ride")}
              </button>
            </footer>
          </div>
        </>
      )}
    </>
  );
};

const Footer = ({ setPage }) => {
  const langCtx = useContext(window.LangContext || React.createContext({ lang:"nl", t: (nl) => nl }));
  const t = langCtx.t || ((nl) => nl);
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <Logo/>
            <p style={{marginTop: 18, maxWidth: 320, lineHeight: 1.6, color:"#aaa"}}>
              {t(
                "Legale elektrische fatbikes en crossbikes voor stad, school, werk en dagelijks gebruik. Een nieuw bedrijf uit Utrecht Overvecht.",
                "Legal electric fat-bikes and cross-bikes for city, school, commuting and everyday use. A new company from Utrecht Overvecht."
              )}
            </p>
            <div className="social-row">
              <a aria-label="Instagram"><Icon name="instagram" size={18}/></a>
              <a aria-label="TikTok"><Icon name="tiktok" size={18}/></a>
              <a aria-label="YouTube"><Icon name="youtube" size={18}/></a>
              <a aria-label="WhatsApp" href={getWhatsAppHref(t("Ik wil advies over een Zyro Electric fiets","I would like advice about a Zyro Electric bike"))} target="_blank" rel="noopener"><Icon name="whatsapp" size={18}/></a>
            </div>
          </div>
          <div>
            <h4>{t("Winkel","Shop")}</h4>
            <a onClick={()=>setPage("shop")}>{t("Modellen","Models")}</a>
            <a onClick={()=>setPage("v20")}>Zyro V20 Pro</a>
            <a onClick={()=>setPage("gt2000")}>Zyro GT2000</a>
            <a onClick={()=>setPage("accessories")}>{t("Accessoires","Accessories")}</a>
            <a onClick={()=>setPage("compare")}>{t("Vergelijken","Compare")}</a>
          </div>
          <div>
            <h4>{t("Support","Support")}</h4>
            <a onClick={()=>setPage("service")}>{t("Service & garantie","Service & warranty")}</a>
            <a onClick={()=>setPage("service")}>{t("Retourneren","Returns")}</a>
            <a onClick={()=>setPage("service")}>{t("Levering","Delivery")}</a>
            <a onClick={()=>setPage("regels")}>{t("Fatbike regels","Fat-bike rules")}</a>
            <a onClick={()=>setPage("contact")}>Contact</a>
          </div>
          <div>
            <h4>Account</h4>
            <a onClick={()=>setPage("login")}>{t("Inloggen / Registreren","Sign in / Register")}</a>
            <a onClick={()=>setPage("account")}>{t("Mijn account","My account")}</a>
            <a onClick={()=>setPage("about")}>{t("Over Zyro","About Zyro")}</a>
            <a>{t("Showroom · Paranadreef 257, Utrecht","Showroom · Paranadreef 257, Utrecht")}</a>
            <a>{t("Algemene voorwaarden","Terms & conditions")}</a>
            <a>{t("Privacybeleid","Privacy policy")}</a>
          </div>
          <div>
            <h4>{t("Veilig betalen","Secure payment")}</h4>
            <div className="pay-chips">
              <span className="pay-chip mollie">Mollie</span>
              <span className="pay-chip">VISA</span>
              <span className="pay-chip">MC</span>
              <span className="pay-chip">Bancontact</span>
            </div>
            <div style={{marginTop:8, fontSize:11, color:"#888"}}>
              {t("Betaal veilig via Mollie","Pay securely with Mollie")}
            </div>
            <h4 style={{marginTop:24}}>{t("Nieuwsbrief","Newsletter")}</h4>
            <div style={{display:"flex", gap: 6}}>
              <input className="input" placeholder={t("je@email.nl","you@email.com")} style={{height:42, background:"#222", color:"#fff", border:"1px solid #333"}}/>
              <button className="btn btn-accent btn-sm">OK</button>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Zyro Electric Nederland · KvK 96908327</div>
          <div>{t("Legale e-bikes · Utrecht Overvecht","Legal e-bikes · Utrecht Overvecht")}</div>
        </div>
      </div>
    </footer>
  );
};

const FloatingWhats = () => {
  const langCtx = useContext(window.LangContext || React.createContext({ t: (nl) => nl }));
  const t = langCtx.t || ((nl) => nl);
  return (
    <a href={getWhatsAppHref(t("Ik wil advies over een Zyro Electric fiets","I would like advice about a Zyro Electric bike"))} target="_blank" rel="noopener" className="fab" aria-label={t("WhatsApp advies","WhatsApp support")}>
      <Icon name="whatsapp" size={26} fill="#fff" stroke="none"/>
    </a>
  );
};

const SecHead = ({ eyebrow, title, sub, right, className }) => (
  <div className={"sec-head " + (className || "")}>
    <div>
      {eyebrow && <div className="eyebrow" style={{marginBottom: 14}}>{eyebrow}</div>}
      <h2>{title}</h2>
    </div>
    {(sub || right) && <div style={{display:"flex", flexDirection:"column", gap:18, alignItems:"flex-end", maxWidth: 480}}>
      {sub && <p>{sub}</p>}
      {right}
    </div>}
  </div>
);

window.Nav = Nav;
window.Footer = Footer;
window.FloatingWhats = FloatingWhats;
window.SecHead = SecHead;
window.Logo = Logo;
window.ComplianceBar = ComplianceBar;
window.PAGES = PAGES;