/* T-AV — Top nav + footer shells */

const NAV_ITEMS = [
{ id: 'home', label: 'Home' },
{ id: 'showcase', label: 'Showcase' },
{ id: 'what-we-do', label: 'What We Do' },
{ id: 'about', label: 'About' },
{ id: 'contact', label: 'Contact' }];


function ArrowRight({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true">
      <path d="M 3 8 L 13 8 M 9 4 L 13 8 L 9 12" strokeLinecap="square" strokeLinejoin="miter" />
    </svg>);

}
function ArrowLeft({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true">
      <path d="M 13 8 L 3 8 M 7 4 L 3 8 L 7 12" strokeLinecap="square" strokeLinejoin="miter" />
    </svg>);

}

function TopNav({ route, navigate }) {
  const [open, setOpen] = React.useState(false);
  const currentTop = route.split('/')[0] || 'home';
  return (
    <header className="nav">
      <div className="nav__inner">
        <a href="#/home" onClick={(e) => {e.preventDefault();navigate('home');}} aria-label="T-AV home">
          <TAVLogo size={26} />
        </a>
        <nav className={"nav__links" + (open ? " is-open" : "")}>
          {NAV_ITEMS.map((item) =>
          <a key={item.id}
          className={"nav__link" + (currentTop === item.id ? " is-active" : "")}
          href={"#/" + item.id}
          onClick={(e) => {e.preventDefault();navigate(item.id);setOpen(false);}}>
            {item.label}</a>
          )}
        </nav>
        <div className="nav__spacer" />
        <button className="nav__cta" onClick={() => navigate('contact')}>
          Let's talk <ArrowRight />
        </button>
        {/* Hamburger ↔ X icon swap with 150ms opacity cross-fade. Both
            icons stay in the DOM and overlap absolutely; only opacity
            transitions, so neither flashes. (Motion audit 2026-05-25
            finding — Jakub icon-swap recipe.) */}
        <button className={"nav__menu" + (open ? " is-open" : "")} onClick={() => setOpen(!open)} aria-label="Menu">
          <svg className="nav__menu-icon nav__menu-icon--bars" width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
            <path d="M 2 5 L 16 5" /><path d="M 2 9 L 16 9" /><path d="M 2 13 L 16 13" />
          </svg>
          <svg className="nav__menu-icon nav__menu-icon--x" width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
            <path d="M 4 4 L 14 14 M 14 4 L 4 14" />
          </svg>
        </button>
      </div>
    </header>);

}

function FooterIcon({ name }) {
  const props = { width: 16, height: 16, fill: 'none', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'square', 'aria-hidden': 'true' };
  if (name === 'instagram') return (
    <svg {...props} viewBox="0 0 18 18">
      <rect x="2" y="2" width="14" height="14" rx="4" />
      <circle cx="9" cy="9" r="3.4" />
      <circle cx="13" cy="5" r="0.8" fill="currentColor" />
    </svg>);

  if (name === 'facebook') return (
    <svg {...props} viewBox="0 0 18 18">
      {/* Match Instagram visual language: rounded-square frame + stroked glyph */}
      <rect x="2" y="2" width="14" height="14" rx="4" />
      <path d="M 11.4 5.5 H 10.2 Q 9.2 5.5 9.2 6.5 V 8 H 11.4 L 11.0 9.8 H 9.2 V 14" />
    </svg>);

  if (name === 'mail') return (
    <svg {...props} viewBox="0 0 18 18">
      <rect x="2" y="4" width="14" height="10" rx="1" />
      <path d="M 2 5 L 9 10 L 16 5" />
    </svg>);

  return null;
}

function SiteFooter({ navigate }) {
  return (
    <footer className="footer">
      <div className="container-wide">
        <div className="footer__grid">
          <div className="footer__brand">
            <TAVLogo size={24} />
            <p>Creative AV engineering for events — designed, engineered, delivered. Sound, light, video, rigging and creative direction across the UAE.</p>
            <div className="footer__socials">
              <a href="https://www.facebook.com/T.AV.GCC" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><FooterIcon name="facebook" /></a>
              <a href="https://www.instagram.com/av_t_av/" aria-label="Instagram" target="_blank" rel="noopener noreferrer"><FooterIcon name="instagram" /></a>
              <a href="mailto:hello@t-av.com" aria-label="Email"><FooterIcon name="mail" /></a>
            </div>
          </div>
          <div className="footer__col">
            <h4>Site</h4>
            <a href="#/home" onClick={(e) => {e.preventDefault();navigate('home');}}>Home</a>
            <a href="#/showcase" onClick={(e) => {e.preventDefault();navigate('showcase');}}>Showcase</a>
            <a href="#/about" onClick={(e) => {e.preventDefault();navigate('about');}}>About</a>
            <a href="#/contact" onClick={(e) => {e.preventDefault();navigate('contact');}}>Contact</a>
            <a href="#/careers" onClick={(e) => {e.preventDefault();navigate('careers');}}>Careers</a>
          </div>
          <div className="footer__col">
            {/* Column heading is itself a link to the hub page (/what-we-do).
                The sub-items below link to each service detail. */}
            <h4><a href="#/what-we-do" onClick={(e) => {e.preventDefault();navigate('what-we-do');}}>What We Do</a></h4>
            <a href="#/what-we-do/creative-design" onClick={(e) => {e.preventDefault();navigate('what-we-do/creative-design');}}>Creative Design</a>
            <a href="#/what-we-do/rigging" onClick={(e) => {e.preventDefault();navigate('what-we-do/rigging');}}>Rigging &amp; Structures</a>
            <a href="#/what-we-do/audio" onClick={(e) => {e.preventDefault();navigate('what-we-do/audio');}}>Audio</a>
            <a href="#/what-we-do/lighting" onClick={(e) => {e.preventDefault();navigate('what-we-do/lighting');}}>Lighting</a>
            <a href="#/what-we-do/video" onClick={(e) => {e.preventDefault();navigate('what-we-do/video');}}>Video</a>
          </div>
          <div className="footer__col">
            {/* Heading navigates to /contact. mailto / phone / address below
                remain non-navigating informational text. */}
            <h4><a href="#/contact" onClick={(e) => {e.preventDefault();navigate('contact');}}>Contact</a></h4>
            <a href="mailto:hello@t-av.com">hello@t-av.com</a>
            <a href="tel:+971585246555">+971 585 246 555</a>
            <span>Dubai, UAE</span>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© 2026 T-AV. All rights reserved.</span>
          <a href="#/privacy" onClick={(e) => { e.preventDefault(); navigate('privacy'); }}>Privacy</a>
          <span>Built for live production · Dubai · UAE</span>
        </div>
      </div>
    </footer>);

}

window.TopNav = TopNav;
window.SiteFooter = SiteFooter;
window.ArrowRight = ArrowRight;
window.ArrowLeft = ArrowLeft;