// Interior Lab — shared UI primitives (Nav, Footer, Eyebrow, etc.)

const { useState, useEffect, useRef } = React;

// =========================================================================
// Logo — wide-tracked geometric wordmark in a thin square frame, inline SVG.
// =========================================================================
function ILLogo({ size = 44, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 680 680" aria-label="Interior Lab" role="img" style={{ display: 'block' }}>
      <rect x="28" y="40" width="608" height="600" fill="none" stroke={color} strokeWidth="6" />
      <text x="332" y="248" textAnchor="middle" fontFamily="'Jost','Century Gothic','Futura',sans-serif" fontSize="118" fontWeight="300" letterSpacing="26" fill={color}>INTERIOR</text>
      <text x="60" y="500" textAnchor="start" fontFamily="'Jost','Century Gothic','Futura',sans-serif" fontSize="200" fontWeight="600" letterSpacing="0" fill={color}>L△B</text>
    </svg>
  );
}

// =========================================================================
// Eyebrow — numbered, tracked uppercase label that echoes the logo voice.
// =========================================================================
function Eyebrow({ n, children, light }) {
  return (
    <div className={'il-eyebrow' + (light ? ' is-light' : '')}>
      {n && <span className="il-eyebrow__n">{n}</span>}
      <span className="il-eyebrow__rule" />
      <span className="il-eyebrow__text">{children}</span>
    </div>
  );
}

// =========================================================================
// Navigation — sticky, hairline-ruled, with a CTA button on the right.
// =========================================================================
function Nav({ route, go }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { id: 'portfolio', label: 'Portfolio' },
    { id: 'studio', label: 'Studio' },
    { id: 'services', label: 'Disciplines' },
    { id: 'journal', label: 'Journal' },
  ];

  return (
    <header className={'il-nav' + (scrolled ? ' is-scrolled' : '')}>
      <div className="il-nav__inner">
        <button className="il-nav__brand" onClick={() => go({ name: 'home' })} aria-label="Interior Lab — home">
          <span className="il-nav__brand-word">
            <span>INTERIOR</span>
            <span>LAB</span>
          </span>
        </button>

        <nav className="il-nav__links" aria-label="Primary">
          {links.map((l) => (
            <button
              key={l.id}
              className={'il-nav__link' + (route.name === l.id ? ' is-active' : '')}
              onClick={() => go({ name: l.id })}
            >
              {l.label}
            </button>
          ))}
        </nav>

        <div className="il-nav__cta">
          <button className="il-btn il-btn--ghost" onClick={() => go({ name: 'contact' })}>
            <span>Start a project</span>
            <Arrow />
          </button>
          <button className="il-nav__burger" aria-label="Menu" onClick={() => setOpen((v) => !v)}>
            <span /><span /><span />
          </button>
        </div>
      </div>

      {open && (
        <div className="il-nav__sheet" onClick={() => setOpen(false)}>
          {[...links, { id: 'contact', label: 'Start a project' }].map((l) => (
            <button key={l.id} onClick={() => { go({ name: l.id }); setOpen(false); }}>
              <span className="il-eyebrow__n">{String(links.findIndex(x => x.id === l.id) + 1).padStart(2, '0').replace('00', '05')}</span>
              {l.label}
            </button>
          ))}
        </div>
      )}
    </header>
  );
}

// =========================================================================
// Footer.
// =========================================================================
function Footer({ go }) {
  return (
    <footer className="il-footer">
      <div className="il-footer__top">
        <div className="il-footer__col il-footer__col--brand">
          <div className="il-footer__wordmark">
            <span>INTERIOR</span>
            <span>LAB</span>
          </div>
          <p className="il-footer__line">
            A boutique Italian interior design &amp; architecture studio in
            Dubai Design District. Bespoke residential and commercial spaces,
            crafted project by project since 2010.
          </p>
          <p className="il-footer__line il-footer__line--quiet">
            <em>Designing spaces, crafting experiences.</em>
          </p>
        </div>

        <div className="il-footer__col">
          <h4>Studio</h4>
          <ul>
            <li><button onClick={() => go({ name: 'studio' })}>About</button></li>
            <li><button onClick={() => go({ name: 'services' })}>Disciplines</button></li>
            <li><button onClick={() => go({ name: 'portfolio' })}>Portfolio</button></li>
            <li><button onClick={() => go({ name: 'journal' })}>Journal</button></li>
          </ul>
        </div>

        <div className="il-footer__col">
          <h4>Visit</h4>
          <p>Building 5 – A206<br />Dubai Design District (d3)<br />Dubai, UAE</p>
          <p className="il-footer__line--quiet">By appointment · Mon–Fri</p>
        </div>

        <div className="il-footer__col">
          <h4>Speak</h4>
          <ul>
            <li><a href="tel:+97144511981">+971 4 451 1981</a></li>
            <li><a href="https://wa.me/971563326825" target="_blank" rel="noreferrer">WhatsApp +971 56 332 6825</a></li>
            <li><a href="mailto:info@interiorlab.ae">info@interiorlab.ae</a></li>
            <li><a href="mailto:suppliers@interiorlab.ae">suppliers@interiorlab.ae</a></li>
          </ul>
        </div>

        <div className="il-footer__col">
          <h4>Follow</h4>
          <ul>
            <li><a href="https://instagram.com/interior_lab_dubai" target="_blank" rel="noreferrer">Instagram</a></li>
            <li><a href="https://www.linkedin.com/company/interiorlabdubai" target="_blank" rel="noreferrer">LinkedIn</a></li>
          </ul>
        </div>
      </div>

      <div className="il-footer__bottom">
        <span>© {new Date().getFullYear()} Interior Lab</span>
        <span>Milan → Dubai · 2010</span>
        <span>80+ projects worldwide</span>
        <button className="il-footer__top-btn" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
          Back to top <Arrow />
        </button>
      </div>
    </footer>
  );
}

// =========================================================================
// Arrow — used on links/CTAs. Hand-drawn-ish, hairline.
// =========================================================================
function Arrow({ size = 14 }) {
  return (
    <svg width={size * 1.6} height={size} viewBox="0 0 22 14" aria-hidden="true" className="il-arrow">
      <path d="M0.5 7h20M14 0.5L20.5 7L14 13.5" fill="none" stroke="currentColor" strokeWidth="1" />
    </svg>
  );
}

// =========================================================================
// Plate — a rectangular image plate with caption + sector tag, used in lists.
// =========================================================================
function Plate({ project, onClick, aspect = '4 / 5', large }) {
  const [loaded, setLoaded] = useState(false);
  return (
    <article className={'il-plate' + (large ? ' is-large' : '')} onClick={onClick} tabIndex={0}
      onKeyDown={(e) => { if (e.key === 'Enter') onClick(); }}>
      <div className="il-plate__frame" style={{ aspectRatio: aspect }}>
        <img
          src={project.cover}
          alt={project.name}
          loading="lazy"
          onLoad={() => setLoaded(true)}
          className={loaded ? 'is-loaded' : ''}
        />
        <span className="il-plate__sector">{project.sector}</span>
      </div>
      <div className="il-plate__meta">
        <div className="il-plate__title">
          <span className="il-plate__name">{project.name}</span>
          <span className="il-plate__arrow"><Arrow /></span>
        </div>
        <div className="il-plate__sub">
          <span>{project.location}</span>
          <span className="il-plate__dot">·</span>
          <span>{project.year}</span>
        </div>
      </div>
    </article>
  );
}

// =========================================================================
// Marquee — slow horizontal scroller for the proof strip.
// =========================================================================
function ProofMarquee() {
  const items = [
    'Milan → Dubai · 2010',
    '80+ projects worldwide',
    'Slow-work craftsmanship',
    'Dubai Design Week 2022',
    'Italian materials',
    'Architecture & interiors',
    'Founder · Lara Del Chiaro',
    'Building 5 – A206 · d3',
  ];
  return (
    <div className="il-marquee" aria-hidden="true">
      <div className="il-marquee__track">
        {[...items, ...items].map((t, i) => (
          <span key={i} className="il-marquee__item">
            <span className="il-marquee__dot" />
            {t}
          </span>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { ILLogo, Eyebrow, Nav, Footer, Arrow, Plate, ProofMarquee });