/* Shared components: Nav, Footer, Logo, Modal, QuoteForm */

const { useState, useEffect, useRef } = React;

// ──────────────────────────────────────────────────────────────────────────
// Logo
function MobicoLogo({ onDark = false, size = 28 }) {
  // Custom inline SVG — derived from logo evidence (cobalt navy field, white
  // horse+arch mark) — flagged as placeholder per design brief.
  const wordColor = onDark ? "#ffffff" : "#0f1115";
  return (
    <div className={"mobico-logo " + (onDark ? "on-dark" : "")} style={{display:"flex", alignItems:"center", gap:10}}>
      <svg width={size} height={size} viewBox="0 0 80 80" aria-label="MOBICO" role="img">
        <rect x="2" y="2" width="76" height="76" rx="14" fill="#05029b" />
        {/* Stylised horse + arch mark in white */}
        <path d="M16 50 C22 44 30 42 36 44 L40 36 C42 33 46 33 48 36 L55 30 C56 31 56 33 55 35 L51 41 C54 42 56 45 56 49 L52 49 C52 47 51 46 49 45 L46 50 L43 50 L45 45 L38 45 L35 50 L32 50 L34 45 C28 45 23 47 19 51 Z" fill="#ffffff" />
        <path d="M62 58 C62 42 67 32 73 28 L70 28 C63 32 58 42 58 58 Z" fill="#ffffff" />
      </svg>
      <span style={{
        font: "700 17px/1 Manrope, sans-serif",
        letterSpacing: "-0.02em",
        color: wordColor,
      }}>MOBICO<span style={{color:"#05029b"}}>.</span></span>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// Nav
function Nav({ route, navigate, onQuote, onLang, lang }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 4);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const items = [
    { id: "products", label: "Products" },
    { id: "sectors",  label: "Sectors"  },
    { id: "projects", label: "Projects" },
    { id: "showroom", label: "Showroom" },
    { id: "about",    label: "About"    },
    { id: "contact",  label: "Contact"  },
  ];

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: scrolled ? "rgba(243,239,231,0.92)" : "rgba(243,239,231,0)",
      backdropFilter: scrolled ? "blur(10px)" : "none",
      WebkitBackdropFilter: scrolled ? "blur(10px)" : "none",
      borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent",
      transition: "background 0.2s, border-color 0.2s, backdrop-filter 0.2s",
    }}>
      <div className="wrap" style={{display:"flex", alignItems:"center", height:72, gap:24}}>
        <a href="#/" onClick={(e)=>{e.preventDefault(); navigate({page:"home"});}}
           style={{display:"flex", alignItems:"center"}}>
          <MobicoLogo size={32} />
        </a>

        <nav className="hide-mobile" style={{display:"flex", gap:4, marginLeft:24}}>
          {items.map(it => {
            const active = route.page === it.id || (it.id==="products" && route.page==="category") || (it.id==="sectors" && route.page==="sector");
            return (
              <a key={it.id} href={"#/" + it.id}
                 onClick={(e)=>{e.preventDefault(); navigate({page: it.id});}}
                 style={{
                   padding: "8px 12px",
                   fontSize: 14, fontWeight: 500,
                   color: active ? "var(--ink)" : "var(--muted)",
                   borderBottom: active ? "1px solid var(--mobico)" : "1px solid transparent",
                   transition: "color 0.15s, border-color 0.15s",
                 }}>
                {it.label}
              </a>
            );
          })}
        </nav>

        <div style={{flex:1}} />

        <button onClick={onLang}
          className="hide-mobile"
          style={{
            background:"transparent", border:"1px solid var(--line)",
            padding:"7px 11px", fontSize:12, color:"var(--ink)",
            fontFamily: "JetBrains Mono, monospace", letterSpacing:"0.06em",
            display:"inline-flex", alignItems:"center", gap:8,
          }}>
          <span style={{color: lang==="en" ? "var(--ink)" : "var(--muted)"}}>EN</span>
          <span style={{color:"var(--line)"}}>·</span>
          <span style={{color: lang==="ar" ? "var(--ink)" : "var(--muted)"}}>AR</span>
        </button>

        <button onClick={onQuote} className="btn sm navy hide-mobile">
          Request a quote <span className="arrow">→</span>
        </button>

        <button className="only-mobile" onClick={()=>setOpen(v=>!v)} style={{
          background:"transparent", border:"1px solid var(--ink)", padding:"8px 12px",
          display:"inline-flex", alignItems:"center", gap:8, fontSize:13
        }}>
          <span>{open ? "Close" : "Menu"}</span>
        </button>
      </div>

      {open && (
        <div className="only-mobile" style={{
          flexDirection:"column", borderTop:"1px solid var(--line)",
          background:"var(--paper)", padding:"16px 20px 24px",
        }}>
          {items.map(it=>(
            <a key={it.id} href={"#/" + it.id}
               onClick={(e)=>{e.preventDefault(); navigate({page:it.id}); setOpen(false);}}
               style={{padding:"14px 0", borderBottom:"1px solid var(--line-2)", fontSize:18}}>
              {it.label}
            </a>
          ))}
          <button onClick={()=>{onQuote(); setOpen(false);}} className="btn navy" style={{marginTop:18, justifyContent:"center"}}>
            Request a quote →
          </button>
        </div>
      )}
    </header>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// Footer
function Footer({ navigate, onQuote }) {
  const { CONTACT, CATEGORIES, SECTORS } = window.MOBICO_DATA;
  return (
    <footer style={{background:"var(--ink)", color:"#cdd0d6", marginTop:0}}>
      <div className="wrap" style={{padding:"80px 32px 40px"}}>
        <div style={{
          display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap:32,
        }}>
          <div style={{gridColumn:"span 4"}}>
            <MobicoLogo onDark size={40} />
            <p style={{maxWidth:340, marginTop:24, color:"#9aa0ac", fontSize:14, lineHeight:1.6}}>
              Office furniture and interior systems, specified and supplied from our Dubai Design District showroom. The UAE showroom and trade arm of MOBICA.
            </p>
            <button onClick={onQuote} className="btn navy" style={{marginTop:24}}>
              Request a specification <span className="arrow">→</span>
            </button>
          </div>

          <div style={{gridColumn:"span 2"}}>
            <div className="mono" style={{color:"#7c8190", marginBottom:18}}>Products</div>
            <ul style={{listStyle:"none", padding:0, margin:0, display:"grid", gap:9, fontSize:14}}>
              {CATEGORIES.slice(0,8).map(c=>(
                <li key={c.id}>
                  <a href={"#/products/"+c.id} onClick={(e)=>{e.preventDefault(); navigate({page:"category", id:c.id});}}
                     style={{color:"#cdd0d6"}} dangerouslySetInnerHTML={{__html:c.name}} />
                </li>
              ))}
            </ul>
          </div>

          <div style={{gridColumn:"span 2"}}>
            <div className="mono" style={{color:"#7c8190", marginBottom:18}}>Sectors</div>
            <ul style={{listStyle:"none", padding:0, margin:0, display:"grid", gap:9, fontSize:14}}>
              {SECTORS.map(s=>(
                <li key={s.id}>
                  <a href={"#/sectors/"+s.id} onClick={(e)=>{e.preventDefault(); navigate({page:"sector", id:s.id});}}
                     style={{color:"#cdd0d6"}}>{s.name}</a>
                </li>
              ))}
            </ul>

            <div className="mono" style={{color:"#7c8190", marginTop:30, marginBottom:18}}>Company</div>
            <ul style={{listStyle:"none", padding:0, margin:0, display:"grid", gap:9, fontSize:14}}>
              <li><a onClick={(e)=>{e.preventDefault(); navigate({page:"projects"});}} href="#/projects" style={{color:"#cdd0d6"}}>Projects</a></li>
              <li><a onClick={(e)=>{e.preventDefault(); navigate({page:"showroom"});}} href="#/showroom" style={{color:"#cdd0d6"}}>Showroom</a></li>
              <li><a onClick={(e)=>{e.preventDefault(); navigate({page:"about"});}} href="#/about" style={{color:"#cdd0d6"}}>About</a></li>
              <li><a onClick={(e)=>{e.preventDefault(); navigate({page:"contact"});}} href="#/contact" style={{color:"#cdd0d6"}}>Contact</a></li>
            </ul>
          </div>

          <div style={{gridColumn:"span 4"}}>
            <div className="mono" style={{color:"#7c8190", marginBottom:18}}>Visit</div>
            <div style={{fontSize:14, lineHeight:1.7}}>
              <div style={{color:"#fff", fontWeight:600, marginBottom:4}}>Showroom — Dubai Design District</div>
              <div style={{color:"#9aa0ac"}}>{CONTACT.d3.addr}</div>
              <div style={{color:"#cdd0d6", marginTop:8}}>{CONTACT.d3.phone}</div>
              <div style={{color:"#9aa0ac"}}>{CONTACT.d3.hours}</div>
            </div>
            <div style={{fontSize:14, lineHeight:1.7, marginTop:24}}>
              <div style={{color:"#fff", fontWeight:600, marginBottom:4}}>Karama Office</div>
              <div style={{color:"#9aa0ac"}}>{CONTACT.karama.addr}</div>
              <div style={{color:"#cdd0d6", marginTop:8}}>{CONTACT.karama.phone}</div>
            </div>
            <div className="mono" style={{color:"#7c8190", marginTop:24}}>{CONTACT.po}</div>
          </div>
        </div>

        <div style={{
          marginTop:64, paddingTop:24, borderTop:"1px solid #2a2d35",
          display:"flex", justifyContent:"space-between", gap:16, flexWrap:"wrap",
          fontSize:12, color:"#7c8190", fontFamily:"JetBrains Mono, monospace", letterSpacing:"0.04em",
        }}>
          <div>© MOBICO Trading &amp; Marketing Co. LLC · UAE showroom &amp; trade arm of MOBICA</div>
          <div style={{display:"flex", gap:24}}>
            <span>EN · AR</span>
            <span>mobicouae.com</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// Modal shell
function Modal({ open, onClose, title, children, wide }) {
  useEffect(()=>{
    if(!open) return;
    const k = (e) => e.key==="Escape" && onClose();
    window.addEventListener("keydown", k);
    document.body.style.overflow = "hidden";
    return ()=>{ window.removeEventListener("keydown", k); document.body.style.overflow=""; };
  }, [open, onClose]);
  if(!open) return null;
  return (
    <div style={{
      position:"fixed", inset:0, zIndex:100,
      background:"rgba(15,17,21,0.55)",
      display:"flex", alignItems:"flex-start", justifyContent:"center",
      padding:"60px 20px", overflowY:"auto",
    }} onClick={onClose}>
      <div onClick={(e)=>e.stopPropagation()} style={{
        background:"var(--paper)", maxWidth: wide ? 880 : 560, width:"100%",
        border:"1px solid var(--line)", boxShadow:"0 30px 80px rgba(0,0,0,0.2)",
        animation:"fade 0.2s ease",
      }}>
        <div style={{display:"flex", justifyContent:"space-between", alignItems:"center",
                     padding:"22px 28px", borderBottom:"1px solid var(--line)"}}>
          <div style={{display:"flex", alignItems:"center", gap:12}}>
            <span className="mono" style={{color:"var(--mobico)"}}>FORM</span>
            <h3 style={{margin:0, fontSize:18, fontWeight:600, letterSpacing:"-0.01em"}}>{title}</h3>
          </div>
          <button onClick={onClose} style={{
            background:"transparent", border:"1px solid var(--line)",
            width:36, height:36, display:"flex", alignItems:"center", justifyContent:"center",
            fontSize:16,
          }} aria-label="Close">×</button>
        </div>
        <div style={{padding:"28px"}}>{children}</div>
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// Quote form
function QuoteForm({ presetCategory, onSubmitted, mode="quote" }) {
  const { CATEGORIES, SECTORS } = window.MOBICO_DATA;
  const [form, setForm] = useState({
    name:"", company:"", role:"", email:"", phone:"",
    category: presetCategory || "", sector:"", project:"", message:"",
    visit:"", time:"",
  });
  const [sent, setSent] = useState(false);
  const upd = (k) => (e) => setForm({...form, [k]: e.target.value});
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    if(onSubmitted) onSubmitted(form);
  };
  if(sent){
    return (
      <div style={{padding:"24px 0", textAlign:"center"}}>
        <div className="mono" style={{color:"var(--mobico)"}}>RECEIVED</div>
        <h3 style={{fontSize:24, letterSpacing:"-0.02em", margin:"12px 0 8px"}}>Thank you, {form.name||"there"}.</h3>
        <p style={{color:"var(--muted)", maxWidth:420, margin:"0 auto"}}>
          Your enquiry has been routed to the MOBICO trade team. We respond within one business day.
        </p>
      </div>
    );
  }
  return (
    <form onSubmit={submit} style={{display:"grid", gap:20}}>
      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:20}}>
        <div className="field"><label>Name</label><input required value={form.name} onChange={upd("name")} /></div>
        <div className="field"><label>Company</label><input required value={form.company} onChange={upd("company")} /></div>
      </div>
      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:20}}>
        <div className="field"><label>Role</label><input placeholder="Architect / Designer / Procurement" value={form.role} onChange={upd("role")} /></div>
        <div className="field"><label>Email</label><input type="email" required value={form.email} onChange={upd("email")} /></div>
      </div>
      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:20}}>
        <div className="field"><label>Phone</label><input value={form.phone} onChange={upd("phone")} /></div>
        <div className="field"><label>Project type</label>
          <select value={form.project} onChange={upd("project")}>
            <option value="">Select…</option>
            <option>New fit-out</option><option>Refurbishment</option>
            <option>Single-room specification</option><option>Furniture only</option>
          </select>
        </div>
      </div>
      {mode === "quote" && (
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:20}}>
          <div className="field"><label>Product / range</label>
            <select value={form.category} onChange={upd("category")}>
              <option value="">Any / not sure</option>
              {CATEGORIES.map(c=> <option key={c.id} value={c.id}>{c.name.replace(/&amp;/g,"&")}</option>)}
            </select>
          </div>
          <div className="field"><label>Sector</label>
            <select value={form.sector} onChange={upd("sector")}>
              <option value="">Select…</option>
              {SECTORS.map(s=> <option key={s.id} value={s.id}>{s.name}</option>)}
            </select>
          </div>
        </div>
      )}
      {mode === "showroom" && (
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:20}}>
          <div className="field"><label>Preferred date</label><input type="date" value={form.visit} onChange={upd("visit")} /></div>
          <div className="field"><label>Preferred time</label>
            <select value={form.time} onChange={upd("time")}>
              <option value="">Select…</option>
              <option>09:00–11:00</option><option>11:00–13:00</option>
              <option>13:00–15:00</option><option>15:00–17:00</option>
            </select>
          </div>
        </div>
      )}
      <div className="field"><label>Message {mode==="showroom" ? "/ areas of interest" : "/ brief"}</label>
        <textarea value={form.message} onChange={upd("message")} placeholder="Tell us about the project, scope, timeline…" />
      </div>
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginTop:8, gap:12, flexWrap:"wrap"}}>
        <span className="mono" style={{color:"var(--muted)"}}>We respond within 1 business day.</span>
        <button type="submit" className="btn navy">
          {mode==="showroom" ? "Request showroom visit" : "Send enquiry"} <span className="arrow">→</span>
        </button>
      </div>
    </form>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// Photo with subtle reveal
function Photo({ src, alt, ratio = "4/3", style = {}, hover = false }) {
  return (
    <div style={{
      position:"relative", overflow:"hidden", aspectRatio: ratio,
      background:"var(--paper-2)",
      ...style,
    }}>
      <img src={src} alt={alt || ""} loading="lazy" style={{
        width:"100%", height:"100%", objectFit:"cover",
        transition: hover ? "transform 0.6s cubic-bezier(0.2,0.6,0.2,1)" : "none",
      }}
      onMouseEnter={hover ? (e)=>e.currentTarget.style.transform="scale(1.04)" : undefined}
      onMouseLeave={hover ? (e)=>e.currentTarget.style.transform="scale(1)" : undefined}
      />
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// Section heading
function SectionHeading({ num, eyebrow, title, intro, children }) {
  return (
    <div style={{display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap:32, marginBottom: 56}}>
      <div style={{gridColumn:"span 5"}}>
        <div className="eyebrow">
          {num && <span className="mono num">{num}</span>}
          <span className="line" />
          <span className="mono">{eyebrow}</span>
        </div>
        <h2 className="h-display" style={{fontSize:"clamp(36px, 4.4vw, 60px)", margin:"20px 0 0", maxWidth: 500}}
            dangerouslySetInnerHTML={{__html: title}} />
      </div>
      {intro && (
        <div style={{gridColumn:"span 5 / span 6", paddingTop:34, fontSize:17, color:"var(--ink-2)", maxWidth:520}}>
          {intro}
        </div>
      )}
      {children}
    </div>
  );
}

// Page header (subpages)
function PageHeader({ eyebrow, title, intro, breadcrumb }) {
  return (
    <section style={{padding:"120px 0 56px", borderBottom:"1px solid var(--line)"}}>
      <div className="wrap">
        {breadcrumb && <div className="mono" style={{color:"var(--muted)", marginBottom:24}}>{breadcrumb}</div>}
        <div style={{display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap:32}}>
          <div style={{gridColumn:"span 7"}}>
            <div className="eyebrow">
              <span className="mono num">{eyebrow}</span>
              <span className="line" />
            </div>
            <h1 className="h-display" style={{fontSize:"clamp(44px, 6vw, 96px)", margin:"24px 0 0"}}
                dangerouslySetInnerHTML={{__html: title}} />
          </div>
          {intro && (
            <div style={{gridColumn:"span 5", display:"flex", alignItems:"flex-end"}}>
              <p style={{fontSize:18, color:"var(--ink-2)", maxWidth:480, marginBottom:8}}>{intro}</p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// Sticky CTA band
function CTABand({ onQuote, onShowroom }) {
  return (
    <section style={{background:"var(--ink)", color:"#fff", padding:"96px 0"}}>
      <div className="wrap" style={{display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap:32, alignItems:"center"}}>
        <div style={{gridColumn:"span 7"}}>
          <div className="mono" style={{color:"#9aa0ac"}}>NEXT STEP</div>
          <h2 className="h-display" style={{color:"#fff", fontSize:"clamp(36px, 4.4vw, 60px)", margin:"16px 0 0"}}>
            Bring your floorplan,<br />we'll bring the <em style={{color:"#9b97ff", fontStyle:"normal", fontWeight:500}}>specification.</em>
          </h2>
        </div>
        <div style={{gridColumn:"span 5", display:"flex", flexDirection:"column", gap:14, alignItems:"flex-start"}}>
          <button onClick={onQuote} className="btn" style={{background:"#fff", color:"var(--ink)", borderColor:"#fff"}}>
            Request a quote <span className="arrow">→</span>
          </button>
          <button onClick={onShowroom} className="btn ghost" style={{borderColor:"#3b4150", color:"#fff"}}>
            Book a showroom visit (d3) <span className="arrow">→</span>
          </button>
          <a className="mono" style={{color:"#9aa0ac", marginTop:10}}>+971 4 390 8144 · Mon–Fri 09:00–18:00</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  MobicoLogo, Nav, Footer, Modal, QuoteForm, Photo, SectionHeading, PageHeader, CTABand,
});
