/* Recon marketing site — shared shell components.
   <SiteTopBar active="..."> and <SiteFooter /> render the nav + footer
   on every page. The active prop highlights the current page in nav. */

function ScoutMark({ size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <g fill="currentColor">
        <path d="M 3.5 10.5 C 3.5 8.5, 5 6.5, 7 5.5 C 8.5 4.7, 10 4.3, 12 4.3 C 14 4.3, 15.5 4.7, 17 5.5 C 19 6.5, 20.5 8.5, 20.5 10.5 L 20.5 11 L 3.5 11 Z" />
        <rect x="3" y="10.6" width="18" height="1.6" />
        <rect x="4" y="12.4" width="16" height="4.2" rx="0.6" />
        <path d="M 2 20 C 2 18, 5 17.5, 12 17.5 C 19 17.5, 22 18, 22 20 L 22 24 L 2 24 Z" />
      </g>
      <circle cx="8" cy="14.5" r="1.1" fill="#0A0A0A" />
      <circle cx="16" cy="14.5" r="1.1" fill="#0A0A0A" />
      <circle cx="8" cy="14.5" r="0.55" fill="#C36B3E" />
    </svg>
  );
}

function SiteTopBar({ active }) {
  const items = [
    { id: "method", label: "Method", href: "method.html" },
    { id: "sample", label: "Sample", href: "sample.html" },
    { id: "pricing", label: "Pricing", href: "pricing.html" },
    { id: "about",  label: "About",   href: "about.html"  },
    { id: "faq",    label: "FAQ",     href: "faq.html"    },
  ];
  return (
    <header className="site-topbar">
      <a href="/" className="site-brand" title="Back to home">
        <span className="site-mark"><ScoutMark size={22} /></span>
        <span className="site-brand-word">Recon<em>.</em></span>
      </a>
      <nav className="site-nav">
        <a href="/" className="site-nav-home" title="Home">← Home</a>
        {items.map(it => (
          <a key={it.id} href={it.href} className={active === it.id ? "active" : ""}>{it.label}</a>
        ))}
        <a href="signup.html" className={"site-nav-cta " + (active === "signup" ? "active" : "")}>Sign up →</a>
      </nav>
    </header>
  );
}

function SiteFooter() {
  return (
    <footer className="site-footer">
      <div className="site-footer-inner">
        <p className="site-footer-manifesto">
          The answers are <em>already out there.</em><br/>
          We bring them home.
        </p>
        <div className="site-footer-grid">
          <div className="site-footer-brand">
            <a href="/" className="site-brand">
              <span className="site-mark"><ScoutMark size={22} /></span>
              <span className="site-brand-word">Recon<em>.</em></span>
            </a>
            <p>Your AI competitive-intelligence analyst.<br/>Monthly intelligence for your business.</p>
          </div>
          <div className="site-footer-col">
            <h4>Product</h4>
            <ul>
              <li><a href="method.html">Method</a></li>
              <li><a href="sample.html">Sample report</a></li>
              <li><a href="pricing.html">Pricing</a></li>
              <li><a href="signup.html">Sign up</a></li>
            </ul>
          </div>
          <div className="site-footer-col">
            <h4>Company</h4>
            <ul>
              <li><a href="about.html">About</a></li>
              <li><a href="faq.html">FAQ</a></li>
              <li><a href="mailto:jim@reconai.io">Contact</a></li>
            </ul>
          </div>
          <div className="site-footer-col">
            <h4>Legal</h4>
            <ul>
              <li><a href="/legal.html#terms">Terms</a></li>
              <li><a href="/legal.html#privacy">Privacy</a></li>
              <li><a href="/legal.html">Refund policy</a></li>
            </ul>
          </div>
        </div>
        <div className="site-footer-base">
          <span>© 2026 Recon. <em>Made in the open web.</em></span>
          <span>Built by an operator — 20 years in high-volume fast food, retired Marine pilot.</span>
          <span>A ReconAI product</span>
        </div>
      </div>
    </footer>
  );
}

window.ScoutMark = ScoutMark;
window.SiteTopBar = SiteTopBar;
window.SiteFooter = SiteFooter;