/* Mandera website — shared chrome (Nav, Footer, Logo, helpers).
   Exports to window so index.html and screens.jsx can use them. */

const ASSET = './assets/';

function Icon({ n, s = 18, color = 'currentColor', stroke = 2 }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = '';
      const el = document.createElement('i');
      el.setAttribute('data-l', n);
      ref.current.appendChild(el);
      window.lucide.createIcons({ nameAttr: 'data-l', attrs: { width: s, height: s, stroke: color, 'stroke-width': stroke }, root: ref.current });
    }
  }, [n, s, color, stroke]);
  return <span ref={ref} style={{ display: 'inline-flex', width: s, height: s }} />;
}

function Logo({ height = 26, onClick }) {
  return (
    <button onClick={onClick} style={{ display: 'inline-flex', alignItems: 'center', gap: 12, background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>
      <img src={ASSET + 'mandera-mark-transparent.png'} alt="" style={{ height: height + 8, width: height + 8, objectFit: 'contain' }} />
      <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', lineHeight: 1 }}>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: height, color: 'var(--text-strong)', letterSpacing: '0.04em' }}>Mandera</span>
        <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: height * 0.3, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'var(--accent-text)', marginTop: 3 }}>Marketing Agency</span>
      </span>
    </button>
  );
}

function Nav({ route, go }) {
  const { Button } = window.ManderaDesignSystem_8327ce;
  const [open, setOpen] = React.useState(false);
  const links = [['work', 'Work'], ['services', 'Services'], ['contact', 'Contact']];
  const nav = (r) => { go(r === 'work' ? 'work' : r === 'contact' ? 'contact' : 'home'); setOpen(false); };
  const mobileLink = (label, onClick) => (
    <button onClick={onClick} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '13px 4px', textAlign: 'left', width: '100%', borderBottom: '1px solid var(--border-subtle)', fontFamily: 'var(--font-sans)', fontSize: 16, fontWeight: 500, color: 'var(--text-secondary)' }}>{label}</button>
  );
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '18px 40px', background: 'rgba(6,7,10,0.72)', backdropFilter: 'blur(18px)',
      borderBottom: '1px solid var(--border-subtle)',
    }}>
      <Logo onClick={() => { go('home'); setOpen(false); }} />
      <nav style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
        <div className="mn-nav-desktop" style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          {links.map(([r, label]) => (
            <button key={r} onClick={() => nav(r)}
              style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '8px 16px',
                fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500,
                color: route === r ? 'var(--text-strong)' : 'var(--text-muted)' }}
              onMouseEnter={(e) => e.currentTarget.style.color = 'var(--text-strong)'}
              onMouseLeave={(e) => e.currentTarget.style.color = route === r ? 'var(--text-strong)' : 'var(--text-muted)'}>
              {label}
            </button>
          ))}
          <a href="../portal/client.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '8px 14px', textDecoration: 'none', fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500, color: 'var(--text-muted)' }}
            onMouseEnter={(e) => e.currentTarget.style.color = 'var(--text-strong)'}
            onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-muted)'}>
            <Icon n="lock" s={14} /> <span>Client login</span>
          </a>
          <div style={{ width: 4 }} />
          <Button variant="primary" size="sm" iconRight={<Icon n="arrow-up-right" s={15} />} onClick={() => go('contact')}>Start a project</Button>
        </div>
        <button className="mn-burger" aria-label="Menu" onClick={() => setOpen((o) => !o)}
          style={{ display: 'none', width: 44, height: 44, alignItems: 'center', justifyContent: 'center', borderRadius: 'var(--radius-md)', background: 'var(--surface-raised)', border: '1px solid var(--border-default)', cursor: 'pointer', color: 'var(--text-secondary)' }}>
          <Icon n={open ? 'x' : 'menu'} s={20} />
        </button>
      </nav>
      {open && (
        <div className="mn-mobile-menu" style={{ position: 'absolute', top: '100%', left: 0, right: 0, background: 'rgba(6,7,10,0.98)', backdropFilter: 'blur(18px)', borderBottom: '1px solid var(--border-subtle)', display: 'flex', flexDirection: 'column', padding: '8px 22px 22px', boxShadow: 'var(--shadow-lg)' }}>
          {links.map(([r, label]) => <React.Fragment key={r}>{mobileLink(label, () => nav(r))}</React.Fragment>)}
          <a href="../portal/client.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '14px 4px', textDecoration: 'none', fontFamily: 'var(--font-sans)', fontSize: 16, fontWeight: 500, color: 'var(--text-secondary)', borderBottom: '1px solid var(--border-subtle)' }}>
            <Icon n="lock" s={15} /> Client login
          </a>
          <Button variant="primary" size="lg" fullWidth iconRight={<Icon n="arrow-up-right" s={16} />} onClick={() => { go('contact'); setOpen(false); }} style={{ marginTop: 16 }}>Start a project</Button>
        </div>
      )}
    </header>
  );
}

function SectionHead({ eyebrow, title, sub, align = 'left' }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14, alignItems: align === 'center' ? 'center' : 'flex-start', textAlign: align }}>
      <span className="mandera-eyebrow">{eyebrow}</span>
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 44, color: 'var(--text-strong)', lineHeight: 1.08, letterSpacing: '-0.01em', maxWidth: 720, margin: 0 }}>{title}</h2>
      {sub && <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, color: 'var(--text-muted)', maxWidth: 560, margin: 0, lineHeight: 1.6 }}>{sub}</p>}
    </div>
  );
}

function Footer({ go }) {
  const LINKS = {
    Instagram: 'https://www.instagram.com/mandera.marketing',
    Facebook: 'https://www.facebook.com/profile.php?id=61581642238639',
    LinkedIn: 'https://www.linkedin.com/company/mandera-agency/',
    Careers: 'careers.html',
  };
  const cols = [
    ['Agency', ['Work', 'Services', 'Careers']],
    ['Capabilities', ['Content Creation', 'Branding', 'IT', 'AI', 'Automation', 'Photography']],
    ['Connect', ['Instagram', 'LinkedIn', 'Facebook']],
  ];
  return (
    <footer style={{ background: 'var(--ink-900)', borderTop: '1px solid var(--border-subtle)', padding: '64px 40px 40px' }}>
      <div className="mn-footer-grid" style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 40 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <Logo height={24} onClick={() => go('home')} />
          <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 22, color: 'var(--text-secondary)', maxWidth: 320, lineHeight: 1.3, margin: 0 }}>
            Ideas that move people, and the craft to make them land.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontFamily: 'var(--font-sans)', fontSize: 13.5, color: 'var(--text-muted)' }}>
            <span>info@manderamarketing.com</span>
            <span>+962 77 777 3324</span>
            <a href="https://maps.app.goo.gl/VUFdwRNiLABDZp6V6" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'none' }}
              onMouseEnter={(e) => e.currentTarget.style.color = 'var(--accent-text)'}
              onMouseLeave={(e) => e.currentTarget.style.color = 'inherit'}>Al-Madinah St · Al-Assaf Building, Office 101 · Amman, Jordan</a>
          </div>
        </div>
        {cols.map(([h, items]) => (
          <div key={h} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <span className="mandera-eyebrow" style={{ color: 'var(--text-faint)' }}>{h}</span>
            {items.map((i) => {
              const href = LINKS[i];
              const external = href && href.startsWith('http');
              return (
                <a key={i} href={href || '#'} target={external ? '_blank' : undefined} rel={external ? 'noopener noreferrer' : undefined}
                  onClick={href ? undefined : (e) => e.preventDefault()}
                  style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--text-muted)', textDecoration: 'none' }}
                  onMouseEnter={(e) => e.currentTarget.style.color = 'var(--accent-text)'}
                  onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-muted)'}>{i}</a>
              );
            })}
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1200, margin: '48px auto 0', paddingTop: 24, borderTop: '1px solid var(--border-subtle)', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--text-faint)' }}>
        <span>© 2026 Mandera Marketing Agency</span>
        <span><a href="privacy.html" style={{ color: 'var(--text-faint)', textDecoration: 'none' }}>Privacy</a> · <a href="privacy.html" style={{ color: 'var(--text-faint)', textDecoration: 'none' }}>Terms</a></span>
      </div>
    </footer>
  );
}

function LogoBackdrop() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const mq = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : null;
    const el = ref.current;
    if (!el) return;
    if (mq && mq.matches) { el.style.transform = 'translate3d(-50%, -50%, 0)'; return; }
    let cur = 0;
    let raf = 0;
    const t0 = performance.now();
    const loop = (now) => {
      const time = (now - t0) / 1000;
      const max = (document.documentElement.scrollHeight - window.innerHeight) || 1;
      const target = Math.max(0, Math.min(1, window.scrollY / max));
      cur += (target - cur) * 0.07;                       // eased scrub toward scroll position
      const ang = cur * Math.PI * 3;                       // ~1.5 spiral turns over the page
      const radius = 150 * Math.sin(cur * Math.PI);        // 0 at top, bulges mid-scroll, 0 at end
      const fx = Math.sin(time * 0.5) * 10;                // gentle living float
      const fy = Math.cos(time * 0.42) * 12;
      const x = Math.cos(ang) * radius + fx;
      const y = cur * (window.innerHeight * 0.55) + Math.sin(ang) * radius + fy;
      const rot = cur * 12 + Math.sin(time * 0.35) * 1.5;  // slow 0→12° turn + micro sway
      el.style.transform = 'translate3d(calc(-50% + ' + x.toFixed(1) + 'px), calc(-50% + ' + y.toFixed(1) + 'px), 0) rotate(' + rot.toFixed(2) + 'deg)';
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => { if (raf) cancelAnimationFrame(raf); };
  }, []);
  return (
    <div ref={ref} className="mn-logo-bg" aria-hidden="true" style={{
      position: 'fixed', top: '46%', left: '74%', zIndex: -1, pointerEvents: 'none',
      width: 'min(56vw, 640px)', willChange: 'transform', transform: 'translate3d(-50%, -50%, 0)',
    }}>
      <img src={ASSET + 'mandera-mark-transparent.png'} alt="" style={{ width: '100%', height: 'auto', display: 'block', opacity: 0.22 }} />
    </div>
  );
}

function WhatsAppFab({ phone = '962777773324' }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={'https://wa.me/' + phone + '?text=' + encodeURIComponent('Hello Mandera — I saw your work and I\u2019d love to talk about a project for my brand. When can we chat?')} target="_blank" rel="noopener noreferrer"
      aria-label="Chat with us on WhatsApp"
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        position: 'fixed', right: 22, bottom: 22, zIndex: 60,
        width: 56, height: 56, borderRadius: '50%',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: 'rgba(12,14,19,0.92)', backdropFilter: 'blur(8px)',
        border: '1px solid var(--border-accent)',
        boxShadow: hover ? '0 12px 34px rgba(0,0,0,0.5)' : '0 6px 20px rgba(0,0,0,0.38)',
        transform: hover ? 'translateY(-2px)' : 'none',
        transition: 'transform .2s ease, box-shadow .2s ease',
      }}>
      <svg width="26" height="26" viewBox="0 0 24 24" fill="var(--accent-bright)" aria-hidden="true">
        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/>
      </svg>
    </a>
  );
}

Object.assign(window, { Icon, Logo, Nav, SectionHead, Footer, WhatsAppFab, LogoBackdrop, MANDERA_ASSET: ASSET });