/* Shared UI primitives + Nav + Footer + FAB */

function ArrowRight({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square">
      <path d="M5 12 H19" />
      <path d="M13 6 L19 12 L13 18" />
    </svg>
  );
}

function ArrowDown({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square">
      <path d="M12 5 V19" />
      <path d="M6 13 L12 19 L18 13" />
    </svg>
  );
}

function WhatsAppIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 12a9 9 0 0 1-13.6 7.7L3 21l1.4-4.3A9 9 0 1 1 21 12z"/>
      <path d="M8.5 9.5c0 4 3 6.5 6 6.5l1.5-1.5-2-1.2-1 .7c-.9-.4-1.6-1.1-2-2l.7-1-1.2-2L8.5 9.5z"/>
    </svg>
  );
}

function Eyebrow({ children, dot = true }) {
  return (
    <div className="eyebrow">
      {dot && <span className="dot" />} {children}
    </div>
  );
}

function Hairline() { return <hr className="hairline" />; }

function Logo() {
  return (
    <div className="nav-logo">
      <span className="mark">B</span>
      <span>Bond Interiors</span>
      <span className="sub">DXB · EST. 1986</span>
    </div>
  );
}

function Nav({ route, go, locale, setLocale }) {
  const items = [
    ["projects", "Projects"],
    ["sectors",  "Sectors"],
    ["capabilities", "Capabilities"],
    ["factory",  "Factory"],
    ["about",    "About"],
    ["contact",  "Contact"],
  ];
  const t = (en) => locale === "ar" ? (window.SHORT_AR[en] || en) : en;
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="#/" onClick={(e)=>{e.preventDefault(); go("home");}} aria-label="Bond Interiors home">
          <Logo />
        </a>
        <ul className="nav-links">
          {items.map(([id, label]) => (
            <li key={id}>
              <a
                href={`#/${id}`}
                onClick={(e)=>{e.preventDefault(); go(id);}}
                className={route.startsWith(id) ? "active" : ""}
              >
                {t(label)}
              </a>
            </li>
          ))}
        </ul>
        <div className="nav-right">
          <div className="locale-switch" role="group" aria-label="Language">
            <button className={locale==="en" ? "on" : ""} onClick={()=>setLocale("en")}>EN</button>
            <button className={locale==="ar" ? "on" : ""} onClick={()=>setLocale("ar")}>AR</button>
          </div>
          <a className="btn" href="#/contact" onClick={(e)=>{e.preventDefault(); go("contact");}}>
            {t("Start a project")} <ArrowRight />
          </a>
        </div>
      </div>
    </nav>
  );
}

function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div style={{display:"inline-flex", alignItems:"baseline", gap:10, color:"#fff", fontFamily:"var(--display)", fontSize:22, fontWeight:600, letterSpacing:"-0.01em"}}>
              <span style={{display:"inline-grid", placeItems:"center", width:32, height:32, border:"1.5px solid #fff", fontFamily:"var(--display)", fontWeight:700, fontSize:16}}>B</span>
              Bond Interiors
            </div>
            <p style={{maxWidth:"40ch", marginTop:18, color:"rgba(255,255,255,0.65)", fontSize:14, lineHeight:1.6}}>
              Interior fit-out & joinery, made in-house in Dubai since 1986. Design, manufacture and install under one roof.
            </p>
            <div style={{marginTop:24, display:"flex", flexDirection:"column", gap:8, fontSize:13, color:"rgba(255,255,255,0.65)"}}>
              <div>Saih Shuaib 3, Dubai Industrial City</div>
              <div>P.O. Box 15758 · Dubai, UAE</div>
              <div>+971 4 566 7720 · info@bondinteriors.com</div>
              <div>WhatsApp +971 55 600 3228</div>
            </div>
          </div>

          <div>
            <h5>Site</h5>
            <ul>
              <li><a href="#/projects" onClick={(e)=>{e.preventDefault(); go("projects");}}>Projects</a></li>
              <li><a href="#/sectors"  onClick={(e)=>{e.preventDefault(); go("sectors");}}>Sectors</a></li>
              <li><a href="#/capabilities" onClick={(e)=>{e.preventDefault(); go("capabilities");}}>Capabilities</a></li>
              <li><a href="#/factory"  onClick={(e)=>{e.preventDefault(); go("factory");}}>Factory</a></li>
              <li><a href="#/about"    onClick={(e)=>{e.preventDefault(); go("about");}}>About</a></li>
              <li><a href="#/contact"  onClick={(e)=>{e.preventDefault(); go("contact");}}>Contact</a></li>
            </ul>
          </div>

          <div>
            <h5>Sectors</h5>
            <ul>
              {window.SECTORS.slice(0,6).map(s => (
                <li key={s.id}><a href={`#/sectors/${s.id}`} onClick={(e)=>{e.preventDefault(); go(`projects?sector=${s.id}`);}}>{s.label}</a></li>
              ))}
            </ul>
          </div>

          <div>
            <h5>Reach us</h5>
            <ul>
              <li><a href="https://wa.me/971556003228" target="_blank" rel="noopener noreferrer">WhatsApp</a></li>
              <li><a href="https://www.instagram.com/bondinteriors" target="_blank" rel="noopener noreferrer">Instagram</a></li>
              <li><a href="https://www.linkedin.com/company/bond-interiors" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
              <li><a href="https://www.facebook.com/Bond-Interiors-100053255392607" target="_blank" rel="noopener noreferrer">Facebook</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bot">
          <div>© 2026 Bond Interiors LLC. All rights reserved.</div>
          <div>Bond Holding · Madina Glass · Dubai Industrial City</div>
        </div>
      </div>
    </footer>
  );
}

function WhatsAppFAB() {
  return (
    <a className="fab" href="https://wa.me/971556003228?text=Hi%20Bond%20Interiors%2C%20I%27d%20like%20to%20discuss%20a%20project..."
       target="_blank" rel="noopener noreferrer" aria-label="WhatsApp Bond Interiors">
      <WhatsAppIcon />
      <span>WhatsApp · +971 55 600 3228</span>
    </a>
  );
}

/* shared section header */
function SectionHead({ kicker, title, lede, action }) {
  return (
    <div style={{display:"flex", justifyContent:"space-between", alignItems:"flex-end", gap:32, paddingBottom:32, borderBottom:"1px solid var(--line)", flexWrap:"wrap"}}>
      <div style={{maxWidth:"56ch"}}>
        {kicker && <Eyebrow>{kicker}</Eyebrow>}
        <h2 className="display-m" style={{marginTop:16, marginBottom:lede?14:0}}>{title}</h2>
        {lede && <p className="lede" style={{margin:0}}>{lede}</p>}
      </div>
      {action}
    </div>
  );
}

/* project card */
function ProjectCard({ p, go, showCredit, frame = "tall", index = 0 }) {
  return (
    <button className="p-card" onClick={()=>go(`project/${p.id}`)}>
      <div className={`frame ${frame}`}>
        <img src={p.hero} alt={p.name} loading="lazy" />
        {showCredit && !p.rightsCleared && (
          <div className="credit-overlay">{p.photographer}</div>
        )}
      </div>
      <div className="meta">
        <div>
          <h4>{p.name}</h4>
          <div className="sub">{(window.SECTORS.find(s=>s.id===p.sector)||{}).label} · {p.location}</div>
        </div>
        <div className="yr">{String(index+1).padStart(2,"0")} / {p.year}</div>
      </div>
    </button>
  );
}

Object.assign(window, { ArrowRight, ArrowDown, WhatsAppIcon, Eyebrow, Hairline, Logo, Nav, Footer, WhatsAppFAB, SectionHead, ProjectCard });