// Shared chrome: Nav, Footer, BrandMark, Logo bar — used across all pages.

const VRAIFY_NAV = [
  { label: "Services", href: "services.html", dropdown: [
    { label: "Code & SWE Data", desc: "Senior-engineer SFT, RLHF & verifiers", href: "service-code.html" },
    { label: "Reasoning & Math", desc: "STEM-PhD chain-of-thought traces", href: "service-reasoning.html" },
    { label: "RLHF, SFT & DPO", desc: "Preference data, calibrated", href: "service-posttraining.html" },
    { label: "RL Environments", desc: "Production-grade agent gyms", href: "service-rl.html" },
    { label: "Red Teaming & Safety", desc: "Adversarial testing & alignment", href: "service-safety.html" },
    { label: "Multimodal Data", desc: "Image, video, audio, document", href: "service-multimodal.html" },
    { label: "Multilingual Data", desc: "Native SFT/RLHF in 50+ languages", href: "service-multilingual.html" },
    { label: "Domain Expert Data", desc: "MDs, JDs, CFAs, PhDs", href: "service-domain.html" },
    { label: "Evaluation & Benchmarks", desc: "Custom evals & LLM-judge calibration", href: "service-eval.html" },
    { label: "Synthetic Validation", desc: "Hybrid pipelines with humans-in-loop", href: "service-synthetic.html" },
    { label: "Agent Training Data", desc: "Trajectories, tool-use, function calls", href: "service-agents.html" },
  ]},
  { label: "Platform", href: "platform.html" },
  { label: "Research", href: "research.html" },
  { label: "Case studies", href: "case-studies.html" },
  { label: "Experts", href: "experts.html" },
  { label: "Company", href: "about.html", dropdown: [
    { label: "About", desc: "Mission, team, story", href: "about.html" },
    { label: "Careers", desc: "Open roles", href: "careers.html" },
    { label: "Security", desc: "Data handling and contractor policies", href: "security.html" },
    { label: "Contact", desc: "Talk to our research team", href: "contact.html" },
  ]},
];

function BrandMark({ size = 22 }) {
  // Original mark: a verification "V" formed by two converging hairlines meeting at a checkpoint dot.
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <rect x="0.5" y="0.5" width="23" height="23" rx="5" stroke="currentColor" strokeOpacity="0.18" />
      <path d="M5 6 L12 17 L19 6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx="12" cy="17" r="2.2" fill="var(--accent)" />
    </svg>
  );
}

function Brand({ href = "index.html" }) {
  return (
    <a className="brand" href={href}>
      <span className="brand-mark"><BrandMark /></span>
      <span>Vraify</span>
    </a>
  );
}

function Nav({ active }) {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <Brand />
        <div className="nav-links">
          {VRAIFY_NAV.map(item => (
            <div key={item.label} className="nav-item">
              <a href={item.href} className={active === item.label.toLowerCase() ? "active" : ""}>
                {item.label}
              </a>
              {item.dropdown && (
                <div className="nav-dropdown">
                  {item.dropdown.map(d => (
                    <a key={d.label} href={d.href}>
                      {d.label}
                      <span className="nd-desc">{d.desc}</span>
                    </a>
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>
        <div className="nav-spacer" />
        <a className="nav-cta" href="experts.html">For experts</a>
        <a className="nav-cta nav-cta--primary" href="contact.html">
          Request a pilot
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 6h6m-2.5-2.5L9 6 6.5 8.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </a>
      </div>
    </nav>
  );
}

function LogoBar() { return null; }

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col">
            <Brand />
            <p className="footer-tag">Verified intelligence for frontier AI. Expert human data, RL environments, and verifier infrastructure.</p>
          </div>
          <div className="footer-col">
            <h4>Services</h4>
            <a href="service-code.html">Code & SWE</a>
            <a href="service-reasoning.html">Reasoning & math</a>
            <a href="service-posttraining.html">RLHF / SFT / DPO</a>
            <a href="service-rl.html">RL environments</a>
            <a href="service-safety.html">Red teaming</a>
            <a href="services.html">All services →</a>
          </div>
          <div className="footer-col">
            <h4>Platform</h4>
            <a href="platform.html">Overview</a>
            <a href="security.html">Security</a>
            <a href="research.html">Research</a>
            <a href="case-studies.html">Case studies</a>
          </div>
          <div className="footer-col">
            <h4>Company</h4>
            <a href="about.html">About</a>
            <a href="careers.html">Careers</a>
            <a href="contact.html">Contact</a>
            <a href="experts.html">Join as expert</a>
          </div>
          <div className="footer-col">
            <h4>Legal</h4>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Contractor agreement</a>
            <a href="#">Subprocessors</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Vraify, Inc.</span>
          <span />
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Footer, Brand, BrandMark, LogoBar, VRAIFY_NAV });