/* global React, LogoMark */
/* Shared nav + footer for sub-pages.
   Order: Gallery · Pricing · How it works · Photo guide.
   FAQ + For agents are footer-only (B2B doesn't need consumer attention). */

function PageNav({ current }) {
  const item = (href, label, key) => (
    <a href={href} className={current === key ? "is-current" : ""}>{label}</a>
  );
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="index.html" style={{ textDecoration: "none", color: "inherit" }} aria-label="PixFixCo home">
          <LogoMark />
        </a>
        <div className="nav-links">
          {item("gallery.html", "Gallery", "gallery")}
          {item("pricing.html", "Pricing", "pricing")}
          {item("how-it-works.html", "How it works", "how")}
          {item("photo-guide.html", "Photo guide", "guide")}
        </div>
        <div className="nav-cta">
          <a className="btn btn-primary" href="/order">Fix a listing →</a>
        </div>
      </div>
    </nav>
  );
}

function PageFooter() {
  return (
    <footer className="page-foot">
      <div className="page-foot-inner">
        <div className="page-foot-l">
          <LogoMark />
          <span>© 2026 PixFixCo</span>
        </div>
        <nav className="page-foot-nav">
          <a href="how-it-works.html">How it works</a>
          <a href="gallery.html">Gallery</a>
          <a href="pricing.html">Pricing</a>
          <a href="faq.html">FAQ</a>
          <a href="for-agents.html">For agents</a>
          <a href="#">Privacy</a>
          <a href="#">Terms</a>
        </nav>
        <div className="page-foot-r"><span className="mono">v1.0 · made for FSBO</span></div>
      </div>
    </footer>
  );
}

/* Reusable section CTA bar, used at the bottom of sub-pages */
function PageCTA({ kicker, headline, primary = { label: "Fix a photo free", href: "index.html#try" }, secondary }) {
  return (
    <section className="page-cta">
      <div className="page-cta-inner">
        {kicker && <div className="eyebrow eyebrow-inv">{kicker}</div>}
        <h2 className="h1 page-cta-h">{headline}</h2>
        <div className="page-cta-actions">
          <a className="btn btn-primary btn-lg" href={primary.href}>{primary.label}</a>
          {secondary && <a className="btn btn-ghost-inv btn-lg" href={secondary.href}>{secondary.label}</a>}
        </div>
      </div>
    </section>
  );
}

window.PageNav = PageNav;
window.PageFooter = PageFooter;
window.PageCTA = PageCTA;