/* ============================================================
   Shuraa Business Setup — Components (Part 1)
   Navbar, Hero, TrustStrip, Services, JurisdictionComparison
   ============================================================ */

const { useState, useEffect, useMemo } = React;

// --- Tiny icon set (line, currentColor) ---
const Icon = {
  arrow: () => (
    <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="5" y1="12" x2="19" y2="12"></line>
      <polyline points="12 5 19 12 12 19"></polyline>
    </svg>
  ),
  whatsapp: () => (
    <svg width="16" height="16" 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.1-.2.3-.8.9-1 1.1-.2.2-.4.2-.6.1-.3-.1-1.2-.4-2.4-1.5-.9-.8-1.5-1.8-1.6-2.1-.2-.3 0-.4.1-.6.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5 0-.2 0-.4-.1-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.6-.5h-.5c-.2 0-.5.1-.7.4-.2.3-.9.9-.9 2.2 0 1.3.9 2.5 1.1 2.7.1.2 1.8 2.7 4.3 3.8 1.5.6 2.1.7 2.8.6.5-.1 1.4-.6 1.6-1.1.2-.6.2-1 .1-1.1 0-.1-.2-.2-.5-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.4c1.5.8 3.1 1.3 4.8 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
    </svg>
  ),
  chevron: () => (
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="6 9 12 15 18 9"></polyline>
    </svg>
  ),
  check: () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="20 6 9 17 4 12"></polyline>
    </svg>
  ),
  x: () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <line x1="18" y1="6" x2="6" y2="18"></line>
      <line x1="6" y1="6" x2="18" y2="18"></line>
    </svg>
  ),
  // Service icons
  building: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="17"/>
      <line x1="3" y1="21" x2="21" y2="21"/>
      <line x1="9" y1="9" x2="9" y2="9.01"/>
      <line x1="9" y1="13" x2="9" y2="13.01"/>
      <line x1="9" y1="17" x2="9" y2="17.01"/>
      <line x1="15" y1="9" x2="15" y2="9.01"/>
      <line x1="15" y1="13" x2="15" y2="13.01"/>
      <line x1="15" y1="17" x2="15" y2="17.01"/>
    </svg>
  ),
  license: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="14" rx="1"/>
      <line x1="3" y1="10" x2="21" y2="10"/>
      <line x1="7" y1="14" x2="11" y2="14"/>
      <line x1="14" y1="14" x2="17" y2="14"/>
    </svg>
  ),
  passport: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 4h13a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H4V4z"/>
      <circle cx="12" cy="11" r="2.5"/>
      <line x1="8" y1="17" x2="16" y2="17"/>
    </svg>
  ),
  bank: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <polygon points="3 10 12 4 21 10"/>
      <line x1="6" y1="10" x2="6" y2="18"/>
      <line x1="10" y1="10" x2="10" y2="18"/>
      <line x1="14" y1="10" x2="14" y2="18"/>
      <line x1="18" y1="10" x2="18" y2="18"/>
      <line x1="3" y1="20" x2="21" y2="20"/>
    </svg>
  ),
  calc: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="4" y="3" width="16" height="18" rx="1"/>
      <line x1="8" y1="7" x2="16" y2="7"/>
      <line x1="8" y1="12" x2="8" y2="12"/>
      <line x1="12" y1="12" x2="12" y2="12"/>
      <line x1="16" y1="12" x2="16" y2="12"/>
      <line x1="8" y1="16" x2="8" y2="16"/>
      <line x1="12" y1="16" x2="12" y2="16"/>
      <line x1="16" y1="16" x2="16" y2="16"/>
    </svg>
  ),
  legal: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <line x1="12" y1="3" x2="12" y2="21"/>
      <path d="M6 7h12"/>
      <path d="M5 12l-2 5h6l-2-5"/>
      <path d="M19 12l-2 5h6l-2-5"/>
    </svg>
  ),
  star: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <polygon points="12 2 15 9 22 9.5 17 14.5 18.5 22 12 18 5.5 22 7 14.5 2 9.5 9 9 12 2"/>
    </svg>
  ),
  phone: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
    </svg>
  ),
  mail: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="5" width="20" height="14" rx="1"/>
      <polyline points="2 7 12 14 22 7"/>
    </svg>
  ),
  pin: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
      <circle cx="12" cy="10" r="3"/>
    </svg>
  ),
};

// ============================================================
// Navbar
// ============================================================
function Navbar({ lang, onLang }) {
  const links = [
    "Services",
    "Jurisdictions",
    "Cost Estimator",
    "Resources",
    "Global Offices",
    "About",
  ];
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#" className="nav-logo" aria-label="Shuraa home">
          <img src="media/logo-shuraa-blue.svg" alt="Shuraa Business Setup" />
        </a>
        <div className="nav-links">
          {links.map(l => (
            <a key={l} className="nav-link" href={"#" + l.toLowerCase().replace(/\s/g, "-")}>
              {l} <Icon.chevron />
            </a>
          ))}
        </div>
        <div className="nav-cta">
          <div className="lang-switch" role="group" aria-label="Language">
            {["EN", "AR", "RU", "ZH", "HI"].map(L => (
              <button
                key={L}
                className={lang === L ? "active" : ""}
                onClick={() => onLang(L)}
                aria-pressed={lang === L}
              >{L}</button>
            ))}
          </div>
          <a className="btn btn-primary btn-sm" href="#consult">
            Free Consultation <Icon.arrow />
          </a>
        </div>
      </div>
    </nav>
  );
}

// ============================================================
// Hero
// ============================================================
function Hero({ layout = "split" }) {
  return (
    <header className="hero">
      <div className="hero-bg">
        <img src="media/hero-dubai-skyline.webp" alt="" aria-hidden="true" />
      </div>
      <div className="container hero-inner">
        <div>
          <div className="h-eyebrow">Since 2001 · UAE Business Setup</div>
          <h1>
            Set up your business in Dubai &amp; the UAE — <span className="accent">the whole journey,</span> one trusted partner.
          </h1>
          <p className="lead">
            Mainland, free zone or offshore — Shuraa handles formation, licensing, visas, PRO, corporate banking, accounting and Golden Visa end-to-end, so you deal with one firm, not five.
          </p>
          <div className="hero-ctas">
            <a className="btn btn-primary" href="#consult">Book a free consultation <Icon.arrow /></a>
            <a className="btn btn-outline" style={{ background: "rgba(255,255,255,0.04)", color: "#fff", boxShadow: "inset 0 0 0 1.5px rgba(255,255,255,0.25)" }} href="#estimator">Get a cost estimate</a>
          </div>
          <div className="hero-attrib">
            <span>UAE HQ · Sheikh Zayed Road, Dubai</span>
            <span className="dot"></span>
            <span>Toll-free 800 748722</span>
            <span className="dot"></span>
            <span>WhatsApp +971 50 777 5554</span>
          </div>
        </div>
        <aside className="hero-card">
          <div className="hero-card-badge">
            <img src="media/brand-25-years-dark.webp" alt="25 years of Shuraa, since 2001" />
          </div>
          <div className="hero-card-stats">
            <div>
              <div className="n">25<span style={{ fontSize: 18, color: "var(--red)", marginLeft: 2 }}>+</span></div>
              <div className="l">Years, since 2001</div>
            </div>
            <div>
              <div className="n">10<span style={{ fontSize: 18, color: "var(--red)", marginLeft: 2 }}>+</span></div>
              <div className="l">Global offices</div>
            </div>
            <div>
              <div className="n">4,000<span style={{ fontSize: 18, color: "var(--red)", marginLeft: 2 }}>th</span></div>
              <div className="l">Dubai co. — 2023*</div>
            </div>
            <div>
              <div className="n">7</div>
              <div className="l">End-to-end pillars</div>
            </div>
          </div>
          <div style={{ marginTop: 18, fontFamily: "var(--mono)", fontSize: 10.5, color: "rgba(255,255,255,0.45)", letterSpacing: "0.04em" }}>
            * Per Gulf News, 26 Dec 2023 — milestone attributed.
          </div>
        </aside>
      </div>
      <div className="hero-strip">
        <div className="hero-strip-track">
          {[
            ["Mainland", "Free Zone", "Offshore"],
            ["Trade Licensing", "Visa & PRO", "Golden Visa"],
            ["Corporate Banking", "VAT & Corporate Tax", "Legal & Compliance"],
            ["IFZA", "DMCC", "DAFZA", "DHCC", "DMC", "RAK ICC", "JAFZA"],
          ].flat().concat(
            ["Mainland", "Free Zone", "Offshore", "Trade Licensing", "Visa & PRO", "Golden Visa", "Corporate Banking", "VAT & Corporate Tax", "Legal & Compliance", "IFZA", "DMCC", "DAFZA", "DHCC", "DMC", "RAK ICC", "JAFZA"]
          ).map((item, i) => (
            <span key={i} className="hero-strip-item">
              <span className="red">◆</span> {item}
            </span>
          ))}
        </div>
      </div>
    </header>
  );
}

// ============================================================
// Trust strip
// ============================================================
function TrustStrip() {
  return (
    <section className="trust">
      <div className="container">
        <div className="trust-grid">
          <div className="trust-cell">
            <div className="n"><span className="since">Since</span>2001</div>
            <div className="l"><strong>Founded by</strong> Saeed Khalifa Mohammed Al Fuqaei, Emirati entrepreneur &amp; Chairman.</div>
            <div className="src">Verified · Wikipedia, /chairman-profile</div>
          </div>
          <div className="trust-cell">
            <div className="n">10<span style={{ color: "var(--red)" }}>+</span></div>
            <div className="l"><strong>Global offices</strong> across Dubai HQ, London, Amsterdam &amp; New Delhi.</div>
            <div className="src">UAE entity primary · divisions distinct</div>
          </div>
          <div className="trust-cell">
            <div className="n">4,000<span style={{ fontSize: 22, color: "var(--red)" }}>th</span></div>
            <div className="l"><strong>Dubai company</strong> established by Shuraa as of 26 December 2023.</div>
            <div className="src">Attributed · Gulf News, 2023</div>
          </div>
          <div className="trust-cell">
            <div className="n">7</div>
            <div className="l"><strong>End-to-end pillars</strong> — formation → licence → visa → bank → tax → legal → Golden Visa.</div>
            <div className="src">One partner · No referrals</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Service Journey Cards
// ============================================================
const SERVICES = [
  {
    n: "01",
    icon: Icon.building,
    title: "Company Formation",
    body: "Mainland, free zone or offshore — we pick the structure that fits your activity, ownership goals and tax position.",
    journey: ["Activity", "Jurisdiction", "Reservation", "Incorporation"],
    featured: true,
  },
  {
    n: "02",
    icon: Icon.license,
    title: "Trade Licensing",
    body: "Commercial, professional, industrial, consultancy, crypto, DHA — the long-tail of UAE activity-specific licences.",
    journey: ["Activity", "Approval", "Licence issued"],
  },
  {
    n: "03",
    icon: Icon.passport,
    title: "Visas & PRO",
    body: "Investor, employment, residence, family sponsorship, renewals and document attestation.",
    journey: ["Entry permit", "Medical", "Emirates ID", "Visa stamped"],
  },
  {
    n: "04",
    icon: Icon.bank,
    title: "Corporate Banking",
    body: "Resident and non-resident corporate accounts, bank-guarantee assistance, ready-for-bank documentation.",
    journey: ["Profile", "Bank match", "KYC", "Account opened"],
  },
  {
    n: "05",
    icon: Icon.calc,
    title: "Accounting & Tax",
    body: "VAT, corporate tax planning, bookkeeping and audit — delivered with sister firm Shuraa Tax.",
    journey: ["Registration", "Filing", "Audit"],
  },
  {
    n: "06",
    icon: Icon.legal,
    title: "Legal & Compliance",
    body: "Trademark registration, contracts and corporate-compliance retainer for ongoing peace of mind.",
    journey: ["Review", "Filing", "Ongoing"],
  },
  {
    n: "07",
    icon: Icon.star,
    title: "Golden Visa",
    body: "10-year UAE residency for investors, exceptional professionals, students and their families.",
    journey: ["Eligibility", "Documentation", "Application", "Granted"],
  },
];

function ServicesBlock() {
  return (
    <section className="section" id="services">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="h-eyebrow">The Shuraa method</div>
            <h2>Seven pillars. One partner. The whole UAE journey, handled.</h2>
          </div>
          <p className="lead">
            Most consultancies do one or two of these. We do all seven in-house — which means no hand-offs between accountants, lawyers, PROs and banks, and no gaps in your timeline.
          </p>
        </div>
        <div className="svc-grid">
          {SERVICES.map(s => {
            const IconC = s.icon;
            return (
              <div key={s.n} className={"svc-card" + (s.featured ? " featured" : "")}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                  <div className="icon"><IconC /></div>
                  <div className="num">{s.n} / 07</div>
                </div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
                <div className="journey">
                  {s.journey.map((j, i) => <span key={i}>{j}</span>)}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Jurisdiction Comparison
// ============================================================
const JURIS_COLS = [
  {
    key: "mainland",
    eyebrow: "DED · Onshore",
    title: "Mainland",
    blurb: "Trade with the local UAE market, win government contracts.",
  },
  {
    key: "freezone",
    eyebrow: "50+ Free Zones",
    title: "Free Zone",
    blurb: "100% ownership, profit repatriation, sector-specific zones.",
  },
  {
    key: "offshore",
    eyebrow: "JAFZA · RAK · Ajman",
    title: "Offshore",
    blurb: "Asset holding, international trading, no physical office.",
  },
];

const JURIS_ROWS = [
  {
    label: "Foreign ownership",
    mainland: { v: "100%", pill: "good", note: "Most activities (federal reform)" },
    freezone: { v: "100%", pill: "good", note: "All activities" },
    offshore: { v: "100%", pill: "good", note: "All activities" },
  },
  {
    label: "Local UAE market access",
    mainland: { v: "Full", pill: "good", note: "Trade anywhere in the UAE" },
    freezone: { v: "Limited", pill: "med", note: "Via local distributor / dual licence" },
    offshore: { v: "None", pill: "low", note: "International only" },
  },
  {
    label: "Government contracts",
    mainland: { v: "Eligible", pill: "good", note: "Public-sector tenders" },
    freezone: { v: "Restricted", pill: "med", note: "Case-by-case" },
    offshore: { v: "Not eligible", pill: "low", note: "" },
  },
  {
    label: "Corporate tax (UAE 9%)",
    mainland: { v: "Standard", pill: "med", note: "9% above AED 375k threshold" },
    freezone: { v: "0% qualifying", pill: "good", note: "On qualifying free-zone income" },
    offshore: { v: "0%", pill: "good", note: "If no UAE-sourced income" },
  },
  {
    label: "Visa eligibility",
    mainland: { v: "Activity-based", pill: "med", note: "Office space drives count" },
    freezone: { v: "Package-based", pill: "med", note: "1–6+ visas per package" },
    offshore: { v: "Not eligible", pill: "low", note: "Holding structure only" },
  },
  {
    label: "Physical office",
    mainland: { v: "Required", pill: "med", note: "Ejari tenancy contract" },
    freezone: { v: "Flexi-desk OK", pill: "good", note: "Shared / serviced options" },
    offshore: { v: "Not required", pill: "good", note: "" },
  },
  {
    label: "Indicative starting cost",
    mainland: { v: "AED 12–40k", pill: "med", note: "Activity-dependent ·\u00A0indicative" },
    freezone: { v: "from AED 17,900*", pill: "good", note: "IFZA campaign · indicative" },
    offshore: { v: "from AED 14k", pill: "good", note: "RAK ICC · indicative" },
  },
];

function JurisdictionComparison() {
  const [active, setActive] = useState("freezone");

  return (
    <section className="section juris" id="jurisdictions">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="h-eyebrow">Decide with confidence</div>
            <h2>Mainland, free zone or offshore — compare in 30 seconds.</h2>
          </div>
          <p className="lead">
            Qualitative, plain-English. Government fees change frequently; cost figures are <strong>indicative</strong> starting points, confirmed at consultation.
          </p>
        </div>

        <div className="juris-table">
          <div className="juris-cols">
            <div className="juris-header spec">
              <div className="h-eyebrow h-eyebrow-ink">Compare across</div>
              <h4>{JURIS_ROWS.length} key dimensions</h4>
            </div>
            {JURIS_COLS.map(c => (
              <button
                key={c.key}
                className={"juris-header" + (active === c.key ? " active" : "")}
                onClick={() => setActive(c.key)}
              >
                <div className="h-eyebrow">{c.eyebrow}</div>
                <h3>{c.title}</h3>
                <p>{c.blurb}</p>
              </button>
            ))}

            {JURIS_ROWS.map(row => (
              <React.Fragment key={row.label}>
                <div className="juris-cell label">{row.label}</div>
                {JURIS_COLS.map(c => {
                  const cell = row[c.key];
                  const isActive = active === c.key;
                  return (
                    <div key={c.key} className={"juris-cell" + (isActive ? " active" : "")}>
                      <span className={"juris-pill " + (cell.pill || "")}>{cell.v}</span>
                      {cell.note && <span style={{ fontSize: 12.5, color: "var(--muted)" }}>{cell.note}</span>}
                    </div>
                  );
                })}
              </React.Fragment>
            ))}
          </div>
          <div className="juris-foot">
            <div className="note">
              * Indicative · government &amp; free-zone fees change. Confirm at consultation.
            </div>
            <div style={{ display: "flex", gap: 10 }}>
              <a href="#estimator" className="btn btn-outline btn-sm">Estimate my cost <Icon.arrow /></a>
              <a href="#consult" className="btn btn-navy btn-sm">Talk to an advisor <Icon.arrow /></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Export to window for second-script consumption
Object.assign(window, {
  Icon, Navbar, Hero, TrustStrip, ServicesBlock, JurisdictionComparison,
  SERVICES, JURIS_COLS, JURIS_ROWS,
});
