/* ============================================================
   Shared chrome — Nav, Footer, Router helpers
   ============================================================ */

const { useState, useEffect, useRef, useMemo } = React;

/* ---------- Hash router ---------- */
function useHashRoute() {
  const [route, setRoute] = useState(() => (window.location.hash || "#/").replace(/^#/, "") || "/");
  useEffect(() => {
    const onHash = () => {
      setRoute((window.location.hash || "#/").replace(/^#/, "") || "/");
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  return route;
}

function Link({ to, children, className = "", style = {}, onClick }) {
  // External / WHMCS links: render as real anchor (new tab optional)
  const isExternal = /^https?:\/\//.test(to) || to.startsWith("/whmcs") || to.startsWith("mailto:");
  const href = isExternal ? to : "#" + to;
  return (
    <a
      href={href}
      className={className}
      style={style}
      onClick={(e) => { onClick && onClick(e); }}
    >
      {children}
    </a>
  );
}

/* ---------- WHMCS endpoint constants ----------
   Loominost WHMCS lives at /whmcs/ — update if yours differs. */
const WHMCS = {
  signup:   "/whmcs/index.php?rp=/store/shared-hosting-cpanel",
  login:    "/whmcs/index.php?rp=/login",
  register: "/whmcs/index.php?rp=/register",
  cart:     "/whmcs/cart.php",
  ticket:   "/whmcs/submitticket.php",
  sales:    "/whmcs/submitticket.php?step=2&deptid=1",
  support:  "/whmcs/submitticket.php?step=2&deptid=2",
  abuse:    "/whmcs/contact.php",
  status:   "/whmcs/serverstatus.php",
  kb:       "/whmcs/knowledgebase.php",
  news:     "/whmcs/announcements.php",
  clientarea: "/whmcs/clientarea.php",
};
window.WHMCS = WHMCS;

/* ---------- Announcement bar ---------- */
function AnnouncementBar() {
  return (
    <div style={{
      background: "var(--ink)",
      color: "var(--bg)",
      fontFamily: "var(--font-mono)",
      fontSize: 12,
      letterSpacing: "0.02em",
      textAlign: "center",
      padding: "8px 16px",
    }}>
      <span style={{ color: "var(--accent-glow)" }}>●</span>{" "}
      UNLIMITED Resources cPanel hosting from <b style={{ color: "#fff" }}>$2.95/mo</b>.{" "}
      <Link to={WHMCS.signup} style={{ textDecoration: "underline", textUnderlineOffset: 3 }}>
        See plans →
      </Link>
    </div>
  );
}

/* ---------- Top Nav ---------- */
function TopNav({ route }) {
  const [open, setOpen] = useState(false);
  const navItems = [
    { to: "/hosting", label: "cPanel Hosting" },
    { to: "/pricing", label: "Pricing" },
    { to: "/locations", label: "Locations" },
    { to: "/docs", label: "Docs" },
    { to: "https://loominost.com/whmcs/contact.php", label: "Contact" },
  ];
  return (
    <header style={{
      position: "sticky",
      top: 0,
      zIndex: 40,
      background: "rgba(245, 247, 250, 0.82)",
      backdropFilter: "blur(12px) saturate(140%)",
      WebkitBackdropFilter: "blur(12px) saturate(140%)",
      borderBottom: "1px solid var(--line)",
    }}>
      <div className="wrap" style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        height: 64,
      }}>
        <Link to="/" style={{ display: "flex", alignItems: "center" }}>
          <LoominostLogo size={20} />
        </Link>

        <nav style={{ display: "flex", gap: 4, alignItems: "center" }}>
          {navItems.map(n => {
            const active = route === n.to || (n.to !== "/" && route.startsWith(n.to));
            return (
              <Link
                key={n.to}
                to={n.to}
                style={{
                  fontSize: 14,
                  padding: "8px 14px",
                  borderRadius: 999,
                  color: active ? "var(--ink)" : "var(--ink-2)",
                  background: active ? "var(--bg-3)" : "transparent",
                  fontWeight: active ? 500 : 400,
                  transition: "all 140ms var(--ease)",
                }}
              >
                {n.label}
              </Link>
            );
          })}
        </nav>

        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <Link to={WHMCS.login} className="btn btn-ghost btn-sm">Client Login</Link>
          <Link to="/pricing" className="btn btn-primary btn-sm">
            Get started <span className="arrow">→</span>
          </Link>
        </div>
      </div>
    </header>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer style={{
      background: "var(--ink)",
      color: "#C9C4BA",
      paddingTop: 80,
      paddingBottom: 28,
      marginTop: 120,
    }}>
      <div className="wrap">
        {/* Big lockup */}
        <div style={{
          display: "flex",
          alignItems: "flex-end",
          justifyContent: "space-between",
          gap: 40,
          paddingBottom: 64,
          borderBottom: "1px solid #2a2a2a",
          flexWrap: "wrap",
        }}>
          <div style={{ flex: "1 1 380px", minWidth: 280 }}>
            <div style={{
              fontFamily: "var(--font-serif)",
              fontSize: "clamp(40px, 5vw, 72px)",
              lineHeight: 0.95,
              letterSpacing: "-0.02em",
              color: "#fff",
            }}>
              Ready when<br/>
              <em style={{ color: "var(--accent-glow)", fontStyle: "italic" }}>you are.</em>
            </div>
          </div>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <Link to={WHMCS.signup} className="btn btn-accent">
              Start hosting <span className="arrow">→</span>
            </Link>
          </div>
        </div>

        {/* Link cols */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr 1fr 1fr 1fr",
          gap: 40,
          padding: "56px 0",
          borderBottom: "1px solid #2a2a2a",
        }}>
          <div>
            <LoominostLogo size={18} color="#fff" />
            <p style={{
              marginTop: 18,
              fontSize: 13,
              color: "#8a857c",
              maxWidth: 260,
              lineHeight: 1.6,
            }}>
              Fast, reliable cPanel web hosting. LiteSpeed + NVMe in Florida, Seattle, and Frankfurt.
            </p>
            <div style={{ marginTop: 20 }}>
              <span className="pill" style={{
                background: "transparent",
                borderColor: "#2a2a2a",
                color: "#C9C4BA",
              }}>
                <span className="dot" />
                All systems operational
              </span>
            </div>
          </div>
          <FooterCol title="Product" items={[
            ["cPanel Hosting", "/hosting"],
            ["Pricing", "/pricing"],
            ["Locations", "/locations"],
            ["Migration", "/hosting#migration"],
          ]} />
          <FooterCol title="Resources" items={[
            ["Docs", "/docs"],
            ["Knowledgebase", WHMCS.kb],
            ["Announcements", WHMCS.news],
            ["Server Status", WHMCS.status],
          ]} />
          <FooterCol title="Company" items={[
            ["Contact sales", WHMCS.sales],
            ["Open a ticket", WHMCS.ticket],
            ["Client area", WHMCS.clientarea],
            ["Report abuse", WHMCS.abuse],
          ]} />
          <FooterCol title="Legal" items={[
            ["Terms of Service", "/legal/tos"],
            ["Privacy Policy", "/legal/privacy"],
            ["Acceptable Use", "/legal/aup"],
          ]} />
        </div>

        {/* Bottom bar */}
        <div style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          paddingTop: 28,
          fontFamily: "var(--font-mono)",
          fontSize: 11,
          color: "#6a655c",
          letterSpacing: "0.04em",
        }}>
          <div>© 2023–2026 Loominost LLP · LLP0037896-LGN</div>
          <div>hello@loominost.com · support@loominost.com</div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div style={{
        fontFamily: "var(--font-mono)",
        fontSize: 11,
        letterSpacing: "0.12em",
        textTransform: "uppercase",
        color: "#8a857c",
        marginBottom: 16,
      }}>{title}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10 }}>
        {items.map(([label, to]) => (
          <li key={label}>
            <Link to={to} style={{ fontSize: 14, color: "#C9C4BA" }}>{label}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { useHashRoute, Link, AnnouncementBar, TopNav, Footer });