/* eslint-disable */
/* NEX Consultants — page views: Home, Services, Jurisdictions */

function Home({ setRoute, onConsult, onOpenService }) {
  return (
    <div data-screen-label="01 Home">
      <Hero onConsult={onConsult} setRoute={setRoute}/>
      <JurisdictionLogos/>
      <ServicesPreview setRoute={setRoute} onOpenService={onOpenService}/>
      <ComparisonTeaser setRoute={setRoute}/>
      <ComplianceFeature setRoute={setRoute}/>
      <LeadershipTeaser setRoute={setRoute}/>
      <ConsultBand onConsult={onConsult}/>
    </div>
  );
}

function Hero({ onConsult, setRoute }) {
  return (
    <section className="hero">
      <div className="wrap hero__grid">
        <div>
          <span className="eyebrow eyebrow--paper">Your Business Gateway to the Middle East</span>
          <h1 style={{ marginTop: 16 }}>
            Company formation &amp; <span className="accent">tax-advisory</span> experts in Dubai.
          </h1>
          <p className="hero__lede">
            A chartered-accountant-led, boutique consultancy guiding founders and established
            firms through every UAE structure — Mainland, Free Zone, Offshore and Foreign Branch.
          </p>
          <div className="hero__ctas">
            <button className="btn btn--primary btn--lg" onClick={onConsult}>
              Request a free consultation
            </button>
            <button className="btn btn--paper btn--lg" onClick={() => setRoute("calculator")}>
              Get a cost estimate <Chev/>
            </button>
          </div>
          <div className="hero__strip">
            <div><Chev/> <span>End-to-end across formation, visas, banking, accounting &amp; tax.</span></div>
            <div><Chev/> <span>Senior partners on every engagement — not a setup factory.</span></div>
            <div><Chev/> <span>Specialist registered-agent capability for JAFZA Offshore.</span></div>
          </div>
        </div>
        <div className="hero__visual">
          <div className="tile tile--big">
            <img src="media/hero-dubai-skyline.webp" alt="Dubai HQ"/>
            <span className="tile__cap">Dubai · Sheikh Zayed Road</span>
          </div>
          <div className="tile tile--small">
            <img src="media/team-john-ceo.webp" alt="John Varghese, CEO &amp; Partner"/>
            <span className="tile__cap">John Varghese · CEO</span>
          </div>
          <div className="tile tile--small">
            <img src="media/team-hisham-chairman.webp" alt="Hisham Ali Mohamed Taher, Chairman"/>
            <span className="tile__cap">Hisham Taher · Chairman</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function JurisdictionLogos() {
  return (
    <section className="partners">
      <div className="wrap partners__inner">
        <span className="partners__label">Authorities &amp; Free Zones</span>
        <img src="media/jurisdiction-ded.webp" alt="DED"/>
        <img src="media/jurisdiction-dmcc.webp" alt="DMCC"/>
        <img src="media/jurisdiction-jafza.webp" alt="JAFZA"/>
        <img src="media/jurisdiction-uaq.webp" alt="UAQ FTZ"/>
      </div>
    </section>
  );
}

function ServicesPreview({ setRoute, onOpenService }) {
  const top8 = SERVICES.slice(0, 8);
  return (
    <section className="section">
      <div className="wrap">
        <div className="s-head">
          <div>
            <span className="eyebrow">Services</span>
            <h2>End-to-end. From licence to ledger.</h2>
          </div>
          <p className="s-head__lede">
            Formation handled by the same team that runs your accounting, VAT, corporate tax
            and PRO. One relationship; chartered-accountant depth across the lifecycle.
          </p>
        </div>
        <div className="service-grid">
          {top8.map((s, i) => (
            <div className="svc-card" key={s.id} onClick={() => onOpenService(s)}>
              <div className="svc-card__num">{String(i + 1).padStart(2, "0")} · {s.cat}</div>
              <h3>{s.title}</h3>
              <p>{s.lede}</p>
              <div className="svc-card__foot">How it works <Chev/></div>
              <div className="svc-card__bg"/>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 28, textAlign: "center" }}>
          <button className="btn btn--ghost" onClick={() => setRoute("services")}>
            See all 12 services <Chev/>
          </button>
        </div>
      </div>
    </section>
  );
}

function ComparisonTeaser({ setRoute }) {
  return (
    <section className="section" style={{ background: "var(--paper-2)" }}>
      <div className="wrap">
        <div className="s-head">
          <div>
            <span className="eyebrow">Jurisdictions</span>
            <h2>Mainland, Free Zone, Offshore, Branch — qualitatively compared.</h2>
          </div>
          <p className="s-head__lede">
            Government and free-zone fees change — so this comparison stays qualitative.
            We discuss indicative ranges privately in your consultation.
          </p>
        </div>
        <CompareTable rows={COMPARE_ROWS.slice(0,3)} cols={COMPARE_COLS}/>
        <div style={{ marginTop: 22, textAlign: "right" }}>
          <button className="btn btn--ghost" onClick={() => setRoute("jurisdictions")}>
            Full comparison &amp; per-zone detail <Chev/>
          </button>
        </div>
      </div>
    </section>
  );
}

function CompareTable({ rows, cols }) {
  return (
    <div className="jcompare">
      <div className="jcompare__row jcompare__head">
        <div>Attribute</div>
        {cols.map(c => <div key={c}>{c}</div>)}
      </div>
      {rows.map(r => (
        <div className="jcompare__row" key={r.attr}>
          <div className="jcompare__attr">{r.attr}</div>
          {r.values.map((v, i) => (
            <div className="jcompare__cell" key={i}>{v}</div>
          ))}
        </div>
      ))}
    </div>
  );
}

function ComplianceFeature({ setRoute }) {
  const steps = [
    "Map every entity's compliance obligations.",
    "UBO disclosures with the relevant authority.",
    "ESR notifications and reports where applicable.",
    "AML registration, policies and goAML.",
    "FTA Corporate Tax and VAT registration.",
    "Annual financial statements + audit submission.",
    "Renewals: licence, establishment, immigration.",
    "Ongoing changes — share transfers, MoA, signatories.",
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="compliance">
          <div>
            <span className="eyebrow eyebrow--paper">Authority article</span>
            <h2 style={{ marginTop: 16 }}>8 steps to fulfil corporate compliance in the UAE.</h2>
            <p>
              UBO, ESR, AML, FTA — the obligations that follow a UAE company are not optional,
              and the penalty bands are real. This is the framework we run for every client.
            </p>
            <button className="btn btn--paper" style={{ marginTop: 24 }} onClick={() => setRoute("resources")}>
              Read the full guide <Chev/>
            </button>
          </div>
          <div className="compliance__steps">
            {steps.map((s, i) => (
              <div className="compliance__step" key={i}>
                <span className="n">{i + 1}</span>
                <span>{s}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function LeadershipTeaser({ setRoute }) {
  return (
    <section className="section" style={{ background: "var(--paper-2)" }}>
      <div className="wrap">
        <div className="s-head">
          <div>
            <span className="eyebrow">Leadership</span>
            <h2>Senior, credentialled, named.</h2>
          </div>
          <p className="s-head__lede">
            Boutique means our principals run your engagement. CPA, ICAI, ex-Big-4, ex-UAE
            Ministry of Finance — the bench is genuinely senior.
          </p>
        </div>
        <div className="team-grid">
          {TEAM.slice(0,3).map(m => (
            <div className="member" key={m.name}>
              <div className="member__img" style={{ backgroundImage: `url(${m.photo})` }}/>
              <div className="member__body">
                <div className="member__role">{m.role}</div>
                <h3 className="member__name">{m.name}</h3>
                <p className="member__creds">{m.creds}</p>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 28, textAlign: "center" }}>
          <button className="btn btn--ghost" onClick={() => setRoute("about")}>
            Meet the full bench <Chev/>
          </button>
        </div>
      </div>
    </section>
  );
}

function ConsultBand({ onConsult }) {
  return (
    <section className="section--tight" style={{ background: "var(--ink)" }}>
      <div className="wrap" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 20, color: "#fff" }}>
        <div>
          <h2 style={{ color: "#fff", fontSize: 28 }}>Let's get started.</h2>
          <p style={{ color: "rgba(255,255,255,.7)", marginTop: 6 }}>
            Request your free quote today — one call, senior partner, no obligation.
          </p>
        </div>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          <button className="btn btn--primary btn--lg" onClick={onConsult}>Free consultation</button>
          <a className="btn btn--paper btn--lg" href="tel:+97143887577">+971 4 388 7577</a>
        </div>
      </div>
    </section>
  );
}

/* ════════════════════════════════════════════════════════════════ */
/* SERVICES VIEW                                                    */
/* ════════════════════════════════════════════════════════════════ */

function ServicesView({ onOpenService }) {
  const [filter, setFilter] = React.useState("All");
  const cats = ["All", ...new Set(SERVICES.map(s => s.cat))];
  const filtered = filter === "All" ? SERVICES : SERVICES.filter(s => s.cat === filter);

  return (
    <div data-screen-label="02 Services">
      <section className="section" style={{ paddingBottom: 28 }}>
        <div className="wrap">
          <span className="crumb">Services</span>
          <h1 style={{ fontSize: "clamp(36px, 5vw, 56px)", marginTop: 10, letterSpacing: "-0.025em" }}>
            Twelve services. One senior team.
          </h1>
          <p style={{ fontSize: 17, color: "var(--text-2)", marginTop: 14, maxWidth: 720 }}>
            Formation, people, banking, finance, tax, governance and advisory — delivered as a single
            relationship. Click any service to see the step-by-step journey we run.
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 88 }}>
        <div className="wrap">
          <div className="filters">
            {cats.map(c => (
              <button key={c} className={"filter " + (filter === c ? "is-on" : "")} onClick={() => setFilter(c)}>
                {c}
              </button>
            ))}
          </div>
          <div className="service-grid">
            {filtered.map((s, i) => (
              <div className="svc-card" key={s.id} onClick={() => onOpenService(s)}>
                <div className="svc-card__num">{String(i + 1).padStart(2, "0")} · {s.cat}</div>
                <h3>{s.title}</h3>
                <p>{s.lede}</p>
                <div className="svc-card__foot">How it works <Chev/></div>
                <div className="svc-card__bg"/>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function ServiceDetail({ service, onConsult }) {
  if (!service) return null;
  return (
    <>
      <div className="svc-detail__hero" style={{ backgroundImage: `url(${service.image})` }}>
        <span className="svc-detail__cat">{service.cat}</span>
      </div>
      <h3>{service.title}</h3>
      <p className="sub" style={{ marginTop: 8 }}>{service.lede}</p>
      <div style={{ marginTop: 18 }}>
        <span className="crumb">How the engagement runs</span>
        <div className="svc-detail__journey">
          {service.journey.map(([k, v], i) => (
            <div className="svc-detail__step" key={i}>
              <span className="n">{i + 1}</span>
              <div>
                <strong>{k}</strong>
                <span>{v}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div style={{
        marginTop: 22, padding: 14, background: "var(--paper-2)",
        border: "1px solid var(--line)", borderRadius: 10,
        fontSize: 12.5, color: "var(--text-3)",
      }}>
        <strong style={{ color: "var(--ink)" }}>Note on pricing.</strong>{" "}
        Government and free-zone fees change frequently. We share indicative ranges in your
        consultation — never a fixed quote without scope confirmation.
      </div>
      <div style={{ marginTop: 22, display: "flex", gap: 10, flexWrap: "wrap" }}>
        <button className="btn btn--primary" onClick={() => onConsult(service.title)}>
          Request a consultation
        </button>
        <a
          className="btn btn--wa"
          target="_blank"
          rel="noopener"
          href={`https://wa.me/971504945106?text=${encodeURIComponent(`Hi NEX Consultants, I'd like to discuss ${service.title}.`)}`}
        >WhatsApp the team</a>
      </div>
    </>
  );
}

/* ════════════════════════════════════════════════════════════════ */
/* JURISDICTIONS VIEW                                                */
/* ════════════════════════════════════════════════════════════════ */

function JurisdictionsView({ setRoute }) {
  const [filter, setFilter] = React.useState("All");
  const kinds = ["All", "Mainland", "Free Zone", "Offshore", "Branch"];
  const filtered = filter === "All" ? JURISDICTIONS : JURISDICTIONS.filter(j => j.kind === filter);

  return (
    <div data-screen-label="03 Jurisdictions">
      <section className="section" style={{ paddingBottom: 28 }}>
        <div className="wrap">
          <span className="crumb">Jurisdictions</span>
          <h1 style={{ fontSize: "clamp(36px, 5vw, 56px)", marginTop: 10, letterSpacing: "-0.025em" }}>
            The right structure changes everything.
          </h1>
          <p style={{ fontSize: 17, color: "var(--text-2)", marginTop: 14, maxWidth: 720 }}>
            Mainland for unrestricted UAE market access. Free Zones for sector fit and ownership.
            Offshore for holding and asset protection. Branch for established multinationals.
            Compare qualitatively, then talk to a partner about indicative cost.
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 56 }}>
        <div className="wrap">
          <h2 style={{ fontSize: 22, marginBottom: 18 }}>Qualitative comparison</h2>
          <CompareTable rows={COMPARE_ROWS} cols={COMPARE_COLS}/>
          <p style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 12 }}>
            Qualitative summary — every engagement is structure-specific. Confirmed on consultation.
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 96 }}>
        <div className="wrap">
          <h2 style={{ fontSize: 22, marginBottom: 18 }}>Per-zone detail</h2>
          <div className="filters">
            {kinds.map(c => (
              <button key={c} className={"filter " + (filter === c ? "is-on" : "")} onClick={() => setFilter(c)}>
                {c}
              </button>
            ))}
          </div>
          <div className="jzone-grid">
            {filtered.map(j => (
              <div className="jzone" key={j.id}>
                <div className="jzone__logo">
                  {j.logo
                    ? <img src={j.logo} alt={j.name}/>
                    : <div style={{
                        background: "var(--paper-2)", color: "var(--text-3)",
                        padding: "8px 12px", borderRadius: 6, fontSize: 11,
                        fontFamily: "var(--font-mono)", letterSpacing: ".14em", textTransform: "uppercase",
                      }}>{j.kind}</div>
                  }
                </div>
                <div>
                  <span className="jzone__kind">{j.kind}</span>
                  <h3 className="jzone__name" style={{ marginTop: 2 }}>{j.name}</h3>
                </div>
                <p className="jzone__suit">{j.suit}</p>
                <ul className="jzone__bens">
                  {j.benefits.map(b => <li key={b}>{b}</li>)}
                </ul>
                <button
                  className="btn btn--ghost btn--sm"
                  style={{ marginTop: "auto", alignSelf: "flex-start" }}
                  onClick={() => setRoute("calculator")}
                >
                  Indicative cost <Chev/>
                </button>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, {
  Home, ServicesView, ServiceDetail, JurisdictionsView, CompareTable,
});