/* eslint-disable */
/* NEX Consultants — Calculator, Resources, About, Contact views */

function CalculatorView({ onConsult }) {
  const [jur, setJur] = React.useState("Mainland (DED)");
  const [activity, setActivity] = React.useState("Professional / consultancy");
  const [office, setOffice] = React.useState("Shared office");
  const [visas, setVisas] = React.useState(2);
  const [shareholders, setShareholders] = React.useState(2);
  const [leadOpen, setLeadOpen] = React.useState(false);

  // Compute indicative range
  const base = CALC.jurisdictions[jur].base;
  const mult = CALC.activityMult[activity];
  const officeAdd = CALC.officeAdd[office];
  const visaCost = CALC.visaCost;
  const shareAdd = CALC.shareholderAdd;
  const extraShare = Math.max(0, shareholders - 1);

  const low  = Math.round(base[0] * mult + officeAdd[0] + visas * visaCost[0] + extraShare * shareAdd[0]);
  const high = Math.round(base[1] * mult + officeAdd[1] + visas * visaCost[1] + extraShare * shareAdd[1]);

  const breakdown = [
    { label: "Licence + government fees", value: `${fmtAED(Math.round(base[0]*mult))} – ${fmtAED(Math.round(base[1]*mult))}` },
    { label: `Office (${office})`,         value: `${fmtAED(officeAdd[0])} – ${fmtAED(officeAdd[1])}` },
    { label: `${visas} visa${visas===1?"":"s"}`, value: `${fmtAED(visas * visaCost[0])} – ${fmtAED(visas * visaCost[1])}` },
    { label: `${extraShare} extra shareholder${extraShare===1?"":"s"}`, value: extraShare ? `${fmtAED(extraShare*shareAdd[0])} – ${fmtAED(extraShare*shareAdd[1])}` : "—" },
  ];

  return (
    <div data-screen-label="04 Cost Calculator">
      <section className="section" style={{ paddingBottom: 28 }}>
        <div className="wrap">
          <span className="crumb">Cost Calculator</span>
          <h1 style={{ fontSize: "clamp(36px, 5vw, 56px)", marginTop: 10, letterSpacing: "-0.025em" }}>
            An indicative cost — in under a minute.
          </h1>
          <p style={{ fontSize: 17, color: "var(--text-2)", marginTop: 14, maxWidth: 720 }}>
            Tell us the structure you're considering and we'll show an indicative range.
            Government fees move — every output is a starting point for the conversation,
            not a quote.
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 88 }}>
        <div className="wrap">
          <div className="calc">
            <div className="calc__inputs">
              <h3>Configure your setup</h3>
              <p className="sub">Adjust any input — the indicative range updates live.</p>

              <div className="calc__steps">
                <div className="calc__step">
                  <span className="num">1</span>
                  <div>
                    <h4>Jurisdiction</h4>
                    <div className="help">Where would you like to incorporate?</div>
                    <div className="calc__options">
                      {Object.keys(CALC.jurisdictions).map(k => (
                        <button key={k} className={"calc__option " + (jur === k ? "is-on" : "")} onClick={() => setJur(k)}>{k}</button>
                      ))}
                    </div>
                  </div>
                </div>

                <div className="calc__step">
                  <span className="num">2</span>
                  <div>
                    <h4>Activity</h4>
                    <div className="help">Primary business activity category.</div>
                    <div className="calc__options">
                      {CALC.activities.map(a => (
                        <button key={a} className={"calc__option " + (activity === a ? "is-on" : "")} onClick={() => setActivity(a)}>{a}</button>
                      ))}
                    </div>
                  </div>
                </div>

                <div className="calc__step">
                  <span className="num">3</span>
                  <div>
                    <h4>Office type</h4>
                    <div className="help">Office decisions shape both cost and visa entitlements.</div>
                    <div className="calc__options">
                      {CALC.officeTypes.map(o => (
                        <button key={o} className={"calc__option " + (office === o ? "is-on" : "")} onClick={() => setOffice(o)}>{o}</button>
                      ))}
                    </div>
                  </div>
                </div>

                <div className="calc__step">
                  <span className="num">4</span>
                  <div>
                    <h4>Visas required</h4>
                    <div className="help">Estimated number of residence visas.</div>
                    <Counter value={visas} setValue={setVisas} min={0} max={20}/>
                  </div>
                </div>

                <div className="calc__step">
                  <span className="num">5</span>
                  <div>
                    <h4>Shareholders</h4>
                    <div className="help">Total number of shareholders / partners.</div>
                    <Counter value={shareholders} setValue={setShareholders} min={1} max={20}/>
                  </div>
                </div>
              </div>
            </div>

            <div className="calc__output">
              <div>
                <h4>Indicative range</h4>
                <div className="calc__range">
                  {fmtAED(low)} – {fmtAED(high)}
                  <small>First-year, all-in. Indicative only.</small>
                </div>
                <div className="calc__breakdown">
                  {breakdown.map(b => (
                    <div key={b.label}><span>{b.label}</span><span>{b.value}</span></div>
                  ))}
                </div>
                <div className="calc__disclaimer">
                  <strong style={{ color: "#fff" }}>Indicative only.</strong>{" "}
                  UAE government and free-zone fees change frequently. The range above is for
                  scoping discussion. Your final figure is confirmed in consultation, with a
                  written proposal once we understand your activity, office and structure in detail.
                </div>
              </div>
              <div className="calc__cta">
                <button className="btn btn--primary" onClick={() => setLeadOpen(true)}>
                  Send me this estimate
                </button>
                <button className="btn btn--paper" onClick={() => onConsult()}>
                  Talk to an advisor
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Modal open={leadOpen} onClose={() => setLeadOpen(false)}>
        <h3>Email me this estimate</h3>
        <p className="sub">We'll send the indicative range and follow up with a senior advisor.</p>
        <div style={{
          marginTop: 16, padding: "14px 16px",
          background: "var(--paper-2)", border: "1px solid var(--line)",
          borderRadius: 10, fontSize: 13.5,
        }}>
          <strong style={{ color: "var(--ink)" }}>Your setup:</strong>{" "}
          {jur} · {activity} · {office} · {visas} visa{visas===1?"":"s"} · {shareholders} shareholder{shareholders===1?"":"s"}
          <div style={{ marginTop: 6, color: "var(--blue)", fontWeight: 600 }}>
            Indicative: {fmtAED(low)} – {fmtAED(high)}
          </div>
        </div>
        <ConsultationForm
          light
          prefillService={jur}
          onSubmit={() => { setLeadOpen(false); window.__showToast && window.__showToast("Estimate sent. We'll be in touch shortly."); }}
        />
      </Modal>
    </div>
  );
}

function Counter({ value, setValue, min = 0, max = 20 }) {
  return (
    <div className="calc__num">
      <button onClick={() => setValue(Math.max(min, value - 1))}>–</button>
      <span>{value}</span>
      <button onClick={() => setValue(Math.min(max, value + 1))}>+</button>
    </div>
  );
}

/* ════════════════════════════════════════════════════════════════ */
/* RESOURCES                                                          */
/* ════════════════════════════════════════════════════════════════ */

function ResourcesView({ onOpenGuide }) {
  return (
    <div data-screen-label="05 Resources">
      <section className="section" style={{ paddingBottom: 28 }}>
        <div className="wrap">
          <span className="crumb">Knowledge Hub</span>
          <h1 style={{ fontSize: "clamp(36px, 5vw, 56px)", marginTop: 10, letterSpacing: "-0.025em" }}>
            Authority content from people who do the work.
          </h1>
          <p style={{ fontSize: 17, color: "var(--text-2)", marginTop: 14, maxWidth: 720 }}>
            Compliance, offshore structures, UAE tax — written by the same partners who'll be on
            the call with you. Plain, current, citation-ready.
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 96 }}>
        <div className="wrap">
          <div className="guide-grid">
            {RESOURCES.map(r => (
              <div className="guide" key={r.title} onClick={() => onOpenGuide(r)}>
                <span className="guide__tag">{r.tag} · {r.read}</span>
                <h3>{r.title}</h3>
                <p>{r.excerpt}</p>
                <div className="guide__foot">Read the guide <Chev/></div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ════════════════════════════════════════════════════════════════ */
/* ABOUT                                                              */
/* ════════════════════════════════════════════════════════════════ */

function AboutView({ onConsult }) {
  return (
    <div data-screen-label="06 About">
      <section className="section" style={{ paddingBottom: 28 }}>
        <div className="wrap">
          <span className="crumb">About</span>
          <h1 style={{ fontSize: "clamp(36px, 5vw, 56px)", marginTop: 10, letterSpacing: "-0.025em" }}>
            A boutique, advisor-led firm — on Sheikh Zayed Road.
          </h1>
        </div>
      </section>

      <section style={{ paddingBottom: 56 }}>
        <div className="wrap">
          <div className="story-grid">
            <div>
              <span className="eyebrow">Our story</span>
              <h2 style={{ marginTop: 14 }}>
                We chose to stay boutique. It's our deepest competitive advantage.
              </h2>
              <p>
                NEX is a multi-disciplinary firm of chartered accountants, advisors and
                corporate-service specialists. We help founders, SMEs and inbound multinationals
                set up in the UAE — across Mainland, Free Zone, Offshore and Foreign-Branch
                structures — and then we stay on as their ongoing accounting, tax and PRO partner.
              </p>
              <p>
                Where larger firms route you through junior account managers, our senior partners
                run your engagement directly. That's the trade-off we make for our clients:
                fewer engagements, deeper accountability, faster decisions.
              </p>
            </div>
            <div className="panels">
              <div className="panel">
                <h4>Headquarters</h4>
                <p>Al Moosa Tower 1, Level 7, Suite 702<br/>Sheikh Zayed Road, Dubai, UAE</p>
              </div>
              <div className="panel">
                <h4>Representative offices</h4>
                <p>London &amp; Novi Beograd — supporting inbound investor enquiries.</p>
              </div>
              <div className="panel">
                <h4>Specialist niche</h4>
                <p>Registered agent for JAFZA Offshore — a focused depth most setup firms don't carry.</p>
              </div>
              <div className="panel">
                <h4>Engagement model</h4>
                <p>Boutique &amp; advisor-led. Partners on every engagement, end-to-end ownership.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="s-head">
            <div>
              <span className="eyebrow">Leadership</span>
              <h2>Names, titles and credentials.</h2>
            </div>
            <p className="s-head__lede">
              Credentialled — CPA, ICAI, ex-Big-4, ex-UAE Ministry of Finance. We're proud to list
              the people who will actually do the work.
            </p>
          </div>
          <div className="team-grid">
            {TEAM.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>
          <p style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 18, textAlign: "center" }}>
            Additional senior team: Alessandro Messina (Senior Executive Director), Aji Joy,
            Shalini, Kurian John — full bios available on request.
          </p>
        </div>
      </section>

      <ConsultBand onConsult={onConsult}/>
    </div>
  );
}

/* ════════════════════════════════════════════════════════════════ */
/* CONTACT                                                            */
/* ════════════════════════════════════════════════════════════════ */

function ContactView() {
  const [sent, setSent] = React.useState(false);
  return (
    <div data-screen-label="07 Contact">
      <section className="section" style={{ paddingBottom: 28 }}>
        <div className="wrap">
          <span className="crumb">Contact</span>
          <h1 style={{ fontSize: "clamp(36px, 5vw, 56px)", marginTop: 10, letterSpacing: "-0.025em" }}>
            One call, senior partner, no obligation.
          </h1>
          <p style={{ fontSize: 17, color: "var(--text-2)", marginTop: 14, maxWidth: 720 }}>
            We respond within one business day. Or skip the form — WhatsApp or call the office directly.
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 96 }}>
        <div className="wrap">
          <div className="contact-grid">
            <div className="contact-card">
              <h3>Reach the office</h3>
              <ul className="contact-list">
                <li>
                  <span className="ico"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M3 5.5C3 4.7 3.7 4 4.5 4h2.7c.6 0 1.1.4 1.3 1l1 3.2c.2.5 0 1.1-.5 1.4L7.6 11c1.1 2.4 3 4.3 5.4 5.4l1.4-1.4c.3-.4.9-.6 1.4-.4l3.2 1c.6.2 1 .7 1 1.3v2.7c0 .8-.7 1.5-1.5 1.5C11 21 3 13 3 5.5z"/></svg></span>
                  <div>
                    <span className="lbl">Main</span>
                    <div className="val"><a href="tel:+97143887577">+971 4 388 7577</a></div>
                  </div>
                </li>
                <li>
                  <span className="ico"><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></span>
                  <div>
                    <span className="lbl">WhatsApp</span>
                    <div className="val"><a target="_blank" rel="noopener" href="https://wa.me/971504945106">+971 50 494 5106</a></div>
                  </div>
                </li>
                <li>
                  <span className="ico"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M3 6h18v12H3z"/><path d="m3 7 9 7 9-7"/></svg></span>
                  <div>
                    <span className="lbl">Email</span>
                    <div className="val"><a href="mailto:info@nexconsultants.com">info@nexconsultants.com</a></div>
                  </div>
                </li>
                <li>
                  <span className="ico"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M12 22s7-7.2 7-13a7 7 0 1 0-14 0c0 5.8 7 13 7 13z"/><circle cx="12" cy="9" r="2.5"/></svg></span>
                  <div>
                    <span className="lbl">Headquarters</span>
                    <div className="val">
                      Al Moosa Tower 1, Level 7, Suite 702<br/>
                      PO Box 33089, Sheikh Zayed Road, Dubai, UAE
                    </div>
                  </div>
                </li>
                <li>
                  <span className="ico"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></span>
                  <div>
                    <span className="lbl">Hours</span>
                    <div className="val">Mon – Fri, by appointment</div>
                    <small>Exact hours to be confirmed with the client before publishing.</small>
                  </div>
                </li>
              </ul>
              <div style={{
                marginTop: 28, borderRadius: 12, overflow: "hidden",
                border: "1px solid var(--line)", height: 240, background: "var(--paper-2)",
                position: "relative",
              }}>
                <iframe
                  title="NEX Consultants HQ map"
                  src="https://www.google.com/maps?q=Al+Moosa+Tower+1,+Sheikh+Zayed+Road,+Dubai&output=embed"
                  width="100%" height="100%"
                  style={{ border: 0 }}
                  loading="lazy"
                />
              </div>
            </div>

            <div className="contact-card">
              <h3>Request a consultation</h3>
              <p className="sub" style={{ marginTop: 6, color: "var(--text-3)" }}>
                Tell us what you're planning. A senior partner will follow up.
              </p>
              {sent
                ? (
                  <div style={{ padding: "60px 12px", textAlign: "center" }}>
                    <div style={{
                      width: 56, height: 56, borderRadius: "50%",
                      background: "var(--blue-50)", color: "var(--blue)",
                      display: "inline-flex", alignItems: "center", justifyContent: "center",
                      marginBottom: 14,
                    }}>
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m5 12 4 4 10-10"/></svg>
                    </div>
                    <h3 style={{ fontSize: 20 }}>Thank you.</h3>
                    <p style={{ marginTop: 6 }}>We'll be in touch within one business day.</p>
                  </div>
                )
                : <ConsultationForm light onSubmit={() => setSent(true)}/>
              }
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, {
  CalculatorView, ResourcesView, AboutView, ContactView, ConsultBand,
});