/* global React, Icon */
const { useState: useStateLayout, useEffect: useEffectLayout, useRef: useRefLayout } = React;

const NAV_LINKS = [
  { href: "#/", label: "Home" },
  { href: "#/services", label: "Services" },
  { href: "#/senior-moving", label: "Senior Moving" },
  { href: "#/about", label: "About" },
  { href: "#/contact", label: "Contact" },
];

const Nav = ({ route }) => {
  const [open, setOpen] = useStateLayout(false);
  useEffectLayout(() => { setOpen(false); }, [route]);
  return (
    <header className="nav">
      <div className="nav-inner">
        <a href="#/" className="nav-brand" aria-label="Sobi Moving home">
          <img src="assets/logo.png" alt="" />
          <strong>Sobi Moving</strong>
        </a>
        <nav className="nav-links" aria-label="Main">
          {NAV_LINKS.map(l => (
            <a
              key={l.href}
              href={l.href}
              className={`nav-link ${route === l.href ? "active" : ""} ${l.featured ? "featured" : ""}`}
            >{l.label}</a>
          ))}
        </nav>
        <div className="nav-cta">
          <a href="tel:6304561347" className="nav-phone" aria-label="Call (630) 456-1347">
            <Icon name="phone" size={14} />
            <span>(630) 456-1347</span>
          </a>
          <a href="#/quote" className="btn btn-accent" style={{ padding: "10px 18px", fontSize: 14 }}>
            Free Quote <Icon name="arrow-right" size={14} />
          </a>
          <button
            className="nav-menu-btn"
            onClick={() => setOpen(!open)}
            aria-label="Toggle menu"
            style={{
              display: "none",
              background: "transparent", border: "1px solid var(--line)",
              borderRadius: 999, padding: 10,
            }}
          >
            <Icon name={open ? "x" : "menu"} size={18} />
          </button>
        </div>
      </div>
      {open ? (
        <div className="nav-mobile" style={{
          borderTop: "1px solid var(--line-soft)",
          background: "var(--bg)",
          padding: "12px 28px 20px",
        }}>
          {NAV_LINKS.map(l => (
            <a key={l.href} href={l.href} style={{
              display: "block", padding: "12px 0",
              borderBottom: "1px solid var(--line-soft)",
              fontSize: 18, color: l.featured ? "var(--accent)" : "var(--ink)",
            }}>{l.label}</a>
          ))}
        </div>
      ) : null}
      <style>{`
        @media (max-width: 880px) {
          .nav-menu-btn { display: inline-flex !important; }
          .nav-cta .btn-accent { display: none; }
        }
      `}</style>
    </header>
  );
};

const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <div className="footer-brand">
            <img src="assets/logo.png" alt="Sobi Moving" />
            <strong>Sobi Moving</strong>
          </div>
          <p style={{ fontSize: 14, lineHeight: 1.6, marginBottom: 20, color: "#c9c2b3" }}>
            Atlanta's trusted moving company. We handle every detail so you can focus on what matters — feeling at home.
          </p>
          <div style={{ fontSize: 13, color: "#908a7f", lineHeight: 1.7 }}>
            Serving the Metro Atlanta area · Georgia
          </div>
          <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 6 }}>
            <a href="tel:6304561347" style={{ fontSize: 14, fontWeight: 500, color: "#f5efe4" }}>
              (630) 456-1347
            </a>
            <a href="mailto:hello@sobimoving.com" style={{ fontSize: 14 }}>hello@sobimoving.com</a>
            <span style={{ fontSize: 13, color: "#908a7f" }}>Mon–Sun · 7:30am–8:00pm</span>
          </div>
        </div>
        <div>
          <h4>Services</h4>
          <ul className="footer-list">
            <li><a href="#/services">Full Moving Service</a></li>
            <li><a href="#/services">Full Packing</a></li>
            <li><a href="#/services">White Glove Setup</a></li>
            <li><a href="#/services">Unpacking Services</a></li>
            <li><a href="#/services">Furniture Assembly</a></li>
            <li><a href="#/services">Junk Removal</a></li>
          </ul>
        </div>
        <div>
          <h4>Company</h4>
          <ul className="footer-list">
            <li><a href="#/about">About Us</a></li>
            <li><a href="#/senior-moving">Senior Moving</a></li>
            <li><a href="#/contact">Contact</a></li>
            <li><a href="#/quote">Get a Quote</a></li>
          </ul>
          <h4 style={{ marginTop: 32 }}>Service Areas</h4>
          <p style={{ fontSize: 13, color: "#908a7f", lineHeight: 1.7 }}>
            Sandy Springs · Alpharetta · Roswell · Marietta · Dunwoody · Brookhaven · Decatur · Buckhead · Midtown · East Cobb · Johns Creek · Smyrna
          </p>
        </div>
        <div>
          <h4>Get Started</h4>
          <p style={{ fontSize: 14, lineHeight: 1.6, marginBottom: 20 }}>
            Free consultation, no pressure. We'll answer every question before you book.
          </p>
          <a href="#/quote" className="btn btn-accent" style={{ marginBottom: 10 }}>
            Get a Free Quote <Icon name="arrow-right" size={14} />
          </a>
          <div>
            <a href="tel:6304561347" style={{ fontSize: 14 }}>Or call (630) 456-1347</a>
          </div>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2025 Sobi Moving. All rights reserved. Metro Atlanta, GA.</span>
        <span>Licensed & Insured · Background-Checked Team · No Hidden Fees</span>
      </div>
    </div>
  </footer>
);

window.Nav = Nav;
window.Footer = Footer;
window.NAV_LINKS = NAV_LINKS;