// Alba Cars — Navbar, Footer, Mobile bar
const { useState, useEffect } = React;

function Navbar({ route, setRoute, dark }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const onDark = dark && !scrolled;

  const navItems = [
    { id: 'buy', label: 'Buy' },
    { id: 'brands', label: 'Brands' },
    { id: 'sell', label: 'Sell Your Car' },
    { id: 'finance', label: 'Finance' },
    { id: 'about', label: 'About' },
    { id: 'contact', label: 'Contact' },
  ];

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0,
      zIndex: 40,
      transition: 'all 0.28s ease',
      background: onDark ? 'transparent' : 'color-mix(in oklab, var(--bg) 90%, transparent)',
      backdropFilter: scrolled ? 'blur(14px) saturate(1.2)' : 'none',
      borderBottom: `1px solid ${scrolled ? 'var(--border)' : 'transparent'}`,
      color: onDark ? '#fff' : 'var(--text)',
    }}>
      <div className="container-wide" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: scrolled ? 70 : 88,
        transition: 'height 0.28s ease',
      }}>
        {/* Logo */}
        <button onClick={() => { setRoute('home'); window.scrollTo({ top: 0 }); }}
          style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}>
          <AlbaLogo theme={onDark ? 'dark' : 'light'} size={scrolled ? 'sm' : 'md'} />
        </button>

        {/* Nav */}
        <nav style={{
          display: window.innerWidth > 1100 ? 'flex' : 'none',
          gap: 4, alignItems: 'center',
        }} className="nav-main">
          {navItems.map(n => (
            <button key={n.id}
              onClick={() => { setRoute(n.id); window.scrollTo({ top: 0 }); }}
              style={{
                background: 'none', border: 'none',
                padding: '10px 18px',
                fontFamily: 'var(--f-display)',
                fontSize: 13.5, fontWeight: 500,
                letterSpacing: '-0.005em',
                color: 'inherit',
                position: 'relative',
                opacity: route === n.id ? 1 : 0.75,
                cursor: 'pointer',
              }}
            >
              {n.label}
              {route === n.id && (
                <span style={{
                  position: 'absolute', left: 18, right: 18, bottom: 2,
                  height: 1, background: 'currentColor',
                }} />
              )}
            </button>
          ))}
        </nav>

        {/* Right side */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <button aria-label="Language" style={{
            display: window.innerWidth > 700 ? 'inline-flex' : 'none',
            alignItems: 'center', gap: 8,
            background: 'none', border: 'none', padding: '6px 0',
            fontFamily: 'var(--f-display)', fontSize: 12, fontWeight: 500,
            letterSpacing: '0.06em', color: 'inherit', opacity: 0.8,
          }}>
            <Icon name="globe" size={14} /> EN
            <Icon name="chevron-down" size={12} />
          </button>
          <a href="tel:+97143772503" style={{
            display: window.innerWidth > 1100 ? 'inline-flex' : 'none',
            alignItems: 'center', gap: 8,
            fontFamily: 'var(--f-display)', fontSize: 13, fontWeight: 500,
            color: 'inherit',
          }}>
            <Icon name="phone" size={14} />
            <span className="mono">+971 4 377 2503</span>
          </a>
          <Btn variant="primary" icon="arrow-right"
            onClick={() => { setRoute('sell'); window.scrollTo({ top: 0 }); }}>
            Sell Your Car
          </Btn>
          <button aria-label="Menu" onClick={() => setOpen(true)}
            style={{
              display: window.innerWidth <= 1100 ? 'grid' : 'none',
              placeItems: 'center',
              width: 40, height: 40, borderRadius: 999,
              background: 'transparent', border: '1px solid currentColor',
              color: 'inherit',
            }}>
            <Icon name="menu" size={18} />
          </button>
        </div>
      </div>

      {open && <MobileMenu close={() => setOpen(false)} route={route} setRoute={setRoute} items={navItems} />}
    </header>
  );
}

function MobileMenu({ close, route, setRoute, items }) {
  return (
    <div style={{
      position: 'fixed', inset: 0, background: 'var(--bg)', zIndex: 100,
      display: 'flex', flexDirection: 'column',
      animation: 'fadeIn 0.2s ease',
    }}>
      <style>{`@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }`}</style>
      <div className="container" style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: 88,
      }}>
        <AlbaLogo theme="light" />
        <button onClick={close} style={{
          width: 44, height: 44, borderRadius: 999,
          background: 'transparent', border: '1px solid var(--border)',
          display: 'grid', placeItems: 'center',
        }}>
          <Icon name="x" size={20} />
        </button>
      </div>
      <div className="container" style={{ paddingTop: 48, flex: 1 }}>
        {items.map(n => (
          <button key={n.id}
            onClick={() => { setRoute(n.id); close(); window.scrollTo({ top: 0 }); }}
            style={{
              display: 'block', width: '100%', textAlign: 'left',
              padding: '18px 0',
              borderBottom: '1px solid var(--border)',
              background: 'none', border: 'none',
              fontFamily: 'var(--f-display)',
              fontSize: 28, fontWeight: 500,
              letterSpacing: '-0.03em',
              color: route === n.id ? 'var(--accent)' : 'var(--text)',
              borderTop: 'none', borderLeft: 'none', borderRight: 'none',
            }}>
            {n.label}
          </button>
        ))}
        <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <a href="tel:+97143772503" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 16 }}>
            <Icon name="phone" size={16} /> <span className="mono">+971 4 377 2503</span>
          </a>
          <a href="mailto:info@albacars.ae" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 16 }}>
            <Icon name="mail" size={16} /> info@albacars.ae
          </a>
        </div>
      </div>
    </div>
  );
}

function Footer({ setRoute }) {
  return (
    <footer style={{ background: 'var(--noir)', color: 'var(--paper-dk)', paddingTop: 90 }}>
      <div className="container-wide">
        {/* Top CTA band */}
        <div style={{ display: 'grid', gridTemplateColumns: window.innerWidth > 900 ? '1.4fr 1fr' : '1fr', gap: 60, paddingBottom: 80, borderBottom: '1px solid var(--line-dk)' }}>
          <div>
            <Eyebrow>Visit · Trade · Sell</Eyebrow>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 68px)', marginTop: 18, color: '#fff' }}>
              Two showrooms, one promise — <em style={{ color: 'var(--gold)', fontStyle: 'italic', fontWeight: 400 }}>your time is yours.</em>
            </h2>
            <p style={{ marginTop: 22, color: 'var(--muted-dk)', fontSize: 16, maxWidth: 540 }}>
              Walk into Al Quoz any day of the week. Browse, test-drive, trade in, or sell. RTA and bank paperwork handled by us — UAE-wide delivery on completed sales.
            </p>
            <div style={{ marginTop: 36, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Btn variant="light" icon="arrow-right" onClick={() => { setRoute('sell'); window.scrollTo({ top: 0 }); }}>Sell Your Car</Btn>
              <Btn variant="ghost" icon="arrow-right" style={{ color: '#fff', borderColor: 'var(--line-dk)' }} onClick={() => { setRoute('contact'); window.scrollTo({ top: 0 }); }}>Visit Showroom</Btn>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <FooterContact icon="pin" label="Showroom" value={<>Showroom 17, 18 & 20<br/>Al Asayel Street, Al Quoz Ind 1<br/>Dubai, UAE</>} />
            <FooterContact icon="phone" label="Call" value={<a href="tel:+97143772503" className="mono">+971 4 377 2503</a>} />
            <FooterContact icon="mail" label="Email" value={<a href="mailto:info@albacars.ae">info@albacars.ae</a>} />
            <FooterContact icon="calendar" label="Hours" value="Sun–Sat · 09:30 – 22:00" />
          </div>
        </div>

        {/* Link columns */}
        <div style={{
          display: 'grid', gridTemplateColumns: window.innerWidth > 900 ? '1.4fr repeat(4, 1fr)' : 'repeat(2, 1fr)',
          gap: 50, padding: '70px 0',
        }}>
          <div>
            <AlbaLogo theme="dark" size="lg" />
            <p style={{ marginTop: 24, color: 'var(--muted-dk)', fontSize: 14, maxWidth: 320 }}>
              Alba Motors LLC. A premium pre-owned showroom in Al Quoz, Dubai. British & German luxury, certified pre-owned.
            </p>
            <div style={{ marginTop: 28, display: 'flex', gap: 12 }}>
              {['instagram','facebook','tiktok','youtube'].map(n => (
                <a key={n} href="#" aria-label={n} style={{
                  width: 36, height: 36, borderRadius: 999,
                  border: '1px solid var(--line-dk)',
                  display: 'grid', placeItems: 'center',
                  color: 'var(--paper-dk)',
                  transition: 'all 0.15s',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.color = 'var(--noir)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--paper-dk)'; }}
                >
                  <Icon name={n} size={15} />
                </a>
              ))}
            </div>
          </div>
          {[
            { title: 'Buy', links: ['Inventory', 'Featured', 'Just Arrived', 'Brands', 'Body Type'] },
            { title: 'Sell & Finance', links: ['Sell Your Car', 'Trade-In', 'Instant Valuation', 'Finance Eligibility', 'Lease-to-Own'] },
            { title: 'Company', links: ['About', 'Press & Awards', 'Careers', 'Contact', 'Visit Us'] },
            { title: 'Support', links: ['Warranty', 'RTA Process', '150+ Point Inspection', 'FAQs', 'Privacy'] },
          ].map(col => (
            <div key={col.title}>
              <div style={{
                fontFamily: 'var(--f-display)', fontSize: 11, fontWeight: 500,
                letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'var(--gold)', marginBottom: 18,
              }}>{col.title}</div>
              <ul style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {col.links.map(l => (
                  <li key={l}>
                    <a href="#" style={{ fontSize: 14, color: 'var(--paper-dk)', opacity: 0.85 }}>{l}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Languages + bottom */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 24, padding: '32px 0', borderTop: '1px solid var(--line-dk)',
          fontSize: 12, color: 'var(--muted-dk)', flexWrap: 'wrap',
        }}>
          <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Icon name="globe" size={13} /> Available in</span>
            {['English','العربية','Русский','中文'].map((l,i) => (
              <span key={l} style={{
                opacity: i === 0 ? 1 : 0.65,
                padding: '4px 10px',
                border: i === 0 ? '1px solid var(--gold)' : '1px solid transparent',
                borderRadius: 999,
                color: i === 0 ? 'var(--gold)' : 'inherit',
              }}>{l}</span>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 24 }}>
            <span>© 2026 Alba Motors LLC</span>
            <span>Trade Licence · Dubai DED</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterContact({ icon, label, value }) {
  return (
    <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
      <div style={{
        width: 38, height: 38, borderRadius: '50%',
        border: '1px solid var(--line-dk)',
        display: 'grid', placeItems: 'center', color: 'var(--gold)',
        flexShrink: 0,
      }}>
        <Icon name={icon} size={15} />
      </div>
      <div>
        <div style={{
          fontFamily: 'var(--f-display)', fontSize: 10, fontWeight: 500,
          letterSpacing: '0.16em', textTransform: 'uppercase',
          color: 'var(--muted-dk)', marginBottom: 4,
        }}>{label}</div>
        <div style={{ fontSize: 14, color: '#fff', lineHeight: 1.5 }}>{value}</div>
      </div>
    </div>
  );
}

Object.assign(window, { Navbar, Footer });