/* eslint-disable no-undef */
/* ──────────────────────────────────────────────────────────────────────
   Shell: Logo, Navbar, Footer, ConsultModal, WhatsAppFab, MobileCTA.
   All RTL-aware. EN/AR toggle handled here.
   ────────────────────────────────────────────────────────────────────── */

const { useState, useEffect, useRef } = React;
const { Ic } = window.VZ_DATA;

/* ── Logo: a minimal, ORIGINAL wordmark for the concept site.
   Uses a stylised "V" notch on the right (a nod to the brand monogram in
   the supplied logo SVG) — not a redraw of the production logo. */
function Logo({ light = false, size = 26 }) {
  const c = light ? "white" : "var(--ink)";
  return (
    <a href="#" onClick={(e) => { e.preventDefault(); window.__vzNav?.("home"); }} style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <span style={{
        fontFamily: "var(--font-display)",
        fontSize: size, lineHeight: 1, letterSpacing: "-0.04em",
        fontWeight: 700, color: c,
      }}>
        Virtuzone
      </span>
      <span aria-hidden="true" style={{
        display: "inline-block", width: 14, height: 14,
        borderRadius: "3px",
        background: "var(--vz-grad)",
        transform: "rotate(45deg)",
      }} />
    </a>
  );
}
window.Logo = Logo;


/* ── Locale Toggle ───────────────────────────────────────────────────── */
function LocaleToggle({ locale, setLocale, dark = false }) {
  return (
    <div className="tabs" style={{
      background: dark ? "rgba(255,255,255,0.08)" : "var(--mist)",
      borderColor: dark ? "rgba(255,255,255,0.16)" : "var(--line)",
      padding: 3,
    }}>
      {["en", "ar", "ru", "zh"].map((l) => (
        <button
          key={l}
          className={"tab " + (locale === l ? "active" : "")}
          onClick={() => setLocale(l)}
          style={{
            padding: "5px 10px", fontSize: 12, fontWeight: 580,
            color: locale === l ? "white" : (dark ? "rgba(255,255,255,0.7)" : "var(--steel)"),
          }}
        >
          {l.toUpperCase()}
        </button>
      ))}
    </div>
  );
}
window.LocaleToggle = LocaleToggle;


/* ── Navbar ──────────────────────────────────────────────────────────── */
function Navbar({ route, nav, locale, setLocale, openConsult, dark = false }) {
  const { T } = window.VZ_DATA;
  const t = T[locale] || T.en;
  const [open, setOpen] = useState(false);

  const items = [
    { id: "services",      label: t.nav.services },
    { id: "jurisdictions", label: t.nav.jurisdictions },
    { id: "calculator",    label: t.nav.calc },
    { id: "golden-visa",   label: t.nav.goldenVisa },
    { id: "resources",     label: t.nav.resources },
    { id: "about",         label: t.nav.about },
  ];

  return (
    <header className={"nav-root " + (dark ? "dark" : "")}>
      <div className="wrap" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 28px" }}>
        <Logo light={dark} size={22} />

        <nav className="nav-menu" style={{ display: "flex" }}>
          {items.map((it) => (
            <button key={it.id}
              className={"nav-link " + (route === it.id ? "active" : "")}
              onClick={() => nav(it.id)}
              style={{ color: dark ? "rgba(255,255,255,0.85)" : "var(--ink)" }}
            >
              {it.label}
            </button>
          ))}
        </nav>

        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <LocaleToggle locale={locale} setLocale={setLocale} dark={dark} />
          <button className="btn btn-dark btn-sm" onClick={openConsult}>
            {t.cta.consult}
            <span className="arr">{Ic.arrow()}</span>
          </button>
        </div>
      </div>
    </header>
  );
}
window.Navbar = Navbar;


/* ── Footer ──────────────────────────────────────────────────────────── */
function Footer({ locale, nav }) {
  const { T, services } = window.VZ_DATA;
  const t = T[locale] || T.en;

  return (
    <footer className="footer">
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.4fr repeat(4, 1fr)", gap: 40 }}>
        <div>
          <Logo light size={24} />
          <p style={{ marginTop: 18, color: "rgba(255,255,255,0.7)", fontSize: 14.5, maxWidth: 320, lineHeight: 1.55 }}>
            UAE business setup, made simple. Mainland · free zone · offshore · visas · banking · tax · compliance.
          </p>
          <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 6, color: "rgba(255,255,255,0.8)", fontSize: 13.5 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>{Ic.phone()}<a href="tel:+97144578200">{t.foot.phone}</a></div>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>{Ic.wa()}<a href="https://wa.me/97144578220" target="_blank" rel="noreferrer">WhatsApp {t.foot.wa}</a></div>
            <div style={{ marginTop: 8, color: "rgba(255,255,255,0.6)", fontSize: 12.5, fontStyle: "italic" }}>{t.foot.emailNote}</div>
          </div>
        </div>

        <div className="col">
          <h4>Services</h4>
          {services.slice(0, 7).map((s) => (
            <a key={s.id} href="#" onClick={(e)=>{e.preventDefault(); nav("services");}}>{s.name}</a>
          ))}
        </div>
        <div className="col">
          <h4>Jurisdictions</h4>
          <a href="#" onClick={(e)=>{e.preventDefault(); nav("jurisdictions");}}>Mainland</a>
          <a href="#" onClick={(e)=>{e.preventDefault(); nav("jurisdictions");}}>Free zones</a>
          <a href="#" onClick={(e)=>{e.preventDefault(); nav("jurisdictions");}}>Offshore</a>
          <a href="#" onClick={(e)=>{e.preventDefault(); nav("jurisdictions");}}>IFZA</a>
          <a href="#" onClick={(e)=>{e.preventDefault(); nav("jurisdictions");}}>DMCC</a>
          <a href="#" onClick={(e)=>{e.preventDefault(); nav("jurisdictions");}}>Meydan</a>
          <a href="#" onClick={(e)=>{e.preventDefault(); nav("jurisdictions");}}>RAKEZ</a>
        </div>
        <div className="col">
          <h4>Tools</h4>
          <a href="#" onClick={(e)=>{e.preventDefault(); nav("calculator");}}>Cost estimate</a>
          <a href="#" onClick={(e)=>{e.preventDefault(); nav("golden-visa");}}>Golden Visa assessment</a>
          <a href="#" onClick={(e)=>{e.preventDefault(); nav("resources");}}>Guides hub</a>
          <a href="#" onClick={(e)=>{e.preventDefault(); nav("contact");}}>Book a consultation</a>
        </div>
        <div className="col">
          <h4>Company</h4>
          <a href="#" onClick={(e)=>{e.preventDefault(); nav("about");}}>About</a>
          <a href="#" onClick={(e)=>{e.preventDefault(); nav("about");}}>Leadership</a>
          <a href="#" onClick={(e)=>{e.preventDefault(); nav("contact");}}>Contact</a>
          <a href="#" onClick={(e)=>{e.preventDefault();}}>Careers</a>
          <a href="#" onClick={(e)=>{e.preventDefault();}}>Sister brands</a>
        </div>
      </div>

      <div className="wrap" style={{ marginTop: 60, paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.1)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 18 }}>
        <div style={{ color: "rgba(255,255,255,0.6)", fontSize: 12.5, maxWidth: 760 }}>{t.foot.legal}</div>
        <div style={{ display: "flex", gap: 18, alignItems: "center" }}>
          <a href="#" style={{ color: "rgba(255,255,255,0.7)", fontSize: 13 }}>Privacy</a>
          <a href="#" style={{ color: "rgba(255,255,255,0.7)", fontSize: 13 }}>Terms</a>
          <a href="#" style={{ color: "rgba(255,255,255,0.7)", fontSize: 13 }}>Cookies</a>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;


/* ── Consultation Modal ──────────────────────────────────────────────── */
function ConsultModal({ open, onClose, prefill = {} }) {
  const [step, setStep] = useState(0);
  const [form, setForm] = useState({
    name: "", email: "", phone: "",
    nationality: "",
    intent: prefill.intent || "Start a new UAE business",
    service: prefill.service || "Company Formation",
    jurisdiction: prefill.jurisdiction || "Free Zone",
    timeline: "Within 3 months",
    msg: "",
  });
  const [done, setDone] = useState(false);

  useEffect(() => { if (open) { setStep(0); setDone(false); } }, [open]);

  if (!open) return null;

  const upd = (k, v) => setForm((f) => ({ ...f, [k]: v }));
  const stepDone = step === 0
    ? form.intent && form.service && form.jurisdiction
    : form.name && form.email && form.phone;

  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "20px 28px", borderBottom: "1px solid var(--line)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <span className="pill"><span className="dot" />{done ? "Confirmed" : (step === 0 ? "Step 1 of 2" : "Step 2 of 2")}</span>
            <span className="caps" style={{ color: "var(--steel)" }}>Free consultation</span>
          </div>
          <button onClick={onClose} aria-label="Close" style={{ background: "transparent", border: "none", color: "var(--steel)" }}>
            {Ic.close()}
          </button>
        </div>

        {done ? (
          <div style={{ padding: "44px 32px 40px", textAlign: "center" }}>
            <div style={{ width: 56, height: 56, borderRadius: 56, background: "var(--vz-grad)", color: "white", display: "grid", placeItems: "center", margin: "0 auto 18px" }}>
              {Ic.check({ width: 22, height: 22 })}
            </div>
            <h3 className="h3" style={{ margin: 0 }}>Thanks, {form.name.split(" ")[0] || "founder"}.</h3>
            <p className="body-lg" style={{ marginTop: 10, marginBottom: 26 }}>
              A senior advisor will be in touch within one business day to walk through your {form.service.toLowerCase()} options.
            </p>
            <div style={{ display: "flex", justifyContent: "center", gap: 10, flexWrap: "wrap" }}>
              <a className="btn btn-whatsapp" href={`https://wa.me/97144578220?text=${encodeURIComponent("Hi Virtuzone, I'd like to discuss " + form.service + " in " + form.jurisdiction)}`} target="_blank" rel="noreferrer">
                {Ic.wa()} Continue on WhatsApp
              </a>
              <button className="btn btn-ghost" onClick={onClose}>Close</button>
            </div>
          </div>
        ) : (
          <>
            <div style={{ padding: "28px 32px 8px" }}>
              <h3 className="h3" style={{ margin: 0 }}>Tell us what you're building.</h3>
              <p className="body-sm" style={{ margin: "8px 0 0" }}>
                A free 30-min call with a senior advisor — no obligation, indicative ranges only.
              </p>
            </div>

            {step === 0 && (
              <div style={{ padding: "20px 32px 28px", display: "grid", gap: 18 }}>
                <Radios label="I want to" name="intent" value={form.intent} onChange={(v)=>upd("intent",v)}
                  options={["Start a new UAE business","Expand an existing business to UAE","Move my company / re-domicile","Apply for the Golden Visa","Just exploring"]} />
                <Radios label="Primary service" name="service" value={form.service} onChange={(v)=>upd("service",v)}
                  options={["Company Formation","Visa & PRO","Golden Visa","Bank Account","Accounting & Tax","Other"]} />
                <Radios label="Preferred jurisdiction" name="jurisdiction" value={form.jurisdiction} onChange={(v)=>upd("jurisdiction",v)}
                  options={["Mainland","Free Zone","Offshore","Not sure yet"]} />
                <div className="field">
                  <label>Timeline</label>
                  <select className="select" value={form.timeline} onChange={(e)=>upd("timeline",e.target.value)}>
                    <option>Within 1 month</option>
                    <option>Within 3 months</option>
                    <option>Within 6 months</option>
                    <option>Just exploring</option>
                  </select>
                </div>
              </div>
            )}
            {step === 1 && (
              <div style={{ padding: "20px 32px 28px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                <div className="field" style={{ gridColumn: "1/-1" }}>
                  <label>Full name</label>
                  <input className="input" value={form.name} onChange={(e)=>upd("name", e.target.value)} placeholder="Sara Almenhali" />
                </div>
                <div className="field">
                  <label>Email</label>
                  <input className="input" type="email" value={form.email} onChange={(e)=>upd("email", e.target.value)} placeholder="you@email.com" />
                </div>
                <div className="field">
                  <label>Phone (with country code)</label>
                  <input className="input" value={form.phone} onChange={(e)=>upd("phone", e.target.value)} placeholder="+971 50 000 0000" />
                </div>
                <div className="field" style={{ gridColumn: "1/-1" }}>
                  <label>Nationality (optional)</label>
                  <input className="input" value={form.nationality} onChange={(e)=>upd("nationality", e.target.value)} placeholder="e.g. United Kingdom" />
                </div>
                <div className="field" style={{ gridColumn: "1/-1" }}>
                  <label>Anything you'd like us to know? (optional)</label>
                  <textarea className="textarea" value={form.msg} onChange={(e)=>upd("msg", e.target.value)} placeholder="Activity, expected revenue, # of visas…" />
                </div>
              </div>
            )}

            <div style={{ padding: "16px 32px 28px", borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
              <div className="body-sm" style={{ display: "flex", alignItems: "center", gap: 8 }}>
                {Ic.check({ stroke: "var(--vz-red)" })}<span>No fixed pricing — indicative ranges, confirmed live.</span>
              </div>
              <div style={{ display: "flex", gap: 10 }}>
                {step > 0 && <button className="btn btn-ghost" onClick={() => setStep(0)}>← Back</button>}
                {step === 0
                  ? <button className="btn btn-primary" disabled={!stepDone} onClick={() => setStep(1)} style={{ opacity: stepDone ? 1 : 0.6 }}>Continue <span className="arr">{Ic.arrow()}</span></button>
                  : <button className="btn btn-primary" disabled={!stepDone} onClick={() => setDone(true)} style={{ opacity: stepDone ? 1 : 0.6 }}>Book my consultation <span className="arr">{Ic.arrow()}</span></button>}
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
}
window.ConsultModal = ConsultModal;


/* helper — radio chips inside modal */
function Radios({ label, value, onChange, options }) {
  return (
    <div className="field">
      <label>{label}</label>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
        {options.map((o) => (
          <button key={o}
            onClick={() => onChange(o)}
            style={{
              padding: "9px 14px", borderRadius: 999,
              fontSize: 13.5, fontWeight: 540,
              border: "1px solid " + (value === o ? "var(--ink)" : "var(--line-2)"),
              background: value === o ? "var(--ink)" : "white",
              color: value === o ? "white" : "var(--ink)",
            }}>
            {o}
          </button>
        ))}
      </div>
    </div>
  );
}


/* ── WhatsApp FAB ────────────────────────────────────────────────────── */
function WhatsAppFab() {
  return (
    <a className="wa-fab" href="https://wa.me/97144578220?text=Hi%20Virtuzone%2C%20I%27d%20like%20to%20enquire%20about..." target="_blank" rel="noreferrer" aria-label="WhatsApp">
      {Ic.wa()}
    </a>
  );
}
window.WhatsAppFab = WhatsAppFab;


/* ── Mobile bottom CTA ───────────────────────────────────────────────── */
function MobileCTA({ onConsult }) {
  return (
    <div className="mobile-cta">
      <span>Ready to start?</span>
      <button className="btn btn-primary" onClick={onConsult}>Book a call</button>
    </div>
  );
}
window.MobileCTA = MobileCTA;