/* eslint-disable */
/* NEX Consultants — shared components: Nav, Footer, WhatsApp FAB, Modal, ConsultationForm, TrustStrip */

function fmtAED(n) {
  return "AED " + n.toLocaleString("en-AE", { maximumFractionDigits: 0 });
}

function Chev({ className }) {
  return <i className={"chev " + (className || "")} aria-hidden="true" />;
}

function NavBar({ route, setRoute, lang, setLang, onConsult }) {
  const items = [
    { id: "home",        label: "Home" },
    { id: "services",    label: "Services" },
    { id: "jurisdictions", label: "Jurisdictions" },
    { id: "calculator",  label: "Cost Calculator" },
    { id: "resources",   label: "Resources" },
    { id: "about",       label: "About" },
    { id: "contact",     label: "Contact" },
  ];
  return (
    <nav className="nav" data-screen-label="Nav">
      <div className="wrap nav__inner">
        <div className="nav__logo" onClick={() => setRoute("home")} style={{ cursor: "pointer" }}>
          <NexMark height={32} />
        </div>
        <div className="nav__links">
          {items.map(it => (
            <span
              key={it.id}
              onClick={() => setRoute(it.id)}
              className={"nav__link " + (route === it.id ? "nav__link--active" : "")}
            >{it.label}</span>
          ))}
        </div>
        <div className="nav__right">
          <div className="nav__lang" aria-label="Language">
            {["EN","AR","RU","ZH"].map(L => (
              <button key={L}
                className={lang === L ? "is-on" : ""}
                onClick={() => setLang(L)}>{L}</button>
            ))}
          </div>
          <button className="btn btn--primary btn--sm" onClick={onConsult}>
            Free Consultation
          </button>
        </div>
      </div>
    </nav>
  );
}

/* SVG redraw of the logo mark — clean version of logo-nex-header.webp */
function NexMark({ height = 32, color = "#13294B", accent = "#3A4A60" }) {
  // Approximate vector recreation: NEX wordmark + chevron + "CONSULTANTS"
  // (Not a perfect logo replication — design placeholder while client confirms)
  return (
    <svg height={height} viewBox="0 0 220 64" xmlns="http://www.w3.org/2000/svg" aria-label="NEX Consultants">
      <g>
        {/* N */}
        <path fill={color} d="M2 6 H16 V42 H2 Z"/>
        <path fill={color} d="M16 6 L34 42 V6 H48 V42 H34 L16 42 Z" opacity="0"/>
        <path fill={color} d="M16 6 L34 38 V6 H48 V42 H34 L16 12 Z"/>
        {/* E */}
        <path fill={color} d="M54 6 H82 V14 H68 V20 H80 V26 H68 V34 H82 V42 H54 Z"/>
        {/* X with chevrons */}
        <path fill={color} d="M88 6 H100 L106 16 L112 6 H124 L114 22 L124 42 H112 L106 30 L100 42 H88 L98 22 Z"/>
        {/* chevron stripes (accent) */}
        <g fill={accent}>
          <path d="M132 8 L150 8 L142 14 L150 14 L142 20 L150 20 L142 26 L150 26 L142 32 L150 32 L142 38 L150 38 L138 42 Z" opacity="0"/>
          <path d="M126 9 L140 9 L132 16 L146 16 L138 23 L152 23 L144 30 L158 30 L150 37 L164 37 L156 42 L144 42 Z"/>
        </g>
      </g>
      <text x="2" y="58" fontFamily="Figtree, Inter, sans-serif" fontWeight="800" fontSize="13" letterSpacing="3" fill="#0E1B2C">CONSULTANTS</text>
    </svg>
  );
}

function WAFab({ message = "Hi NEX Consultants, I'd like to set up a business in the UAE." }) {
  const url = `https://wa.me/971504945106?text=${encodeURIComponent(message)}`;
  return (
    <a className="wa-fab" href={url} target="_blank" rel="noopener" aria-label="Chat on WhatsApp">
      <span className="wa-fab__pulse" />
      <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor">
        <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.2-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.8-.7-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5-.2 0-.4 0-.6 0-.2 0-.5.1-.8.4-.3.3-1.1 1-1.1 2.5s1.1 2.9 1.3 3.1c.2.2 2.2 3.4 5.4 4.6 3.2 1.2 3.2.8 3.8.8.6-.1 1.7-.7 2-1.4.3-.7.3-1.3.2-1.4-.1-.1-.3-.2-.6-.3z"/>
        <path d="M20.5 3.5C18.3 1.2 15.3 0 12 0 5.4 0 .1 5.4.1 12c0 2.1.6 4.2 1.7 6L0 24l6.2-1.6c1.7.9 3.7 1.5 5.8 1.5 6.6 0 12-5.4 12-12 0-3.2-1.2-6.2-3.5-8.4zM12 21.8c-1.9 0-3.7-.5-5.3-1.5l-.4-.2-3.7 1 1-3.6-.2-.4c-1.1-1.7-1.6-3.6-1.6-5.6 0-5.6 4.6-10.2 10.2-10.2 2.7 0 5.3 1.1 7.2 3 1.9 1.9 3 4.5 3 7.2 0 5.6-4.6 10.3-10.2 10.3z"/>
      </svg>
    </a>
  );
}

function TrustStrip() {
  const items = [
    ["Chartered-accountant-led", "CPA, ICAI and ex-Big-4 leadership."],
    ["Boutique advisor-led", "Senior partners on every engagement — not a setup factory."],
    ["Mainland · Free Zone · Offshore · Branch", "End-to-end formation across every UAE structure."],
    ["JAFZA Offshore registered agent", "A specialist niche we publish and lead on."],
    ["VAT & corporate tax depth", "Genuine tax-advisory bench — beyond licensing."],
  ];
  return (
    <section className="trust">
      <div className="wrap">
        <div className="trust__grid">
          {items.map(([title, body]) => (
            <div className="trust__cell" key={title}>
              <h4><Chev/> {title}</h4>
              <p>{body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer({ setRoute }) {
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot__grid">
          <div>
            <div className="foot__logo">
              <NexMark height={28}/>
            </div>
            <p style={{ fontSize: 13.5, lineHeight: 1.6, maxWidth: 320 }}>
              Your Business Gateway to the Middle East. Chartered-accountant-led business setup
              and tax advisory in Dubai.
            </p>
            <div className="foot__socials" style={{ marginTop: 18 }}>
              {["facebook","instagram","x","linkedin","youtube"].map(s => (
                <a key={s} href="#" aria-label={s}>
                  <SocialIcon name={s} />
                </a>
              ))}
            </div>
          </div>
          <div>
            <h5>Services</h5>
            <ul>
              <li onClick={() => setRoute("services")}>Company Formation</li>
              <li onClick={() => setRoute("services")}>Visa &amp; PRO</li>
              <li onClick={() => setRoute("services")}>Bank Account</li>
              <li onClick={() => setRoute("services")}>Accounting</li>
              <li onClick={() => setRoute("services")}>VAT &amp; Corporate Tax</li>
              <li onClick={() => setRoute("services")}>Audit &amp; Assurance</li>
            </ul>
          </div>
          <div>
            <h5>Jurisdictions</h5>
            <ul>
              <li onClick={() => setRoute("jurisdictions")}>Dubai Mainland</li>
              <li onClick={() => setRoute("jurisdictions")}>JAFZA</li>
              <li onClick={() => setRoute("jurisdictions")}>DMCC</li>
              <li onClick={() => setRoute("jurisdictions")}>UAQ FTZ</li>
              <li onClick={() => setRoute("jurisdictions")}>Dubai South</li>
              <li onClick={() => setRoute("jurisdictions")}>JAFZA Offshore</li>
            </ul>
          </div>
          <div>
            <h5>Resources</h5>
            <ul>
              <li onClick={() => setRoute("resources")}>Knowledge Hub</li>
              <li onClick={() => setRoute("resources")}>Compliance Guides</li>
              <li onClick={() => setRoute("calculator")}>Cost Calculator</li>
              <li onClick={() => setRoute("about")}>Leadership</li>
              <li onClick={() => setRoute("about")}>Press &amp; Media</li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li>+971 4 388 7577</li>
              <li>WhatsApp +971 50 494 5106</li>
              <li>info@nexconsultants.com</li>
              <li style={{ marginTop: 8 }}>Al Moosa Tower 1, Level 7, Suite 702<br/>Sheikh Zayed Road, Dubai</li>
            </ul>
          </div>
        </div>
        <div className="foot__legal">
          <span>© {new Date().getFullYear()} NEX Consultants. All rights reserved.</span>
          <span>Prototype — design exploration. Fees, ratings and figures are indicative or omitted pending client sign-off.</span>
        </div>
      </div>
    </footer>
  );
}

function SocialIcon({ name }) {
  const paths = {
    facebook: <path d="M13 21v-7h2.5l.5-3h-3V9c0-.9.3-1.5 1.6-1.5H16V5c-.4-.1-1.3-.2-2.3-.2-2.3 0-3.7 1.4-3.7 3.9V11H8v3h2v7h3z" fill="currentColor"/>,
    instagram: (
      <g fill="none" stroke="currentColor" strokeWidth="1.5">
        <rect x="4" y="4" width="16" height="16" rx="4"/>
        <circle cx="12" cy="12" r="3.5"/>
        <circle cx="17" cy="7" r=".8" fill="currentColor"/>
      </g>
    ),
    x: <path d="M16 4h2.5l-5.4 6.2L20 20h-5l-3.9-5L6.6 20H4l5.8-6.6L4 4h5l3.5 4.6L16 4z" fill="currentColor"/>,
    linkedin: <g fill="currentColor"><rect x="3.5" y="9" width="3" height="11"/><circle cx="5" cy="5.5" r="1.8"/><path d="M9 9h3v1.6c.6-1 1.7-1.9 3.4-1.9C18 8.7 19 10.5 19 13.2V20h-3v-6.1c0-1.5-.5-2.5-1.9-2.5-1.4 0-2.1.9-2.1 2.5V20H9V9z"/></g>,
    youtube: <path d="M21.5 7.5c-.2-.9-.9-1.6-1.8-1.8C18 5.3 12 5.3 12 5.3s-6 0-7.7.4c-.9.2-1.6.9-1.8 1.8C2.1 9.2 2.1 12 2.1 12s0 2.8.4 4.5c.2.9.9 1.6 1.8 1.8 1.7.4 7.7.4 7.7.4s6 0 7.7-.4c.9-.2 1.6-.9 1.8-1.8.4-1.7.4-4.5.4-4.5s0-2.8-.4-4.5zM10 15V9l5 3-5 3z" fill="currentColor"/>,
  };
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" style={{ color: "rgba(255,255,255,.8)" }}>
      {paths[name]}
    </svg>
  );
}

function Modal({ open, onClose, children, wide }) {
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [open]);

  if (!open) return null;
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className={"modal " + (wide ? "svc-detail" : "")} onClick={e => e.stopPropagation()}>
        <button className="modal__close" onClick={onClose} aria-label="Close">×</button>
        {children}
      </div>
    </div>
  );
}

function ConsultationForm({ prefillService, prefillJurisdiction, onSubmit, light }) {
  const [form, setForm] = React.useState({
    name: "", email: "", phone: "",
    service: prefillService || "",
    jurisdiction: prefillJurisdiction || "",
    message: "",
  });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const submit = (e) => {
    e.preventDefault();
    onSubmit && onSubmit(form);
  };

  return (
    <form className="consult-form" onSubmit={submit}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <div className={"field " + (light ? "field--light" : "")}>
          <label>Name</label>
          <input required value={form.name} onChange={e => set("name", e.target.value)} placeholder="Your full name"/>
        </div>
        <div className={"field " + (light ? "field--light" : "")}>
          <label>Email</label>
          <input required type="email" value={form.email} onChange={e => set("email", e.target.value)} placeholder="you@company.com"/>
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <div className={"field " + (light ? "field--light" : "")}>
          <label>Phone / WhatsApp</label>
          <input value={form.phone} onChange={e => set("phone", e.target.value)} placeholder="+971 …"/>
        </div>
        <div className={"field " + (light ? "field--light" : "")}>
          <label>Service of interest</label>
          <select value={form.service} onChange={e => set("service", e.target.value)}>
            <option value="">Select a service</option>
            {SERVICES.map(s => <option key={s.id} value={s.title}>{s.title}</option>)}
          </select>
        </div>
      </div>
      <div className={"field " + (light ? "field--light" : "")}>
        <label>Tell us about your plans</label>
        <textarea rows="3" value={form.message} onChange={e => set("message", e.target.value)} placeholder="A few lines about your business, activity, and timeline."/>
      </div>
      <div style={{ display: "flex", gap: 10, marginTop: 6, flexWrap: "wrap" }}>
        <button type="submit" className="btn btn--primary">Request consultation</button>
        <a className="btn btn--wa" href="https://wa.me/971504945106" target="_blank" rel="noopener">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 3.5C18.3 1.2 15.3 0 12 0 5.4 0 .1 5.4.1 12c0 2.1.6 4.2 1.7 6L0 24l6.2-1.6c1.7.9 3.7 1.5 5.8 1.5 6.6 0 12-5.4 12-12 0-3.2-1.2-6.2-3.5-8.4z"/></svg>
          WhatsApp instead
        </a>
      </div>
      <small style={{ color: "var(--muted)", fontSize: 12 }}>
        We respond within one business day. Your details are used only to follow up on your enquiry.
      </small>
    </form>
  );
}

function Toast({ children, onDone }) {
  React.useEffect(() => {
    const t = setTimeout(onDone, 3200);
    return () => clearTimeout(t);
  }, []);
  return <div className="toast"><span className="dot"/>{children}</div>;
}

/* Expose to global scope so other JSX files can use these */
Object.assign(window, {
  Chev, NavBar, NexMark, WAFab, TrustStrip, Footer, Modal, ConsultationForm, Toast, fmtAED,
});