/* ===== shared.jsx — content, icons, nav, footer, locale ===== */

// Content data — single source of truth so we don't repeat across screens.
const DATA = {
  services: [
    { id: "company-formation", icon: "building", label: "Company Formation", labelAr: "تأسيس الشركات",
      blurb: "Licensing across 25+ mainland, free-zone & offshore jurisdictions.",
      blurbAr: "ترخيص في أكثر من 25 منطقة برية وحرة وأوفشور.",
      includes: ["Activity & legal structure", "Trade name reservation", "Initial approval & MoA", "Licence issuance", "Establishment card"] },
    { id: "visas-pro",        icon: "id",       label: "Visas & PRO",         labelAr: "التأشيرات والعلاقات الحكومية",
      blurb: "Investor, partner, family & employee visas with PRO support.",
      blurbAr: "تأشيرات المستثمر والشريك والعائلة والموظفين.",
      includes: ["Investor / partner visas", "Family sponsorship", "Employee visas", "PRO & document clearance", "Renewals & amendments"] },
    { id: "tax-accounting",   icon: "ledger",   label: "Tax & Accounting",    labelAr: "الضرائب والمحاسبة",
      blurb: "VAT, corporate tax, bookkeeping & audit-ready accounting.",
      blurbAr: "ضريبة القيمة المضافة والضريبة على الشركات.",
      includes: ["Corporate tax registration", "VAT filing & advisory", "Bookkeeping", "Audit support", "Transfer pricing"] },
    { id: "banking",          icon: "bank",     label: "Corporate Banking",   labelAr: "الخدمات المصرفية للشركات",
      blurb: "Bank account assistance with leading UAE & international banks.",
      blurbAr: "فتح حسابات بنكية مع بنوك إماراتية ودولية.",
      includes: ["KYC pack preparation", "Bank shortlisting", "Application & interview", "Cards & online banking", "Multi-currency setup"] },
    { id: "legal",            icon: "scale",    label: "Legal",               labelAr: "القانوني",
      blurb: "Contracts, corporate restructuring, compliance & advisory.",
      blurbAr: "العقود وإعادة الهيكلة والامتثال.",
      includes: ["Shareholder agreements", "Corporate restructuring", "Regulatory compliance", "Contract drafting"] },
    { id: "hr-recruitment",   icon: "people",   label: "HR & Recruitment",    labelAr: "الموارد البشرية والتوظيف",
      blurb: "Talent search, contracts, payroll & WPS compliance.",
      blurbAr: "البحث عن المواهب والرواتب والامتثال.",
      includes: ["Executive search", "Employment contracts", "Payroll & WPS", "Policies & handbooks"] },
    { id: "business-hub",     icon: "desk",     label: "Business Hub",        labelAr: "مساحات العمل",
      blurb: "Co-working, flexi-desks, private offices & meeting rooms.",
      blurbAr: "مساحات عمل مشتركة ومكاتب خاصة.",
      includes: ["Flexi-desks", "Dedicated offices", "Meeting rooms", "Mail & reception", "Business address"] },
    { id: "concierge",        icon: "key",      label: "Concierge",           labelAr: "الكونسيرج",
      blurb: "Relocation, schooling, housing & lifestyle support.",
      blurbAr: "خدمات الانتقال والتعليم والإقامة.",
      includes: ["Relocation", "Schooling & GEMS", "Housing & utilities", "Driving licence transfer"] },
    { id: "foundations",      icon: "shield",   label: "Foundations & Trusts", labelAr: "المؤسسات والصناديق",
      blurb: "DIFC/ADGM foundations, family offices, succession structures.",
      blurbAr: "المؤسسات والمكاتب العائلية." },
    { id: "spvs",             icon: "stack",    label: "SPVs & Holdings",     labelAr: "الشركات القابضة",
      blurb: "Holding structures, SPVs and corporate vehicles.",
      blurbAr: "هياكل قابضة وشركات ذات أغراض خاصة." },
    { id: "ip",               icon: "spark",    label: "Intellectual Property", labelAr: "الملكية الفكرية",
      blurb: "Trademark registration, copyright, IP advisory.",
      blurbAr: "تسجيل العلامات التجارية وحقوق النشر." },
    { id: "media",            icon: "wave",     label: "Media & Marketing",   labelAr: "الإعلام والتسويق",
      blurb: "Brand, digital, content & launch marketing for new ventures.",
      blurbAr: "التسويق الرقمي وإطلاق العلامات التجارية." },
  ],
  jurisdictions: [
    { id: "dubai-mainland", name: "Dubai Mainland", group: "Mainland", suited: "Trade across the UAE",
      benefit: "Trade anywhere in the UAE, no agency restrictions, full government scope.", icon: "🇦🇪" },
    { id: "dmcc",           name: "DMCC",           group: "Free Zone", suited: "Commodities, crypto, services",
      benefit: "World's #1 free zone — JLT precinct, 100+ activity options.", icon: "◆" },
    { id: "difc",           name: "DIFC",           group: "Free Zone", suited: "Financial services, foundations",
      benefit: "Common-law jurisdiction, independent regulator (DFSA), foundations regime.", icon: "✦" },
    { id: "jafza",          name: "JAFZA",          group: "Free Zone", suited: "Logistics, trading, manufacturing",
      benefit: "Jebel Ali port adjacency, large warehousing & industrial plots.", icon: "▲" },
    { id: "meydan",         name: "Meydan",         group: "Free Zone", suited: "Holding, consulting, digital",
      benefit: "Cost-efficient virtual office model — Dubai address, flat fees.", icon: "■" },
    { id: "dubai-south",    name: "Dubai South",    group: "Free Zone", suited: "Aviation, logistics, e-commerce",
      benefit: "Al-Maktoum airport precinct — designed for logistics-heavy operators.", icon: "✈" },
    { id: "ifza-d3",        name: "Dubai D3 / IFZA", group: "Free Zone", suited: "Design, creative, media",
      benefit: "Creative-cluster community in Dubai Design District.", icon: "✎" },
    { id: "adgm",           name: "ADGM",           group: "Free Zone", suited: "Asset management, fintech",
      benefit: "Common-law jurisdiction in Abu Dhabi — FSRA-regulated.", icon: "✧" },
    { id: "rakez",          name: "RAKEZ",          group: "Free Zone", suited: "Industrial, education, trading",
      benefit: "Ras Al Khaimah multi-sector zone — cost-efficient industrial setup.", icon: "▶" },
    { id: "rak-icc",        name: "RAK ICC",        group: "Offshore",  suited: "Holding & asset structuring",
      benefit: "International business companies for holding & succession.", icon: "○" },
    { id: "bvi",            name: "BVI",            group: "Offshore",  suited: "International holding",
      benefit: "British Virgin Islands IBC for cross-border structures.", icon: "○" },
    { id: "ksa",            name: "Saudi Arabia",   group: "Regional",  suited: "GCC expansion",
      benefit: "MISA licence, RHQ programme & Vision 2030 incentives.", icon: "🇸🇦" },
    { id: "qatar",          name: "Qatar Free Zone", group: "Regional", suited: "Energy, logistics, tech",
      benefit: "QFZA — 100% foreign ownership, 20-year tax holiday.", icon: "🇶🇦" },
  ],
  leaders: [
    { name: "Lorenzo Jooris", role: "Group CEO",        img: "media/leader-lorenzo.webp" },
    { name: "Wael",           role: "Head of Sales",    img: "media/leader-wael.webp" },
    { name: "Rebecca",        role: "Strategic Partnerships", img: "media/leader-rebecca.webp" },
    { name: "Neha",           role: "Tax & Accounting Lead", img: "media/leader-neha.webp" },
    { name: "Alistair",       role: "Banking Advisory", img: "media/leader-alistair.webp" },
    { name: "Michal",         role: "Legal Counsel",    img: "media/leader-michal.webp" },
  ],
  guides: [
    { tag: "Guide · 12 min",  title: "Mainland vs Free Zone vs Offshore — choosing the right UAE jurisdiction", img: "media/dubai-02.webp" },
    { tag: "Guide · 8 min",   title: "Every trade licence in Dubai, explained in plain English", img: "media/dubai-01.webp" },
    { tag: "Playbook · 10 min", title: "Cloud-kitchen setup in Dubai — licence, food authority & cost", img: "media/dubai-03.webp" },
    { tag: "Playbook · 7 min", title: "How to start a dropshipping business in Dubai", img: "media/event-meetup.webp" },
  ],
};

// Plain SVG icon set — thin-stroke, line-style, monochrome.
function Icon({ name, size = 22, stroke = 1.6 }) {
  const sp = { width: size, height: size, viewBox: "0 0 24 24", fill: "none",
               stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "building": return (<svg {...sp}><path d="M4 21V6l8-3 8 3v15"/><path d="M9 21v-7h6v7"/><path d="M8 9h.01M12 9h.01M16 9h.01M8 13h.01M16 13h.01"/></svg>);
    case "id":       return (<svg {...sp}><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="12" r="2.5"/><path d="M14 10h5M14 14h5M5.5 17c.7-1.5 2-2.3 3.5-2.3s2.8.8 3.5 2.3"/></svg>);
    case "ledger":   return (<svg {...sp}><path d="M5 4h12a2 2 0 0 1 2 2v14H7a2 2 0 0 1-2-2V4z"/><path d="M5 4v14M9 8h6M9 12h6M9 16h3"/></svg>);
    case "bank":     return (<svg {...sp}><path d="M3 10 12 4l9 6"/><path d="M5 10v8M9 10v8M15 10v8M19 10v8"/><path d="M3 20h18"/></svg>);
    case "scale":    return (<svg {...sp}><path d="M12 3v18M4 7h16M6 7l-2 6a3 3 0 0 0 6 0L8 7M18 7l-2 6a3 3 0 0 0 6 0l-2-6"/></svg>);
    case "people":   return (<svg {...sp}><circle cx="9" cy="8" r="3"/><circle cx="17" cy="9" r="2.2"/><path d="M3 19c.7-3 3-5 6-5s5.3 2 6 5M15 19c.4-2 1.8-3.3 4-3.5"/></svg>);
    case "desk":     return (<svg {...sp}><path d="M3 8h18v3H3z"/><path d="M5 11v9M19 11v9M9 14h6"/></svg>);
    case "key":      return (<svg {...sp}><circle cx="8" cy="14" r="4"/><path d="M11 13l9-9M16 8l3 3"/></svg>);
    case "shield":   return (<svg {...sp}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z"/><path d="M9 12l2 2 4-4"/></svg>);
    case "stack":    return (<svg {...sp}><path d="M12 3l9 5-9 5-9-5 9-5z"/><path d="M3 13l9 5 9-5M3 18l9 5 9-5"/></svg>);
    case "spark":    return (<svg {...sp}><path d="M12 3v6M12 15v6M3 12h6M15 12h6M5.6 5.6l4.2 4.2M14.2 14.2l4.2 4.2M5.6 18.4l4.2-4.2M14.2 9.8l4.2-4.2"/></svg>);
    case "wave":     return (<svg {...sp}><path d="M3 12c2 0 2-4 4-4s2 8 4 8 2-8 4-8 2 4 4 4"/></svg>);
    case "arrow":    return (<svg {...sp}><path d="M5 12h14M13 6l6 6-6 6"/></svg>);
    case "check":    return (<svg {...sp}><path d="M5 12l4 4 10-10"/></svg>);
    case "chevron":  return (<svg {...sp}><path d="M9 6l6 6-6 6"/></svg>);
    case "phone":    return (<svg {...sp}><path d="M5 4h3l2 5-2 1a11 11 0 0 0 6 6l1-2 5 2v3a2 2 0 0 1-2 2C9 21 3 15 3 6a2 2 0 0 1 2-2z"/></svg>);
    case "wa":       return (<svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor"><path d="M20.5 3.5A10.4 10.4 0 0 0 3.6 16.1L2 22l6.1-1.6A10.4 10.4 0 1 0 20.5 3.5zM12 20.2a8.1 8.1 0 0 1-4.1-1.1l-.3-.2-3.6.9.96-3.5-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.5.1-.2.2-.6.8-.7.9-.1.2-.3.2-.5.1-.2-.1-1-.4-2-1.2-.7-.6-1.2-1.4-1.4-1.6-.1-.2 0-.4.1-.5l.4-.4c.1-.1.2-.3.3-.4.1-.2 0-.3 0-.5l-.7-1.7c-.2-.4-.4-.4-.5-.4h-.5c-.2 0-.4 0-.7.3-.2.3-.9.9-.9 2.2 0 1.3.9 2.6 1 2.7.1.2 1.9 2.9 4.6 4 .6.3 1.1.5 1.5.6.6.2 1.2.2 1.6.1.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2-.1-.1-.3-.2-.5-.3z"/></svg>);
    case "globe":    return (<svg {...sp}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>);
    case "pin":      return (<svg {...sp}><path d="M12 21s-7-7.5-7-12a7 7 0 0 1 14 0c0 4.5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></svg>);
    case "mail":     return (<svg {...sp}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 7 9-7"/></svg>);
    default: return null;
  }
}

// i18n strings — light AR coverage for nav + key CTAs + hero
const STR = {
  en: {
    nav: { services: "Services", jurisdictions: "Jurisdictions", calc: "Cost Calculator", resources: "Resources", about: "About", contact: "Contact" },
    cta: { book: "Book a free consultation", estimate: "Get a cost estimate", whatsapp: "WhatsApp", call: "Call", explore: "Explore services", compare: "Compare jurisdictions" },
    trust: ["Since 2010", "45,000+ clients served", "25+ UAE jurisdictions", "Part of Encor Group (Nexus Point-backed)", "DIFC Registered Corporate Service Provider"],
    hero: {
      eyebrow: "Business setup · UAE · KSA · Qatar",
      title: ["Build your company in the UAE — ", "without the guesswork."],
      sub: "Since 2010, our advisors have set up 45,000+ businesses across 25+ mainland, free-zone and offshore jurisdictions. Get a clear, indicative cost in minutes — and an advisor on a free call the same day.",
    },
    indicative: "Indicative only · government fees change — confirm with an advisor.",
    footer: { tag: "DIFC Registered Corporate Service Provider · Part of Encor Group" },
  },
  ar: {
    nav: { services: "الخدمات", jurisdictions: "المناطق", calc: "حاسبة التكلفة", resources: "المصادر", about: "من نحن", contact: "اتصل بنا" },
    cta: { book: "احجز استشارة مجانية", estimate: "احصل على تقدير التكلفة", whatsapp: "واتساب", call: "اتصل", explore: "استكشف الخدمات", compare: "قارن المناطق" },
    trust: ["منذ 2010", "أكثر من 45,000 عميل", "أكثر من 25 منطقة", "جزء من مجموعة Encor", "مزود خدمات شركات مسجل في DIFC"],
    hero: {
      eyebrow: "تأسيس الأعمال · الإمارات · السعودية · قطر",
      title: ["أسس شركتك في الإمارات — ", "بثقة ووضوح كامل."],
      sub: "منذ 2010، ساعد مستشارونا أكثر من 45,000 عميل على التأسيس في أكثر من 25 منطقة برية وحرة وأوفشور. احصل على تقدير تكلفة واضح خلال دقائق ومكالمة مجانية مع مستشار في نفس اليوم.",
    },
    indicative: "تقديري فقط · الرسوم الحكومية تتغير — يرجى التأكيد مع مستشار.",
    footer: { tag: "مزود خدمات شركات مسجل في DIFC · جزء من مجموعة Encor" },
  },
};

// WhatsApp pre-filled link helper
const WA_NUMBER = "971552037894";
function waLink(intent = "I'd like to set up a business in the UAE") {
  return `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent("Hi Creative Zone, " + intent + ".")}`;
}

// ----- Logo (inline SVG so it's crisp + color-friendly) -----
function Logo({ height = 22 }) {
  return (
    <img src="media/logo-creative-zone.svg" alt="Creative Zone" style={{ height, width: "auto", display: "block" }} />
  );
}

// ----- Nav -----
function Nav({ route, setRoute, locale, setLocale }) {
  const s = STR[locale];
  const link = (id, label) => (
    <a
      href={"#" + id}
      className={"nav-link " + (route === id ? "active" : "")}
      onClick={(e) => { e.preventDefault(); setRoute(id); window.scrollTo({ top: 0, behavior: "instant" }); }}
    >{label}</a>
  );
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#home" className="nav-logo" onClick={(e)=>{e.preventDefault();setRoute("home");window.scrollTo({top:0,behavior:"instant"});}}>
          <Logo />
        </a>
        <div className="nav-links">
          {link("services", s.nav.services)}
          {link("jurisdictions", s.nav.jurisdictions)}
          {link("calculator", s.nav.calc)}
          {link("resources", s.nav.resources)}
          {link("about", s.nav.about)}
          {link("contact", s.nav.contact)}
        </div>
        <div className="nav-cta">
          <div className="lang-toggle" title="Language">
            <button className={locale === "en" ? "on" : ""} onClick={() => setLocale("en")}>EN</button>
            <button className={locale === "ar" ? "on" : ""} onClick={() => setLocale("ar")}>ع</button>
          </div>
          <a className="btn btn-sm btn-ghost" href="tel:+97145677333" title="+971 4 567 7333">
            <Icon name="phone" size={14}/> 800 5423673
          </a>
          <button className="btn btn-sm btn-primary" onClick={()=>{setRoute("calculator");window.scrollTo({top:0});}}>
            {s.cta.book}
          </button>
        </div>
      </div>
    </nav>
  );
}

// ----- Footer -----
function Footer({ locale }) {
  const s = STR[locale];
  return (
    <footer className="footer">
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr 1fr", gap: 40 }}>
        <div>
          <div style={{ filter: "brightness(0) invert(1)", opacity: .95, marginBottom: 18 }}>
            <Logo height={26}/>
          </div>
          <p style={{ fontSize: 13.5, color: "#9CABC3", maxWidth: 280, lineHeight: 1.6 }}>
            {s.footer.tag}.
          </p>
          <div style={{ display: "flex", gap: 10, marginTop: 22 }}>
            {["FB", "IG", "in", "YT"].map(x => (
              <a key={x} href="#" style={{
                width: 34, height: 34, borderRadius: "50%",
                background: "rgba(255,255,255,.08)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                fontSize: 11, fontWeight: 600, color: "#fff",
              }}>{x}</a>
            ))}
          </div>
        </div>
        <div>
          <h4>Company Formation</h4>
          {["Dubai Mainland", "DMCC", "DIFC", "JAFZA", "Meydan", "ADGM"].map(x => <a key={x} href="#">{x}</a>)}
          <div style={{height:1}}></div>
        </div>
        <div>
          <h4>Services</h4>
          {["Visas & PRO", "Tax & Accounting", "Corporate Banking", "Legal", "HR & Recruitment", "Business Hub"].map(x => <a key={x} href="#">{x}</a>)}
        </div>
        <div>
          <h4>Markets</h4>
          {["United Arab Emirates", "Saudi Arabia", "Qatar", "BVI", "Mauritius", "RAK ICC"].map(x => <a key={x} href="#">{x}</a>)}
        </div>
        <div>
          <h4>Contact</h4>
          <a href="tel:+97145677333">+971 4 567 7333</a>
          <a href="tel:+9718005423673">800 5423673</a>
          <a href={waLink()}>WhatsApp +971 55 203 7894</a>
          <a href="#">Office 104–105, Emaar Square 4<br/>Downtown Dubai</a>
        </div>
      </div>
      <div className="wrap footer-bottom">
        <div>© 2026 Creative Zone by Encor. All rights reserved.</div>
        <div style={{ display: "flex", gap: 24 }}>
          <a href="#">Privacy</a><a href="#">Terms</a><a href="#">Cookies</a>
        </div>
      </div>
    </footer>
  );
}

// ----- WhatsApp FAB -----
function WhatsAppFab() {
  return (
    <a className="wa-fab" href={waLink()} target="_blank" rel="noopener">
      <Icon name="wa" size={20}/> Chat on WhatsApp
    </a>
  );
}

// ----- Section helpers -----
function SectionHead({ eyebrow, title, sub, align = "left" }) {
  return (
    <div style={{ textAlign: align, maxWidth: align === "center" ? 720 : 820, margin: align === "center" ? "0 auto 56px" : "0 0 56px" }}>
      {eyebrow ? <div className="eyebrow" style={{ marginBottom: 12 }}>{eyebrow}</div> : null}
      <h2>{title}</h2>
      {sub ? <p className="muted" style={{ marginTop: 14, fontSize: 17, maxWidth: 640, marginLeft: align === "center" ? "auto" : 0, marginRight: align === "center" ? "auto" : 0 }}>{sub}</p> : null}
    </div>
  );
}

// expose
Object.assign(window, { DATA, STR, Icon, Logo, Nav, Footer, WhatsAppFab, SectionHead, waLink });
