// chrome.jsx — Header, Footer, shared bits

const NAV_ITEMS = [
  { id: 'home',     label: 'Home' },
  { id: 'services', label: 'Services' },
  { id: 'work',     label: 'Work' },
  { id: 'about',    label: 'About' },
  { id: 'contact',  label: 'Contact' },
  { id: 'book',     label: 'Book a Call' },
];

const PAGE_HREFS = {
  home:       '/',
  services:   '/services',
  work:       '/work',
  about:      '/about',
  contact:    '/contact',
  book:       '/book',
  privacy:    '/privacy',
  disclaimer: '/disclaimer',
};

function Arrow({ size = 12, style }) {
  return (
    <svg className="arr" width={size} height={size} viewBox="0 0 12 12" fill="none" style={style}>
      <path d="M2 10L10 2M10 2H4M10 2V8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function SunMoon({ dark }) {
  return dark ? (
    <svg viewBox="0 0 24 24" fill="none">
      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ) : (
    <svg viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.6" />
      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
    </svg>
  );
}

function MenuIcon({ open }) {
  return open ? (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
      <path d="M3 3l10 10M13 3L3 13" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
    </svg>
  ) : (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
      <path d="M2 5h12M2 11h12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
    </svg>
  );
}

function Header({ route, setRoute, dark, setDark }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  const go = (id) => {
    setRoute(id);
    setMenuOpen(false);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <>
      <header className={"hdr" + (scrolled ? " scrolled" : "")}>
        <div className="logo" onClick={() => go('home')}>
          <img className="logo-img"
               src={dark ? 'harjog-logo-white.png' : 'harjog-logo-black.png'}
               alt="Harjog" />
        </div>

        <nav className="nav" aria-label="Primary">
          {NAV_ITEMS.filter(i => i.id !== 'book').map(item => (
            <a key={item.id}
               href={PAGE_HREFS[item.id]}
               className={"nav-link" + (route === item.id ? " active" : "")}
               onClick={(e) => { e.preventDefault(); go(item.id); }}>
              {item.label}
            </a>
          ))}
        </nav>

        <div className="hdr-right">
          <button className="theme-toggle" aria-label="Toggle theme"
                  onClick={() => setDark(!dark)}>
            <SunMoon dark={dark} />
          </button>
          <button className="btn btn-primary" onClick={() => go('book')}
                  style={{ display: 'inline-flex' }}>
            Book a Call <Arrow />
          </button>
          <button className="menu-btn" onClick={() => setMenuOpen(o => !o)} aria-label="Menu">
            <MenuIcon open={menuOpen} />
          </button>
        </div>
      </header>

      {menuOpen && (
        <div style={{
          position: 'fixed', top: 78, left: 0, right: 0, zIndex: 99,
          background: 'var(--bg)', borderBottom: '1px solid var(--border)',
          padding: '16px 24px', display: 'flex', flexDirection: 'column', gap: 4
        }}>
          {NAV_ITEMS.filter(i => i.id !== 'book').map(item => (
            <a key={item.id}
               href={PAGE_HREFS[item.id]}
               className={"nav-link" + (route === item.id ? " active" : "")}
               onClick={(e) => { e.preventDefault(); go(item.id); }}>
              {item.label}
            </a>
          ))}
          <a href={PAGE_HREFS['book']}
             style={{ color: 'var(--accent)', fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '8px 0', marginTop: 4 }}
             onClick={(e) => { e.preventDefault(); go('book'); setMenuOpen(false); }}>
            Book a Call →
          </a>
        </div>
      )}
    </>
  );
}

function Footer({ setRoute }) {
  const [email, setEmail] = React.useState('');
  const [subscribed, setSubscribed] = React.useState(false);

  const go = (id) => {
    setRoute(id);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const submit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    setSubscribed(true);
    setEmail('');
    setTimeout(() => setSubscribed(false), 3500);
  };

  return (
    <footer className="ftr">
      <div className="ftr-inner">

        {/* LEFT — large brand mark, full panel height (mirrors Floema's giant-F left column) */}
        <div className="ftr-left">
          <img src="harjog-logo-gold.png" alt="Harjog Solutions" className="ftr-wordmark" />
          <p className="ftr-big-tagline">Local roots.<br />Global reach.</p>
          <span className="ftr-est">Est. 2017 · Ludhiana, Punjab</span>
        </div>

        {/* RIGHT — two stacked sections separated by a rule */}
        <div className="ftr-right">

          {/* TOP: three address-style columns */}
          <div className="ftr-cols">
            <div className="ftr-col">
              <h4>Studio</h4>
              <address>
                Harjog Solutions<br />
                Ludhiana, Punjab<br />
                India — Est. 2017
              </address>
            </div>
            <div className="ftr-col">
              <h4>Services</h4>
              <address>
                Brand Identity<br />
                Performance Marketing<br />
                Real Estate Marketing<br />
                Political Campaigns<br />
                Automation &amp; CRM
              </address>
            </div>
            <div className="ftr-col">
              <h4>Contact</h4>
              <address>
                <a href="tel:+919814640066">+91 98146-40066</a><br />
                <a href="mailto:satnam@harjogsolutions.com">satnam@<br />harjogsolutions.com</a>
              </address>
            </div>
          </div>

          <div className="ftr-rule" />

          {/* BOTTOM: vertical nav on left, social + copyright on right */}
          <div className="ftr-bottom-row">
            <nav className="ftr-nav-vertical">
              <a href="/"          onClick={(e) => { e.preventDefault(); go('home'); }}>Home</a>
              <a href="/services"  onClick={(e) => { e.preventDefault(); go('services'); }}>Services</a>
              <a href="/work"      onClick={(e) => { e.preventDefault(); go('work'); }}>Work</a>
              <a href="/about"     onClick={(e) => { e.preventDefault(); go('about'); }}>About</a>
              <a href="/contact"   onClick={(e) => { e.preventDefault(); go('contact'); }}>Contact</a>
            </nav>
            <div className="ftr-right-bottom">
              <div className="ftr-social">
                <a href="https://instagram.com" aria-label="Instagram" target="_blank" rel="noopener">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.5" fill="currentColor"/></svg>
                </a>
                <a href="https://linkedin.com" aria-label="LinkedIn" target="_blank" rel="noopener">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
                </a>
                <a href="https://facebook.com" aria-label="Facebook" target="_blank" rel="noopener">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
                </a>
              </div>
              <span className="ftr-copy">© 2026 Harjog Solutions · Satnam Jandu</span>
              <div style={{ display: 'flex', gap: 16, marginTop: 6, flexWrap: 'wrap' }}>
                <a href="/privacy"    onClick={(e) => { e.preventDefault(); go('privacy'); }}
                   style={{ fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--muted)', borderBottom: '1px solid var(--border)' }}>
                  Privacy Policy
                </a>
                <a href="/disclaimer" onClick={(e) => { e.preventDefault(); go('disclaimer'); }}
                   style={{ fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--muted)', borderBottom: '1px solid var(--border)' }}>
                  Disclaimer
                </a>
                <a href="/book"       onClick={(e) => { e.preventDefault(); go('book'); }}
                   style={{ fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--muted)', borderBottom: '1px solid var(--border)' }}>
                  Book a Call
                </a>
              </div>
            </div>
          </div>

        </div>
      </div>
    </footer>
  );
}

// Reveal-on-scroll wrapper
function Reveal({ children, delay = 0, as: As = 'div', className, ...rest }) {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);

  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setTimeout(() => setSeen(true), delay);
          io.disconnect();
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [delay]);

  return (
    <As ref={ref} className={"reveal" + (seen ? " in" : "") + (className ? " " + className : "")} {...rest}>
      {children}
    </As>
  );
}

Object.assign(window, { Header, Footer, Arrow, Reveal, NAV_ITEMS });