// Shared chrome: Nav, Footer, Scroll-to-top, Badges, Icons
const { useState, useEffect, useRef } = React;

const PinIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
  </svg>
);
const ArrowIcon = ({ className }) => (
  <svg className={className} width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="m13 5 7 7-7 7"/></svg>
);
const UpIcon = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 19V5"/><path d="m5 12 7-7 7 7"/></svg>
);
const CheckIcon = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
);

function Nav({ route, setRoute, onContact }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const go = (r) => { setRoute(r); setMenuOpen(false); window.scrollTo({ top: 0, behavior: "instant" }); };

  return (
    <header className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="nav-inner">
        <div className="logo" onClick={() => go("home")}>
          <div className="logo-mark"><img src="images/logo-compact.jpg" alt="Mynatt Springer" /></div>
          <div className="logo-text">
            <div className="name">Mynatt Springer</div>
            <div className="sub">P.C. · Est. 1997</div>
          </div>
        </div>

        <div className="nav-center">
          <PinIcon />
          <span>1660 Hickory Loop, Las Cruces, NM</span>
        </div>

        <nav className="nav-links">
          <a className={`nav-link ${route === "attorneys" ? "active" : ""}`} onClick={() => go("attorneys")}>Attorneys</a>
          <a className={`nav-link ${route === "practice" ? "active" : ""}`} onClick={() => go("practice")}>Practice Areas</a>
          <a className={`nav-link ${route === "contact" ? "active" : ""}`} onClick={() => go("contact")}>Contact</a>
          <button className="nav-cta" onClick={() => go("contact")}>Consult <span style={{marginLeft: 6}}>→</span></button>
        </nav>

        <button className="hamburger" onClick={() => setMenuOpen(!menuOpen)}>
          <span></span>
        </button>
      </div>

      {menuOpen && (
        <div className="mobile-menu">
          <a onClick={() => go("home")}>Home</a>
          <a onClick={() => go("attorneys")}>Attorneys</a>
          <a onClick={() => go("practice")}>Practice Areas</a>
          <a onClick={() => go("contact")}>Contact</a>
        </div>
      )}
    </header>
  );
}

function Footer({ setRoute }) {
  const D = window.MS_DATA;
  const go = (r) => { setRoute(r); window.scrollTo({ top: 0, behavior: "instant" }); };
  return (
    <footer>
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col footer-brand">
            <div className="logo" style={{pointerEvents: "none"}}>
              <div className="logo-mark"><img src="images/logo-compact.jpg" alt="Mynatt Springer" /></div>
              <div className="logo-text">
                <div className="name">Mynatt Springer</div>
                <div className="sub">P.C. · Est. 1997</div>
              </div>
            </div>
            <p className="tag">Big firm expertise.<br/>Small firm attention.<span style={{fontStyle:"normal", fontSize: 10, verticalAlign: "super"}}>™</span></p>
          </div>
          <div className="footer-col">
            <h4>Navigate</h4>
            <a onClick={() => go("home")}>Home</a>
            <a onClick={() => go("attorneys")}>Attorneys</a>
            <a onClick={() => go("practice")}>Practice Areas</a>
            <a onClick={() => go("contact")}>Contact</a>
          </div>
          <div className="footer-col">
            <h4>Practice</h4>
            <a onClick={() => go("practice")}>Civil Rights Defense</a>
            <a onClick={() => go("practice")}>State & Local Government</a>
            <a onClick={() => go("practice")}>Employment Law</a>
            <a onClick={() => go("practice")}>Civil Litigation</a>
            <a onClick={() => go("practice")}>Cannabis Law</a>
          </div>
          <div className="footer-col">
            <h4>Office</h4>
            <p>1660 Hickory Loop</p>
            <p>Las Cruces, NM 88005</p>
            <p style={{marginTop: 14}}>P.O. Box 2699</p>
            <p>Las Cruces, NM 88004-2699</p>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2020–2026 Mynatt Springer P.C. All rights reserved.</span>
          <span>Attorney Advertising · Prior results do not guarantee a similar outcome</span>
        </div>
      </div>
    </footer>
  );
}

function ScrollTop() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 600);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <button className={`scroll-top ${show ? "show" : ""}`} onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })} aria-label="Scroll to top">
      <UpIcon />
    </button>
  );
}

Object.assign(window, { Nav, Footer, ScrollTop, PinIcon, ArrowIcon, UpIcon, CheckIcon });