// Shared nav, footer, helper components for Janel Safaris

const { useState, useEffect, useRef } = React;

// — Tiny icon set (minimal stroke, no slop)
const Ico = {
  Arrow: (p) => <svg viewBox="0 0 24 24" className={`ico ${p.className||''}`} {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  ArrowDown: (p) => <svg viewBox="0 0 24 24" className={`ico ${p.className||''}`} {...p}><path d="M12 5v14M6 13l6 6 6-6"/></svg>,
  Plus: (p) => <svg viewBox="0 0 24 24" className={`ico ${p.className||''}`} {...p}><path d="M12 5v14M5 12h14"/></svg>,
  Minus: (p) => <svg viewBox="0 0 24 24" className={`ico ${p.className||''}`} {...p}><path d="M5 12h14"/></svg>,
  Star: (p) => <svg viewBox="0 0 24 24" className={`ico ${p.className||''}`} fill="currentColor" stroke="none"><path d="M12 2l2.9 6.5 7 .8-5.2 4.7 1.5 6.9L12 17.6 5.8 20.9l1.5-6.9L2 9.3l7-.8z"/></svg>,
  Map: (p) => <svg viewBox="0 0 24 24" className={`ico ${p.className||''}`} {...p}><path d="M9 4l-6 2v14l6-2 6 2 6-2V4l-6 2-6-2zM9 4v14M15 6v14"/></svg>,
  Clock: (p) => <svg viewBox="0 0 24 24" className={`ico ${p.className||''}`} {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
  Users: (p) => <svg viewBox="0 0 24 24" className={`ico ${p.className||''}`} {...p}><circle cx="9" cy="8" r="3.5"/><path d="M3 20c0-3 2.7-5 6-5s6 2 6 5M16 11a3 3 0 100-6M21 20c0-2.5-1.8-4.3-4-4.8"/></svg>,
  Shield: (p) => <svg viewBox="0 0 24 24" className={`ico ${p.className||''}`} {...p}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z"/></svg>,
  Compass: (p) => <svg viewBox="0 0 24 24" className={`ico ${p.className||''}`} {...p}><circle cx="12" cy="12" r="9"/><path d="M15.5 8.5l-2 5.5-5.5 2 2-5.5z"/></svg>,
  Leaf: (p) => <svg viewBox="0 0 24 24" className={`ico ${p.className||''}`} {...p}><path d="M5 19c0-9 6-14 16-14 0 10-5 16-14 16-1 0-2-.5-2-2zM5 19c2-3 5-6 9-9"/></svg>,
  Phone: (p) => <svg viewBox="0 0 24 24" className={`ico ${p.className||''}`} {...p}><path d="M5 4h4l2 5-2.5 1.5a11 11 0 005 5L15 13l5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z"/></svg>,
  Mail: (p) => <svg viewBox="0 0 24 24" className={`ico ${p.className||''}`} {...p}><rect x="3" y="5" width="18" height="14" rx="1.5"/><path d="M3 7l9 7 9-7"/></svg>,
  Wa: (p) => <svg viewBox="0 0 24 24" className={`ico ${p.className||''}`} {...p}><path d="M3 21l1.7-5A8 8 0 1112 20a8 8 0 01-3.3-.7L3 21z"/><path d="M8.5 9c0 3.5 3 6.5 6.5 6.5l1.5-1.5-2-1-1 1c-1.5-.5-2.5-1.5-3-3l1-1-1-2L9 8.5c-.3.2-.5.4-.5.5z"/></svg>,
  Search: (p) => <svg viewBox="0 0 24 24" className={`ico ${p.className||''}`} {...p}><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>,
  Menu: (p) => <svg viewBox="0 0 24 24" className={`ico ${p.className||''}`} {...p}><path d="M4 7h16M4 12h16M4 17h16"/></svg>,
  X: (p) => <svg viewBox="0 0 24 24" className={`ico ${p.className||''}`} {...p}><path d="M6 6l12 12M18 6L6 18"/></svg>,
  Mountain: (p) => <svg viewBox="0 0 24 24" className={`ico ${p.className||''}`} {...p}><path d="M3 20l6-10 4 6 3-4 5 8H3z"/><circle cx="16" cy="6" r="1.5"/></svg>,
  Beach: (p) => <svg viewBox="0 0 24 24" className={`ico ${p.className||''}`} {...p}><path d="M3 18c3-2 6-2 9 0s6 2 9 0M3 21c3-2 6-2 9 0s6 2 9 0M14 13L8 4M14 13c-3-1.5-6-1-7 1M14 13c1-3 3-4 6-3"/></svg>,
  Binoc: (p) => <svg viewBox="0 0 24 24" className={`ico ${p.className||''}`} {...p}><circle cx="6" cy="15" r="4"/><circle cx="18" cy="15" r="4"/><path d="M10 15l2-7 2 7M8 6h8"/></svg>,
  Heart: (p) => <svg viewBox="0 0 24 24" className={`ico ${p.className||''}`} {...p}><path d="M12 20s-7-4.5-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.5-7 10-7 10z"/></svg>,
  Check: (p) => <svg viewBox="0 0 24 24" className={`ico ${p.className||''}`} {...p}><path d="M5 12l4 4 10-10"/></svg>,
};

// Logo — wordmark with thin diamond mark
function Logo({ light }) {
  const c = light ? '#f4efe6' : '#1a1814';
  return (
    <a href="index.html" className="flex" style={{ alignItems: 'center', gap: 10 }}>
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
        <path d="M12 2l8 10-8 10-8-10z" stroke={c} strokeWidth="1.3"/>
        <path d="M12 7l4 5-4 5-4-5z" fill={c}/>
      </svg>
      <span style={{ fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 500, letterSpacing: '-0.01em', color: c }}>
        Janel <em style={{ fontStyle: 'italic', fontWeight: 400 }}>Safaris</em>
      </span>
    </a>
  );
}

function Nav({ variant = 'transparent', current }) {
  const [scrolled, setScrolled] = useState(false);
  const [megaOpen, setMegaOpen] = useState(null);
  const [mobOpen, setMobOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    onScroll();
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const isLight = variant === 'transparent' && !scrolled;

  const navStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
    transition: 'all 0.35s cubic-bezier(0.2,0.6,0.2,1)',
    background: isLight ? 'transparent' : 'rgba(244, 239, 230, 0.92)',
    backdropFilter: scrolled ? 'blur(14px) saturate(1.2)' : 'none',
    color: isLight ? '#f4efe6' : '#1a1814',
    borderBottom: scrolled ? '1px solid rgba(26,24,20,0.08)' : '1px solid transparent',
  };

  const links = [
    { name: 'Safaris', mega: 'safaris', href: 'safaris.html' },
    { name: 'Kilimanjaro', href: 'kilimanjaro.html' },
    { name: 'Zanzibar', href: 'zanzibar.html' },
    { name: 'Destinations', mega: 'dest', href: '#' },
    { name: 'Journal', href: '#' },
    { name: 'About', href: '#' },
  ];

  return (
    <>
      <header style={navStyle}>
        <div className="container-wide" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 76 }}>
          <Logo light={isLight} />
          <nav className="desktop-nav" style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
            {links.map((l) => (
              <div key={l.name}
                onMouseEnter={() => l.mega && setMegaOpen(l.mega)}
                onMouseLeave={() => setMegaOpen(null)}
                style={{ position: 'relative' }}>
                <a href={l.href} style={{
                  fontSize: 14, fontWeight: 500,
                  opacity: current === l.name.toLowerCase() ? 1 : 0.85,
                  borderBottom: current === l.name.toLowerCase() ? '1px solid currentColor' : '1px solid transparent',
                  paddingBottom: 2,
                  transition: 'opacity 0.2s'
                }}>{l.name}</a>
              </div>
            ))}
          </nav>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <a href="inquiry.html" className="btn" style={{
              background: isLight ? 'rgba(244,239,230,0.95)' : 'var(--moss)',
              color: isLight ? 'var(--ink)' : 'var(--bone)',
              padding: '10px 20px', fontSize: 13
            }}>
              Plan your safari <Ico.Arrow />
            </a>
            <button className="mobile-only" onClick={() => setMobOpen(true)} style={{ padding: 8 }}>
              <Ico.Menu />
            </button>
          </div>
        </div>

        {/* Mega menu */}
        {megaOpen && (
          <div onMouseEnter={() => setMegaOpen(megaOpen)} onMouseLeave={() => setMegaOpen(null)}
            style={{
              position: 'absolute', left: 0, right: 0, top: 76,
              background: 'rgba(244,239,230,0.98)', backdropFilter: 'blur(20px)',
              color: 'var(--ink)', borderTop: '1px solid var(--line-soft)',
              borderBottom: '1px solid var(--line-soft)',
              padding: '40px 0',
            }}>
            <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1.4fr', gap: 48 }}>
              {megaOpen === 'safaris' ? <>
                <MegaCol title="By style" items={['Luxury private', 'Mid-range classic', 'Family safaris', 'Honeymoon', 'Photographic', 'Walking safari']}/>
                <MegaCol title="By duration" items={['3–5 days', '6–8 days', '9–12 days', '13+ days']}/>
                <MegaCol title="By season" items={['Great Migration', 'Calving season', 'Green season', 'Year-round']}/>
              </> : <>
                <MegaCol title="Northern circuit" items={['Serengeti', 'Ngorongoro Crater', 'Tarangire', 'Lake Manyara', 'Arusha NP']}/>
                <MegaCol title="Southern & West" items={['Ruaha', 'Selous (Nyerere)', 'Mahale', 'Katavi']}/>
                <MegaCol title="Beyond safari" items={['Zanzibar', 'Mount Kilimanjaro', 'Mount Meru', 'Cultural visits']}/>
              </>}
              <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <div className="photo" data-cap="featured.tif" style={{ height: 180 }}/>
                <div style={{ marginTop: 16 }}>
                  <div className="eyebrow"><span className="dot"/>Featured</div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 22, marginTop: 8 }}>Great Migration · 2026 calendar</div>
                  <a href="#" style={{ fontSize: 13, marginTop: 8, display: 'inline-flex', alignItems: 'center', gap: 6 }}>See month-by-month guide <Ico.Arrow/></a>
                </div>
              </div>
            </div>
          </div>
        )}
      </header>

      {/* Mobile drawer */}
      {mobOpen && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'var(--bone)', padding: 24 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Logo />
            <button onClick={() => setMobOpen(false)}><Ico.X/></button>
          </div>
          <nav style={{ marginTop: 40, display: 'flex', flexDirection: 'column', gap: 24 }}>
            {links.map(l => <a key={l.name} href={l.href} style={{ fontFamily: 'var(--serif)', fontSize: 36 }}>{l.name}</a>)}
          </nav>
        </div>
      )}

      <style>{`
        .mobile-only { display: none; }
        @media (max-width: 880px) {
          .desktop-nav { display: none !important; }
          .mobile-only { display: inline-flex !important; }
        }
      `}</style>
    </>
  );
}

function MegaCol({ title, items }) {
  return (
    <div>
      <div className="eyebrow" style={{ marginBottom: 14 }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map(i => (
          <li key={i}>
            <a href="#" style={{ fontFamily: 'var(--serif)', fontSize: 19, fontWeight: 500 }}>{i}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

// — Sticky inquiry / WhatsApp dock
function StickyDock() {
  return (
    <div style={{
      position: 'fixed', right: 24, bottom: 24, zIndex: 90,
      display: 'flex', flexDirection: 'column', gap: 10
    }}>
      <a href="#" title="WhatsApp" style={{
        width: 52, height: 52, borderRadius: '50%',
        background: '#25D366', color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 8px 24px rgba(0,0,0,0.18)'
      }}>
        <Ico.Wa style={{ width: 22, height: 22 }} />
      </a>
      <a href="inquiry.html" title="Plan trip" style={{
        width: 52, height: 52, borderRadius: '50%',
        background: 'var(--moss)', color: 'var(--bone)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 8px 24px rgba(0,0,0,0.18)'
      }}>
        <Ico.Mail style={{ width: 20, height: 20 }} />
      </a>
    </div>
  );
}

function Footer() {
  return (
    <footer className="dark" style={{ paddingTop: 100, paddingBottom: 32 }}>
      <div className="container-wide">
        {/* Big newsletter band */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80,
          paddingBottom: 80, borderBottom: '1px solid rgba(244,239,230,0.12)'
        }}>
          <div>
            <div className="eyebrow dark"><span className="dot"/>Field notes · monthly</div>
            <h2 className="h-1" style={{ marginTop: 18, color: 'var(--bone)' }}>
              Letters from the<br/><em style={{ fontStyle: 'italic' }}>bush, ocean & mountain.</em>
            </h2>
          </div>
          <div style={{ alignSelf: 'end' }}>
            <p style={{ color: 'rgba(244,239,230,0.7)', maxWidth: 380, marginBottom: 24 }}>
              Migration timing, off-season finds, and dispatches from our guides. No spam — about one note a month.
            </p>
            <form style={{ display: 'flex', gap: 8, borderBottom: '1px solid rgba(244,239,230,0.3)', paddingBottom: 8 }}>
              <input className="input" placeholder="your@email.com" style={{ border: 'none', padding: '8px 0', flex: 1 }} />
              <button className="btn btn-sun" type="button">Subscribe <Ico.Arrow/></button>
            </form>
          </div>
        </div>

        {/* Link grid */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 1fr', gap: 48,
          padding: '60px 0', borderBottom: '1px solid rgba(244,239,230,0.12)'
        }}>
          <div>
            <Logo light />
            <p style={{ color: 'rgba(244,239,230,0.6)', marginTop: 18, fontSize: 14, maxWidth: 280 }}>
              Tailor-made safaris, mountain expeditions and Indian Ocean escapes — designed and led from Arusha, Tanzania since 2008.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 24, alignItems: 'center', flexWrap: 'wrap' }}>
              {['TATO','SafariBookings ★ 4.9','TripAdvisor ★ 5.0','TALA Licensed'].map(b => (
                <span key={b} style={{
                  fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.1em',
                  textTransform: 'uppercase', padding: '5px 9px',
                  border: '1px solid rgba(244,239,230,0.2)', borderRadius: 3,
                  color: 'rgba(244,239,230,0.8)'
                }}>{b}</span>
              ))}
            </div>
          </div>
          <FooterCol title="Safaris" items={['Northern Circuit','Southern Circuit','Migration','Family','Honeymoon','Private']}/>
          <FooterCol title="Mountain" items={['Machame','Lemosho','Marangu','Rongai','Northern Circuit']}/>
          <FooterCol title="Coast" items={['Stone Town','Nungwi','Paje','Pemba','Mafia Island']}/>
          <FooterCol title="Company" items={['About','Our guides','Reviews','Journal','Contact','Press']}/>
        </div>

        {/* Bottom */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 32, color: 'rgba(244,239,230,0.5)', fontSize: 12,
          fontFamily: 'var(--mono)', flexWrap: 'wrap', gap: 16
        }}>
          <div>© 2026 Janel Safaris Ltd. · Boma Rd, Arusha, Tanzania</div>
          <div style={{ display: 'flex', gap: 24 }}>
            <a href="#">Terms</a><a href="#">Privacy</a><a href="#">Booking conditions</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div className="eyebrow dark" style={{ marginBottom: 16 }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map(i => <li key={i}><a href="#" style={{ color: 'rgba(244,239,230,0.85)', fontSize: 14 }}>{i}</a></li>)}
      </ul>
    </div>
  );
}

// — Animated counter
function Counter({ to, suffix = '', duration = 1400 }) {
  const [n, setN] = useState(0);
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        const start = performance.now();
        const tick = (now) => {
          const t = Math.min(1, (now - start) / duration);
          const eased = 1 - Math.pow(1 - t, 3);
          setN(Math.round(eased * to));
          if (t < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
        io.disconnect();
      }
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [to, duration]);
  return <span ref={ref}>{n}{suffix}</span>;
}

// Reveal on scroll wrapper
function Reveal({ children, delay = 0 }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) setTimeout(() => el.classList.add('in'), delay);
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <div ref={ref} className="fade-up">{children}</div>;
}

Object.assign(window, { Ico, Logo, Nav, Footer, StickyDock, Counter, Reveal });
