// Shared components — Nav, Footer, Logo, primitives.

const { useState, useEffect, useRef, useMemo } = React;

function Logo({ onClick, light }) {
  return (
    <div className="glogo" onClick={onClick} aria-label="Greenline Interiors home">
      <div className="glogo-mark" />
      <div>
        <div className="glogo-text" style={{ color: light ? "#fff" : "var(--ink)" }}>Greenline</div>
        <div className="glogo-sub">INTERIORS · EST. 1976</div>
      </div>
    </div>
  );
}

function Nav({ route, setRoute, lang, setLang }) {
  const links = [
    { id: "projects", label: "Projects" },
    { id: "sectors", label: "Sectors" },
    { id: "manufacturing", label: "Manufacturing" },
    { id: "capabilities", label: "Capabilities" },
    { id: "about", label: "About" },
    { id: "contact", label: "Contact" },
  ];
  return (
    <nav className="nav">
      <div className="nav-row">
        <Logo onClick={() => setRoute({ page: "home" })} />
        <div className="nav-links">
          {links.map(l => (
            <a key={l.id}
               className={`nav-link ${route.page === l.id ? "active" : ""}`}
               onClick={() => setRoute({ page: l.id })}>{l.label}</a>
          ))}
        </div>
        <div className="nav-cta">
          <div style={{ display: "flex", gap: 4, alignItems: "center", marginRight: 8, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em" }}>
            <button onClick={() => setLang("en")} style={{ color: lang === "en" ? "var(--ink)" : "var(--mute)" }}>EN</button>
            <span style={{ color: "var(--line-2)" }}>/</span>
            <button onClick={() => setLang("ar")} style={{ color: lang === "ar" ? "var(--ink)" : "var(--mute)" }}>AR</button>
          </div>
          <button className="btn btn-solid" onClick={() => setRoute({ page: "contact" })}>
            Start a project
          </button>
        </div>
      </div>
    </nav>
  );
}

function Eyebrow({ children, n }) {
  return (
    <div className="eyebrow" style={{ display: "flex", alignItems: "center", gap: 14 }}>
      {n && <span style={{ color: "var(--brass)", fontFamily: "var(--font-mono)" }}>{n}</span>}
      <span>{children}</span>
    </div>
  );
}

function SectionHead({ eyebrow, eyebrowN, title, lede, action, dark }) {
  return (
    <div style={{ marginBottom: 56 }}>
      <Eyebrow n={eyebrowN}>{eyebrow}</Eyebrow>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 48, marginTop: 16, flexWrap: "wrap" }}>
        <h2 className="display-l" style={{ margin: 0, maxWidth: "16ch", color: dark ? "#fff" : "var(--ink)" }}>{title}</h2>
        {lede && <p className="lede" style={{ margin: 0, color: dark ? "rgba(255,255,255,0.78)" : "var(--ink-2)" }}>{lede}</p>}
        {action}
      </div>
    </div>
  );
}

function Marquee({ items }) {
  const doubled = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {doubled.map((x, i) => (
          <span key={i}>
            {x}
            <span className="dot" style={{ marginLeft: 64 }}>◆</span>
          </span>
        ))}
      </div>
    </div>
  );
}

function ProjectCard({ p, onOpen, compact }) {
  return (
    <div className="project-tile" onClick={() => onOpen(p.id)}>
      <div className="img-wrap" style={{ aspectRatio: compact ? "4/3" : "5/6" }}>
        <img src={p.hero} alt={p.name} loading="lazy" />
        {p.nda && (
          <div style={{ position: "absolute", top: 14, left: 14 }}>
            <span className="nda-tag" style={{ background: "rgba(255,255,255,0.9)" }}>NDA · Anonymised</span>
          </div>
        )}
      </div>
      <div className="project-meta">
        <div>
          <div style={{ fontFamily: "var(--font-serif)", fontSize: 22, lineHeight: 1.15 }}>{p.name}</div>
          <div className="small" style={{ marginTop: 4 }}>{p.location} · {p.year}</div>
        </div>
        <div className="mono" style={{ color: "var(--brass)" }}>{p.sector}</div>
      </div>
    </div>
  );
}

function StatBlock({ v, l }) {
  return (
    <div>
      <div className="stat-val">{v}</div>
      <span className="stat-lbl">{l}</span>
    </div>
  );
}

function Pill({ active, children, onClick }) {
  return (
    <button className={`chip ${active ? "active" : ""}`} onClick={onClick}>{children}</button>
  );
}

function Footer({ setRoute }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <Logo light />
            <p style={{ marginTop: 20, maxWidth: "32ch", fontSize: 14 }}>
              Luxury turnkey interior fit-out — designed, manufactured in our own Dubai factory, and installed. Established 1976.
            </p>
            <div style={{ marginTop: 24, display: "flex", gap: 16, fontSize: 12 }}>
              <span style={{ color: "rgba(255,255,255,0.4)" }}>ISO 9001 Accredited</span>
              <span style={{ color: "rgba(255,255,255,0.4)" }}>·</span>
              <span style={{ color: "rgba(255,255,255,0.4)" }}>JAFZ FZCO</span>
            </div>
          </div>
          <div>
            <h6>Explore</h6>
            <ul className="footer-list">
              <li><a onClick={() => setRoute({ page: "projects" })}>Projects</a></li>
              <li><a onClick={() => setRoute({ page: "sectors" })}>Sectors</a></li>
              <li><a onClick={() => setRoute({ page: "manufacturing" })}>Manufacturing &amp; Craft</a></li>
              <li><a onClick={() => setRoute({ page: "capabilities" })}>Capabilities</a></li>
              <li><a onClick={() => setRoute({ page: "about" })}>About</a></li>
            </ul>
          </div>
          <div>
            <h6>Studio</h6>
            <ul className="footer-list">
              <li>Jebel Ali Free Zone</li>
              <li>P.O. Box 262456</li>
              <li>Dubai, U.A.E.</li>
              <li><a href="tel:+97148862220">+971 4 886 2220</a></li>
              <li><a href="mailto:glinfo@gli.ae">glinfo@gli.ae</a></li>
            </ul>
          </div>
          <div>
            <h6>Connect</h6>
            <ul className="footer-list">
              <li><a>LinkedIn ↗</a></li>
              <li><a>Sister brand · GLYI ↗</a></li>
              <li><a>Careers — recruit@gli.ae</a></li>
              <li><a onClick={() => setRoute({ page: "contact" })}>Start a project →</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 1976 – 2026 Greenline Interiors FZCO. All rights reserved.</div>
          <div style={{ display: "flex", gap: 18 }}>
            <a>Privacy</a><a>Terms</a><a>Sitemap</a>
            <span>EN · AR</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

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

Object.assign(window, { Logo, Nav, Eyebrow, SectionHead, Marquee, ProjectCard, StatBlock, Pill, Footer, Lightbox });