// MathMentor — Shared Navigation + Footer
// Used by every page. Exports SharedNav, SharedFooter, Breadcrumb, BookCTA to window.

const { Button } = window.MathMentorDesignSystem_e84fdd;
const _parts = window.location.pathname.replace(/\/$/,"").split("/").filter(Boolean); const CURR_PAGE = _parts[_parts.length-1] || "index";

const curricula = [
  { label: "IB Mathematics",        flag: "🌐", href: "/ib-mathematics-tutor/" },
  { label: "IGCSE Mathematics",     flag: "🇬🇧", href: "/igcse-mathematics-tutor/" },
  { label: "USA Curriculum",        flag: "🇺🇸", href: "/usa-curriculum/" },
  { label: "Australian Curriculum", flag: "🇦🇺", href: "/australia-curriculum/" },
  { label: "Canadian Curriculum",   flag: "🇨🇦", href: "/canada-curriculum/" },
  { label: "CBSE Mathematics",      flag: "🇮🇳", href: "/cbse-mathematics/" },
];

const exams = [
  { label: "SAT Mathematics",   flag: "🎓", href: "/sat-math-tutor/" },
  { label: "IIT JEE",           flag: "🎯", href: "/iit-jee-mathematics/" },
  { label: "GATE Mathematics",  flag: "⚙️", href: "/gate-mathematics/" },
];

const dropStyle = {
  position: "absolute", top: "calc(100% + 8px)", left: "50%",
  transform: "translateX(-50%)", background: "#fff",
  border: "1px solid rgba(0,0,0,0.08)", borderRadius: 16,
  boxShadow: "0 16px 48px rgba(0,0,0,0.12)", padding: "8px",
  minWidth: 260, zIndex: 200,
};

function Dropdown({ items, open }) {
  if (!open) return null;
  return (
    <div style={dropStyle}>
      {items.map(item => (
        <a key={item.href} href={item.href}
          style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", borderRadius: 10, fontSize: 14, fontWeight: 500, color: "var(--ink-secondary)", background: item.href.includes(CURR_PAGE) && CURR_PAGE !== "index" ? "rgba(124,58,237,0.06)" : "transparent", transition: "background 120ms" }}
          onMouseEnter={e => e.currentTarget.style.background = "rgba(124,58,237,0.06)"}
          onMouseLeave={e => e.currentTarget.style.background = CURR_PAGE === item.href ? "rgba(124,58,237,0.06)" : "transparent"}
        >
          <span style={{ fontSize: 18 }}>{item.flag}</span>
          <span>{item.label}</span>
          {CURR_PAGE === item.href && <span style={{ marginLeft: "auto", fontSize: 10, fontWeight: 700, color: "#7c3aed" }}>Current</span>}
        </a>
      ))}
    </div>
  );
}

function SharedNav() {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [currOpen, setCurrOpen] = React.useState(false);
  const [examOpen, setExamOpen] = React.useState(false);

  const navLinks = [
    { label: "Home",         href: "/" },
    { label: "About",        href: "/about/" },
    { label: "Contact",      href: "/contact/" },
  ];

  return (
    <>
      <nav role="navigation" aria-label="Main navigation" style={{ position: "sticky", top: 0, zIndex: 100, background: "var(--canvas)", borderBottom: "1px solid var(--hairline)", fontFamily: "var(--font-sans)" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "8px 32px" }} className="nav-inner">
          {/* Logo */}
          <a href="/" aria-label="MathMentor — Home" style={{ display: "flex", alignItems: "center", flexShrink: 0 }}>
            <img loading="eager" fetchpriority="high" src={(window.BASE_PATH || "") + "uploads/watermark-sm.png"} alt="MathMentor by JK Sir" style={{ height: 52, width: "auto" }} />
          </a>

          {/* Desktop links */}
          <div className="nav-links" style={{ display: "flex", alignItems: "center", gap: 6 }}>
            {navLinks.map(l => (
              <a key={l.href} href={l.href} className={"mm-nav-link" + (l.href.includes(CURR_PAGE) && CURR_PAGE !== "index" ? " active" : "")}
                style={{ fontSize: 14, fontWeight: 500, color: "var(--ink-secondary)", padding: "8px 14px", borderRadius: 8, transition: "color 120ms, background 120ms" }}
                onMouseEnter={e => e.currentTarget.style.background = "rgba(124,58,237,0.05)"}
                onMouseLeave={e => e.currentTarget.style.background = "transparent"}
              >{l.label}</a>
            ))}

            {/* Curriculums dropdown */}
            <div style={{ position: "relative" }}
              onMouseEnter={() => { setCurrOpen(true); setExamOpen(false); }}
              onMouseLeave={() => setCurrOpen(false)}>
              <button style={{ fontSize: 14, fontWeight: 500, color: curricula.some(c=>c.href===CURR_PAGE) ? "#7c3aed" : "var(--ink-secondary)", padding: "8px 14px", borderRadius: 8, background: "none", border: "none", cursor: "pointer", display: "flex", alignItems: "center", gap: 4, fontFamily: "var(--font-sans)" }}>
                Curriculums <span style={{ fontSize: 10, opacity: 0.6 }}>▼</span>
              </button>
              <Dropdown items={curricula} open={currOpen} />
            </div>

            {/* Exams dropdown */}
            <div style={{ position: "relative" }}
              onMouseEnter={() => { setExamOpen(true); setCurrOpen(false); }}
              onMouseLeave={() => setExamOpen(false)}>
              <button style={{ fontSize: 14, fontWeight: 500, color: exams.some(e=>e.href===CURR_PAGE) ? "#7c3aed" : "var(--ink-secondary)", padding: "8px 14px", borderRadius: 8, background: "none", border: "none", cursor: "pointer", display: "flex", alignItems: "center", gap: 4, fontFamily: "var(--font-sans)" }}>
                Exams <span style={{ fontSize: 10, opacity: 0.6 }}>▼</span>
              </button>
              <Dropdown items={exams} open={examOpen} />
            </div>
          </div>

          <div style={{ display: "flex", alignItems: "center", gap: 12, flexShrink: 0 }}>
            <a href="tel:+919928793096" className="nav-phone" style={{ fontSize: 13, color: "var(--ink-muted)", fontWeight: 500 }}>+91 99287 93096</a>
            <Button variant="primary" size="sm" onClick={() => window.MM.book()}>Book Free Trial</Button>
            <button className="hamburger" onClick={() => setMobileOpen(o => !o)} aria-label="Toggle menu" aria-expanded={mobileOpen}
              style={{ display: "none", background: "none", border: "none", cursor: "pointer", padding: 6, flexShrink: 0 }}>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--ink-95)" strokeWidth="2.2" strokeLinecap="round">
                {mobileOpen ? (<><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>) : (<><line x1="3" y1="7" x2="21" y2="7"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="17" x2="21" y2="17"/></>)}
              </svg>
            </button>
          </div>
        </div>

        {/* Mobile drawer */}
        {mobileOpen && (
          <div style={{ background: "var(--canvas)", borderTop: "1px solid var(--hairline)", padding: "12px 20px 20px", display: "flex", flexDirection: "column", gap: 2, boxShadow: "0 8px 24px rgba(0,0,0,0.08)" }}>
            {[...navLinks, ...curricula, ...exams].map(l => (
              <a key={l.href} href={l.href}
                style={{ padding: "12px 8px", fontSize: 15, fontWeight: CURR_PAGE === l.href ? 700 : 500, color: CURR_PAGE === l.href ? "#7c3aed" : "var(--ink-secondary)", borderBottom: "1px solid var(--hairline)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <span>{l.flag && <span style={{ marginRight: 8 }}>{l.flag}</span>}{l.label}</span>
                <span style={{ fontSize: 18, color: "var(--ink-faint)" }}>›</span>
              </a>
            ))}
            <a href="tel:+919928793096" style={{ marginTop: 8, padding: "8px 8px", fontSize: 14, color: "var(--ink-muted)", fontWeight: 500 }}>📞 +91 99287 93096</a>
            <button onClick={() => { setMobileOpen(false); window.MM.book(); }}
              style={{ marginTop: 8, padding: "14px", background: "linear-gradient(90deg,#7c3aed,#4f46e5)", border: "none", borderRadius: 12, fontSize: 16, fontWeight: 700, color: "#fff", cursor: "pointer", fontFamily: "var(--font-sans)" }}>
              Book Free Assessment
            </button>
          </div>
        )}
      </nav>

      {/* Mobile sticky bar */}
      <div className="mm-mobile-bar" style={{ display: "none", position: "fixed", bottom: 0, left: 0, right: 0, zIndex: 99, background: "var(--canvas)", borderTop: "1px solid var(--hairline)", padding: "10px 16px", gap: 10, boxShadow: "0 -4px 20px rgba(0,0,0,0.10)" }}>
        <a href="https://wa.me/919928793096" target="_blank" rel="noopener noreferrer"
          style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: 8, background: "#25d366", borderRadius: 12, padding: "12px 0", fontSize: 15, fontWeight: 700, color: "#fff" }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="white"><path d="M17.47 14.38c-.3-.15-1.77-.87-2.04-.97-.28-.1-.48-.15-.68.15-.2.3-.77.97-.95 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.76-1.66-2.06-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.68-1.63-.93-2.23-.24-.59-.49-.51-.68-.52-.17 0-.37-.01-.57-.01s-.52.07-.79.37c-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.87 1.22 3.07.15.2 2.1 3.21 5.09 4.5.71.31 1.26.49 1.7.63.71.23 1.36.19 1.87.12.57-.09 1.77-.73 2.02-1.43.24-.7.24-1.3.17-1.43-.07-.13-.27-.2-.57-.35zm-5.42 7.41h-.01A9.87 9.87 0 016.6 19.5l-.34-.2-3.52.92.94-3.43-.22-.35a9.88 9.88 0 01-1.52-5.27C1.94 5.95 6.5 1.4 12.06 1.4a9.83 9.83 0 016.99 2.9 9.83 9.83 0 012.9 6.99c-.01 5.56-4.56 10.1-10.1 10.1zm8.6-18.7A11.82 11.82 0 0012.05 0C5.42 0 .03 5.4.01 12.03a11.99 11.99 0 001.61 6.03L0 24l6.1-1.6a12.03 12.03 0 005.95 1.52h.01C17.68 23.92 23.07 18.52 23.09 11.9a11.83 11.83 0 00-3.44-8.81z"/></svg>
          WhatsApp
        </a>
        <button onClick={() => window.MM.book()} style={{ flex: 1, background: "linear-gradient(90deg,#7c3aed,#4f46e5)", border: "none", borderRadius: 12, padding: "12px 0", fontSize: 15, fontWeight: 700, color: "#fff", cursor: "pointer", fontFamily: "var(--font-sans)" }}>
          Book Free Class
        </button>
      </div>
    </>
  );
}

function Breadcrumb({ crumbs }) {
  return (
    <nav aria-label="Breadcrumb" style={{ marginBottom: 20 }}>
      <ol className="mm-breadcrumb" style={{ listStyle: "none", padding: 0, margin: 0 }}>
        <li><a href="/">Home</a></li>
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            <li className="sep" aria-hidden="true">›</li>
            <li>{c.href ? <a href={c.href}>{c.label}</a> : <span aria-current="page" style={{ color: "#fff", fontWeight: 600 }}>{c.label}</span>}</li>
          </React.Fragment>
        ))}
      </ol>
    </nav>
  );
}

function BookCTA({ heading, subtext, context, primaryLabel = "Book Free Assessment", secondaryLabel = "Talk to JK Sir" }) {
  return (
    <div className="mm-cta-strip">
      <div aria-hidden="true" style={{ position: "absolute", top: -60, left: -60, width: 300, height: 300, borderRadius: "50%", background: "radial-gradient(circle, rgba(139,92,246,0.20) 0%, transparent 70%)", pointerEvents: "none" }} />
      <div aria-hidden="true" style={{ position: "absolute", bottom: -60, right: -60, width: 280, height: 280, borderRadius: "50%", background: "radial-gradient(circle, rgba(79,70,229,0.18) 0%, transparent 70%)", pointerEvents: "none" }} />
      <div className="mm-page-container" style={{ position: "relative", zIndex: 1 }}>
        <h2>{heading}</h2>
        <p>{subtext}</p>
        <div className="mm-cta-btns">
          <button onClick={() => window.MM.book(context)} style={{ padding: "14px 32px", background: "linear-gradient(90deg,#7c3aed,#4f46e5)", border: "none", borderRadius: 12, fontSize: 16, fontWeight: 700, color: "#fff", cursor: "pointer", fontFamily: "var(--font-sans)", boxShadow: "0 8px 24px rgba(124,58,237,0.30)" }}>
            🚀 {primaryLabel}
          </button>
          <a href="/contact/" style={{ padding: "14px 28px", background: "rgba(255,255,255,0.10)", border: "1px solid rgba(255,255,255,0.22)", borderRadius: 12, fontSize: 16, fontWeight: 600, color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
            {secondaryLabel} →
          </a>
        </div>
      </div>
    </div>
  );
}

function SharedFooter() {
  const allPages = [
    { group: "Services", items: [
      { label: "Online Tutoring",  href: "/#services" },
      { label: "Free Assessment",  href: "/contact/" },
      { label: "About JK Sir",     href: "/about/" },
      { label: "Testimonials",     href: "/testimonials/" },
      { label: "FAQ",              href: "/faq/" },
    ]},
    { group: "Curriculums", items: curricula },
    { group: "Competitive Exams", items: [
      ...exams,
      { label: "ACT Mathematics",  href: "/sat-math-tutor/" },
      { label: "Math Olympiad",    href: "/iit-jee-mathematics/" },
    ]},
    { group: "Company", items: [
      { label: "Contact Us",       href: "/contact/" },
      { label: "Success Stories",  href: "/testimonials/" },
      { label: "Download App",     href: "https://clpdiy4.page.link/G24W" },
    ]},
  ];
  const socials = [
    { label: "YouTube",   color: "#ff0000", href: "https://www.youtube.com/@MathMentor-y4y",
      icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M23.5 6.2a3 3 0 00-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6a3 3 0 00-2.1 2.1C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 002.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 002.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.7 15.5V8.5l6.3 3.5-6.3 3.5z"/></svg> },
    { label: "Instagram",  color: "#e1306c", href: "https://www.instagram.com/mathmentorjksir/",
      icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.2c3.2 0 3.6 0 4.9.1 3.3.2 4.8 1.7 5 5 .1 1.3.1 1.6.1 4.8 0 3.2 0 3.6-.1 4.8-.2 3.3-1.7 4.8-5 5-1.3.1-1.6.1-4.9.1-3.2 0-3.6 0-4.8-.1-3.3-.2-4.8-1.7-5-5C2.1 15.6 2 15.3 2 12c0-3.2 0-3.6.1-4.8.2-3.3 1.7-4.8 5-5C8.4 2.2 8.8 2.2 12 2.2zm0-2.2C8.7 0 8.3 0 7.1.1 2.7.3.3 2.7.1 7.1 0 8.3 0 8.7 0 12c0 3.3 0 3.7.1 4.9.2 4.4 2.6 6.8 7 7C8.3 24 8.7 24 12 24s3.7 0 4.9-.1c4.4-.2 6.8-2.6 7-7 .1-1.2.1-1.6.1-4.9 0-3.3 0-3.7-.1-4.9C23.7 2.7 21.3.3 16.9.1 15.7 0 15.3 0 12 0zm0 5.8a6.2 6.2 0 100 12.4A6.2 6.2 0 0012 5.8zm0 10.2a4 4 0 110-8 4 4 0 010 8zm6.4-11.8a1.4 1.4 0 100 2.8 1.4 1.4 0 000-2.8z"/></svg> },
    { label: "Facebook",   color: "#1877f2", href: "https://www.facebook.com/expolearn",
      icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.04V9.41c0-3.02 1.8-4.7 4.54-4.7 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.95.93-1.95 1.88v2.27h3.32l-.53 3.5h-2.79V24C19.61 23.1 24 18.1 24 12.07z"/></svg> },
    { label: "LinkedIn",   color: "#0a66c2", href: "https://www.linkedin.com/in/jayesh-rawat-008b7b3a",
      icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.37V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 110-4.12 2.06 2.06 0 010 4.12zM7.12 20.45H3.57V9h3.55v11.45zM22.22 0H1.77C.8 0 0 .77 0 1.73v20.54C0 23.23.8 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"/></svg> },
    { label: "WhatsApp",   color: "#25d366", href: "https://wa.me/919928793096",
      icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M17.47 14.38c-.3-.15-1.77-.87-2.04-.97-.28-.1-.48-.15-.68.15-.2.3-.77.97-.95 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.76-1.66-2.06-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.68-1.63-.93-2.23-.24-.59-.49-.51-.68-.52-.17 0-.37-.01-.57-.01s-.52.07-.79.37c-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.87 1.22 3.07.15.2 2.1 3.21 5.09 4.5.71.31 1.26.49 1.7.63.71.23 1.36.19 1.87.12.57-.09 1.77-.73 2.02-1.43.24-.7.24-1.3.17-1.43-.07-.13-.27-.2-.57-.35zm-5.42 7.41h-.01A9.87 9.87 0 016.6 19.5l-.34-.2-3.52.92.94-3.43-.22-.35a9.88 9.88 0 01-1.52-5.27C1.94 5.95 6.5 1.4 12.06 1.4a9.83 9.83 0 016.99 2.9 9.83 9.83 0 012.9 6.99c-.01 5.56-4.56 10.1-10.1 10.1zm8.6-18.7A11.82 11.82 0 0012.05 0C5.42 0 .03 5.4.01 12.03a11.99 11.99 0 001.61 6.03L0 24l6.1-1.6a12.03 12.03 0 005.95 1.52h.01C17.68 23.92 23.07 18.52 23.09 11.9a11.83 11.83 0 00-3.44-8.81z"/></svg> },
  ];

  return (
    <footer style={{ background: "linear-gradient(160deg,#0c0520 0%,#1a0845 45%,#0f0c29 100%)", color: "#fff", fontFamily: "var(--font-sans)", padding: "72px 0 0", position: "relative", overflow: "hidden" }}>
      <div aria-hidden="true" style={{ position: "absolute", top: -100, left: -60, width: 380, height: 380, borderRadius: "50%", background: "radial-gradient(circle,rgba(124,58,237,0.12) 0%,transparent 70%)", pointerEvents: "none" }} />
      <div className="mm-page-container" style={{ position: "relative", zIndex: 1 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr 1fr 1fr 1fr", gap: 36, marginBottom: 48 }}>
          {/* Brand */}
          <div>
            <img loading="lazy" decoding="async" src={(window.BASE_PATH || "") + "uploads/logo new-1971c03b.jpg"} alt="MathMentor by JK Sir" style={{ height: 64, width: "auto", borderRadius: 10, marginBottom: 14 }} />
            <p style={{ margin: "0 0 6px", fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.30)", textTransform: "uppercase", letterSpacing: "2px" }}>LEARN · SOLVE · SUCCEED</p>
            <p style={{ margin: "0 0 16px", fontSize: 13, color: "rgba(255,255,255,0.50)", lineHeight: 1.6 }}>Expert 1-to-1 online mathematics tutoring for students across IB, IGCSE, SAT, JEE, GATE and global curricula.</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 7, marginBottom: 16 }}>
              {[["📞","+91 9928793096","tel:+919928793096"],["✉","jayeshrwt@gmail.com","mailto:jayeshrwt@gmail.com"]].map(([ic,text,href])=>(
                <a key={href} href={href} style={{ display: "flex", gap: 8, fontSize: 12, color: "rgba(255,255,255,0.55)", fontWeight: 500 }}><span>{ic}</span>{text}</a>
              ))}
            </div>
            <div style={{ display: "flex", gap: 8 }}>
              {socials.map(s => (
                <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" title={s.label}
                  style={{ width: 32, height: 32, borderRadius: "50%", background: "rgba(255,255,255,0.07)", border: "1px solid rgba(255,255,255,0.10)", display: "flex", alignItems: "center", justifyContent: "center", color: s.color, transition: "background 150ms, transform 150ms" }}
                  onMouseEnter={e=>{e.currentTarget.style.background=s.color+"22";e.currentTarget.style.transform="translateY(-2px)";}}
                  onMouseLeave={e=>{e.currentTarget.style.background="rgba(255,255,255,0.07)";e.currentTarget.style.transform="none";}}
                >{s.icon}</a>
              ))}
            </div>
          </div>
          {/* Nav cols */}
          {allPages.map(col => (
            <div key={col.group}>
              <h3 style={{ margin: "0 0 14px", fontSize: 12, fontWeight: 700, color: "rgba(255,255,255,0.50)", textTransform: "uppercase", letterSpacing: "0.8px" }}>{col.group}</h3>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                {col.items.map((item, idx) => (
                  <li key={col.group + '-' + idx}>
                    <a href={item.href} style={{ fontSize: 13, color: CURR_PAGE === item.href ? "#a78bfa" : "rgba(255,255,255,0.50)", fontWeight: CURR_PAGE === item.href ? 600 : 400, display: "block", transition: "color 150ms" }}
                      onMouseEnter={e=>e.currentTarget.style.color="#a78bfa"}
                      onMouseLeave={e=>e.currentTarget.style.color=CURR_PAGE===item.href?"#a78bfa":"rgba(255,255,255,0.50)"}
                    >{item.label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        {/* Bottom bar */}
        <div style={{ borderTop: "1px solid rgba(255,255,255,0.07)", padding: "18px 0", display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
          <p style={{ margin: 0, fontSize: 12, color: "rgba(255,255,255,0.28)" }}>© 2026 MathMentor by JK Sir. All Rights Reserved.</p>
          <div style={{ display: "flex", gap: 20 }}>
            {["Privacy Policy","Terms & Conditions","Refund Policy"].map(l=>(
              <a key={l} href="#" onClick={e=>e.preventDefault()} title={l+" — Coming Soon"} style={{ fontSize: 11, color: "rgba(255,255,255,0.28)", fontWeight: 500 }}>{l}</a>
            ))}
          </div>
          <p style={{ margin: 0, fontSize: 11, color: "rgba(255,255,255,0.22)" }}>Made with ❤️ for Students Worldwide</p>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SharedNav, SharedFooter, Breadcrumb, BookCTA });