/* Nexgen Solutions Chitral — shared page chrome (Nav, Footer, section helpers).
   Composes the bound design system. Exported to window so each page's
   Babel script can use them (Babel scripts don't share scope). */
const NS = window.NexgenSolutionsChitralDesignSystem_3ef89c;
const { Button, IconButton, AccentLine, TextLink } = NS;
const C = window.NEXGEN_CONTACT;

const NX_MAX = 1200;
const nxWrap = { maxWidth: NX_MAX, margin: "0 auto", padding: "0 24px" };

const Icon = ({ name, size = 20, color, strokeWidth = 1.8 }) => (
  <i data-lucide={name} style={{ width: size, height: size, color }} data-sw={strokeWidth}></i>
);

function useLucide(dep) {
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
}

const NAV_LINKS = [
  ["Home", "index.html"],
  ["Services", "services.html"],
  ["Courses", "courses.html"],
  ["Projects", "index.html#projects"],
  ["About", "about.html"],
  ["Contact", "contact.html"],
];

function Wordmark({ size = 15 }) {
  return (
    <a href="index.html" className="nx-wordmark" style={{ display: "flex", alignItems: "center", gap: 10, textDecoration: "none" }}>
      <span style={{ width: 12, height: 12, background: "var(--gradient-accent)", borderRadius: 2, flex: "none" }}></span>
      <span style={{ fontWeight: 800, fontSize: size, letterSpacing: "0.04em", color: "#fff", whiteSpace: "nowrap" }}>
        <span style={{ color: "var(--brand-primary)" }}>NEXGEN</span> SOLUTIONS <span style={{ color: "var(--brand-primary)" }}>CHITRAL</span>
      </span>
    </a>
  );
}

function TopNav({ active = "Home" }) {
  const [open, setOpen] = React.useState(false);
  useLucide();
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);
  return (
    <header className="nx-nav">
      <div style={{ ...nxWrap, height: 68, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <Wordmark />
        <nav className="nx-desk" style={{ display: "flex", gap: 30 }}>
          {NAV_LINKS.map(([l, href]) => (
            <a key={l} href={href} className={"nx-navlink" + (l === active ? " is-active" : "")}>{l}</a>
          ))}
        </nav>
        <div className="nx-desk" style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <Button as="a" href="contact.html" variant="accent" size="sm">Get started</Button>
        </div>
        <div className="nx-mob">
          <IconButton label="Open menu" variant="ghost" onClick={() => setOpen(true)}><Icon name="menu" /></IconButton>
        </div>
      </div>
      {open && (
        <div className="nx-mobmenu">
          <div style={{ ...nxWrap, height: 68, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <Wordmark />
            <IconButton label="Close menu" variant="ghost" onClick={() => setOpen(false)}><Icon name="x" /></IconButton>
          </div>
          <nav style={{ ...nxWrap, display: "flex", flexDirection: "column", gap: 4, marginTop: 20 }}>
            {NAV_LINKS.map(([l, href]) => (
              <a key={l} href={href} onClick={() => setOpen(false)}
                 style={{ fontSize: 30, fontWeight: 700, letterSpacing: "-0.01em",
                          color: l === active ? "var(--brand-primary)" : "#fff",
                          textDecoration: "none", padding: "10px 0", borderBottom: "1px solid var(--border-default)" }}>{l}</a>
            ))}
          </nav>
          <div style={{ ...nxWrap, marginTop: 28 }}>
            <Button as="a" href="contact.html" variant="accent" size="lg" style={{ width: "100%" }}>Get started →</Button>
            <a href={C.phoneHref} className="nx-navphone" style={{ display: "block", marginTop: 20, fontFamily: "var(--font-mono)", fontSize: 13, letterSpacing: ".08em", color: "var(--text-muted)" }}>
              CALL · {C.phoneDisplay}
            </a>
          </div>
        </div>
      )}
    </header>
  );
}

function SectionHead({ eyebrow, title, sub, align = "left", max = 660 }) {
  return (
    <div style={{ marginBottom: 52, maxWidth: max, marginLeft: align === "center" ? "auto" : 0, marginRight: align === "center" ? "auto" : 0, textAlign: align }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18, justifyContent: align === "center" ? "center" : "flex-start" }}>
        <AccentLine width={32} /><span className="nx-eyebrow">{eyebrow}</span>
      </div>
      <h2 className="nx-sec-title" style={{ margin: 0 }}>{title}</h2>
      {sub && <p className="nx-sec-sub" style={{ margin: "16px 0 0", marginLeft: align === "center" ? "auto" : 0, marginRight: align === "center" ? "auto" : 0 }}>{sub}</p>}
    </div>
  );
}

function Footer() {
  useLucide();
  const cols = [
    ["Services", [
      ["Web Development", "services.html"], ["Web Apps", "services.html"], ["Graphic Design", "services.html"],
      ["Video Editing", "services.html"], ["Audio Editing", "services.html"], ["Digital Marketing", "services.html"], ["AI Solutions", "services.html"],
    ]],
    ["Academy", [
      ["All Courses", "courses.html"], ["Web Development", "courses.html"], ["Graphic Design", "courses.html"],
      ["Digital Marketing", "courses.html"], ["AI Tools", "courses.html"], ["Freelancing", "courses.html"],
    ]],
    ["Company", [
      ["About", "about.html"], ["Projects", "index.html#projects"], ["Contact", "contact.html"],
    ]],
  ];
  return (
    <footer className="nx-footer">
      <div style={{ ...nxWrap, padding: "72px 24px 40px" }}>
        <div className="nx-foot-grid">
          <div>
            <Wordmark />
            <p style={{ maxWidth: 300, marginTop: 18, fontSize: 14, lineHeight: 1.6, color: "var(--text-muted)" }}>
              Technology, creativity, AI, digital solutions, and practical skills — all under one roof. From Chitral to the digital world.
            </p>
            <div style={{ marginTop: 22, display: "flex", flexDirection: "column", gap: 10 }}>
              <a href={C.phoneHref} className="nx-foot-contact"><Icon name="phone" size={15} /> {C.phoneDisplay}</a>
              <span className="nx-foot-contact" style={{ cursor: "default" }}><Icon name="map-pin" size={15} /> {C.address}</span>
            </div>
          </div>
          {cols.map(([h, items]) => (
            <div key={h}>
              <div className="nx-foot-head">{h}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
                {items.map(([it, href], i) => <a key={it + i} href={href} className="nx-foot-link">{it}</a>)}
              </div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ borderTop: "1px solid var(--border-default)" }}>
        <div style={{ ...nxWrap, padding: "20px 24px", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 10, fontSize: 13, color: "var(--text-muted)" }}>
          <span>© {new Date().getFullYear()} Nexgen Solutions Chitral. All rights reserved.</span>
          <span style={{ fontFamily: "var(--font-mono)", letterSpacing: ".06em" }}>LEARN · BUILD · CREATE · GROW</span>
        </div>
      </div>
    </footer>
  );
}

/* Big closing CTA band, reused across pages */
function ContactCTA({ title = "Ready to build what's next?", sub = "Tell us what you need — a website, an app, a brand, a campaign, or a new skill. Let's plan your next step together." }) {
  return (
    <section className="nx-section" style={{ textAlign: "center" }}>
      <div style={{ ...nxWrap }}>
        <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", maxWidth: 760 }}>
          <AccentLine width={56} />
          <h2 style={{ margin: "24px 0 0", fontSize: "clamp(34px,5vw,54px)", lineHeight: 1.05, fontWeight: 800, letterSpacing: "-0.02em" }}>{title}</h2>
          <p style={{ marginTop: 18, fontSize: 18, color: "var(--text-secondary)", lineHeight: 1.6 }}>{sub}</p>
          <div style={{ display: "flex", gap: 14, marginTop: 34, flexWrap: "wrap", justifyContent: "center" }}>
            <Button as="a" href="contact.html" variant="accent" size="lg">Contact Nexgen →</Button>
            <Button as="a" href={C.phoneHref} variant="secondary" size="lg">Call us</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { NX_MAX, nxWrap, Icon, useLucide, Wordmark, TopNav, SectionHead, Footer, ContactCTA, NAV_LINKS });