// Shared components: Logo, Nav, Footer, WhatsAppFAB, Lightbox, AccentTicker
// Hook destructure happens here ONCE — every other babel file relies on
// these globals (declaring them in every file collides at top level).
var { useState, useEffect, useRef, useCallback, useMemo } = React;

function HortonLogo({ dark = false }) {
  // The brief says "Vectorise to SVG" — this is the prototype's interim wordmark.
  // Pairs the serif name with a tracked tagline.
  return (
    <a
      href="#/"
      style={{
        display: "inline-flex",
        alignItems: "baseline",
        gap: "0.65rem",
        fontFamily: "var(--serif)",
        color: dark ? "var(--paper)" : "var(--ink)",
        letterSpacing: "-0.018em"
      }}
    >
      <span style={{ fontSize: "1.55rem", lineHeight: 1 }}>
        Horton<em style={{ fontStyle: "italic", marginLeft: "0.15em", color: "var(--accent)" }}>.</em>
      </span>
      <span
        style={{
          fontFamily: "var(--mono)",
          fontSize: "0.62rem",
          letterSpacing: "0.2em",
          textTransform: "uppercase",
          opacity: 0.7,
          transform: "translateY(-2px)"
        }}
      >
        Interiors
      </span>
    </a>
  );
}

function ArrowRight({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" className="arrow" aria-hidden="true">
      <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function ArrowDown({ size = 12 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 12 12" fill="none" aria-hidden="true">
      <path d="M6 2v8M2 7l4 4 4-4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function Nav({ route, dark = false }) {
  const links = [
    { id: "projects", label: "Projects", route: "/projects" },
    { id: "sectors", label: "Sectors", route: "/projects" }, // sectors flow to filtered grid
    { id: "services", label: "Services", route: "/services" },
    { id: "how", label: "How we work", route: "/how-we-work" },
    { id: "about", label: "About", route: "/about" },
    { id: "resources", label: "Journal", route: "/journal" }
  ];

  return (
    <nav className={`nav ${dark ? "dark" : ""}`}>
      <div className="nav-inner">
        <HortonLogo dark={dark} />
        <div className="nav-links" style={{ display: "flex" }}>
          {links.map(l => (
            <a
              key={l.id}
              href={`#${l.route}`}
              className={route?.startsWith(l.route) && l.route !== "/" ? "active" : ""}
            >
              {l.label}
            </a>
          ))}
        </div>
        <div className="nav-right">
          <a
            href="tel:+97143881163"
            style={{
              fontFamily: "var(--mono)",
              fontSize: "0.72rem",
              letterSpacing: "0.14em",
              opacity: 0.8,
              display: "none"
            }}
            className="nav-phone"
          >
            +971 4 388 1163
          </a>
          <a href="#/contact" className="btn btn-primary" style={dark ? { background: "var(--paper)", color: "var(--ink)" } : {}}>
            Start a project
            <ArrowRight />
          </a>
        </div>
      </div>
    </nav>
  );
}

function WhatsAppFAB() {
  return (
    <a
      className="wa-fab"
      href="https://wa.me/971557960547?text=Hello!%20I%20want%20to%20know%20more%20about%20your%20services."
      target="_blank"
      rel="noopener noreferrer"
      aria-label="WhatsApp Horton Interiors"
    >
      <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M19.05 4.92A10.4 10.4 0 0012 2 10.5 10.5 0 002.5 17.5L2 22l4.6-1.2A10.5 10.5 0 1019.05 4.92zM12 20.13a8.6 8.6 0 01-4.4-1.21l-.31-.19-2.73.72.73-2.66-.2-.32A8.62 8.62 0 1112 20.13zm4.83-6.46c-.27-.13-1.57-.78-1.82-.86s-.42-.13-.6.13-.69.86-.84 1.04-.31.2-.58.07a7.05 7.05 0 01-2.07-1.28 7.78 7.78 0 01-1.43-1.79c-.15-.27 0-.4.12-.53s.27-.31.4-.47a1.86 1.86 0 00.27-.45.5.5 0 000-.47c-.07-.13-.6-1.46-.83-2s-.45-.45-.6-.46h-.51a1 1 0 00-.71.33A3 3 0 005.65 10a5.2 5.2 0 001.1 2.78 11.84 11.84 0 004.55 4 15.4 15.4 0 001.52.56 3.66 3.66 0 001.68.11 2.74 2.74 0 001.8-1.27 2.23 2.23 0 00.15-1.27c-.07-.13-.24-.2-.5-.34z"/>
      </svg>
    </a>
  );
}

// Footer
function Footer() {
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="grid">
          <div>
            <div style={{ fontFamily: "var(--serif)", fontSize: "1.5rem", letterSpacing: "-0.012em", color: "var(--paper)", marginBottom: "1rem" }}>
              Horton<em style={{ color: "var(--accent)" }}>.</em> Interiors
            </div>
            <p style={{ maxWidth: "32ch", fontSize: "0.95rem", lineHeight: 1.55, marginTop: "0.5rem" }}>
              Award-winning interior design and fit-out, designed and built in-house across the GCC since 2012.
            </p>
            <div style={{ display: "flex", gap: "1rem", marginTop: "2rem" }}>
              {["IG", "FB", "LI", "YT", "X"].map(s => (
                <a key={s} href="#" aria-label={s} style={{
                  width: 36, height: 36, border: "1px solid color-mix(in oklch, white 18%, transparent)",
                  borderRadius: "50%", display: "grid", placeItems: "center",
                  fontFamily: "var(--mono)", fontSize: "0.65rem", letterSpacing: "0.12em", padding: 0
                }}>{s}</a>
              ))}
            </div>
          </div>
          <div>
            <h5>Practice</h5>
            <a href="#/projects">Projects</a>
            <a href="#/projects">Sectors</a>
            <a href="#/services">Services</a>
            <a href="#/how-we-work">How we work</a>
            <a href="#/about">About</a>
            <a href="#/journal">Journal & Podcast</a>
            <a href="#/careers">Careers</a>
          </div>
          <div>
            <h5>Sectors</h5>
            <a href="#/projects">Workplace</a>
            <a href="#/projects">Food & Beverage</a>
            <a href="#/projects">Healthcare</a>
            <a href="#/projects">Retail</a>
            <a href="#/projects">Education</a>
            <a href="#/projects">Sports & Entertainment</a>
          </div>
          <div>
            <h5>Contact</h5>
            <a href="tel:+97143881163">+971 4 388 1163</a>
            <a href="https://wa.me/971557960547" target="_blank" rel="noopener noreferrer">WhatsApp · 055 796 0547</a>
            <a href="mailto:info@hortoninteriors.com">info@hortoninteriors.com</a>
            <div style={{ marginTop: "1.25rem", fontSize: "0.85rem", lineHeight: 1.55, color: "color-mix(in oklch, white 60%, transparent)" }}>
              Office <span style={{ borderBottom: "1px dashed currentColor", paddingBottom: 1 }} title="Suite no. — 227 vs 230 to confirm with client">227*</span>, Al Shafar Investment Building<br />
              Sheikh Zayed Road, Al Safa, Dubai
            </div>
            <div style={{ marginTop: "0.75rem", fontSize: "0.85rem", lineHeight: 1.55, color: "color-mix(in oklch, white 60%, transparent)" }}>
              Workshop · Goshi Warehouse City<br />
              Al Quoz Industrial Area 3, Dubai
            </div>
          </div>
        </div>

        <div className="foot-mark">
          Changing spaces,<br /><em>creating experiences.</em>
        </div>

        <div className="foot-bottom">
          <div>© 2026 Horton Interiors LLC · Dubai, UAE</div>
          <div style={{ display: "flex", gap: "2rem" }}>
            <a href="#" style={{ fontFamily: "var(--mono)" }}>Privacy</a>
            <a href="#" style={{ fontFamily: "var(--mono)" }}>EN · AR</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// Lightbox
function Lightbox({ images = [], index, onClose, onPrev, onNext, caption }) {
  useEffect(() => {
    if (index === null || index === undefined) return;
    const onKey = e => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowLeft") onPrev();
      if (e.key === "ArrowRight") onNext();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [index, onClose, onPrev, onNext]);

  const open = index !== null && index !== undefined;
  return (
    <div className={`lb-overlay ${open ? "open" : ""}`} onClick={onClose}>
      {open && (
        <>
          <img className="lb-img" src={images[index]} alt="" onClick={e => e.stopPropagation()} />
          <button className="lb-close" onClick={onClose} aria-label="Close">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
          </button>
          <button className="lb-nav prev" onClick={e => { e.stopPropagation(); onPrev(); }} aria-label="Previous">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
          <button className="lb-nav next" onClick={e => { e.stopPropagation(); onNext(); }} aria-label="Next">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 3l5 5-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
          <div className="lb-caption">{caption || `${index + 1} / ${images.length}`}</div>
        </>
      )}
    </div>
  );
}

// Ticker — running list of named clients (subtle social proof, attributed)
function Ticker() {
  const items = [
    "Land Sterling HQ",
    "Landmark Group · JAFZA",
    "Jamjoom Pharma",
    "Middlesex University · Dubai",
    "The Giving Movement",
    "Knauf Regional Office",
    "Watania Takaful",
    "Allsopp & Allsopp",
    "Efficio · DIFC",
    "Kurdos",
    "Amanat Holdings HQ"
  ];
  const dup = [...items, ...items];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {dup.map((x, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem" }}>
            <span className="sector-dot" style={{ background: "var(--accent)" }}></span>
            {x}
          </span>
        ))}
      </div>
    </div>
  );
}

function PhotoCredit({ children }) {
  return (
    <div style={{ fontFamily: "var(--mono)", fontSize: "0.65rem", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--graphite)", marginTop: "0.85rem" }}>
      {children}
    </div>
  );
}

Object.assign(window, {
  HortonLogo, ArrowRight, ArrowDown, Nav, Footer, WhatsAppFAB, Lightbox, Ticker, PhotoCredit
});
