/* Bluehaus — shared components: Nav, Footer, Logo, Marquee, ProjectCard, Lightbox, etc. */
const { useState, useEffect, useRef } = React;

// ---------- LOGO ----------
function Logo({ size = 28 }) {
  // Small wordmark logo lock-up. The brand is in transition; we render text mark + sub-line
  // (per brief — confirm final post-merger lock-up). Avoids reproducing the upload SVG colours.
  return (
    <div className="nav-logo">
      <div className="mark">Bluehaus</div>
      <div className="lock">TP Bennett ME</div>
    </div>
  );
}

// ---------- NAV ----------
function Nav({ route, navigate, dark = false }) {
  const [scrolled, setScrolled] = useState(false);
  const [drawer, setDrawer] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { href: 'projects', label: 'Projects' },
    { href: 'sectors',  label: 'Sectors' },
    { href: 'services', label: 'Services' },
    { href: 'about',    label: 'Studio' },
    { href: 'awards',   label: 'Awards' },
    { href: 'contact',  label: 'Contact' },
  ];

  const onLink = (e, href) => {
    e.preventDefault();
    setDrawer(false);
    navigate(href);
  };

  return (
    <>
      <header className={'nav' + (scrolled ? ' scrolled' : '') + (dark ? ' dark' : '')}>
        <div className="nav-inner">
          <a href="#home" onClick={(e) => onLink(e, 'home')}><Logo /></a>
          <nav className="nav-links">
            {links.map(l => (
              <a key={l.href} href={'#' + l.href} onClick={(e) => onLink(e, l.href)}
                 className={'nav-link' + (route.startsWith(l.href) ? ' active' : '')}>
                {l.label}
              </a>
            ))}
          </nav>
          <div className="nav-right">
            <div className="locale-switch">
              <span className="on">EN</span>
              <span>AR</span>
            </div>
            <a href="#contact" onClick={(e) => onLink(e, 'contact')} className="btn btn-primary">
              Start a project <span className="arr">→</span>
            </a>
          </div>
          <div className="nav-mobile">
            <button className="btn btn-ghost" onClick={() => setDrawer(true)} style={{ padding: '8px 14px' }}>Menu</button>
          </div>
        </div>
      </header>
      {drawer && (
        <div className="drawer">
          <div className="drawer-head">
            <Logo />
            <button className="btn btn-ghost" onClick={() => setDrawer(false)} style={{ padding: '8px 14px' }}>Close</button>
          </div>
          <nav>
            {links.map(l => (
              <a key={l.href} href={'#' + l.href} onClick={(e) => onLink(e, l.href)}>{l.label}</a>
            ))}
          </nav>
          <a href="#contact" onClick={(e) => onLink(e, 'contact')} className="btn btn-primary" style={{ alignSelf: 'flex-start', marginTop: 24 }}>
            Start a project <span className="arr">→</span>
          </a>
        </div>
      )}
    </>
  );
}

// ---------- FOOTER ----------
function Footer({ navigate }) {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div>
          <div className="footer-cta">
            Have a brief? <span className="it">Let&rsquo;s</span> start a conversation.
          </div>
          <a href="#contact" onClick={(e) => { e.preventDefault(); navigate('contact'); }} className="btn btn-ghost-dark" style={{ marginTop: 28 }}>
            Start a project <span className="arr">→</span>
          </a>
        </div>
        <div>
          <h4>Practice</h4>
          <ul>
            <li><a href="#projects" onClick={(e) => { e.preventDefault(); navigate('projects'); }}>Projects</a></li>
            <li><a href="#sectors" onClick={(e) => { e.preventDefault(); navigate('sectors'); }}>Sectors</a></li>
            <li><a href="#services" onClick={(e) => { e.preventDefault(); navigate('services'); }}>Services</a></li>
            <li><a href="#about" onClick={(e) => { e.preventDefault(); navigate('about'); }}>Studio</a></li>
            <li><a href="#awards" onClick={(e) => { e.preventDefault(); navigate('awards'); }}>Awards</a></li>
          </ul>
        </div>
        <div>
          <h4>Studio · Dubai</h4>
          <ul>
            <li>12th Floor, Tameem House</li>
            <li>Tecom, Dubai</li>
            <li>P.O. Box 49439</li>
            <li><a href="tel:+97144520956">+971 (4) 452 0956</a></li>
            <li><a href="mailto:info@bluehausgroup.com">info@bluehausgroup.com</a></li>
          </ul>
        </div>
        <div>
          <h4>Follow</h4>
          <ul>
            <li><a href="https://instagram.com/bluehausme" target="_blank" rel="noreferrer">Instagram</a></li>
            <li><a href="https://www.linkedin.com/company/bluehaus-group" target="_blank" rel="noreferrer">LinkedIn</a></li>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">X / Twitter</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-inner footer-bottom">
        <div>© {new Date().getFullYear()} Bluehaus Group · A tp bennett practice</div>
        <div>Dubai · Abu Dhabi · Riyadh · Manila · London</div>
      </div>
    </footer>
  );
}

// ---------- MARQUEE ----------
function Marquee({ items }) {
  const list = [...items, ...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {list.map((t, i) => (
          <span key={i}>
            {t.it ? <span className="it">{t.text}</span> : t.text}
            {' '}<span className="dot">·</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ---------- PROJECT CARD ----------
function ProjectCard({ project, variant, navigate }) {
  return (
    <a className={'proj-card ' + (variant || '')}
       href={'#projects/' + project.slug}
       onClick={(e) => { e.preventDefault(); navigate('projects/' + project.slug); window.scrollTo(0, 0); }}>
      <div className="ph">
        <img src={project.hero} alt={project.name} loading="lazy" />
      </div>
      <div className="meta-row">
        <div className="name">{project.name}</div>
        <div className="loc">{project.location.split(',').pop().trim()} · {project.year}</div>
      </div>
      <div className="tagline">{project.tagline}</div>
    </a>
  );
}

// ---------- SECTION HEADER ----------
function SectionHead({ label, title, action, children }) {
  return (
    <div className="eyebrow-row">
      <div>
        {label && <div className="label" style={{ marginBottom: 18 }}>{label}</div>}
        <div className="h2">{title}{children}</div>
      </div>
      {action}
    </div>
  );
}

// ---------- LIGHTBOX ----------
function Lightbox({ src, alt, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);
  return (
    <div className="lightbox" onClick={onClose}>
      <button className="close">Close ✕</button>
      <img src={src} alt={alt} />
    </div>
  );
}

// Expose globally
Object.assign(window, { Logo, Nav, Footer, Marquee, ProjectCard, SectionHead, Lightbox });