// =====================================================
// Shared components — Logo, Header, Footer
// =====================================================

const { useEffect, useState, useRef } = React;

function VHLogo({ size = 28, color }) {
  return (
    <svg className="vh-logo-mark" width={size} height={size} viewBox="0 0 32 32" fill="none">
      <path d="M2 4 L16 28 L30 4" stroke={color || 'currentColor'} strokeWidth="1.6" fill="none" strokeLinejoin="miter"/>
      <path d="M8 4 L16 18 L24 4" stroke={color || 'currentColor'} strokeWidth="1.6" fill="none" strokeLinejoin="miter" opacity="0.55"/>
      <circle cx="16" cy="3" r="1.4" fill={color || 'currentColor'}/>
    </svg>
  );
}

function Reveal({ children, delay = 0, className = '' }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { setTimeout(() => setShown(true), delay); io.disconnect(); } });
    }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <div ref={ref} className={`vh-reveal ${shown ? 'in' : ''} ${className}`}>{children}</div>;
}

function Header({ current, lang, t, onNavigate }) {
  const [open, setOpen] = useState(false);
  const items = [
    ['about', t.nav.about],
    ['services', t.nav.services],
    ['experience', t.nav.experience],
    ['insights', t.nav.insights],
  ];
  return (
    <header className="vh-header">
      <div className="vh-container vh-header-inner">
        <a className="vh-logo" href="#" onClick={(e) => { e.preventDefault(); onNavigate('home'); }}>
          <VHLogo />
          <span>Vertex Horizons</span>
        </a>
        <nav className="vh-nav">
          {items.map(([key, label]) => (
            <a key={key} href="#" onClick={(e) => { e.preventDefault(); onNavigate(key); }}
               className={`vh-nav-link ${current === key ? 'active' : ''}`}>{label}</a>
          ))}
        </nav>
        <div className="vh-header-cta">
          <a href="#" onClick={(e) => { e.preventDefault(); onNavigate('contact'); }} className="vh-btn">
            <span>{t.nav.cta}</span>
            <span style={{ display: 'inline-block', transform: lang === 'ar' ? 'scaleX(-1)' : 'none' }}>→</span>
          </a>
          <button className="vh-mobile-toggle" onClick={() => setOpen(o => !o)} aria-label="Menu">
            <svg width="18" height="14" viewBox="0 0 18 14" fill="none">
              <rect width="18" height="1.5" fill="currentColor"/>
              <rect y="6.25" width="18" height="1.5" fill="currentColor"/>
              <rect y="12.5" width="18" height="1.5" fill="currentColor"/>
            </svg>
          </button>
        </div>
      </div>
      {open && (
        <div style={{ borderTop: '1px solid var(--vh-line-soft)', padding: '20px var(--vh-pad)' }}>
          {items.map(([key, label]) => (
            <a key={key} href="#" onClick={(e) => { e.preventDefault(); onNavigate(key); setOpen(false); }}
               style={{ display: 'block', padding: '12px 0', fontFamily: 'var(--vh-sans)', fontSize: 14, letterSpacing: '0.06em' }}>{label}</a>
          ))}
          <a href="#" onClick={(e) => { e.preventDefault(); onNavigate('contact'); setOpen(false); }}
             style={{ display: 'block', padding: '12px 0', fontFamily: 'var(--vh-sans)', fontSize: 14, letterSpacing: '0.06em' }}>{t.nav.contact}</a>
        </div>
      )}
    </header>
  );
}

function Footer({ t, lang, onNavigate }) {
  return (
    <footer className="vh-footer">
      <div className="vh-container">
        <div className="vh-footer-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
              <VHLogo size={32} color="#F5F2EC"/>
              <span style={{ fontFamily: 'var(--vh-serif)', fontSize: 24, fontWeight: 600 }}>Vertex Horizons</span>
            </div>
            <p style={{ maxWidth: '34ch', color: 'rgba(245, 242, 236, 0.75)', fontSize: 15, lineHeight: 1.6 }}>
              {lang === 'ar'
                ? 'ممارسة استشارية مستقلة في التدقيق والقانون والاستراتيجية.'
                : 'An independent advisory practice in audit, law, and strategy.'}
            </p>
            <p style={{ marginTop: 24, fontFamily: 'var(--vh-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(245, 242, 236, 0.5)' }}>
              {lang === 'ar' ? 'ضيف الله عيّاد' : 'Deifallah Ayyad'}
            </p>
          </div>

          <div>
            <h4>{lang === 'ar' ? 'الممارسة' : 'Practice'}</h4>
            <ul>
              <li><a href="#" onClick={(e) => { e.preventDefault(); onNavigate('about'); }}>{t.nav.about}</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); onNavigate('services'); }}>{t.nav.services}</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); onNavigate('experience'); }}>{t.nav.experience}</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); onNavigate('insights'); }}>{t.nav.insights}</a></li>
            </ul>
          </div>

          <div>
            <h4>{lang === 'ar' ? 'تواصل' : 'Correspondence'}</h4>
            <ul>
              <li><a href="mailto:Deifallah.ayyad@gmail.com">Deifallah.ayyad@gmail.com</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); onNavigate('contact'); }}>{t.nav.contact}</a></li>
            </ul>
          </div>
        </div>

        <div className="vh-footer-bottom">
          <span>© 2026 Deifallah Ayyad · All rights reserved</span>
          <span>vertex-horizons.com</span>
        </div>
      </div>
    </footer>
  );
}

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