/* ============================================================
   Shuraa Business Setup — Components (Part 2)
   CostEstimator, Founder, GlobalOffices, ConsultationForm, Footer, Fab
   ============================================================ */

// ============================================================
// Cost Estimator — multi-step with live indicative range
// ============================================================
const EST_STEPS = ["Jurisdiction", "Activity", "Visas & office", "You"];

const JUR_OPTIONS = [
  { key: "mainland", label: "Mainland (DED)", sub: "Trade with the local UAE market" , base: [12000, 40000] },
  { key: "freezone", label: "Free zone", sub: "100% ownership, sector-specific zones", base: [17900, 35000] },
  { key: "offshore", label: "Offshore", sub: "Holding / international trading only", base: [14000, 22000] },
  { key: "unsure",   label: "Not sure yet", sub: "We'll recommend at consultation", base: [12000, 40000] },
];

const ACT_OPTIONS = [
  { key: "consult",  label: "Consultancy / professional services", mult: 1.0 },
  { key: "trade",    label: "General trading / e-commerce",         mult: 1.15 },
  { key: "tech",     label: "Tech / software / digital",            mult: 1.05 },
  { key: "media",    label: "Media / advertising / production",     mult: 1.1 },
  { key: "health",   label: "Healthcare (DHA / DoH)",               mult: 1.45 },
  { key: "industrial", label: "Industrial / manufacturing",         mult: 1.5 },
];

const OFFICE_OPTIONS = [
  { key: "flexi", label: "Flexi-desk / shared",  add: 0 },
  { key: "service", label: "Serviced office",    add: 18000 },
  { key: "fitted",  label: "Fitted commercial",  add: 45000 },
];

function CostEstimator() {
  const [step, setStep] = useState(0);
  const [jur, setJur] = useState("freezone");
  const [act, setAct] = useState("consult");
  const [visas, setVisas] = useState(2);
  const [office, setOffice] = useState("flexi");
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const calc = useMemo(() => {
    const j = JUR_OPTIONS.find(o => o.key === jur) || JUR_OPTIONS[0];
    const a = ACT_OPTIONS.find(o => o.key === act) || ACT_OPTIONS[0];
    const o = OFFICE_OPTIONS.find(x => x.key === office) || OFFICE_OPTIONS[0];
    const visaCost = visas * 4500;
    const lo = Math.round((j.base[0] * a.mult + visaCost + o.add) / 100) * 100;
    const hi = Math.round((j.base[1] * a.mult + visaCost + o.add) / 100) * 100;
    return { lo, hi };
  }, [jur, act, visas, office]);

  const fmt = n => n.toLocaleString("en-AE");

  return (
    <section className="section estimator" id="estimator">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="h-eyebrow" style={{ color: "#F2A89D" }}>Indicative cost estimator</div>
            <h2 style={{ color: "#fff" }}>Get a realistic range in under a minute — no email gate.</h2>
          </div>
          <p className="lead" style={{ color: "rgba(255,255,255,0.78)" }}>
            Government and free-zone fees change frequently. This is a starting <strong style={{ color: "#fff" }}>indicative range</strong>, not a quote. A consultant confirms the final figure at handoff.
          </p>
        </div>

        <div className="est-grid">
          {/* LEFT: form */}
          <div className="est-form">
            <div className="est-steps">
              {EST_STEPS.map((s, i) => (
                <div key={s} className={"est-step" + (i === step ? " active" : (i < step ? " done" : ""))}>
                  <span className="num">{i < step ? "✓" : i + 1}</span>
                  <span>{s}</span>
                </div>
              ))}
            </div>

            {step === 0 && (
              <>
                <h3 className="est-q">Where would you like to set up?</h3>
                <p className="est-help">Pick a jurisdiction — or "Not sure yet" and we'll recommend at consultation.</p>
                <div className="est-options">
                  {JUR_OPTIONS.map(o => (
                    <button key={o.key} className={"est-option" + (jur === o.key ? " selected" : "")} onClick={() => setJur(o.key)}>
                      <span className="est-radio" />
                      <span>
                        <div className="est-label">{o.label}</div>
                        <div className="est-sub">{o.sub}</div>
                      </span>
                    </button>
                  ))}
                </div>
              </>
            )}

            {step === 1 && (
              <>
                <h3 className="est-q">What's your business activity?</h3>
                <p className="est-help">Activity drives the licence type, approvals and fee bands.</p>
                <div className="est-options">
                  {ACT_OPTIONS.map(o => (
                    <button key={o.key} className={"est-option" + (act === o.key ? " selected" : "")} onClick={() => setAct(o.key)}>
                      <span className="est-radio" />
                      <span>
                        <div className="est-label">{o.label}</div>
                      </span>
                    </button>
                  ))}
                </div>
              </>
            )}

            {step === 2 && (
              <>
                <h3 className="est-q">Visas &amp; office</h3>
                <p className="est-help">Both adjust the indicative total. You can change either later.</p>
                <div style={{ display: "grid", gap: 12 }}>
                  <div className="est-counter">
                    <div className="label-block">
                      <div className="est-label">Number of visas</div>
                      <div className="est-sub">Investor, employee &amp; family combined</div>
                    </div>
                    <div className="est-counter-ctrl">
                      <button onClick={() => setVisas(Math.max(0, visas - 1))} aria-label="Decrease">−</button>
                      <span className="val">{visas}</span>
                      <button onClick={() => setVisas(Math.min(15, visas + 1))} aria-label="Increase">+</button>
                    </div>
                  </div>
                  <div style={{ marginTop: 4 }}>
                    <div className="est-options">
                      {OFFICE_OPTIONS.map(o => (
                        <button key={o.key} className={"est-option" + (office === o.key ? " selected" : "")} onClick={() => setOffice(o.key)}>
                          <span className="est-radio" />
                          <span>
                            <div className="est-label">{o.label}</div>
                          </span>
                        </button>
                      ))}
                    </div>
                  </div>
                </div>
              </>
            )}

            {step === 3 && (
              <>
                <h3 className="est-q">Who should we send this to?</h3>
                <p className="est-help">An advisor will confirm the range and walk you through next steps. We never share your details.</p>
                <div style={{ display: "grid", gap: 12 }}>
                  <div className="field">
                    <label>Your name</label>
                    <input
                      type="text"
                      value={name}
                      onChange={e => setName(e.target.value)}
                      placeholder="Maria Petrova"
                      style={{ background: "rgba(255,255,255,0.06)", borderColor: "rgba(255,255,255,0.15)", color: "#fff" }}
                    />
                  </div>
                  <div className="field">
                    <label>Email</label>
                    <input
                      type="email"
                      value={email}
                      onChange={e => setEmail(e.target.value)}
                      placeholder="maria@example.com"
                      style={{ background: "rgba(255,255,255,0.06)", borderColor: "rgba(255,255,255,0.15)", color: "#fff" }}
                    />
                  </div>
                </div>
              </>
            )}

            <div className="est-nav">
              <button className="btn btn-ghost" onClick={() => setStep(Math.max(0, step - 1))} disabled={step === 0} style={{ opacity: step === 0 ? 0.3 : 1 }}>
                ← Back
              </button>
              {step < EST_STEPS.length - 1 ? (
                <button className="btn btn-primary" onClick={() => setStep(step + 1)}>
                  Continue <Icon.arrow />
                </button>
              ) : (
                <button className="btn btn-primary" onClick={() => alert("This is an indicative range. In production this would route to a consultant + pre-fill WhatsApp.")}>
                  Send to a consultant <Icon.arrow />
                </button>
              )}
            </div>
          </div>

          {/* RIGHT: live panel */}
          <aside className="est-panel">
            <div className="h-eyebrow">Indicative range, updating live</div>
            <h3>Your estimated UAE setup</h3>

            <div className="est-range">
              <div>
                <span className="currency">AED</span>
                <span className="from-to">{fmt(calc.lo)}</span>
                <span className="dash">—</span>
                <span className="from-to">{fmt(calc.hi)}</span>
              </div>
            </div>
            <div className="est-disclaimer">
              <strong>Indicative · not a quote.</strong> Government &amp; free-zone fees change. Bank deposits, NOC fees and activity-specific approvals can shift the final number. Confirmed by a Shuraa advisor.
            </div>

            <div className="est-breakdown">
              <div className="row-item">
                <span className="k">Jurisdiction</span>
                <span className="v">{(JUR_OPTIONS.find(o => o.key === jur) || {}).label}</span>
              </div>
              <div className="row-item">
                <span className="k">Activity</span>
                <span className="v">{(ACT_OPTIONS.find(o => o.key === act) || {}).label}</span>
              </div>
              <div className="row-item">
                <span className="k">Visas</span>
                <span className="v">{visas} {visas === 1 ? "visa" : "visas"}</span>
              </div>
              <div className="row-item">
                <span className="k">Office</span>
                <span className="v">{(OFFICE_OPTIONS.find(o => o.key === office) || {}).label}</span>
              </div>
            </div>

            <div className="est-handoff">
              <a className="btn btn-whatsapp" href={`https://wa.me/971507775554?text=${encodeURIComponent("Hi Shuraa, I'd like to confirm my estimated UAE setup range of AED " + fmt(calc.lo) + "–" + fmt(calc.hi) + ".")}`}>
                <Icon.whatsapp /> Continue on WhatsApp
              </a>
              <div className="or">OR</div>
              <a className="btn btn-outline" href="#consult" style={{ width: "100%", justifyContent: "center" }}>
                Book a free consultation <Icon.arrow />
              </a>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Founder block
// ============================================================
function FounderBlock() {
  return (
    <section className="section section-sand" id="about">
      <div className="container">
        <div className="founder">
          <div className="founder-portrait">
            <img src="media/leader-chairman-saeed-hires.webp" alt="Saeed Khalifa Mohammed Al Fuqaei, Founder & Chairman, Shuraa Group" />
            <div className="stamp">Founder &amp; Chairman</div>
            <div className="caption">
              <strong>Saeed Khalifa Mohammed Al Fuqaei</strong>
              Emirati entrepreneur · Founded Shuraa, 23 September 2001
            </div>
          </div>
          <div>
            <div className="h-eyebrow">A 25-year UAE story</div>
            <blockquote>
              "We started with a typing centre in Dubai in 1997 and built Shuraa, brick by brick, into the firm we needed when we first arrived ourselves."
            </blockquote>
            <p className="lead" style={{ marginTop: 20 }}>
              Under <strong>Managing Partner Shahid Rather</strong> (appointed 2020), Shuraa opened regional hubs in London and Amsterdam, and grew the team to ~300 across 10+ offices. Today it serves founders, SMEs and multinationals across the GCC, India, Europe, the UK, and Russia / China-facing markets.
            </p>
            <div className="timeline">
              <div>
                <div className="y">1997</div>
                <div className="t">Dubai typing centre</div>
                <div className="d">The seed of the company.</div>
              </div>
              <div>
                <div className="y">2001 · 23 Sep</div>
                <div className="t">Shuraa founded</div>
                <div className="d">Shuraa Management &amp; Consultancy incorporated in Dubai.</div>
              </div>
              <div>
                <div className="y">2020</div>
                <div className="t">Shahid Rather, MP</div>
                <div className="d">London + Amsterdam hubs follow.</div>
              </div>
              <div>
                <div className="y">2023 · 26 Dec</div>
                <div className="t">4,000<sup>th</sup> Dubai company</div>
                <div className="d">Milestone reported by Gulf News.</div>
              </div>
            </div>
            <div style={{ marginTop: 32, fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)", letterSpacing: "0.04em" }}>
              Marketing claims of "100,000+ clients served" are Shuraa's own figures, not independently audited. Conservative anchors used here are externally citable.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Global Offices
// ============================================================
const OFFICES = [
  {
    flag: "🇦🇪", city: "Dubai", country: "United Arab Emirates",
    img: "media/location-dubai.webp",
    addr: "5th Floor, Aspin Commercial Tower, near Financial Centre Metro, Sheikh Zayed Road, Dubai",
    phone: "+971 50 777 5554", tollFree: "800 748722", email: "info@shuraa.com",
    hq: true, badge: "UAE HQ",
  },
  {
    flag: "🇬🇧", city: "London", country: "United Kingdom",
    img: "media/location-london.webp",
    addr: "Chiswick · shuraa.co.uk",
    phone: "+44 7538 205604", email: "uk@shuraa.com",
    division: "Shuraa UK division — verify before publishing.",
  },
  {
    flag: "🇳🇱", city: "Amsterdam", country: "Netherlands",
    img: "media/location-mumbai.webp",
    addr: "Regional hub · address TBC",
    division: "Confirm office address at build time.",
  },
  {
    flag: "🇮🇳", city: "New Delhi", country: "India",
    img: "media/location-delhi.webp",
    addr: "shuraa.in · separate division",
    division: "Shuraa India division — distinct contact.",
  },
];

function GlobalOffices() {
  return (
    <section className="section" id="global-offices">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="h-eyebrow">Where to find us</div>
            <h2>UAE-HQ &amp; three global regional hubs.</h2>
          </div>
          <p className="lead">
            The UAE entity (<code style={{ fontFamily: "var(--mono)", fontSize: 13, background: "var(--mist)", padding: "2px 8px", borderRadius: 4 }}>shuraa.com</code>) is the primary point of contact. UK, NL and India divisions are <strong>distinct legal entities</strong> — we don't merge their contacts.
          </p>
        </div>

        <div className="offices-grid">
          {OFFICES.map((o, i) => (
            <div key={o.city} className={"office-card" + (o.hq ? " hq" : "")}>
              <div className="img">
                <img src={o.img} alt={o.city} />
                {o.badge && <div className="badge">{o.badge}</div>}
              </div>
              <div className="body">
                <div className="h-eyebrow">{o.flag} {o.country}</div>
                <h3>{o.city}</h3>
                <address>{o.addr}</address>
                <div className="contact">
                  {o.tollFree && <div><span className="lbl">Toll-free</span> {o.tollFree}</div>}
                  {o.phone && <div><span className="lbl">{o.tollFree ? "WhatsApp" : "Phone"}</span> {o.phone}</div>}
                  {o.email && <div><span className="lbl">Email</span> {o.email}</div>}
                  {o.division && !o.email && <div style={{ fontStyle: "italic", color: "var(--muted)" }}>{o.division}</div>}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Consultation form
// ============================================================
function ConsultationForm() {
  const [submitted, setSubmitted] = useState(false);
  return (
    <section className="section section-sand" id="consult">
      <div className="container">
        <div className="consult-grid">
          <div className="consult-left">
            <div className="h-eyebrow">Talk to a Shuraa advisor</div>
            <h2>Free consultation. One call, the whole journey mapped.</h2>
            <p className="lead" style={{ marginTop: 18 }}>
              In 20–30 minutes, an advisor will recommend the right jurisdiction, an indicative cost range, and the exact sequence of steps from formation to bank account.
            </p>
            <div className="channels">
              <a className="consult-channel wa" href="https://wa.me/971507775554?text=Hi%20Shuraa%2C%20I%27d%20like%20a%20free%20consultation.">
                <div className="ico"><Icon.whatsapp /></div>
                <div>
                  <div className="label">WhatsApp · monitored</div>
                  <div className="value">+971 50 777 5554</div>
                </div>
              </a>
              <a className="consult-channel" href="tel:800748722">
                <div className="ico"><Icon.phone /></div>
                <div>
                  <div className="label">UAE toll-free</div>
                  <div className="value">800 748722</div>
                </div>
              </a>
              <a className="consult-channel" href="mailto:info@shuraa.com">
                <div className="ico"><Icon.mail /></div>
                <div>
                  <div className="label">Email</div>
                  <div className="value">info@shuraa.com</div>
                </div>
              </a>
              <a className="consult-channel" href="#global-offices">
                <div className="ico"><Icon.pin /></div>
                <div>
                  <div className="label">UAE HQ · in-person</div>
                  <div className="value">Aspin Commercial Tower, SZR</div>
                </div>
              </a>
            </div>
          </div>

          <form className="consult-form" onSubmit={e => { e.preventDefault(); setSubmitted(true); }}>
            {!submitted ? (
              <>
                <h3>Request a free consultation</h3>
                <p className="sub">No obligation. An advisor responds within one business day.</p>
                <div className="field-row">
                  <div className="field">
                    <label>Full name</label>
                    <input type="text" required placeholder="Maria Petrova" />
                  </div>
                  <div className="field">
                    <label>Nationality</label>
                    <input type="text" required placeholder="Russian" />
                  </div>
                </div>
                <div className="field-row">
                  <div className="field">
                    <label>Email</label>
                    <input type="email" required placeholder="maria@example.com" />
                  </div>
                  <div className="field">
                    <label>WhatsApp (with country code)</label>
                    <input type="tel" required placeholder="+971…" />
                  </div>
                </div>
                <div className="field">
                  <label>Service interest</label>
                  <select required defaultValue="">
                    <option value="" disabled>Choose one…</option>
                    {SERVICES.map(s => <option key={s.n} value={s.title}>{s.title}</option>)}
                    <option value="not-sure">Not sure yet — recommend at consultation</option>
                  </select>
                </div>
                <div className="field">
                  <label>What are you setting up? (optional)</label>
                  <textarea placeholder="e.g. e-commerce trading company in IFZA, 2 visas, plan to open business bank account…"></textarea>
                </div>
                <div className="consent">
                  By submitting you agree Shuraa may contact you about your enquiry via the channels above. We never share your details and there is no automatic marketing list.
                </div>
                <button type="submit" className="btn btn-primary">
                  Request consultation <Icon.arrow />
                </button>
              </>
            ) : (
              <div style={{ textAlign: "center", padding: "40px 0" }}>
                <div style={{ width: 56, height: 56, margin: "0 auto 20px", background: "rgba(37, 211, 102, 0.12)", color: "#1FB857", borderRadius: "50%", display: "grid", placeItems: "center" }}>
                  <Icon.check />
                </div>
                <h3>Thanks — we've got it.</h3>
                <p className="sub">A Shuraa advisor will reach out within one business day. For anything urgent, WhatsApp is the fastest channel.</p>
                <a className="btn btn-whatsapp" style={{ marginTop: 16 }} href="https://wa.me/971507775554">
                  <Icon.whatsapp /> Open WhatsApp now
                </a>
              </div>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Footer
// ============================================================
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-logo">
              <img src="media/logo-shuraa-white.svg" alt="Shuraa Business Setup" />
            </div>
            <p className="footer-bio">
              Shuraa Business Setup — the UAE arm of the Shuraa Group (Shuraa Management &amp; Consultancy). Helping founders set up in Dubai &amp; the UAE since 23 September 2001.
            </p>
            <div style={{ marginTop: 18, fontFamily: "var(--mono)", fontSize: 11, color: "rgba(255,255,255,0.45)", letterSpacing: "0.06em" }}>
              UAE entity primary · UK / NL / India divisions distinct
            </div>
          </div>
          <div>
            <h4>Services</h4>
            <ul>
              <li><a href="#services">Company formation</a></li>
              <li><a href="#services">Trade licensing</a></li>
              <li><a href="#services">Visas &amp; PRO</a></li>
              <li><a href="#services">Corporate banking</a></li>
              <li><a href="#services">Accounting &amp; tax</a></li>
              <li><a href="#services">Golden Visa</a></li>
            </ul>
          </div>
          <div>
            <h4>Jurisdictions</h4>
            <ul>
              <li><a href="#jurisdictions">Mainland</a></li>
              <li><a href="#jurisdictions">Free zones (IFZA, DMCC…)</a></li>
              <li><a href="#jurisdictions">Offshore (JAFZA, RAK)</a></li>
              <li><a href="#estimator">Cost estimator</a></li>
              <li><a href="#consult">Free consultation</a></li>
            </ul>
          </div>
          <div>
            <h4>Group</h4>
            <ul>
              <li><a href="#">Shuraa Tax</a></li>
              <li><a href="#">Shuraa Education</a></li>
              <li><a href="#">Shuraa Medical</a></li>
              <li><a href="#">Shuraa UK · shuraa.co.uk</a></li>
              <li><a href="#">Shuraa India · shuraa.in</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bot">
          <div>© 2026 Shuraa Management &amp; Consultancy · Mock design, not an official communication</div>
          <div className="footer-socials" aria-label="Social channels">
            <a href="#" aria-label="LinkedIn">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM8 17H5.5v-7H8v7zM6.75 8.75A1.5 1.5 0 1 1 8.25 7.25a1.5 1.5 0 0 1-1.5 1.5zM18.5 17H16v-3.5c0-.83-.67-1.5-1.5-1.5S13 12.67 13 13.5V17h-2.5v-7H13v1.06A2.99 2.99 0 0 1 15.5 10c1.93 0 3 1.57 3 3.5V17z"/></svg>
            </a>
            <a href="#" aria-label="Instagram">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="2.5" y="2.5" width="19" height="19" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.8" fill="currentColor"/></svg>
            </a>
            <a href="#" aria-label="YouTube">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M21.5 7.5s-.2-1.4-.8-2c-.7-.8-1.5-.8-1.9-.8C16 4.4 12 4.4 12 4.4s-4 0-6.8.3c-.4 0-1.2 0-1.9.8-.6.6-.8 2-.8 2S2.3 9.1 2.3 10.7v1.6c0 1.6.2 3.2.2 3.2s.2 1.4.8 2c.7.8 1.7.8 2.1.9 1.5.1 6.6.2 6.6.2s4 0 6.8-.3c.4-.1 1.2-.1 1.9-.9.6-.6.8-2 .8-2s.2-1.6.2-3.2v-1.6c0-1.6-.2-3.1-.2-3.1zM9.7 14.1V8.6l5.2 2.8-5.2 2.7z"/></svg>
            </a>
            <a href="#" aria-label="X">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.16 17.52h1.833L7.084 4.126H5.117z"/></svg>
            </a>
            <a href="#" aria-label="Facebook">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.88 3.77-3.88 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.78l-.44 2.89h-2.34v6.99A10 10 0 0 0 22 12z"/></svg>
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ============================================================
// Fab — sticky WhatsApp
// ============================================================
function Fab() {
  return (
    <div className="fab">
      <a className="btn btn-whatsapp btn-sm" href="https://wa.me/971507775554?text=Hi%20Shuraa%2C%20I%27d%20like%20a%20free%20consultation%20about%20...">
        <Icon.whatsapp /> WhatsApp
      </a>
    </div>
  );
}

Object.assign(window, {
  CostEstimator, FounderBlock, GlobalOffices, ConsultationForm, Footer, Fab,
  EST_STEPS, JUR_OPTIONS, ACT_OPTIONS, OFFICE_OPTIONS, OFFICES,
});