/* CX Defense — shared site chrome (Nav, Footer, page primitives).
   Exported to window so every page's script can use them.
   Navigation points to real page files; `active` highlights the current one. */

const PAGES = [
  ['Services', 'services.html'],
  ['Technology', 'technology.html'],
  ['Insights', 'insights.html'],
  ['About', 'about.html'],
];

function Nav({ active }) {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="index.html" className="wordmark">CX<span className="dot">·</span>Defense</a>
        <div className="nav-r">
          {PAGES.map(([label, href]) => (
            <a key={href} className={'nav-link' + (active === href ? ' active' : '')} href={href}>{label}</a>
          ))}
          <a href="contact.html" className="nav-cta">Speak With Us</a>
        </div>
      </div>
    </nav>
  );
}

function Rule() {
  return <div className="rule"><div className="rule-line"></div></div>;
}

function PageHero({ label, title, children }) {
  return (
    <div className="page-hero">
      <div className="label">{label}</div>
      <h1 dangerouslySetInnerHTML={{ __html: title }}></h1>
      <p>{children}</p>
    </div>
  );
}

function Banner({ img, caption }) {
  return (
    <div className="banner">
      <div className="img" style={{ backgroundImage: `url(${img})` }}></div>
      <div className="caption">{caption}</div>
    </div>
  );
}

function CTA({ title, children, actions, note }) {
  return (
    <div className="cta-block">
      <h2 dangerouslySetInnerHTML={{ __html: title }}></h2>
      <p>{children}</p>
      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>{actions}</div>
      {note && <div className="cta-note">{note}</div>}
    </div>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-brand">
          <a href="index.html" className="wordmark" style={{ fontSize: 19 }}>CX<span className="dot">·</span>Defense</a>
          <p>Cybersecurity engineering and defense. Networks, data, compliance, and intelligence — engineered as one system.</p>
        </div>
        <div className="footer-col">
          <h4>Company</h4>
          <a href="services.html">Services</a>
          <a href="technology.html">Technology</a>
          <a href="insights.html">Insights</a>
          <a href="about.html">About</a>
          <a href="contact.html">Contact</a>
        </div>
        <div className="footer-col">
          <h4>Legal</h4>
          <a href="terms.html">Terms &amp; Conditions</a>
          <a href="privacy.html">Privacy Policy</a>
        </div>
      </div>
      <div className="footer-base">
        <p>© 2026 CX Defense. All rights reserved.</p>
        <p>Cybersecurity Engineering &amp; Defense</p>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Rule, PageHero, Banner, CTA, Footer, CXPAGES: PAGES });