/* Shared chrome — nav, footer, marquee, reveal observer */
const { useState, useEffect, useRef, useMemo } = React;

/* === Tiny SVG monogram logo === */
function Monogram({ size = 32, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
      <circle cx="16" cy="16" r="15.2" stroke={color} strokeWidth="1.2"/>
      <path d="M6 12 L10 22 L13 14 L16 22 L19 14 L22 22 L26 12" stroke={color} strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="24.5" cy="9" r="1.6" fill={color}/>
    </svg>
  );
}

/* === Top utility bar === */
function UtilityBar() {
  return (
    <div style={{ background: 'var(--ink-surface)', color: 'var(--bone)', borderBottom: '1px solid rgba(255,252,243,0.08)' }}>
      <div className="container" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px var(--gut)', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.06em' }}>
        <div style={{ display: 'flex', gap: 18, color: '#C9BFAB' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#7BC47F', boxShadow: '0 0 0 0 rgba(123,196,127,0.6)', animation: 'pulse 2s infinite' }}/>
            AVAILABLE · REPLIES IN 1–3H
          </span>
          <span style={{ opacity: 0.4, display: 'inline' }} className="hide-md">·</span>
          <span className="hide-md">EST. 2020 · INDIA · USA · UAE · CANADA</span>
        </div>
        <div style={{ display: 'flex', gap: 18 }}>
          <a href="tel:+14804186390" style={{ color: '#C9BFAB' }} className="u-link hide-sm">+1.480.418.6390</a>
          <a href="mailto:neel@withremote.ai" style={{ color: '#C9BFAB' }} className="u-link">neel@withremote.ai</a>
        </div>
      </div>
      <style>{`
        @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(123,196,127,0.5);} 50% { box-shadow: 0 0 0 6px rgba(123,196,127,0);} }
        @media (max-width: 720px) { .hide-sm { display: none !important; } }
        @media (max-width: 980px) { .hide-md { display: none !important; } }
      `}</style>
    </div>
  );
}

/* === Main nav === */
function Nav({ active = "home", currentPath = "" }) {
  const [open, setOpen] = useState(false);
  const [menu, setMenu] = useState(null);
  const navItems = [
    { id: "home", label: "Home", href: "index.html" },
    { id: "services", label: "Services", href: "services.html", drop: true },
    { id: "case-studies", label: "Case Studies", href: "case-studies.html" },
    { id: "salary-guide", label: "Salary Guide", href: "salary-guide.html" },
    { id: "media", label: "Media", href: "media.html" },
    { id: "about", label: "About", href: "about.html" },
  ];
  const services = window.WR.services;
  const grouped = useMemo(() => {
    const g = {};
    services.forEach(s => { (g[s.cat] = g[s.cat] || []).push(s); });
    return g;
  }, [services]);

  return (
    <nav style={{ position: 'sticky', top: 0, zIndex: 50, background: 'var(--paper)', borderBottom: '1px solid var(--rule)' }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px var(--gut)' }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Monogram size={30} />
          <span style={{ fontFamily: 'var(--serif-display)', fontSize: 22, letterSpacing: '-0.02em' }}>
            withRemote<span style={{ color: 'var(--rust)' }}>.</span>ai
          </span>
        </a>
        <div className="hide-md" style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          {navItems.map(item => (
            <div key={item.id} style={{ position: 'relative' }}
                 onMouseEnter={() => item.drop && setMenu(item.id)}
                 onMouseLeave={() => setMenu(null)}>
              <a href={item.href}
                 style={{
                   fontFamily: 'var(--sans)', fontSize: 14, fontWeight: 500,
                   padding: '8px 14px', borderRadius: 999,
                   color: active === item.id ? 'var(--rust)' : 'var(--ink)',
                   background: active === item.id ? 'rgba(194,68,14,0.08)' : 'transparent',
                   display: 'inline-flex', alignItems: 'center', gap: 4,
                 }}>
                {item.label}
                {item.drop && <span style={{ fontSize: 10, opacity: 0.6 }}>▾</span>}
              </a>
              {item.drop && menu === item.id && (
                <div style={{ position: 'absolute', top: '100%', left: 0, paddingTop: 8 }}>
                  <div style={{ background: 'var(--bone)', border: '1px solid var(--rule)', borderRadius: 6, padding: 24, display: 'grid', gridTemplateColumns: 'repeat(2, minmax(220px, 1fr))', gap: 24, minWidth: 540, boxShadow: '0 24px 48px -16px rgba(26,23,20,0.18)' }}>
                    {Object.entries(grouped).map(([cat, items]) => (
                      <div key={cat}>
                        <div className="eyebrow" style={{ marginBottom: 10, color: 'var(--rust)' }}>{cat}</div>
                        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                          {items.map(s => (
                            <a key={s.slug} href={`services/${s.slug}.html`}
                               style={{ padding: '8px 10px', margin: '0 -10px', borderRadius: 4, display: 'block' }}
                               onMouseEnter={e => e.currentTarget.style.background = 'var(--paper-2)'}
                               onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                              <div style={{ fontFamily: 'var(--serif-display)', fontSize: 18, lineHeight: 1.1 }}>{s.name}</div>
                              <div style={{ fontFamily: 'var(--sans)', fontSize: 12, color: 'var(--ink-mute)', marginTop: 2 }}>{s.tagline}</div>
                            </a>
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          ))}
          <a href="contact.html" className="btn btn-ink" style={{ marginLeft: 12, padding: '10px 18px' }}>
            Get in touch <span className="arrow">→</span>
          </a>
        </div>
        <button onClick={() => setOpen(!open)} className="show-md" style={{ display: 'none' }}>
          <svg width="22" height="22" viewBox="0 0 22 22"><path d={open ? 'M4 4 L18 18 M18 4 L4 18' : 'M3 6 H19 M3 11 H19 M3 16 H19'} stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round"/></svg>
        </button>
      </div>
      {open && (
        <div className="show-md" style={{ display: 'none', borderTop: '1px solid var(--rule)', padding: '12px var(--gut) 24px' }}>
          {navItems.map(item => (
            <a key={item.id} href={item.href} style={{ display: 'block', padding: '12px 0', borderBottom: '1px solid var(--rule)', fontFamily: 'var(--serif-display)', fontSize: 22 }}>{item.label}</a>
          ))}
          <a href="contact.html" className="btn btn-ink" style={{ marginTop: 18 }}>Get in touch →</a>
        </div>
      )}
      <style>{`
        @media (max-width: 980px) {
          .show-md { display: block !important; }
        }
      `}</style>
    </nav>
  );
}

/* === Footer === */
function Footer() {
  const { brand, offices, services } = window.WR;
  const grouped = {};
  services.forEach(s => { (grouped[s.cat] = grouped[s.cat] || []).push(s); });
  return (
    <footer className="invert" style={{ marginTop: 0 }}>
      {/* Live ticker */}
      <div style={{ borderTop: '1px solid rgba(255,252,243,0.18)', borderBottom: '1px solid rgba(255,252,243,0.18)', padding: '14px 0', overflow: 'hidden' }}>
        <div className="marquee">
          <div className="marquee-track" style={{ color: 'var(--bone)' }}>
            {Array.from({ length: 2 }).flatMap((_, k) =>
              window.WR.ticker.map((t, i) => (
                <span key={`${k}-${i}`} style={{ display: 'inline-flex', alignItems: 'center', gap: 14, fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.04em' }}>
                  <span style={{ color: 'var(--ochre)' }}>● LIVE</span>
                  <span style={{ color: 'var(--bone)' }}>{t}</span>
                  <span style={{ color: 'var(--ink-faint)' }}>★</span>
                </span>
              ))
            )}
          </div>
        </div>
      </div>

      {/* Big mark */}
      <div className="container" style={{ padding: '80px var(--gut) 40px' }}>
        <div className="display-xl h-italic" style={{ color: 'var(--bone)', fontStyle: 'italic', lineHeight: 0.85 }}>
          One partner.<br/>
          <span style={{ color: 'var(--rust)' }}>Tech</span> + <span style={{ color: 'var(--ochre)' }}>Talent.</span>
        </div>
        <div className="lede" style={{ color: 'var(--ink-faint)', maxWidth: 640, marginTop: 32 }}>
          {brand.tagline}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 48, marginTop: 80 }}>
          <div>
            <div className="eyebrow" style={{ color: 'var(--ochre)', marginBottom: 16 }}>Tech & Dev</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {grouped["Tech & Development"].map(s => <a key={s.slug} href={`services/${s.slug}.html`} className="u-link" style={{ fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--bone)' }}>{s.name}</a>)}
            </div>
          </div>
          <div>
            <div className="eyebrow" style={{ color: 'var(--ochre)', marginBottom: 16 }}>Marketing & Creative</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {grouped["Marketing & Growth"].map(s => <a key={s.slug} href={`services/${s.slug}.html`} className="u-link" style={{ fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--bone)' }}>{s.name}</a>)}
              {grouped["Creative & Design"].map(s => <a key={s.slug} href={`services/${s.slug}.html`} className="u-link" style={{ fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--bone)' }}>{s.name}</a>)}
            </div>
          </div>
          <div>
            <div className="eyebrow" style={{ color: 'var(--ochre)', marginBottom: 16 }}>Talent</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {grouped["Talent Solutions"].map(s => <a key={s.slug} href={`services/${s.slug}.html`} className="u-link" style={{ fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--bone)' }}>{s.name}</a>)}
            </div>
            <div className="eyebrow" style={{ color: 'var(--ochre)', margin: '28px 0 16px' }}>Resources</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <a href="case-studies.html" className="u-link" style={{ fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--bone)' }}>Case Studies</a>
              <a href="salary-guide.html" className="u-link" style={{ fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--bone)' }}>Salary Guide</a>
              <a href="media.html" className="u-link" style={{ fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--bone)' }}>Media Features</a>
            </div>
          </div>
          <div>
            <div className="eyebrow" style={{ color: 'var(--ochre)', marginBottom: 16 }}>Talk to us</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontFamily: 'var(--sans)', fontSize: 14 }}>
              <a href="tel:+14804186390" className="u-link" style={{ color: 'var(--bone)' }}>+1.480.418.6390</a>
              <a href="mailto:neel@withremote.ai" className="u-link" style={{ color: 'var(--bone)' }}>neel@withremote.ai</a>
              <a href="contact.html" className="u-link" style={{ color: 'var(--bone)' }}>Book a call</a>
              <a href="about.html" className="u-link" style={{ color: 'var(--bone)' }}>About us</a>
            </div>
          </div>
        </div>

        {/* Offices */}
        <div style={{ marginTop: 80, paddingTop: 32, borderTop: '1px solid rgba(255,252,243,0.18)' }}>
          <div className="eyebrow" style={{ color: 'var(--ink-faint)', marginBottom: 24 }}>Global presence · 4 offices</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 32 }}>
            {offices.map(o => (
              <div key={o.city} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <span style={{ fontSize: 22 }}>{o.flag}</span>
                <div>
                  <div style={{ fontFamily: 'var(--serif-display)', fontSize: 22 }}>{o.city}</div>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.06em', color: 'var(--ink-faint)', textTransform: 'uppercase', marginTop: 4 }}>{o.region}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 56, paddingTop: 24, borderTop: '1px solid rgba(255,252,243,0.18)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.04em', color: 'var(--ink-faint)' }}>
          <div>© 2026 WITHREMOTE SOLUTIONS PVT LTD. ALL RIGHTS RESERVED.</div>
          <div>MADE WITH ♥ FROM INDIA · USA · UAE</div>
        </div>
      </div>
    </footer>
  );
}

/* === Reveal observer (mounts on first call) === */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('[data-reveal]');
    if (!('IntersectionObserver' in window)) { els.forEach(el => el.classList.add('in')); return; }
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* Expose */
Object.assign(window, { Nav, Footer, UtilityBar, Monogram, useReveal });
