@amwaljs/checkout-button 0.3.1 → 0.3.2

package/dist/collection/components/amwal-checkout-button/amwal-checkout-button.stories.js

@@ -1,31 +1,31 @@
 export default {
-    // this creates a 'Components' folder and a 'AmwalCheckoutButton' subfolder
-    title: 'Components/AmwalCheckoutButton',
-    parameters: {
-        notes: require('./readme.md')
+  // this creates a 'Components' folder and a 'AmwalCheckoutButton' subfolder
+  title: 'Components/AmwalCheckoutButton',
+  parameters: {
+    notes: require('./readme.md')
+  },
+  argTypes: {
+    darkMode: {
+      options: ['on', 'off', 'auto'],
+      control: { type: 'select' },
     },
-    argTypes: {
-        darkMode: {
-            options: ['on', 'off', 'auto'],
-            control: { type: 'select' },
-        },
-        locale: {
-            options: ['en', 'ar'],
-            control: { type: 'select' },
-        },
-        label: {
-            options: ['Quick Checkout', 'Pay with Apple Pay', 'Bank Installments'],
-            control: { type: 'select' },
-        },
-        countryCode: {
-            options: ['SA', 'AE'],
-            control: { type: 'select' },
-        },
-        timelineStyle: {
-            options: ['default', 'simple'],
-            control: { type: 'select' },
-        }
+    locale: {
+      options: ['en', 'ar'],
+      control: { type: 'select' },
     },
+    label: {
+      options: ['Quick Checkout', 'Pay with Apple Pay', 'Bank Installments'],
+      control: { type: 'select' },
+    },
+    countryCode: {
+      options: ['SA', 'AE'],
+      control: { type: 'select' },
+    },
+    timelineStyle: {
+      options: ['default', 'simple'],
+      control: { type: 'select' },
+    }
+  },
 };
 const Template = (args) => `<amwal-checkout-button
     merchant-id="${args.merchantId}"
@@ -114,66 +114,66 @@ const Template = (args) => `<amwal-checkout-button
    </script>`;
 // Common default args shared by both stories
 const commonArgs = {
-    merchantId: "sandbox-amwal-b87482f2-55da-486f-9ec5-e2ceb47a0333",
-    amount: 1099,
-    countryCode: "SA",
-    locale: "ar",
-    darkMode: "off",
-    initialPhoneNumber: "+18885555512",
-    initialFirstName: "John",
-    initialLastName: "Smith",
-    addressRequired: true,
-    initialAddress: {
-        street1: "1234 Laurel Street",
-        city: "Atlanta",
-        state: "GA",
-        postcode: "30303",
-        country: "US"
+  merchantId: "sandbox-amwal-b87482f2-55da-486f-9ec5-e2ceb47a0333",
+  amount: 1099,
+  countryCode: "SA",
+  locale: "ar",
+  darkMode: "off",
+  initialPhoneNumber: "+18885555512",
+  initialFirstName: "John",
+  initialLastName: "Smith",
+  addressRequired: true,
+  initialAddress: {
+    street1: "1234 Laurel Street",
+    city: "Atlanta",
+    state: "GA",
+    postcode: "30303",
+    country: "US"
+  },
+  emailRequired: true,
+  street2Required: false,
+  initialEmail: "John-Appleseed@mac.com",
+  addressHandShake: false,
+  sendExtraAddressFields: false,
+  showPaymentBrands: true,
+  disabled: false,
+  taxes: 0,
+  showDiscountRibbon: true,
+  discount: 25,
+  discountDescription: "No Discount",
+  fees: 0,
+  feesDescription: "Installation",
+  shippingMethods: [
+    {
+      id: "free-shipping",
+      label: "3 days free shipping",
+      price: 0,
     },
-    emailRequired: true,
-    street2Required: false,
-    initialEmail: "John-Appleseed@mac.com",
-    addressHandShake: false,
-    sendExtraAddressFields: false,
-    showPaymentBrands: true,
-    disabled: false,
-    taxes: 0,
-    showDiscountRibbon: true,
-    discount: 25,
-    discountDescription: "No Discount",
-    fees: 0,
-    feesDescription: "Installation",
-    shippingMethods: [
-        {
-            id: "free-shipping",
-            label: "3 days free shipping",
-            price: 0,
-        },
-        {
-            id: "express-shipping",
-            label: "1 day delivery",
-            price: 10,
-        }
-    ],
-    installmentOptionsUrl: "",
-    allowedAddressCountries: ["SA", "AE", "US", "ES", "EG"],
-    allowedAddressStates: { "EG": { "EGALX": "Alexandria", "EGASN": "Aswan", "EGAST": "Asyut", "EGBA": "Red Sea", "EGBH": "Beheira", "EGBNS": "Beni Suef", "EGC": "Cairo", "EGDK": "Dakahlia", "EGDT": "Damietta", "EGFYM": "Faiyum", "EGGH": "Gharbia", "EGGZ": "Giza", "EGIS": "Ismailia", "EGJS": "South Sinai", "EGKB": "Qalyubia", "EGKFS": "Kafr el-Sheikh", "EGKN": "Qena", "EGLX": "Luxor", "EGMN": "Minya", "EGMNF": "Monufia", "EGMT": "Matrouh", "EGPTS": "Port Said", "EGSHG": "Sohag", "EGSHR": "Al Sharqia", "EGSIN": "North Sinai", "EGSUZ": "Suez", "EGWAD": "New Valley" }, "SA": { "SA-01": "Riyadh", "SA-02": "Makkah", "SA-03": "Al Madinah", "SA-04": "Eastern Province", "SA-05": "Al-Qassim", "SA-06": "Ha`il", "SA-07": "Tabuk", "SA-08": "Northern Borders", "SA-09": "Jazan", "SA-10": "Najran", "SA-11": "Al-Bahah Region", "SA-12": "Al-Jawf", "SA-14": "Asir" } },
-    allowedAddressCities: { "BH": { "BH-13": ["Al Seeb", "Al Amarat", "Bawshar", "Muscat", "Muttrah", "Qurayyat"], "BH-14": ["Nizwa", "Samail", "Bahla", "Adam", "Al Hamra", "Manah", "Izki", "Bid Bid"], "BH-15": ["Sohar", "Shinas", "Liwa", "Saham", "Al Khaboura", "Suwayq"], "BH-17": ["Rustaq", "Al Awabi", "Nakhal", "Wadi al Maawil", "Barka", "Al-Musannah"] }, "KW": { "AA": ["Abdullah Al-Salem", "Adailiya", "Bneid Al Qar"], "HA": ["Al-Bedae", "Bayan", "Hawally"], "AF": ["Abdullah Al-Mubarak", "Airport", "Andalous"] }, "OM": { "MC": ["Al Seeb", "Al Amarat", "Bawshar", "Muscat", "Muttrah", "Qurayyat"], "AD": ["Nizwa", "Samail", "Bahla", "Adam", "Al Hamra", "Manah", "Izki", "Bid Bid"] }, "SA": { "SA-01": ["Afif", "Al Aflaj", "Al Hariq", "Al Majma`ah", "Al Zulfi", "Al-Ghat", "Al-Kharj", "Al-Muzahmiyya", "Al-Quway`iyah", "As Sulayyil", "Dawadmi", "Dhurma", "Diriyah", "Hotat Bani Tamim", "Huraymila", "Riyadh", "Rumah", "Shuqrah", "Thadig", "Wadi ad-Dawasir"], "SA-02": ["Al Jumum", "Al Kamil", "Al Khurmah", "Al Lith", "Al Qunfudhah", "Jeddah", "Khulays", "Mecca", "Rabigh", "Ranyah", "Ta`if", "Turubah"] } },
-    debug: true,
-    showContinueShoppingButton: true,
-    enablePrePayTrigger: false,
-    prePayTriggerError: false,
-    enablePreCheckoutTrigger: false,
-    enableDynamicShippingDetails: false,
-    preCheckoutTriggerError: false,
-    addressTriggerError: false,
-    refId: "1234567890",
-    uniqueRef: false,
-    postcodeOptionalCountries: ["SA"],
-    enableAppleCheckout: false,
-    installmentsCount: 12,
-    timelineStyle: 'default',
-    footerMessage: 'No fees, sharia compliant.'
+    {
+      id: "express-shipping",
+      label: "1 day delivery",
+      price: 10,
+    }
+  ],
+  installmentOptionsUrl: "",
+  allowedAddressCountries: ["SA", "AE", "US", "ES", "EG"],
+  allowedAddressStates: { "EG": { "EGALX": "Alexandria", "EGASN": "Aswan", "EGAST": "Asyut", "EGBA": "Red Sea", "EGBH": "Beheira", "EGBNS": "Beni Suef", "EGC": "Cairo", "EGDK": "Dakahlia", "EGDT": "Damietta", "EGFYM": "Faiyum", "EGGH": "Gharbia", "EGGZ": "Giza", "EGIS": "Ismailia", "EGJS": "South Sinai", "EGKB": "Qalyubia", "EGKFS": "Kafr el-Sheikh", "EGKN": "Qena", "EGLX": "Luxor", "EGMN": "Minya", "EGMNF": "Monufia", "EGMT": "Matrouh", "EGPTS": "Port Said", "EGSHG": "Sohag", "EGSHR": "Al Sharqia", "EGSIN": "North Sinai", "EGSUZ": "Suez", "EGWAD": "New Valley" }, "SA": { "SA-01": "Riyadh", "SA-02": "Makkah", "SA-03": "Al Madinah", "SA-04": "Eastern Province", "SA-05": "Al-Qassim", "SA-06": "Ha`il", "SA-07": "Tabuk", "SA-08": "Northern Borders", "SA-09": "Jazan", "SA-10": "Najran", "SA-11": "Al-Bahah Region", "SA-12": "Al-Jawf", "SA-14": "Asir" } },
+  allowedAddressCities: { "BH": { "BH-13": ["Al Seeb", "Al Amarat", "Bawshar", "Muscat", "Muttrah", "Qurayyat"], "BH-14": ["Nizwa", "Samail", "Bahla", "Adam", "Al Hamra", "Manah", "Izki", "Bid Bid"], "BH-15": ["Sohar", "Shinas", "Liwa", "Saham", "Al Khaboura", "Suwayq"], "BH-17": ["Rustaq", "Al Awabi", "Nakhal", "Wadi al Maawil", "Barka", "Al-Musannah"] }, "KW": { "AA": ["Abdullah Al-Salem", "Adailiya", "Bneid Al Qar"], "HA": ["Al-Bedae", "Bayan", "Hawally"], "AF": ["Abdullah Al-Mubarak", "Airport", "Andalous"] }, "OM": { "MC": ["Al Seeb", "Al Amarat", "Bawshar", "Muscat", "Muttrah", "Qurayyat"], "AD": ["Nizwa", "Samail", "Bahla", "Adam", "Al Hamra", "Manah", "Izki", "Bid Bid"] }, "SA": { "SA-01": ["Afif", "Al Aflaj", "Al Hariq", "Al Majma`ah", "Al Zulfi", "Al-Ghat", "Al-Kharj", "Al-Muzahmiyya", "Al-Quway`iyah", "As Sulayyil", "Dawadmi", "Dhurma", "Diriyah", "Hotat Bani Tamim", "Huraymila", "Riyadh", "Rumah", "Shuqrah", "Thadig", "Wadi ad-Dawasir"], "SA-02": ["Al Jumum", "Al Kamil", "Al Khurmah", "Al Lith", "Al Qunfudhah", "Jeddah", "Khulays", "Mecca", "Rabigh", "Ranyah", "Ta`if", "Turubah"] } },
+  debug: true,
+  showContinueShoppingButton: true,
+  enablePrePayTrigger: false,
+  prePayTriggerError: false,
+  enablePreCheckoutTrigger: false,
+  enableDynamicShippingDetails: false,
+  preCheckoutTriggerError: false,
+  addressTriggerError: false,
+  refId: "1234567890",
+  uniqueRef: false,
+  postcodeOptionalCountries: ["SA"],
+  enableAppleCheckout: false,
+  installmentsCount: 12,
+  timelineStyle: 'default',
+  footerMessage: 'No fees, sharia compliant.'
 };
 // Story 1: Bank Installments
 export const BankInstallments = Template.bind({});

package/dist/collection/components/amwal-installments-guide/amwal-installments-guide.js

@@ -1,85 +1,80 @@
-import { h } from "@stencil/core";
+import { h } from '@stencil/core';
 export class AmwalInstallmentsGuide {
-    constructor() {
-        /**
-         * Language locale: 'en' for English, 'ar' for Arabic
-         */
-        this.locale = 'en';
-        this.currentLang = this.locale;
-        this.handleLanguageChange = (event) => {
-            const select = event.target;
-            const newLang = select.value;
-            this.applyLanguage(newLang);
-        };
+  constructor() {
+    this.handleLanguageChange = (event) => {
+      const select = event.target;
+      const newLang = select.value;
+      this.applyLanguage(newLang);
+    };
+    this.locale = 'en';
+    this.currentLang = this.locale;
+  }
+  componentWillLoad() {
+    this.currentLang = this.locale;
+    this.applyLanguage(this.currentLang);
+    if (this.selectRef) {
+      this.selectRef.value = this.currentLang;
     }
-    componentWillLoad() {
-        this.currentLang = this.locale;
-        this.applyLanguage(this.currentLang);
-        if (this.selectRef) {
-            this.selectRef.value = this.currentLang;
-        }
+  }
+  componentDidUpdate() {
+    // Keep select in sync with state
+    if (this.selectRef) {
+      this.selectRef.value = this.currentLang;
     }
-    componentDidUpdate() {
-        // Keep select in sync with state
-        if (this.selectRef) {
-            this.selectRef.value = this.currentLang;
-        }
+  }
+  applyLanguage(lang) {
+    this.currentLang = lang;
+    if (typeof document !== 'undefined') {
+      document.documentElement.lang = lang;
+      document.documentElement.dir = lang === 'ar' ? 'rtl' : 'ltr';
     }
-    applyLanguage(lang) {
-        this.currentLang = lang;
-        if (typeof document !== 'undefined') {
-            document.documentElement.lang = lang;
-            document.documentElement.dir = lang === 'ar' ? 'rtl' : 'ltr';
-        }
-    }
-    renderEnglishContent() {
-        return (h("div", { class: "lang-en" }, h("header", { class: "hero" }, h("div", { class: "container hero-inner" }, h("div", null, h("span", { class: "badge", "aria-label": "Guide badge" }, "End\u2011User Guide"), h("h1", { class: "title" }, "Amwal Bank Installments"), h("p", { class: "subtitle" }, "Split eligible purchases into easy monthly payments with your own bank\u2014no upfront down payment."), h("div", { class: "hero-card" }, h("div", { class: "kpis" }, h("div", { class: "kpi" }, h("svg", { width: "30", height: "30", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M20 6 9 17l-5-5", stroke: "#128c4b", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("div", null, h("strong", null, "95% approval rate"), h("br", null), h("span", { class: "muted" }, "Fast decisions for eligible cards"))), h("div", { class: "kpi" }, h("svg", { width: "30", height: "30", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "12", cy: "12", r: "9", stroke: "#128c4b", "stroke-width": "2" }), h("path", { d: "M12 7v5l4 2", stroke: "#128c4b", "stroke-width": "2", "stroke-linecap": "round" })), h("div", null, h("strong", null, "3, 6, 12\u2011month plans"), h("br", null), h("span", { class: "muted" }, "Depending on your bank"))), h("div", { class: "kpi" }, h("svg", { width: "30", height: "30", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M4 7h16M4 12h16M4 17h10", stroke: "#128c4b", "stroke-width": "2", "stroke-linecap": "round" }), h("rect", { x: "3", y: "5", width: "18", height: "14", rx: "3", stroke: "#128c4b", "stroke-width": "2" })), h("div", null, h("strong", null, "Earn rewards & card points"), h("br", null), h("span", { class: "muted" }, "Keep your card benefits"))), h("div", { class: "kpi" }, h("svg", { width: "30", height: "30", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M12 3v18M5 9h14M5 15h14", stroke: "#128c4b", "stroke-width": "2", "stroke-linecap": "round" }), h("rect", { x: "3", y: "5", width: "18", height: "14", rx: "3", stroke: "#128c4b", "stroke-width": "2" })), h("div", null, h("strong", null, "Use up to 90% of card limit"), h("br", null), h("span", { class: "muted" }, "Subject to bank policy")))))), h("div", null, h("div", { class: "card" }, h("h3", null, "At a glance"), h("ul", { class: "list" }, h("li", null, h("span", { class: "dot" }), " No upfront down payment required"), h("li", null, h("span", { class: "dot" }), " First installment typically due in ", h("strong", null, "30\u201355 days")), h("li", null, h("span", { class: "dot" }), " Bank converts your purchase into installments within ", h("strong", null, "2\u20134 days"))), h("p", { class: "notice", role: "note" }, "Your full purchase amount must be available in your credit card limit at the time of checkout. Your available limit will be reduced by that amount immediately."))))), h("main", { class: "container" }, h("section", { class: "grid" }, h("div", { class: "card" }, h("h2", null, "How it works"), h("ol", { class: "list steps" }, h("li", null, "Select ", h("strong", null, "Amwal Bank Installments"), " at checkout."), h("li", null, "Choose your bank and the plan length (3, 6, or 12 months)."), h("li", null, "Pay using the credit card associated with that bank, or Apple Pay (linked to that card)."), h("li", null, "Your bank converts the purchase into monthly installments after approval."))), h("div", { class: "card" }, h("h2", null, "Monthly payments"), h("p", null, "Installments are ", h("strong", null, "automatic"), ": they're either debited from your bank balance or added to your card's monthly statement. No extra action is required from you."), h("p", { class: "notice" }, "Minimum purchase amounts for installments are set by each bank and merchant."))), h("section", { class: "grid" }, h("div", { class: "card example" }, h("h2", null, "Examples"), h("div", { class: "pair" }, h("h3", null, "Al Rajhi Bank \u2014 Equal Monthly Installments"), h("p", null, "A 6,000 SAR purchase is divided into equal monthly payments across your selected plan."), h("amwal-installments-timeline", { amount: 6000, "installments-count": "12", "enable-installments": "true", locale: "en", "timeline-style": "default", "footer-message": "" })), h("div", { class: "pair" }, h("h3", null, "Saudi National Bank \u2014 5% Monthly Installments"), h("p", null, "Across a 12\u2011month plan, you pay ", h("strong", null, "5% of the total"), " each cycle. At the end of the term, the remaining balance becomes due."), h("amwal-installments-timeline", { amount: 6000, "installments-count": "12", "enable-installments": "true", locale: "en", "timeline-style": "default", "footer-message": "", "installment-data": '[{"amount":"300.00","dueDate":"2025-11-08","status":"upcoming","installmentNumber":1},{"amount":"300.00","dueDate":"2025-12-08","status":"upcoming","installmentNumber":2},{"amount":"300.00","dueDate":"2026-01-08","status":"upcoming","installmentNumber":3},{"amount":"300.00","dueDate":"2026-02-08","status":"upcoming","installmentNumber":4},{"amount":"300.00","dueDate":"2026-03-08","status":"upcoming","installmentNumber":5},{"amount":"300.00","dueDate":"2026-04-08","status":"upcoming","installmentNumber":6},{"amount":"300.00","dueDate":"2026-05-08","status":"upcoming","installmentNumber":7},{"amount":"300.00","dueDate":"2026-06-08","status":"upcoming","installmentNumber":8},{"amount":"300.00","dueDate":"2026-07-08","status":"upcoming","installmentNumber":9},{"amount":"300.00","dueDate":"2026-08-08","status":"upcoming","installmentNumber":10},{"amount":"300.00","dueDate":"2026-09-08","status":"upcoming","installmentNumber":11},{"amount":"300.00","dueDate":"2026-10-08","status":"upcoming","installmentNumber":12}]' })))), h("section", null, h("h2", null, "FAQs"), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "Do I earn card rewards and points?"), h("div", { class: "faq-body" }, h("p", null, "Yes. You continue to earn your credit card rewards and points on eligible installment purchases, as per your bank's policy."))), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "When is my first payment due?"), h("div", { class: "faq-body" }, h("p", null, "Typically within ", h("strong", null, "30\u201355 days"), " from the purchase date, depending on your bank's billing cycle."))), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "Does my card limit change?"), h("div", { class: "faq-body" }, h("p", null, "Yes. Your available credit limit is reduced by the full purchase amount at checkout. After conversion to installments, it may replenish as you pay installments (subject to bank policy)."))), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "Which plans are available?"), h("div", { class: "faq-body" }, h("p", null, "Common options are ", h("strong", null, "3, 6, and 12 months"), ". Availability depends on your issuing bank and the merchant."))), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "How quickly does the bank convert my purchase?"), h("div", { class: "faq-body" }, h("p", null, "Usually within ", h("strong", null, "2\u20134 days"), " after a successful checkout."))), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "Why was my installment request rejected?"), h("div", { class: "faq-body" }, h("ul", { class: "list" }, h("li", null, h("span", { class: "dot" }), " Card isn't eligible for installments"), h("li", null, h("span", { class: "dot" }), " More than four active installment plans on the same card"), h("li", null, h("span", { class: "dot" }), " Using loaded/temporary balance to try to increase card limit"), h("li", null, h("span", { class: "dot" }), " Requests are subject to the issuing bank's terms & conditions"))))), h("footer", null, h("p", null, "\u00A9 ", h("span", { id: "year-en" }), " Amwal. Information provided for customer guidance; actual eligibility, limits, and plans are determined by your issuing bank and merchant.")))));
-    }
-    renderArabicContent() {
-        return (h("div", { class: "lang-ar" }, h("header", { class: "hero" }, h("div", { class: "container hero-inner" }, h("div", null, h("span", { class: "badge", "aria-label": "Guide badge" }, "\u062F\u0644\u064A\u0644 \u0627\u0644\u0645\u0633\u062A\u062E\u062F\u0645"), h("h1", { class: "title" }, "\u0623\u0642\u0633\u0627\u0637 \u0627\u0644\u0628\u0646\u0648\u0643 \u0645\u0646 \u0623\u0645\u0640\u0648\u0627\u0644"), h("p", { class: "subtitle" }, "\u0642\u0633\u0651\u0645 \u0645\u0634\u062A\u0631\u064A\u0627\u062A\u0643 \u0627\u0644\u0645\u0624\u0647\u0644\u0629 \u0625\u0644\u0649 \u062F\u0641\u0639\u0627\u062A \u0634\u0647\u0631\u064A\u0629 \u0645\u064A\u0633\u0651\u0631\u0629 \u0645\u0639 \u0628\u0646\u0643\u0643 \u2014 \u062F\u0648\u0646 \u062F\u0641\u0639\u0629 \u0645\u0642\u062F\u0651\u0645\u0629."), h("div", { class: "hero-card" }, h("div", { class: "kpis" }, h("div", { class: "kpi" }, h("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M20 6 9 17l-5-5", stroke: "#128c4b", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("div", null, h("strong", null, "\u0645\u0639\u062F\u0644 \u0645\u0648\u0627\u0641\u0642\u0629 \u064A\u062A\u062C\u0627\u0648\u0632 \u200E%95\u200E"), h("br", null), h("span", { class: "muted" }, "\u0642\u0631\u0627\u0631\u0627\u062A \u0633\u0631\u064A\u0639\u0629 \u0644\u0644\u0628\u0637\u0627\u0642\u0627\u062A \u0627\u0644\u0645\u0624\u0647\u0644\u0629"))), h("div", { class: "kpi" }, h("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "12", cy: "12", r: "9", stroke: "#128c4b", "stroke-width": "2" }), h("path", { d: "M12 7v5l4 2", stroke: "#128c4b", "stroke-width": "2", "stroke-linecap": "round" })), h("div", null, h("strong", null, "\u062E\u0637\u0637 3 \u0623\u0648 6 \u0623\u0648 12 \u0634\u0647\u0631\u0627\u064B"), h("br", null), h("span", { class: "muted" }, "\u062D\u0633\u0628 \u0628\u0646\u0643\u0643"))), h("div", { class: "kpi" }, h("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M4 7h16M4 12h16M4 17h10", stroke: "#128c4b", "stroke-width": "2", "stroke-linecap": "round" }), h("rect", { x: "3", y: "5", width: "18", height: "14", rx: "3", stroke: "#128c4b", "stroke-width": "2" })), h("div", null, h("strong", null, "\u0627\u0643\u0633\u0628 \u0627\u0644\u0645\u0643\u0627\u0641\u0622\u062A \u0648\u0646\u0642\u0627\u0637 \u0627\u0644\u0628\u0637\u0627\u0642\u0629"), h("br", null), h("span", { class: "muted" }, "\u0627\u062D\u062A\u0641\u0638 \u0628\u0645\u0632\u0627\u064A\u0627 \u0628\u0637\u0627\u0642\u062A\u0643"))), h("div", { class: "kpi" }, h("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M12 3v18M5 9h14M5 15h14", stroke: "#128c4b", "stroke-width": "2", "stroke-linecap": "round" }), h("rect", { x: "3", y: "5", width: "18", height: "14", rx: "3", stroke: "#128c4b", "stroke-width": "2" })), h("div", null, h("strong", null, "\u062D\u062A\u0649 \u200E90%\u200E \u0645\u0646 \u062D\u062F \u0627\u0644\u0628\u0637\u0627\u0642\u0629"), h("br", null), h("span", { class: "muted" }, "\u0648\u0641\u0642\u0627\u064B \u0644\u0633\u064A\u0627\u0633\u0629 \u0627\u0644\u0628\u0646\u0643")))))), h("div", null, h("div", { class: "card" }, h("h3", null, "\u0646\u0638\u0631\u0629 \u0633\u0631\u064A\u0639\u0629"), h("ul", { class: "list" }, h("li", null, h("span", { class: "dot" }), " \u0644\u0627 \u062A\u0648\u062C\u062F \u062F\u0641\u0639\u0629 \u0645\u0642\u062F\u0651\u0645\u0629"), h("li", null, h("span", { class: "dot" }), " \u0623\u0648\u0644 \u062F\u0641\u0639\u0629 \u0639\u0627\u062F\u0629\u064B \u062E\u0644\u0627\u0644 ", h("strong", null, "30\u201355 \u064A\u0648\u0645\u0627\u064B")), h("li", null, h("span", { class: "dot" }), " \u064A\u062D\u0648\u0651\u0644 \u0627\u0644\u0628\u0646\u0643 \u0627\u0644\u0639\u0645\u0644\u064A\u0629 \u0625\u0644\u0649 \u0623\u0642\u0633\u0627\u0637 \u062E\u0644\u0627\u0644 ", h("strong", null, "2\u20134 \u0623\u064A\u0627\u0645"))), h("p", { class: "notice", role: "note" }, "\u064A\u062C\u0628 \u0623\u0646 \u064A\u0643\u0648\u0646 \u0643\u0627\u0645\u0644 \u0645\u0628\u0644\u063A \u0627\u0644\u0634\u0631\u0627\u0621 \u0645\u062A\u0627\u062D\u0627\u064B \u0636\u0645\u0646 \u062D\u062F \u0628\u0637\u0627\u0642\u062A\u0643 \u0627\u0644\u0627\u0626\u062A\u0645\u0627\u0646\u064A\u0629 \u0639\u0646\u062F \u0627\u0644\u062F\u0641\u0639. \u0633\u064A\u062A\u0645 \u062D\u062C\u0632 \u0627\u0644\u0645\u0628\u0644\u063A \u0643\u0627\u0645\u0644\u0627\u064B \u0645\u0646 \u062D\u062F\u0643 \u0627\u0644\u0645\u062A\u0627\u062D \u0641\u0648\u0631\u0627\u064B."))))), h("main", { class: "container" }, h("section", { class: "grid" }, h("div", { class: "card" }, h("h2", null, "\u0643\u064A\u0641 \u062A\u0639\u0645\u0644\u061F"), h("ol", { class: "list steps" }, h("li", null, "\u0627\u062E\u062A\u0631 ", h("strong", null, "\u0623\u0642\u0633\u0627\u0637 \u0623\u0645\u0640\u0648\u0627\u0644 \u0627\u0644\u0628\u0646\u0643\u064A\u0629"), " \u0639\u0646\u062F \u0627\u0644\u062F\u0641\u0639."), h("li", null, "\u0627\u062E\u062A\u0631 \u0628\u0646\u0643\u0643 \u0648\u0645\u062F\u0629 \u0627\u0644\u062E\u0637\u0629 (3 \u0623\u0648 6 \u0623\u0648 12 \u0634\u0647\u0631\u0627\u064B)."), h("li", null, "\u0627\u062F\u0641\u0639 \u0628\u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0645\u0631\u062A\u0628\u0637\u0629 \u0628\u0630\u0644\u0643 \u0627\u0644\u0628\u0646\u0643\u060C \u0623\u0648 \u0639\u0628\u0631 Apple Pay \u0627\u0644\u0645\u0631\u062A\u0628\u0637 \u0628\u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0646\u0641\u0633\u0647\u0627."), h("li", null, "\u0628\u0639\u062F \u0627\u0644\u0645\u0648\u0627\u0641\u0642\u0629\u060C \u064A\u062D\u0648\u0651\u0644 \u0627\u0644\u0628\u0646\u0643 \u0627\u0644\u0634\u0631\u0627\u0621 \u0625\u0644\u0649 \u0623\u0642\u0633\u0627\u0637 \u0634\u0647\u0631\u064A\u0629."))), h("div", { class: "card" }, h("h2", null, "\u0627\u0644\u062F\u0641\u0639\u0627\u062A \u0627\u0644\u0634\u0647\u0631\u064A\u0629"), h("p", null, "\u062A\u064F\u062E\u0635\u0645 \u0627\u0644\u062F\u0641\u0639\u0627\u062A ", h("strong", null, "\u062A\u0644\u0642\u0627\u0626\u064A\u0627\u064B"), " \u0645\u0646 \u0631\u0635\u064A\u062F\u0643 \u0627\u0644\u0628\u0646\u0643\u064A \u0623\u0648 \u062A\u064F\u0636\u0627\u0641 \u0625\u0644\u0649 \u0643\u0634\u0641 \u0628\u0637\u0627\u0642\u062A\u0643 \u0627\u0644\u0634\u0647\u0631\u064A. \u0644\u0627 \u064A\u0644\u0632\u0645\u0643 \u0623\u064A \u0625\u062C\u0631\u0627\u0621 \u0625\u0636\u0627\u0641\u064A."), h("p", { class: "notice" }, "\u0627\u0644\u062D\u062F \u0627\u0644\u0623\u062F\u0646\u0649 \u0644\u0642\u064A\u0645\u0629 \u0627\u0644\u0634\u0631\u0627\u0621 \u0644\u0644\u062A\u0642\u0633\u064A\u0637 \u064A\u062D\u062F\u062F\u0647 \u0643\u0644 \u0628\u0646\u0643 \u0648\u0627\u0644\u062A\u0627\u062C\u0631."))), h("section", { class: "grid" }, h("div", { class: "card example" }, h("h2", null, "\u0623\u0645\u062B\u0644\u0629"), h("div", { class: "pair" }, h("h3", null, "\u0645\u0635\u0631\u0641 \u0627\u0644\u0631\u0627\u062C\u062D\u064A \u2014 \u0623\u0642\u0633\u0627\u0637 \u0634\u0647\u0631\u064A\u0629 \u0645\u062A\u0633\u0627\u0648\u064A\u0629"), h("p", null, "\u064A\u064F\u0642\u0633\u064E\u0651\u0645 \u0634\u0631\u0627\u0621 \u0628\u0642\u064A\u0645\u0629 6,000 \u0631\u064A\u0627\u0644 \u0633\u0639\u0648\u062F\u064A \u0625\u0644\u0649 \u062F\u0641\u0639\u0627\u062A \u0634\u0647\u0631\u064A\u0629 \u0645\u062A\u0633\u0627\u0648\u064A\u0629 \u062D\u0633\u0628 \u0627\u0644\u062E\u0637\u0629 \u0627\u0644\u062A\u064A \u062A\u062E\u062A\u0627\u0631\u0647\u0627."), h("amwal-installments-timeline", { amount: 6000, "installments-count": "12", "enable-installments": "true", locale: "ar", "timeline-style": "default", "footer-message": "" })), h("div", { class: "pair" }, h("h3", null, "\u0627\u0644\u0628\u0646\u0643 \u0627\u0644\u0623\u0647\u0644\u064A \u0627\u0644\u0633\u0639\u0648\u062F\u064A \u2014 \u0623\u0642\u0633\u0627\u0637 \u200E5%\u200E \u0634\u0647\u0631\u064A\u0627\u064B"), h("p", null, "\u0636\u0645\u0646 \u062E\u0637\u0629 12 \u0634\u0647\u0631\u0627\u064B\u060C \u062A\u062F\u0641\u0639 ", h("strong", null, "5% \u0645\u0646 \u0627\u0644\u0625\u062C\u0645\u0627\u0644\u064A"), " \u0641\u064A \u0643\u0644 \u062F\u0648\u0631\u0629. \u0648\u0641\u064A \u0646\u0647\u0627\u064A\u0629 \u0627\u0644\u0645\u062F\u0629 \u064A\u064F\u0633\u062F\u062F \u0627\u0644\u0631\u0635\u064A\u062F \u0627\u0644\u0645\u062A\u0628\u0642\u064A."), h("amwal-installments-timeline", { amount: 6000, "installments-count": "12", "enable-installments": "true", locale: "ar", "timeline-style": "default", "footer-message": "", "installment-data": '[{"amount":"300.00","dueDate":"2025-11-08","status":"upcoming","installmentNumber":1},{"amount":"300.00","dueDate":"2025-12-08","status":"upcoming","installmentNumber":2},{"amount":"300.00","dueDate":"2026-01-08","status":"upcoming","installmentNumber":3},{"amount":"300.00","dueDate":"2026-02-08","status":"upcoming","installmentNumber":4},{"amount":"300.00","dueDate":"2026-03-08","status":"upcoming","installmentNumber":5},{"amount":"300.00","dueDate":"2026-04-08","status":"upcoming","installmentNumber":6},{"amount":"300.00","dueDate":"2026-05-08","status":"upcoming","installmentNumber":7},{"amount":"300.00","dueDate":"2026-06-08","status":"upcoming","installmentNumber":8},{"amount":"300.00","dueDate":"2026-07-08","status":"upcoming","installmentNumber":9},{"amount":"300.00","dueDate":"2026-08-08","status":"upcoming","installmentNumber":10},{"amount":"300.00","dueDate":"2026-09-08","status":"upcoming","installmentNumber":11},{"amount":"300.00","dueDate":"2026-10-08","status":"upcoming","installmentNumber":12}]' })))), h("section", { class: "FAQ" }, h("h2", null, "\u0627\u0644\u0623\u0633\u0626\u0644\u0629 \u0627\u0644\u0634\u0627\u0626\u0639\u0629"), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "\u0647\u0644 \u0623\u0643\u0633\u0628 \u0645\u0643\u0627\u0641\u0622\u062A \u0648\u0646\u0642\u0627\u0637 \u0627\u0644\u0628\u0637\u0627\u0642\u0629\u061F"), h("div", { class: "faq-body" }, h("p", null, "\u0646\u0639\u0645. \u062A\u0633\u062A\u0645\u0631 \u0641\u064A \u0643\u0633\u0628 \u0645\u0643\u0627\u0641\u0622\u062A \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0648\u0646\u0642\u0627\u0637\u0647\u0627 \u0639\u0644\u0649 \u0627\u0644\u0645\u0634\u062A\u0631\u064A\u0627\u062A \u0627\u0644\u0645\u0624\u0647\u0644\u0629 \u0644\u0644\u062A\u0642\u0633\u064A\u0637 \u0648\u0641\u0642 \u0633\u064A\u0627\u0633\u0629 \u0628\u0646\u0643\u0643."))), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "\u0645\u062A\u0649 \u0645\u0648\u0639\u062F \u0623\u0648\u0644 \u062F\u0641\u0639\u0629\u061F"), h("div", { class: "faq-body" }, h("p", null, "\u0639\u0627\u062F\u0629\u064B \u062E\u0644\u0627\u0644 ", h("strong", null, "30\u201355 \u064A\u0648\u0645\u0627\u064B"), " \u0645\u0646 \u062A\u0627\u0631\u064A\u062E \u0627\u0644\u0634\u0631\u0627\u0621\u060C \u0628\u062D\u0633\u0628 \u062F\u0648\u0631\u0629 \u0627\u0644\u0641\u0648\u062A\u0631\u0629 \u0641\u064A \u0628\u0646\u0643\u0643."))), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "\u0647\u0644 \u064A\u062A\u063A\u064A\u0631 \u062D\u062F \u0628\u0637\u0627\u0642\u062A\u064A\u061F"), h("div", { class: "faq-body" }, h("p", null, "\u0646\u0639\u0645. \u064A\u064F\u062D\u062C\u0632 \u0643\u0627\u0645\u0644 \u0645\u0628\u0644\u063A \u0627\u0644\u0634\u0631\u0627\u0621 \u0645\u0646 \u062D\u062F \u0628\u0637\u0627\u0642\u062A\u0643 \u0627\u0644\u0645\u062A\u0627\u062D \u0639\u0646\u062F \u0627\u0644\u062F\u0641\u0639. \u0648\u0628\u0639\u062F \u0627\u0644\u062A\u062D\u0648\u064A\u0644 \u0625\u0644\u0649 \u0623\u0642\u0633\u0627\u0637 \u0642\u062F \u064A\u0639\u0648\u062F \u0627\u0644\u062D\u062F \u0644\u0644\u062A\u0632\u0627\u064A\u062F \u0645\u0639 \u0633\u062F\u0627\u062F\u0643 \u0644\u0644\u0623\u0642\u0633\u0627\u0637 (\u0648\u0641\u0642 \u0633\u064A\u0627\u0633\u0629 \u0627\u0644\u0628\u0646\u0643)."))), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "\u0645\u0627 \u0627\u0644\u062E\u0637\u0637 \u0627\u0644\u0645\u062A\u0627\u062D\u0629\u061F"), h("div", { class: "faq-body" }, h("p", null, "\u0627\u0644\u062E\u064A\u0627\u0631\u0627\u062A \u0627\u0644\u0634\u0627\u0626\u0639\u0629 \u0647\u064A ", h("strong", null, "3 \u0623\u0648 6 \u0623\u0648 12 \u0634\u0647\u0631\u0627\u064B"), ". \u0648\u062A\u062E\u062A\u0644\u0641 \u0627\u0644\u0625\u062A\u0627\u062D\u0629 \u062D\u0633\u0628 \u0627\u0644\u0628\u0646\u0643 \u0627\u0644\u0645\u064F\u0635\u062F\u0631 \u0648\u0627\u0644\u062A\u0627\u062C\u0631."))), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "\u0643\u0645 \u064A\u0633\u062A\u063A\u0631\u0642 \u062A\u062D\u0648\u064A\u0644 \u0627\u0644\u0634\u0631\u0627\u0621 \u0625\u0644\u0649 \u0623\u0642\u0633\u0627\u0637\u061F"), h("div", { class: "faq-body" }, h("p", null, "\u0639\u0627\u062F\u0629\u064B \u062E\u0644\u0627\u0644 ", h("strong", null, "2\u20134 \u0623\u064A\u0627\u0645"), " \u0628\u0639\u062F \u0625\u062A\u0645\u0627\u0645 \u0627\u0644\u0634\u0631\u0627\u0621 \u0628\u0646\u062C\u0627\u062D."))), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "\u0644\u0645\u0627\u0630\u0627 \u0631\u064F\u0641\u0636 \u0637\u0644\u0628 \u0627\u0644\u062A\u0642\u0633\u064A\u0637\u061F"), h("div", { class: "faq-body" }, h("ul", { class: "list" }, h("li", null, h("span", { class: "dot" }), " \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u063A\u064A\u0631 \u0645\u0624\u0647\u0644\u0629 \u0644\u0644\u062A\u0642\u0633\u064A\u0637"), h("li", null, h("span", { class: "dot" }), " \u0648\u062C\u0648\u062F \u0623\u0643\u062B\u0631 \u0645\u0646 \u0623\u0631\u0628\u0639 \u062E\u0637\u0637 \u062A\u0642\u0633\u064A\u0637 \u0646\u0634\u0637\u0629 \u0639\u0644\u0649 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0646\u0641\u0633\u0647\u0627"), h("li", null, h("span", { class: "dot" }), " \u0627\u0633\u062A\u062E\u062F\u0627\u0645 \u0631\u0635\u064A\u062F \u0645\u064F\u062D\u0645\u0651\u0644/\u0645\u0624\u0642\u062A \u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0632\u064A\u0627\u062F\u0629 \u0627\u0644\u062D\u062F"), h("li", null, h("span", { class: "dot" }), " \u0627\u0644\u0637\u0644\u0628\u0627\u062A \u062E\u0627\u0636\u0639\u0629 \u0644\u0634\u0631\u0648\u0637 \u0648\u0623\u062D\u0643\u0627\u0645 \u0627\u0644\u0628\u0646\u0643 \u0627\u0644\u0645\u064F\u0635\u062F\u0631"))))), h("footer", null, h("p", null, "\u00A9 ", h("span", { id: "year-ar" }), " \u0623\u0645\u0640\u0648\u0627\u0644. \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062A \u0644\u063A\u0631\u0636 \u0627\u0644\u0625\u0631\u0634\u0627\u062F\u061B \u0627\u0644\u0623\u0647\u0644\u064A\u0629 \u0648\u0627\u0644\u062D\u062F\u0648\u062F \u0648\u0627\u0644\u062E\u0637\u0637 \u064A\u062D\u062F\u0651\u062F\u0647\u0627 \u0627\u0644\u0628\u0646\u0643 \u0627\u0644\u0645\u064F\u0635\u062F\u0631 \u0648\u0627\u0644\u062A\u0627\u062C\u0631.")))));
-    }
-    render() {
-        return (h("div", { key: '263be6424b9982a41a4ae0dbfa3b65e1eef055ed', class: "amwal-installments-guide" }, h("div", { key: 'e47cde7808793812dfdb1fa963372ce23cdf38ab', class: "topbar" }, h("div", { key: 'ff645af949a46aab230f2279c4a0871569f3477b', class: "topbar-inner" }, h("a", { key: 'f4ff58d8179e837a76d624e77865dc3fb4243a0a', class: "brand", href: "https://amwal.tech", target: "_blank", rel: "noopener noreferrer" }, h("img", { key: 'fb95ff5f1078cf4e1fb2157200f672ba501952b4', class: "brand-logo", src: "https://cdn.prod.website-files.com/62294ce746440b7bc08b4fc5/624352eb48193d537d329386_1-2.png", alt: "Amwal logo" })), h("div", { key: 'a6327ce03042e116389e9788918dbdc89459241f', class: "lang-controls" }, h("label", { key: 'd68b306f500954140f8bd2c60ac137a7ea368a93', class: "lang-en" }, "Language:"), h("label", { key: '00813420149332793a9caf1983805ad4d1304939', class: "lang-ar" }, "\u0627\u0644\u0644\u063A\u0629:"), h("select", { key: '4fb09dff916fec16d3ead5ddc727d9664d9ca5ae', class: "lang-select", "aria-label": "Language selector", ref: (el) => this.selectRef = el, onChange: this.handleLanguageChange }, h("option", { key: 'fbbf979b7c4ced09135dde23305f0839998c7cde', value: "en", selected: true }, "English"), h("option", { key: '14706b60ec1e2554af171e88562402a32f49d2ac', value: "ar" }, "\u0627\u0644\u0639\u0631\u0628\u064A\u0629"))))), this.currentLang === 'en' ? this.renderEnglishContent() : this.renderArabicContent()));
-    }
-    static get is() { return "amwal-installments-guide"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["amwal-installments-guide.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["amwal-installments-guide.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "locale": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'en' | 'ar'",
-                    "resolved": "\"ar\" | \"en\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Language locale: 'en' for English, 'ar' for Arabic"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "locale",
-                "defaultValue": "'en'"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "currentLang": {}
-        };
-    }
-    static get elementRef() { return "el"; }
+  }
+  renderEnglishContent() {
+    return (h("div", { class: "lang-en" }, h("header", { class: "hero" }, h("div", { class: "container hero-inner" }, h("div", null, h("span", { class: "badge", "aria-label": "Guide badge" }, "End\u2011User Guide"), h("h1", { class: "title" }, "Amwal Bank Installments"), h("p", { class: "subtitle" }, "Split eligible purchases into easy monthly payments with your own bank\u2014no upfront down payment."), h("div", { class: "hero-card" }, h("div", { class: "kpis" }, h("div", { class: "kpi" }, h("svg", { width: "30", height: "30", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M20 6 9 17l-5-5", stroke: "#128c4b", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("div", null, h("strong", null, "95% approval rate"), h("br", null), h("span", { class: "muted" }, "Fast decisions for eligible cards"))), h("div", { class: "kpi" }, h("svg", { width: "30", height: "30", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "12", cy: "12", r: "9", stroke: "#128c4b", "stroke-width": "2" }), h("path", { d: "M12 7v5l4 2", stroke: "#128c4b", "stroke-width": "2", "stroke-linecap": "round" })), h("div", null, h("strong", null, "3, 6, 12\u2011month plans"), h("br", null), h("span", { class: "muted" }, "Depending on your bank"))), h("div", { class: "kpi" }, h("svg", { width: "30", height: "30", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M4 7h16M4 12h16M4 17h10", stroke: "#128c4b", "stroke-width": "2", "stroke-linecap": "round" }), h("rect", { x: "3", y: "5", width: "18", height: "14", rx: "3", stroke: "#128c4b", "stroke-width": "2" })), h("div", null, h("strong", null, "Earn rewards & card points"), h("br", null), h("span", { class: "muted" }, "Keep your card benefits"))), h("div", { class: "kpi" }, h("svg", { width: "30", height: "30", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M12 3v18M5 9h14M5 15h14", stroke: "#128c4b", "stroke-width": "2", "stroke-linecap": "round" }), h("rect", { x: "3", y: "5", width: "18", height: "14", rx: "3", stroke: "#128c4b", "stroke-width": "2" })), h("div", null, h("strong", null, "Use up to 90% of card limit"), h("br", null), h("span", { class: "muted" }, "Subject to bank policy")))))), h("div", null, h("div", { class: "card" }, h("h3", null, "At a glance"), h("ul", { class: "list" }, h("li", null, h("span", { class: "dot" }), " No upfront down payment required"), h("li", null, h("span", { class: "dot" }), " First installment typically due in ", h("strong", null, "30\u201355 days")), h("li", null, h("span", { class: "dot" }), " Bank converts your purchase into installments within ", h("strong", null, "2\u20134 days"))), h("p", { class: "notice", role: "note" }, "Your full purchase amount must be available in your credit card limit at the time of checkout. Your available limit will be reduced by that amount immediately."))))), h("main", { class: "container" }, h("section", { class: "grid" }, h("div", { class: "card" }, h("h2", null, "How it works"), h("ol", { class: "list steps" }, h("li", null, "Select ", h("strong", null, "Amwal Bank Installments"), " at checkout."), h("li", null, "Choose your bank and the plan length (3, 6, or 12 months)."), h("li", null, "Pay using the credit card associated with that bank, or Apple Pay (linked to that card)."), h("li", null, "Your bank converts the purchase into monthly installments after approval."))), h("div", { class: "card" }, h("h2", null, "Monthly payments"), h("p", null, "Installments are ", h("strong", null, "automatic"), ": they're either debited from your bank balance or added to your card's monthly statement. No extra action is required from you."), h("p", { class: "notice" }, "Minimum purchase amounts for installments are set by each bank and merchant."))), h("section", { class: "grid" }, h("div", { class: "card example" }, h("h2", null, "Examples"), h("div", { class: "pair" }, h("h3", null, "Al Rajhi Bank \u2014 Equal Monthly Installments"), h("p", null, "A 6,000 SAR purchase is divided into equal monthly payments across your selected plan."), h("amwal-installments-timeline", { amount: 6000, "installments-count": "12", "enable-installments": "true", locale: "en", "timeline-style": "default", "footer-message": "" })), h("div", { class: "pair" }, h("h3", null, "Saudi National Bank \u2014 5% Monthly Installments"), h("p", null, "Across a 12\u2011month plan, you pay ", h("strong", null, "5% of the total"), " each cycle. At the end of the term, the remaining balance becomes due."), h("amwal-installments-timeline", { amount: 6000, "installments-count": "12", "enable-installments": "true", locale: "en", "timeline-style": "default", "footer-message": "", "installment-data": '[{"amount":"300.00","dueDate":"2025-11-08","status":"upcoming","installmentNumber":1},{"amount":"300.00","dueDate":"2025-12-08","status":"upcoming","installmentNumber":2},{"amount":"300.00","dueDate":"2026-01-08","status":"upcoming","installmentNumber":3},{"amount":"300.00","dueDate":"2026-02-08","status":"upcoming","installmentNumber":4},{"amount":"300.00","dueDate":"2026-03-08","status":"upcoming","installmentNumber":5},{"amount":"300.00","dueDate":"2026-04-08","status":"upcoming","installmentNumber":6},{"amount":"300.00","dueDate":"2026-05-08","status":"upcoming","installmentNumber":7},{"amount":"300.00","dueDate":"2026-06-08","status":"upcoming","installmentNumber":8},{"amount":"300.00","dueDate":"2026-07-08","status":"upcoming","installmentNumber":9},{"amount":"300.00","dueDate":"2026-08-08","status":"upcoming","installmentNumber":10},{"amount":"300.00","dueDate":"2026-09-08","status":"upcoming","installmentNumber":11},{"amount":"300.00","dueDate":"2026-10-08","status":"upcoming","installmentNumber":12}]' })))), h("section", null, h("h2", null, "FAQs"), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "Do I earn card rewards and points?"), h("div", { class: "faq-body" }, h("p", null, "Yes. You continue to earn your credit card rewards and points on eligible installment purchases, as per your bank's policy."))), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "When is my first payment due?"), h("div", { class: "faq-body" }, h("p", null, "Typically within ", h("strong", null, "30\u201355 days"), " from the purchase date, depending on your bank's billing cycle."))), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "Does my card limit change?"), h("div", { class: "faq-body" }, h("p", null, "Yes. Your available credit limit is reduced by the full purchase amount at checkout. After conversion to installments, it may replenish as you pay installments (subject to bank policy)."))), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "Which plans are available?"), h("div", { class: "faq-body" }, h("p", null, "Common options are ", h("strong", null, "3, 6, and 12 months"), ". Availability depends on your issuing bank and the merchant."))), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "How quickly does the bank convert my purchase?"), h("div", { class: "faq-body" }, h("p", null, "Usually within ", h("strong", null, "2\u20134 days"), " after a successful checkout."))), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "Why was my installment request rejected?"), h("div", { class: "faq-body" }, h("ul", { class: "list" }, h("li", null, h("span", { class: "dot" }), " Card isn't eligible for installments"), h("li", null, h("span", { class: "dot" }), " More than four active installment plans on the same card"), h("li", null, h("span", { class: "dot" }), " Using loaded/temporary balance to try to increase card limit"), h("li", null, h("span", { class: "dot" }), " Requests are subject to the issuing bank's terms & conditions"))))), h("footer", null, h("p", null, "\u00A9 ", h("span", { id: "year-en" }), " Amwal. Information provided for customer guidance; actual eligibility, limits, and plans are determined by your issuing bank and merchant.")))));
+  }
+  renderArabicContent() {
+    return (h("div", { class: "lang-ar" }, h("header", { class: "hero" }, h("div", { class: "container hero-inner" }, h("div", null, h("span", { class: "badge", "aria-label": "Guide badge" }, "\u062F\u0644\u064A\u0644 \u0627\u0644\u0645\u0633\u062A\u062E\u062F\u0645"), h("h1", { class: "title" }, "\u0623\u0642\u0633\u0627\u0637 \u0627\u0644\u0628\u0646\u0648\u0643 \u0645\u0646 \u0623\u0645\u0640\u0648\u0627\u0644"), h("p", { class: "subtitle" }, "\u0642\u0633\u0651\u0645 \u0645\u0634\u062A\u0631\u064A\u0627\u062A\u0643 \u0627\u0644\u0645\u0624\u0647\u0644\u0629 \u0625\u0644\u0649 \u062F\u0641\u0639\u0627\u062A \u0634\u0647\u0631\u064A\u0629 \u0645\u064A\u0633\u0651\u0631\u0629 \u0645\u0639 \u0628\u0646\u0643\u0643 \u2014 \u062F\u0648\u0646 \u062F\u0641\u0639\u0629 \u0645\u0642\u062F\u0651\u0645\u0629."), h("div", { class: "hero-card" }, h("div", { class: "kpis" }, h("div", { class: "kpi" }, h("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M20 6 9 17l-5-5", stroke: "#128c4b", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("div", null, h("strong", null, "\u0645\u0639\u062F\u0644 \u0645\u0648\u0627\u0641\u0642\u0629 \u064A\u062A\u062C\u0627\u0648\u0632 \u200E%95\u200E"), h("br", null), h("span", { class: "muted" }, "\u0642\u0631\u0627\u0631\u0627\u062A \u0633\u0631\u064A\u0639\u0629 \u0644\u0644\u0628\u0637\u0627\u0642\u0627\u062A \u0627\u0644\u0645\u0624\u0647\u0644\u0629"))), h("div", { class: "kpi" }, h("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "12", cy: "12", r: "9", stroke: "#128c4b", "stroke-width": "2" }), h("path", { d: "M12 7v5l4 2", stroke: "#128c4b", "stroke-width": "2", "stroke-linecap": "round" })), h("div", null, h("strong", null, "\u062E\u0637\u0637 3 \u0623\u0648 6 \u0623\u0648 12 \u0634\u0647\u0631\u0627\u064B"), h("br", null), h("span", { class: "muted" }, "\u062D\u0633\u0628 \u0628\u0646\u0643\u0643"))), h("div", { class: "kpi" }, h("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M4 7h16M4 12h16M4 17h10", stroke: "#128c4b", "stroke-width": "2", "stroke-linecap": "round" }), h("rect", { x: "3", y: "5", width: "18", height: "14", rx: "3", stroke: "#128c4b", "stroke-width": "2" })), h("div", null, h("strong", null, "\u0627\u0643\u0633\u0628 \u0627\u0644\u0645\u0643\u0627\u0641\u0622\u062A \u0648\u0646\u0642\u0627\u0637 \u0627\u0644\u0628\u0637\u0627\u0642\u0629"), h("br", null), h("span", { class: "muted" }, "\u0627\u062D\u062A\u0641\u0638 \u0628\u0645\u0632\u0627\u064A\u0627 \u0628\u0637\u0627\u0642\u062A\u0643"))), h("div", { class: "kpi" }, h("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M12 3v18M5 9h14M5 15h14", stroke: "#128c4b", "stroke-width": "2", "stroke-linecap": "round" }), h("rect", { x: "3", y: "5", width: "18", height: "14", rx: "3", stroke: "#128c4b", "stroke-width": "2" })), h("div", null, h("strong", null, "\u062D\u062A\u0649 \u200E90%\u200E \u0645\u0646 \u062D\u062F \u0627\u0644\u0628\u0637\u0627\u0642\u0629"), h("br", null), h("span", { class: "muted" }, "\u0648\u0641\u0642\u0627\u064B \u0644\u0633\u064A\u0627\u0633\u0629 \u0627\u0644\u0628\u0646\u0643")))))), h("div", null, h("div", { class: "card" }, h("h3", null, "\u0646\u0638\u0631\u0629 \u0633\u0631\u064A\u0639\u0629"), h("ul", { class: "list" }, h("li", null, h("span", { class: "dot" }), " \u0644\u0627 \u062A\u0648\u062C\u062F \u062F\u0641\u0639\u0629 \u0645\u0642\u062F\u0651\u0645\u0629"), h("li", null, h("span", { class: "dot" }), " \u0623\u0648\u0644 \u062F\u0641\u0639\u0629 \u0639\u0627\u062F\u0629\u064B \u062E\u0644\u0627\u0644 ", h("strong", null, "30\u201355 \u064A\u0648\u0645\u0627\u064B")), h("li", null, h("span", { class: "dot" }), " \u064A\u062D\u0648\u0651\u0644 \u0627\u0644\u0628\u0646\u0643 \u0627\u0644\u0639\u0645\u0644\u064A\u0629 \u0625\u0644\u0649 \u0623\u0642\u0633\u0627\u0637 \u062E\u0644\u0627\u0644 ", h("strong", null, "2\u20134 \u0623\u064A\u0627\u0645"))), h("p", { class: "notice", role: "note" }, "\u064A\u062C\u0628 \u0623\u0646 \u064A\u0643\u0648\u0646 \u0643\u0627\u0645\u0644 \u0645\u0628\u0644\u063A \u0627\u0644\u0634\u0631\u0627\u0621 \u0645\u062A\u0627\u062D\u0627\u064B \u0636\u0645\u0646 \u062D\u062F \u0628\u0637\u0627\u0642\u062A\u0643 \u0627\u0644\u0627\u0626\u062A\u0645\u0627\u0646\u064A\u0629 \u0639\u0646\u062F \u0627\u0644\u062F\u0641\u0639. \u0633\u064A\u062A\u0645 \u062D\u062C\u0632 \u0627\u0644\u0645\u0628\u0644\u063A \u0643\u0627\u0645\u0644\u0627\u064B \u0645\u0646 \u062D\u062F\u0643 \u0627\u0644\u0645\u062A\u0627\u062D \u0641\u0648\u0631\u0627\u064B."))))), h("main", { class: "container" }, h("section", { class: "grid" }, h("div", { class: "card" }, h("h2", null, "\u0643\u064A\u0641 \u062A\u0639\u0645\u0644\u061F"), h("ol", { class: "list steps" }, h("li", null, "\u0627\u062E\u062A\u0631 ", h("strong", null, "\u0623\u0642\u0633\u0627\u0637 \u0623\u0645\u0640\u0648\u0627\u0644 \u0627\u0644\u0628\u0646\u0643\u064A\u0629"), " \u0639\u0646\u062F \u0627\u0644\u062F\u0641\u0639."), h("li", null, "\u0627\u062E\u062A\u0631 \u0628\u0646\u0643\u0643 \u0648\u0645\u062F\u0629 \u0627\u0644\u062E\u0637\u0629 (3 \u0623\u0648 6 \u0623\u0648 12 \u0634\u0647\u0631\u0627\u064B)."), h("li", null, "\u0627\u062F\u0641\u0639 \u0628\u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0645\u0631\u062A\u0628\u0637\u0629 \u0628\u0630\u0644\u0643 \u0627\u0644\u0628\u0646\u0643\u060C \u0623\u0648 \u0639\u0628\u0631 Apple Pay \u0627\u0644\u0645\u0631\u062A\u0628\u0637 \u0628\u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0646\u0641\u0633\u0647\u0627."), h("li", null, "\u0628\u0639\u062F \u0627\u0644\u0645\u0648\u0627\u0641\u0642\u0629\u060C \u064A\u062D\u0648\u0651\u0644 \u0627\u0644\u0628\u0646\u0643 \u0627\u0644\u0634\u0631\u0627\u0621 \u0625\u0644\u0649 \u0623\u0642\u0633\u0627\u0637 \u0634\u0647\u0631\u064A\u0629."))), h("div", { class: "card" }, h("h2", null, "\u0627\u0644\u062F\u0641\u0639\u0627\u062A \u0627\u0644\u0634\u0647\u0631\u064A\u0629"), h("p", null, "\u062A\u064F\u062E\u0635\u0645 \u0627\u0644\u062F\u0641\u0639\u0627\u062A ", h("strong", null, "\u062A\u0644\u0642\u0627\u0626\u064A\u0627\u064B"), " \u0645\u0646 \u0631\u0635\u064A\u062F\u0643 \u0627\u0644\u0628\u0646\u0643\u064A \u0623\u0648 \u062A\u064F\u0636\u0627\u0641 \u0625\u0644\u0649 \u0643\u0634\u0641 \u0628\u0637\u0627\u0642\u062A\u0643 \u0627\u0644\u0634\u0647\u0631\u064A. \u0644\u0627 \u064A\u0644\u0632\u0645\u0643 \u0623\u064A \u0625\u062C\u0631\u0627\u0621 \u0625\u0636\u0627\u0641\u064A."), h("p", { class: "notice" }, "\u0627\u0644\u062D\u062F \u0627\u0644\u0623\u062F\u0646\u0649 \u0644\u0642\u064A\u0645\u0629 \u0627\u0644\u0634\u0631\u0627\u0621 \u0644\u0644\u062A\u0642\u0633\u064A\u0637 \u064A\u062D\u062F\u062F\u0647 \u0643\u0644 \u0628\u0646\u0643 \u0648\u0627\u0644\u062A\u0627\u062C\u0631."))), h("section", { class: "grid" }, h("div", { class: "card example" }, h("h2", null, "\u0623\u0645\u062B\u0644\u0629"), h("div", { class: "pair" }, h("h3", null, "\u0645\u0635\u0631\u0641 \u0627\u0644\u0631\u0627\u062C\u062D\u064A \u2014 \u0623\u0642\u0633\u0627\u0637 \u0634\u0647\u0631\u064A\u0629 \u0645\u062A\u0633\u0627\u0648\u064A\u0629"), h("p", null, "\u064A\u064F\u0642\u0633\u064E\u0651\u0645 \u0634\u0631\u0627\u0621 \u0628\u0642\u064A\u0645\u0629 6,000 \u0631\u064A\u0627\u0644 \u0633\u0639\u0648\u062F\u064A \u0625\u0644\u0649 \u062F\u0641\u0639\u0627\u062A \u0634\u0647\u0631\u064A\u0629 \u0645\u062A\u0633\u0627\u0648\u064A\u0629 \u062D\u0633\u0628 \u0627\u0644\u062E\u0637\u0629 \u0627\u0644\u062A\u064A \u062A\u062E\u062A\u0627\u0631\u0647\u0627."), h("amwal-installments-timeline", { amount: 6000, "installments-count": "12", "enable-installments": "true", locale: "ar", "timeline-style": "default", "footer-message": "" })), h("div", { class: "pair" }, h("h3", null, "\u0627\u0644\u0628\u0646\u0643 \u0627\u0644\u0623\u0647\u0644\u064A \u0627\u0644\u0633\u0639\u0648\u062F\u064A \u2014 \u0623\u0642\u0633\u0627\u0637 \u200E5%\u200E \u0634\u0647\u0631\u064A\u0627\u064B"), h("p", null, "\u0636\u0645\u0646 \u062E\u0637\u0629 12 \u0634\u0647\u0631\u0627\u064B\u060C \u062A\u062F\u0641\u0639 ", h("strong", null, "5% \u0645\u0646 \u0627\u0644\u0625\u062C\u0645\u0627\u0644\u064A"), " \u0641\u064A \u0643\u0644 \u062F\u0648\u0631\u0629. \u0648\u0641\u064A \u0646\u0647\u0627\u064A\u0629 \u0627\u0644\u0645\u062F\u0629 \u064A\u064F\u0633\u062F\u062F \u0627\u0644\u0631\u0635\u064A\u062F \u0627\u0644\u0645\u062A\u0628\u0642\u064A."), h("amwal-installments-timeline", { amount: 6000, "installments-count": "12", "enable-installments": "true", locale: "ar", "timeline-style": "default", "footer-message": "", "installment-data": '[{"amount":"300.00","dueDate":"2025-11-08","status":"upcoming","installmentNumber":1},{"amount":"300.00","dueDate":"2025-12-08","status":"upcoming","installmentNumber":2},{"amount":"300.00","dueDate":"2026-01-08","status":"upcoming","installmentNumber":3},{"amount":"300.00","dueDate":"2026-02-08","status":"upcoming","installmentNumber":4},{"amount":"300.00","dueDate":"2026-03-08","status":"upcoming","installmentNumber":5},{"amount":"300.00","dueDate":"2026-04-08","status":"upcoming","installmentNumber":6},{"amount":"300.00","dueDate":"2026-05-08","status":"upcoming","installmentNumber":7},{"amount":"300.00","dueDate":"2026-06-08","status":"upcoming","installmentNumber":8},{"amount":"300.00","dueDate":"2026-07-08","status":"upcoming","installmentNumber":9},{"amount":"300.00","dueDate":"2026-08-08","status":"upcoming","installmentNumber":10},{"amount":"300.00","dueDate":"2026-09-08","status":"upcoming","installmentNumber":11},{"amount":"300.00","dueDate":"2026-10-08","status":"upcoming","installmentNumber":12}]' })))), h("section", { class: "FAQ" }, h("h2", null, "\u0627\u0644\u0623\u0633\u0626\u0644\u0629 \u0627\u0644\u0634\u0627\u0626\u0639\u0629"), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "\u0647\u0644 \u0623\u0643\u0633\u0628 \u0645\u0643\u0627\u0641\u0622\u062A \u0648\u0646\u0642\u0627\u0637 \u0627\u0644\u0628\u0637\u0627\u0642\u0629\u061F"), h("div", { class: "faq-body" }, h("p", null, "\u0646\u0639\u0645. \u062A\u0633\u062A\u0645\u0631 \u0641\u064A \u0643\u0633\u0628 \u0645\u0643\u0627\u0641\u0622\u062A \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0648\u0646\u0642\u0627\u0637\u0647\u0627 \u0639\u0644\u0649 \u0627\u0644\u0645\u0634\u062A\u0631\u064A\u0627\u062A \u0627\u0644\u0645\u0624\u0647\u0644\u0629 \u0644\u0644\u062A\u0642\u0633\u064A\u0637 \u0648\u0641\u0642 \u0633\u064A\u0627\u0633\u0629 \u0628\u0646\u0643\u0643."))), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "\u0645\u062A\u0649 \u0645\u0648\u0639\u062F \u0623\u0648\u0644 \u062F\u0641\u0639\u0629\u061F"), h("div", { class: "faq-body" }, h("p", null, "\u0639\u0627\u062F\u0629\u064B \u062E\u0644\u0627\u0644 ", h("strong", null, "30\u201355 \u064A\u0648\u0645\u0627\u064B"), " \u0645\u0646 \u062A\u0627\u0631\u064A\u062E \u0627\u0644\u0634\u0631\u0627\u0621\u060C \u0628\u062D\u0633\u0628 \u062F\u0648\u0631\u0629 \u0627\u0644\u0641\u0648\u062A\u0631\u0629 \u0641\u064A \u0628\u0646\u0643\u0643."))), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "\u0647\u0644 \u064A\u062A\u063A\u064A\u0631 \u062D\u062F \u0628\u0637\u0627\u0642\u062A\u064A\u061F"), h("div", { class: "faq-body" }, h("p", null, "\u0646\u0639\u0645. \u064A\u064F\u062D\u062C\u0632 \u0643\u0627\u0645\u0644 \u0645\u0628\u0644\u063A \u0627\u0644\u0634\u0631\u0627\u0621 \u0645\u0646 \u062D\u062F \u0628\u0637\u0627\u0642\u062A\u0643 \u0627\u0644\u0645\u062A\u0627\u062D \u0639\u0646\u062F \u0627\u0644\u062F\u0641\u0639. \u0648\u0628\u0639\u062F \u0627\u0644\u062A\u062D\u0648\u064A\u0644 \u0625\u0644\u0649 \u0623\u0642\u0633\u0627\u0637 \u0642\u062F \u064A\u0639\u0648\u062F \u0627\u0644\u062D\u062F \u0644\u0644\u062A\u0632\u0627\u064A\u062F \u0645\u0639 \u0633\u062F\u0627\u062F\u0643 \u0644\u0644\u0623\u0642\u0633\u0627\u0637 (\u0648\u0641\u0642 \u0633\u064A\u0627\u0633\u0629 \u0627\u0644\u0628\u0646\u0643)."))), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "\u0645\u0627 \u0627\u0644\u062E\u0637\u0637 \u0627\u0644\u0645\u062A\u0627\u062D\u0629\u061F"), h("div", { class: "faq-body" }, h("p", null, "\u0627\u0644\u062E\u064A\u0627\u0631\u0627\u062A \u0627\u0644\u0634\u0627\u0626\u0639\u0629 \u0647\u064A ", h("strong", null, "3 \u0623\u0648 6 \u0623\u0648 12 \u0634\u0647\u0631\u0627\u064B"), ". \u0648\u062A\u062E\u062A\u0644\u0641 \u0627\u0644\u0625\u062A\u0627\u062D\u0629 \u062D\u0633\u0628 \u0627\u0644\u0628\u0646\u0643 \u0627\u0644\u0645\u064F\u0635\u062F\u0631 \u0648\u0627\u0644\u062A\u0627\u062C\u0631."))), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "\u0643\u0645 \u064A\u0633\u062A\u063A\u0631\u0642 \u062A\u062D\u0648\u064A\u0644 \u0627\u0644\u0634\u0631\u0627\u0621 \u0625\u0644\u0649 \u0623\u0642\u0633\u0627\u0637\u061F"), h("div", { class: "faq-body" }, h("p", null, "\u0639\u0627\u062F\u0629\u064B \u062E\u0644\u0627\u0644 ", h("strong", null, "2\u20134 \u0623\u064A\u0627\u0645"), " \u0628\u0639\u062F \u0625\u062A\u0645\u0627\u0645 \u0627\u0644\u0634\u0631\u0627\u0621 \u0628\u0646\u062C\u0627\u062D."))), h("details", null, h("summary", null, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M8 5l8 7-8 7", stroke: "currentColor", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })), "\u0644\u0645\u0627\u0630\u0627 \u0631\u064F\u0641\u0636 \u0637\u0644\u0628 \u0627\u0644\u062A\u0642\u0633\u064A\u0637\u061F"), h("div", { class: "faq-body" }, h("ul", { class: "list" }, h("li", null, h("span", { class: "dot" }), " \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u063A\u064A\u0631 \u0645\u0624\u0647\u0644\u0629 \u0644\u0644\u062A\u0642\u0633\u064A\u0637"), h("li", null, h("span", { class: "dot" }), " \u0648\u062C\u0648\u062F \u0623\u0643\u062B\u0631 \u0645\u0646 \u0623\u0631\u0628\u0639 \u062E\u0637\u0637 \u062A\u0642\u0633\u064A\u0637 \u0646\u0634\u0637\u0629 \u0639\u0644\u0649 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0646\u0641\u0633\u0647\u0627"), h("li", null, h("span", { class: "dot" }), " \u0627\u0633\u062A\u062E\u062F\u0627\u0645 \u0631\u0635\u064A\u062F \u0645\u064F\u062D\u0645\u0651\u0644/\u0645\u0624\u0642\u062A \u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0632\u064A\u0627\u062F\u0629 \u0627\u0644\u062D\u062F"), h("li", null, h("span", { class: "dot" }), " \u0627\u0644\u0637\u0644\u0628\u0627\u062A \u062E\u0627\u0636\u0639\u0629 \u0644\u0634\u0631\u0648\u0637 \u0648\u0623\u062D\u0643\u0627\u0645 \u0627\u0644\u0628\u0646\u0643 \u0627\u0644\u0645\u064F\u0635\u062F\u0631"))))), h("footer", null, h("p", null, "\u00A9 ", h("span", { id: "year-ar" }), " \u0623\u0645\u0640\u0648\u0627\u0644. \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062A \u0644\u063A\u0631\u0636 \u0627\u0644\u0625\u0631\u0634\u0627\u062F\u061B \u0627\u0644\u0623\u0647\u0644\u064A\u0629 \u0648\u0627\u0644\u062D\u062F\u0648\u062F \u0648\u0627\u0644\u062E\u0637\u0637 \u064A\u062D\u062F\u0651\u062F\u0647\u0627 \u0627\u0644\u0628\u0646\u0643 \u0627\u0644\u0645\u064F\u0635\u062F\u0631 \u0648\u0627\u0644\u062A\u0627\u062C\u0631.")))));
+  }
+  render() {
+    return (h("div", { class: "amwal-installments-guide" }, h("div", { class: "topbar" }, h("div", { class: "topbar-inner" }, h("a", { class: "brand", href: "https://amwal.tech", target: "_blank", rel: "noopener noreferrer" }, h("img", { class: "brand-logo", src: "https://cdn.prod.website-files.com/62294ce746440b7bc08b4fc5/624352eb48193d537d329386_1-2.png", alt: "Amwal logo" })), h("div", { class: "lang-controls" }, h("label", { class: "lang-en" }, "Language:"), h("label", { class: "lang-ar" }, "\u0627\u0644\u0644\u063A\u0629:"), h("select", { class: "lang-select", "aria-label": "Language selector", ref: (el) => this.selectRef = el, onChange: this.handleLanguageChange }, h("option", { value: "en", selected: true }, "English"), h("option", { value: "ar" }, "\u0627\u0644\u0639\u0631\u0628\u064A\u0629"))))), this.currentLang === 'en' ? this.renderEnglishContent() : this.renderArabicContent()));
+  }
+  static get is() { return "amwal-installments-guide"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["amwal-installments-guide.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["amwal-installments-guide.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "locale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'en' | 'ar'",
+          "resolved": "\"ar\" | \"en\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Language locale: 'en' for English, 'ar' for Arabic"
+        },
+        "attribute": "locale",
+        "reflect": false,
+        "defaultValue": "'en'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "currentLang": {}
+    };
+  }
+  static get elementRef() { return "el"; }
 }

package/dist/collection/components/amwal-installments-guide/amwal-installments-guide.stories.js

@@ -1,7 +1,7 @@
 export default {
-    title: 'Static/AmwalInstallmentsGuide',
-    parameters: {
-        notes: `
+  title: 'Static/AmwalInstallmentsGuide',
+  parameters: {
+    notes: `
 # Amwal Installments Guide Component
 
 A reusable web component that displays a comprehensive guide about Amwal Bank Installments. 
@@ -27,18 +27,18 @@ payment schedules, and frequently asked questions.
 
 - **locale**: Language ('en' or 'ar')
     `,
-        layout: 'fullscreen',
-    },
-    argTypes: {
-        locale: {
-            options: ['en', 'ar'],
-            control: { type: 'select' },
-            description: 'Language selection',
-            table: {
-                defaultValue: { summary: 'en' },
-            },
-        }
-    },
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    locale: {
+      options: ['en', 'ar'],
+      control: { type: 'select' },
+      description: 'Language selection',
+      table: {
+        defaultValue: { summary: 'en' },
+      },
+    }
+  },
 };
 const Template = (args) => `
   <div style="width: 100%; min-height: 100vh;">
@@ -58,24 +58,24 @@ const Template = (args) => `
 // Story 1: English Version
 export const EnglishVersion = Template.bind({});
 EnglishVersion.args = {
-    locale: 'en'
+  locale: 'en'
 };
 EnglishVersion.parameters = {
-    docs: {
-        description: {
-            story: 'The guide displayed in English with default settings.',
-        },
+  docs: {
+    description: {
+      story: 'The guide displayed in English with default settings.',
     },
+  },
 };
 // Story 2: Arabic Version
 export const ArabicVersion = Template.bind({});
 ArabicVersion.args = {
-    locale: 'ar'
+  locale: 'ar'
 };
 ArabicVersion.parameters = {
-    docs: {
-        description: {
-            story: 'The guide displayed in Arabic with default settings.',
-        },
+  docs: {
+    description: {
+      story: 'The guide displayed in Arabic with default settings.',
     },
+  },
 };