// Nav + Footer for dub2.ai

const NAV_LINKS = [
  { label: 'Products', href: '#products' },
  { label: 'Why us', href: '#why' },
  { label: 'About', href: '#about' },
  { label: 'Founder', href: 'ceo.html' },
  { label: 'Contact', href: '#contact' },
];

const Nav = ({ currentPage = 'home' }) => {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

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

  // Smooth anchor scroll for in-page links
  const handleClick = (e, href) => {
    setOpen(false);
    if (href.startsWith('#') && currentPage === 'home') {
      e.preventDefault();
      const el = document.querySelector(href);
      if (el) {
        const y = el.getBoundingClientRect().top + window.scrollY - 70;
        window.scrollTo({ top: y, behavior: 'smooth' });
        history.replaceState(null, '', href);
      }
    } else if (href.startsWith('#') && currentPage !== 'home') {
      // nav from other page to home anchor
      e.preventDefault();
      window.location.href = 'index.html' + href;
    }
  };

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(255, 247, 243, 0.85)' : 'rgba(255, 247, 243, 0.4)',
      backdropFilter: 'saturate(1.4) blur(12px)',
      WebkitBackdropFilter: 'saturate(1.4) blur(12px)',
      borderBottom: scrolled ? '1px solid var(--border-1)' : '1px solid transparent',
      transition: 'all .2s var(--ease-standard)',
    }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '14px 28px', display: 'flex', alignItems: 'center', gap: 32 }}>
        <Logo height={30} />
        <nav className="d2-nav-desktop" style={{ display: 'flex', gap: 28, marginLeft: 18 }}>
          {NAV_LINKS.map(l => (
            <a key={l.label} href={l.href} onClick={(e) => handleClick(e, l.href)} style={{
              textDecoration: 'none', color: 'var(--fg-2)', fontSize: 14, fontWeight: 500,
              transition: 'color .14s',
            }}
              onMouseEnter={e => e.currentTarget.style.color = 'var(--brand-ember)'}
              onMouseLeave={e => e.currentTarget.style.color = 'var(--fg-2)'}
            >{l.label}</a>
          ))}
        </nav>
        <div className="d2-nav-desktop" style={{ marginLeft: 'auto', display: 'flex', gap: 10, alignItems: 'center' }}>
          <Button variant="primary" size="sm" href="#newsletter" onClick={(e) => handleClick(e, '#newsletter')}>Get updates</Button>
        </div>
        <button className="d2-nav-mobile-toggle" onClick={() => setOpen(!open)}
          aria-label="Toggle menu"
          style={{
            display: 'none', marginLeft: 'auto', background: 'transparent',
            border: '1px solid var(--border-2)', borderRadius: 10, padding: 8, cursor: 'pointer',
            color: 'var(--fg-1)',
          }}>
          <Icon name={open ? 'close' : 'menu'} size={20} />
        </button>
      </div>
      {/* Mobile drawer */}
      {open && (
        <div className="d2-nav-mobile-drawer" style={{
          display: 'none',
          borderTop: '1px solid var(--border-1)', background: 'var(--brand-cream)',
          padding: '14px 28px 22px',
        }}>
          <nav style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {NAV_LINKS.map(l => (
              <a key={l.label} href={l.href} onClick={(e) => handleClick(e, l.href)} style={{
                padding: '14px 8px', borderBottom: '1px solid var(--border-1)',
                textDecoration: 'none', color: 'var(--fg-1)', fontSize: 17, fontWeight: 500,
              }}>{l.label}</a>
            ))}
          </nav>
          <div style={{ marginTop: 16 }}>
            <Button variant="primary" size="lg" style={{ width: '100%' }}
              onClick={(e) => handleClick(e, '#newsletter')}>Get updates</Button>
          </div>
        </div>
      )}
    </header>
  );
};

// Deep footer — dark surface with dot-matrix accent
const Footer = () => {
  const [year] = React.useState(() => new Date().getFullYear());
  return (
    <footer style={{ background: 'var(--neutral-900)', color: 'var(--neutral-300)', position: 'relative', overflow: 'hidden' }}>
      {/* decorative dots */}
      <div style={{ position: 'absolute', right: -60, top: -60, opacity: 0.18, pointerEvents: 'none' }}>
        <DotGrid w={320} h={320} />
      </div>

      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '80px 28px 32px', position: 'relative' }}>
        {/* Top band */}
        <div className="d2-footer-grid" style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 56 }}>
          <div>
            <Logo height={32} variant="light" />
            <p style={{ maxWidth: 320, color: 'var(--neutral-400)', fontSize: 14.5, marginTop: 18, lineHeight: 1.6 }}>
              AI applications and ready-built white-label business solutions. Built by engineers. Run by you.
            </p>
            <div style={{ marginTop: 22, display: 'flex', gap: 14, alignItems: 'center', color: 'var(--neutral-400)', fontSize: 13.5 }}>
              <Icon name="map" size={16} color="var(--brand-flare)" />
              <span>Houston, Texas</span>
            </div>
            <div style={{ marginTop: 10, display: 'flex', gap: 14, alignItems: 'center', color: 'var(--neutral-400)', fontSize: 13.5 }}>
              <Icon name="mail" size={16} color="var(--brand-flare)" />
              <a href="mailto:hello@dub2.ai" style={{ color: 'var(--neutral-300)', textDecoration: 'none' }}>hello@dub2.ai</a>
            </div>
          </div>

          {[
            ['Products', [
              ['AI Applications', 'index.html#products'],
              ['White-Label Solutions', 'index.html#products'],
              ['Why dub2.ai', 'index.html#why'],
            ]],
            ['Company', [
              ['About', 'index.html#about'],
              ['Founder Story', 'ceo.html'],
              ['Contact', 'index.html#contact'],
            ]],
            ['Connect', [
              ['Newsletter', 'index.html#newsletter'],
              ['SmartMode.ai', 'https://smartmode.ai'],
              ['Diversified Robotic', 'https://diversifiedrobotic.com'],
            ]],
          ].map(([h, items]) => (
            <div key={h}>
              <h5 style={{ color: '#fff', fontSize: 12, fontWeight: 700, margin: '0 0 16px', letterSpacing: '.14em', textTransform: 'uppercase' }}>{h}</h5>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {items.map(([label, href]) => (
                  <li key={label}>
                    <a href={href} style={{
                      color: 'var(--neutral-400)', fontSize: 14, textDecoration: 'none',
                      transition: 'color .14s',
                    }}
                      onMouseEnter={e => e.currentTarget.style.color = 'var(--brand-flare)'}
                      onMouseLeave={e => e.currentTarget.style.color = 'var(--neutral-400)'}
                    >{label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Huge wordmark band */}
        <div style={{
          marginTop: 72, paddingTop: 48, borderTop: '1px solid rgba(255,255,255,0.08)',
          display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap',
        }}>
          <div className="d2-footer-wordmark" style={{
            fontFamily: 'var(--font-display)', fontWeight: 400,
            fontSize: 'clamp(64px, 14vw, 220px)', lineHeight: .9, letterSpacing: '-0.04em',
            background: 'linear-gradient(180deg, #FF604C 0%, #C21500 80%)',
            WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
          }}>dub2.ai</div>
        </div>

        {/* Fine print */}
        <div style={{
          marginTop: 36, paddingTop: 22, borderTop: '1px solid rgba(255,255,255,0.08)',
          display: 'flex', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap',
          color: 'var(--neutral-500)', fontSize: 12.5,
        }}>
          <span>© {year} dub2.ai · All rights reserved · Houston, TX</span>
          <span style={{ display: 'flex', gap: 22 }}>
            <a href="#" style={{ color: 'var(--neutral-500)', textDecoration: 'none' }}>Privacy</a>
            <a href="#" style={{ color: 'var(--neutral-500)', textDecoration: 'none' }}>Terms</a>
          </span>
        </div>
      </div>
    </footer>
  );
};

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