var __create = Object.create; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __getProtoOf = Object.getPrototypeOf; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( // If the importer is in node compatibility mode or this is not an ESM // file that has been converted to a CommonJS file using a Babel- // compatible transform (i.e. "__esModule" has not been set), then set // "default" to the CommonJS "module.exports" for node compatibility. isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod )); var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); var stdin_exports = {}; __export(stdin_exports, { default: () => SsBeautyHomepage }); module.exports = __toCommonJS(stdin_exports); var import_react = __toESM(require("react")); var import_react2 = require("@emotion/react"); var import_sdk = require("@packman/sdk"); var import_icons_react = require("@tabler/icons-react"); var import_jsx_runtime = require("@emotion/react/jsx-runtime"); const C = { surface: "#FFFFFF", surfaceSoft: "#F8F5F1", surfaceDeep: "#EFE9E0", amber: "#B17A4A", amberDeep: "#7C5230", ink: "#1A1410", inkSoft: "#3A2D22", muted: "#9A8E7E", white: "#FFFFFF", rule: "rgba(26,20,16,0.12)", ruleSoft: "rgba(26,20,16,0.06)" }; const FONT = "'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"; const loc = (val, en, ar, isAr) => { if (!val) return isAr ? ar : en; if (typeof val === "object") return isAr ? val.ar || ar : val.en || en; return val; }; function resolveMediaUrl(raw) { if (!raw) return ""; if (typeof raw === "string") return raw; if (Array.isArray(raw) && raw.length > 0) return resolveMediaUrl(raw[0]); if (typeof raw === "object" && raw !== null) { const o = raw; return o.file?.cdnUrl || o.file?.url || o.cdnUrl || o.url || o.src || ""; } return ""; } const VIDEO_EXT_RE = /\.(mp4|webm|mov|m4v|ogg|ogv)(\?.*)?$/i; function resolveMediaType(raw) { const url = resolveMediaUrl(raw); if (raw && typeof raw === "object" && !Array.isArray(raw)) { const o = raw; const mime = o.mimeType || o.contentType || o.type || o.file?.mimeType || o.file?.contentType || o.file?.type || ""; if (typeof mime === "string") { if (mime.toLowerCase().startsWith("video/")) return "video"; if (mime.toLowerCase().startsWith("image/")) return "image"; } } if (Array.isArray(raw) && raw.length > 0) return resolveMediaType(raw[0]); return VIDEO_EXT_RE.test(url) ? "video" : "image"; } function parseTitleHtml(input) { if (!input) return []; const parts = []; const re = /([\s\S]*?)<\/strong>/gi; let last = 0; let m; while ((m = re.exec(input)) !== null) { if (m.index > last) parts.push({ text: input.slice(last, m.index), bold: false }); parts.push({ text: m[1], bold: true }); last = re.lastIndex; } if (last < input.length) parts.push({ text: input.slice(last), bold: false }); return parts.flatMap((p) => { const segs = p.text.split(//i); return segs.flatMap( (s, i) => i === 0 ? [{ text: s, bold: p.bold }] : [{ text: "\n", bold: p.bold }, { text: s, bold: p.bold }] ); }); } function parseIngredients(raw) { if (!raw) return []; const lines = Array.isArray(raw) ? raw.map(String) : typeof raw === "string" ? raw.split(/\n/) : []; return lines.map((line) => line.trim()).filter(Boolean).map((line) => { const [name = "", icon = ""] = line.split("|").map((s) => s.trim()); return { name, icon }; }).filter((it) => !!it.name); } function pickProductImage(p) { const v = p.variants?.[0]; return v?.mediaFiles?.[0]?.file?.cdnUrl || v?.mediaFiles?.[0]?.file?.url || p.mediaFiles?.[0]?.file?.cdnUrl || p.mediaFiles?.[0]?.file?.url || ""; } function productsToCarousel(raw, currencyEn = "AED", currencyAr = "\u062F.\u0625", isAr = false) { if (!Array.isArray(raw)) return []; return raw.map((p) => { const v = p.variants?.[0]; const price = v?.price != null ? `${isAr ? currencyAr : currencyEn} ${v.price}` : ""; const title = typeof p.name === "object" ? (isAr ? p.name?.ar || p.name?.en : p.name?.en) || "" : String(p.name || ""); return { title, subtitle: "", price, image: pickProductImage(p), url: p.links?.details || "#", variant: v }; }).filter((it) => !!it.title); } function parseCarousel(raw) { const lines = (() => { if (!raw) return []; if (Array.isArray(raw)) return raw.map(String); if (typeof raw === "string") return raw.split(/\n/); return []; })(); return lines.map((line) => line.trim()).filter(Boolean).map((line) => { const parts = line.split("|").map((s) => s.trim()); if (parts.length >= 5) { const [title2 = "", subtitle2 = "", price = "", image = "", url2 = "#"] = parts; return { title: title2, subtitle: subtitle2, price, image, url: url2 }; } const [title = "", subtitle = "", third = "", url = "#"] = parts; const looksLikeUrl = /^(https?:|data:|\/)/.test(third); return looksLikeUrl ? { title, subtitle, price: "", image: third, url } : { title, subtitle, price: third, image: "", url }; }).filter((it) => !!it.title || !!it.image); } const ProductCard = import_react.default.memo(function ProductCard2({ item, isAr, addToCartLabel, inCartLabel, soldOutLabel, viewProductLabel }) { const [isAdding, setIsAdding] = import_react.default.useState(false); const [justAdded, setJustAdded] = import_react.default.useState(false); const cartController = (0, import_sdk.useVariantCartController)(item.variant); const { canAdd, add: addToCart, quantity: cartQuantity, isInCart } = cartController || {}; const isSoldOut = !!item.variant && canAdd === false && !isInCart; const handleAdd = import_react.default.useCallback( async (e) => { e.preventDefault(); e.stopPropagation(); if (!addToCart || isSoldOut || isAdding) return; setIsAdding(true); try { await addToCart(1); setJustAdded(true); setTimeout(() => setJustAdded(false), 1800); } finally { setIsAdding(false); } }, [addToCart, isSoldOut, isAdding] ); const hasCart = !!item.variant && !!addToCart; const buttonLabel = isSoldOut ? soldOutLabel : isInCart && cartQuantity ? `${inCartLabel} (${cartQuantity})` : justAdded ? inCartLabel : addToCartLabel; return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ss-pc ss-reveal", children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sdk.Link, { href: item.url, className: "ss-pc-img", "aria-label": item.title, children: [ item.image && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: item.image, alt: item.title, loading: "lazy" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ss-pc-arrow", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_react.IconArrowUpRight, { size: 15, stroke: 1.7, style: { transform: isAr ? "scaleX(-1)" : "none" } }) }), isInCart && cartQuantity ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ss-pc-badge", "aria-label": inCartLabel, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_react.IconCheck, { size: 12, stroke: 2.4 }), cartQuantity ] }) : null ] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ss-pc-meta", children: [ item.subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "ss-pc-sub", children: item.subtitle }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sdk.Link, { href: item.url, className: "ss-pc-name-link", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: "ss-pc-name", children: item.title }) }), item.price && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "ss-pc-price", children: item.price }), hasCart ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)( "button", { type: "button", className: `ss-pc-add${isInCart ? " ss-pc-add--in" : ""}${isSoldOut ? " ss-pc-add--out" : ""}`, onClick: handleAdd, disabled: isSoldOut || isAdding, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: isAdding ? "\u2026" : buttonLabel }) } ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sdk.Link, { href: item.url, className: "ss-pc-add", "aria-label": viewProductLabel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: viewProductLabel }) }) ] }) ] }); }); function SsBeautyHomepage({ settings }) { const { language } = (0, import_sdk.useLanguage)(); const isAr = (language || "en").toLowerCase().startsWith("ar"); const c = settings?.content || {}; const o = settings?.options || {}; const show = (k, d = true) => k in (o || {}) ? !!o[k] : d; const HERO_VIDEO_DESKTOP = "https://cdn.packman.app/6913408a5385ec008efc14e4.mp4"; const HERO_VIDEO_MOBILE = "https://cdn.packman.app/6913408e37f7ce02070a23e9.mp4"; const heroMediaUrl = resolveMediaUrl(c.heroMedia); const heroMediaType = resolveMediaType(c.heroMedia); const heroVideo = heroMediaType === "video" ? heroMediaUrl : ""; const heroImage = heroMediaType === "image" ? heroMediaUrl : ""; const heroVideoResolved = heroVideo || (heroImage ? "" : HERO_VIDEO_DESKTOP); const heroVideoMobile = heroVideo || (heroImage ? "" : HERO_VIDEO_MOBILE); const heroWordmark = loc(c.heroWordmark, "SS BEAUTY", "SS BEAUTY", isAr); const heroEyebrow = loc( c.heroEyebrow, "We Believe In The Power Of Nature To Enhance Your Beauty.", "\u0646\u0624\u0645\u0646 \u0628\u0642\u0648\u0629 \u0627\u0644\u0637\u0628\u064A\u0639\u0629 \u0641\u064A \u062A\u0639\u0632\u064A\u0632 \u062C\u0645\u0627\u0644\u0643.", isAr ); const heroTitle = loc(c.heroTitle, "Unlock Your Natural Beauty", "\u0627\u0643\u062A\u0634\u0641\u064A \u062C\u0645\u0627\u0644\u0643 \u0627\u0644\u0637\u0628\u064A\u0639\u064A", isAr); const heroBody = loc( c.heroBody, "Our Premium Hair Oil Is Designed To Nourish Your Scalp, Restore Vitality To Your Hair, And Leave You Feeling Confident With Every Drop.", "\u0632\u064A\u062A \u0627\u0644\u0634\u0639\u0631 \u0627\u0644\u0641\u0627\u062E\u0631 \u0644\u062F\u064A\u0646\u0627 \u0645\u0635\u0645\u0645 \u0644\u062A\u063A\u0630\u064A\u0629 \u0641\u0631\u0648\u0629 \u0631\u0623\u0633\u0643\u060C \u0648\u0627\u0633\u062A\u0639\u0627\u062F\u0629 \u0627\u0644\u062D\u064A\u0648\u064A\u0629 \u0644\u0634\u0639\u0631\u0643\u060C \u0648\u0645\u0646\u062D\u0643 \u0627\u0644\u062B\u0642\u0629 \u0645\u0639 \u0643\u0644 \u0642\u0637\u0631\u0629.", isAr ); const heroCtaLabel = loc(c.heroCtaLabel, "Shop Now", "\u062A\u0633\u0648\u0642 \u0627\u0644\u0622\u0646", isAr); const heroCtaUrl = c.heroCtaUrl || "/shop/ss-beauty-hair-oil/ss-beauty-hair-oil"; const carouselEyebrow = loc(c.carouselEyebrow, "Best Sellers", "\u0627\u0644\u0623\u0643\u062B\u0631 \u0645\u0628\u064A\u0639\u0627\u064B", isAr); const carouselTitle = loc(c.carouselTitle, "Shop The Collection", "\u062A\u0633\u0648\u0642\u064A \u0627\u0644\u0645\u062C\u0645\u0648\u0639\u0629", isAr); const addToCartLabel = loc(c.addToCartLabel, "Add to Cart", "\u0623\u0636\u0641 \u0625\u0644\u0649 \u0627\u0644\u0633\u0644\u0629", isAr); const inCartLabel = loc(c.inCartLabel, "In Cart", "\u0641\u064A \u0627\u0644\u0633\u0644\u0629", isAr); const soldOutLabel = loc(c.soldOutLabel, "Sold Out", "\u0646\u0641\u062F", isAr); const viewProductLabel = loc(c.viewProductLabel, "View Product", "\u0639\u0631\u0636 \u0627\u0644\u0645\u0646\u062A\u062C", isAr); const pickedProducts = productsToCarousel(c.carouselProducts, "AED", "\u062F.\u0625", isAr); const manualProducts = parseCarousel(c.carouselManual); const demoProducts = [ { title: isAr ? "\u0632\u064A\u062A \u0627\u0644\u0634\u0639\u0631 \u0627\u0644\u0641\u0627\u062E\u0631" : "Premium Hair Oil", subtitle: "", price: isAr ? "\u062F.\u0625 \u0661\u0662\u0660" : "AED 120", image: "https://cdn.packman.app/691482117c49620099aafaae.webp", url: "/shop" }, { title: isAr ? "\u0633\u064A\u0631\u0648\u0645 \u0641\u0631\u0648\u0629 \u0627\u0644\u0631\u0623\u0633" : "Scalp Serum", subtitle: "", price: isAr ? "\u062F.\u0625 \u0661\u0664\u0665" : "AED 145", image: "https://cdn.packman.app/6916c1a9df8ad801a4a0fbe4.webp", url: "/shop" }, { title: isAr ? "\u0642\u0637\u0631\u0627\u062A \u0627\u0644\u0644\u0645\u0639\u0627\u0646" : "Shine Drops", subtitle: "", price: isAr ? "\u062F.\u0625 \u0669\u0665" : "AED 95", image: "https://cdn.packman.app/6914843f0baa7601072fdfee.webp", url: "/shop" }, { title: isAr ? "\u0645\u062C\u0645\u0648\u0639\u0629 \u0627\u0644\u062A\u063A\u0630\u064A\u0629" : "Nourish Set", subtitle: "", price: isAr ? "\u062F.\u0625 \u0662\u0662\u0660" : "AED 220", image: "https://cdn.packman.app/691483550aa5f70233cdcd0f.webp", url: "/shop" } ]; const carousel = pickedProducts.length ? pickedProducts : manualProducts.length ? manualProducts : demoProducts; const ingredientsTitle = loc( c.ingredientsTitle, "Founded By Expert Of PHARMACISTS!", "\u062A\u0623\u0633\u0633\u062A \u0645\u0646 \u0642\u0628\u0644 \u0645\u062C\u0645\u0648\u0639\u0629 \u0645\u0646 \u0627\u0644\u0635\u064A\u0627\u062F\u0644\u0629 \u0627\u0644\u062E\u0628\u0631\u0627\u0621", isAr ); const ingredientsBody = loc( c.ingredientsBody, "Every Product Has A Special Origin Story, And Each Ingredient Is Carefully Selected To Maximize Its Benefits.", "\u0644\u0643\u0644 \u0645\u0646\u062A\u062C \u0642\u0635\u0629 \u0623\u0635\u0644 \u062E\u0627\u0635\u0629\u060C \u0648\u064A\u062A\u0645 \u0627\u062E\u062A\u064A\u0627\u0631 \u0643\u0644 \u0645\u0643\u0648\u0646 \u0628\u0639\u0646\u0627\u064A\u0629 \u0644\u062A\u062D\u0642\u064A\u0642 \u0623\u0642\u0635\u0649 \u0627\u0633\u062A\u0641\u0627\u062F\u0629 \u0645\u0646\u0647.", isAr ); const defaultIngredients = isAr ? [ { name: "\u0625\u0643\u0644\u064A\u0644 \u0627\u0644\u062C\u0628\u0644", icon: "https://cdn.packman.app/673dec77fdbe930168b11c1d.webp" }, { name: "\u062C\u0648\u0632 \u0627\u0644\u0647\u0646\u062F", icon: "https://cdn.packman.app/673dec564266cd0069dd3880.webp" }, { name: "\u062E\u0634\u0628 \u0627\u0644\u0623\u0631\u0632", icon: "https://cdn.packman.app/673dec4f6ea4b201f70a2fe0.webp" }, { name: "\u0639\u0628\u0627\u062F \u0627\u0644\u0634\u0645\u0633", icon: "https://cdn.packman.app/673e94c8347773015d6f74fd.webp" }, { name: "\u062C\u0646\u064A\u0646 \u0627\u0644\u0642\u0645\u062D", icon: "https://cdn.packman.app/673e94945fdf7101ec6ba7ca.webp" }, { name: "\u0627\u0644\u062E\u0632\u0627\u0645\u0649", icon: "https://cdn.packman.app/673dec7f42adf201897171af.webp" }, { name: "\u0632\u064A\u062A\u0648\u0646", icon: "https://cdn.packman.app/68b0290f33adad00faeb44b7.webp" }, { name: "\u0623\u0644\u0648 \u0641\u064A\u0631\u0627", icon: "https://cdn.packman.app/68b028f97c5fc802449b05a5.webp" }, { name: "\u0627\u0644\u0644\u064A\u0645\u0648\u0646", icon: "https://cdn.packman.app/68b028e05a1e2200e43e06fc.webp" }, { name: "\u0644\u0648\u0632", icon: "https://cdn.packman.app/68b02946202792011b9a3379.webp" }, { name: "\u062C\u0632\u0631", icon: "https://cdn.packman.app/68b029391935850053c033c7.webp" }, { name: "\u0641\u0631\u0627\u0646\u0643\u064A\u0646\u0633\u0646\u0633", icon: "https://cdn.packman.app/68b0292400b19a003d418683.webp" }, { name: "\u0646\u0628\u0627\u062A \u0627\u0644\u0645\u0631\u0651\u0629", icon: "https://cdn.packman.app/68b0297017d5c101aafd2182.webp" }, { name: "\u0628\u0630\u0648\u0631 \u0627\u0644\u0634\u064A\u0627", icon: "https://cdn.packman.app/68b029582a52a5015270c000.webp" } ] : [ { name: "Rosemary", icon: "https://cdn.packman.app/673dec77fdbe930168b11c1d.webp" }, { name: "Coconut", icon: "https://cdn.packman.app/673dec564266cd0069dd3880.webp" }, { name: "Cedar Wood", icon: "https://cdn.packman.app/673dec4f6ea4b201f70a2fe0.webp" }, { name: "Sunflower", icon: "https://cdn.packman.app/673e94c8347773015d6f74fd.webp" }, { name: "Wheat Germ", icon: "https://cdn.packman.app/673e94945fdf7101ec6ba7ca.webp" }, { name: "Lavender", icon: "https://cdn.packman.app/673dec7f42adf201897171af.webp" }, { name: "Olive", icon: "https://cdn.packman.app/68b0290f33adad00faeb44b7.webp" }, { name: "Aloe Vera", icon: "https://cdn.packman.app/68b028f97c5fc802449b05a5.webp" }, { name: "Lemon", icon: "https://cdn.packman.app/68b028e05a1e2200e43e06fc.webp" }, { name: "Almond", icon: "https://cdn.packman.app/68b02946202792011b9a3379.webp" }, { name: "Carrot", icon: "https://cdn.packman.app/68b029391935850053c033c7.webp" }, { name: "Frankincense", icon: "https://cdn.packman.app/68b0292400b19a003d418683.webp" }, { name: "Myrrh Plant", icon: "https://cdn.packman.app/68b0297017d5c101aafd2182.webp" }, { name: "Shea Seeds", icon: "https://cdn.packman.app/68b029582a52a5015270c000.webp" } ]; const ingredients = parseIngredients(c.ingredientsList).length ? parseIngredients(c.ingredientsList) : defaultIngredients; const featureTitle = loc(c.featureTitle, "Choose SS Beauty", "\u0627\u062E\u062A\u0627\u0631\u064A SS Beauty", isAr); const featureBody = loc( c.featureBody, "Deeply Nourishes And Moisturizes Your Scalp, Adds Shine And Vitality To All Hair Types, Infused With A Blend Of Essential Oils, Including Wheat Germ, Lavender, And Rosemary. Perfect For Dry Or Damaged Hair.", "\u064A\u063A\u0630\u064A \u0648\u064A\u0631\u0637\u0628 \u0641\u0631\u0648\u0629 \u0627\u0644\u0631\u0623\u0633 \u0628\u0639\u0645\u0642\u060C \u0648\u064A\u0636\u064A\u0641 \u0644\u0645\u0639\u0627\u0646\u0627\u064B \u0648\u062D\u064A\u0648\u064A\u0629 \u0644\u062C\u0645\u064A\u0639 \u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u0634\u0639\u0631\u060C \u0645\u062F\u0639\u0651\u0645 \u0628\u0645\u0632\u064A\u062C \u0645\u0646 \u0627\u0644\u0632\u064A\u0648\u062A \u0627\u0644\u0623\u0633\u0627\u0633\u064A\u0629 \u0628\u0645\u0627 \u0641\u064A \u0630\u0644\u0643 \u062C\u0646\u064A\u0646 \u0627\u0644\u0642\u0645\u062D \u0648\u0627\u0644\u0644\u0627\u0641\u0646\u062F\u0631 \u0648\u0625\u0643\u0644\u064A\u0644 \u0627\u0644\u062C\u0628\u0644. \u0645\u062B\u0627\u0644\u064A \u0644\u0644\u0634\u0639\u0631 \u0627\u0644\u062C\u0627\u0641 \u0623\u0648 \u0627\u0644\u062A\u0627\u0644\u0641.", isAr ); const featureLinkLabel = loc(c.featureLinkLabel, "Discover More", "\u0627\u0643\u062A\u0634\u0641 \u0627\u0644\u0645\u0632\u064A\u062F", isAr); const featureLinkUrl = c.featureLinkUrl || "/shop"; const bannerImage = resolveMediaUrl(c.bannerImage) || "https://cdn.packman.app/691485344bbece015f9afcf6.webp"; const socialTitle = loc(c.socialTitle, "Connect, Create, And Explore:", "\u062A\u0648\u0627\u0635\u0644\u060C \u0623\u0646\u0634\u0626\u060C \u0648\u0627\u0633\u062A\u0643\u0634\u0641:", isAr); const socialHashtag = loc(c.socialHashtag, "#SSbeauty", "#SSbeauty", isAr); const socialSubtitle = loc( c.socialSubtitle, "Make Your Social Media Experience Unforgettable!", "\u0627\u062C\u0639\u0644 \u062A\u062C\u0631\u0628\u062A\u0643 \u0639\u0644\u0649 \u0648\u0633\u0627\u0626\u0644 \u0627\u0644\u062A\u0648\u0627\u0635\u0644 \u0627\u0644\u0627\u062C\u062A\u0645\u0627\u0639\u064A \u0644\u0627 \u062A\u064F\u0646\u0633\u0649!", isAr ); const socialFacebookUrl = c.socialFacebookUrl || "https://www.facebook.com/people/SSBeauty/61567189081986/"; const socialInstagramUrl = c.socialInstagramUrl || "https://www.instagram.com/ssbeautybyshero/"; const socialReviewLabel = loc(c.socialReviewLabel, "Let Us Know Your Experience!", "\u0634\u0627\u0631\u0643\u0646\u0627 \u062A\u062C\u0631\u0628\u062A\u0643!", isAr); const socialReviewUrl = c.socialReviewUrl || "https://www.google.com/"; const uspOneTitle = loc(c.uspOneTitle, "Free Shipping", "\u0634\u062D\u0646 \u0645\u062C\u0627\u0646\u064A", isAr); const uspOneSubtitle = loc(c.uspOneSubtitle, "Orders Above 1000AED", "\u0627\u0644\u0637\u0644\u0628\u0627\u062A \u0627\u0644\u062A\u064A \u062A\u0632\u064A\u062F \u0639\u0646 1000 \u062F\u0631\u0647\u0645", isAr); const uspTwoTitle = loc(c.uspTwoTitle, "New Arrivals!", "\u0648\u0627\u0641\u062F\u0648\u0646 \u062C\u062F\u062F!", isAr); const uspTwoSubtitle = loc(c.uspTwoSubtitle, "Latest Products", "\u0623\u062D\u062F\u062B \u0627\u0644\u0645\u0646\u062A\u062C\u0627\u062A", isAr); const uspThreeTitle = loc(c.uspThreeTitle, "Secure Payment", "\u062F\u0641\u0639 \u0622\u0645\u0646", isAr); const uspThreeSubtitle = loc(c.uspThreeSubtitle, "Guaranteed Secure Payment", "\u062F\u0641\u0639 \u0622\u0645\u0646 \u0645\u0636\u0645\u0648\u0646", isAr); const heroVideoRef = (0, import_react.useRef)(null); const HERO_VIDEO_RATE = 0.6; (0, import_react.useEffect)(() => { const v = heroVideoRef.current; if (!v) return; const apply = () => { try { v.playbackRate = HERO_VIDEO_RATE; } catch { } }; apply(); v.addEventListener("loadedmetadata", apply); v.addEventListener("play", apply); return () => { v.removeEventListener("loadedmetadata", apply); v.removeEventListener("play", apply); }; }, [heroVideoResolved, heroVideoMobile]); const rootRef = (0, import_react.useRef)(null); (0, import_react.useEffect)(() => { const root = rootRef.current; if (!root) return; const els = root.querySelectorAll(".ss-reveal"); if (!els.length) return; const obs = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("ss-in"); obs.unobserve(e.target); } }); }, { threshold: 0.14 } ); els.forEach((el) => obs.observe(el)); return () => obs.disconnect(); }, []); const railRef = (0, import_react.useRef)(null); const [railAtStart, setRailAtStart] = import_react.default.useState(true); const [railAtEnd, setRailAtEnd] = import_react.default.useState(false); const syncRailEdges = import_react.default.useCallback(() => { const el = railRef.current; if (!el) return; const max = el.scrollWidth - el.clientWidth; const pos = Math.abs(el.scrollLeft); setRailAtStart(pos <= 2); setRailAtEnd(pos >= max - 2); }, []); (0, import_react.useEffect)(() => { const el = railRef.current; if (!el) return; syncRailEdges(); el.addEventListener("scroll", syncRailEdges, { passive: true }); window.addEventListener("resize", syncRailEdges); return () => { el.removeEventListener("scroll", syncRailEdges); window.removeEventListener("resize", syncRailEdges); }; }, [syncRailEdges, carousel.length]); const scrollRail = import_react.default.useCallback( (dir) => { const el = railRef.current; if (!el) return; const card = el.querySelector(".ss-pc"); const step = card ? card.offsetWidth + 20 : el.clientWidth * 0.8; const delta = (isAr ? -dir : dir) * step; el.scrollBy({ left: delta, behavior: "smooth" }); }, [isAr] ); const USP_COUNT = 3; const [uspIndex, setUspIndex] = import_react.default.useState(0); const uspTrackRef = (0, import_react.useRef)(null); const uspCellRefs = (0, import_react.useRef)([]); const uspPausedRef = (0, import_react.useRef)(false); const uspUserScrollRef = (0, import_react.useRef)(false); (0, import_react.useEffect)(() => { const id = window.setInterval(() => { if (uspPausedRef.current) return; setUspIndex((i) => (i + 1) % USP_COUNT); }, 3500); return () => window.clearInterval(id); }, []); (0, import_react.useEffect)(() => { const cell = uspCellRefs.current[uspIndex]; const track = uspTrackRef.current; if (!cell || !track) return; if (track.scrollWidth <= track.clientWidth) return; const target = cell.offsetLeft - (track.clientWidth - cell.clientWidth) / 2; track.scrollTo({ left: target, behavior: "smooth" }); }, [uspIndex]); (0, import_react.useEffect)(() => { const track = uspTrackRef.current; if (!track) return; let raf = 0; const onScroll = () => { if (!uspUserScrollRef.current) return; cancelAnimationFrame(raf); raf = requestAnimationFrame(() => { const center = track.scrollLeft + track.clientWidth / 2; let best = 0; let bestDist = Infinity; uspCellRefs.current.forEach((cell, i) => { if (!cell) return; const cellCenter = cell.offsetLeft + cell.clientWidth / 2; const d = Math.abs(cellCenter - center); if (d < bestDist) { bestDist = d; best = i; } }); setUspIndex(best); }); }; track.addEventListener("scroll", onScroll, { passive: true }); return () => { track.removeEventListener("scroll", onScroll); cancelAnimationFrame(raf); }; }, []); const bannerRef = (0, import_react.useRef)(null); const bannerImgRef = (0, import_react.useRef)(null); (0, import_react.useEffect)(() => { const wrap = bannerRef.current; const img = bannerImgRef.current; if (!wrap || !img) return; const PARALLAX_RANGE = 60; let raf = 0; let active = false; const update = () => { raf = 0; const rect = wrap.getBoundingClientRect(); const vh = window.innerHeight || document.documentElement.clientHeight; const progress = (rect.top + rect.height / 2 - vh / 2) / (vh / 2 + rect.height / 2); const clamped = Math.max(-1, Math.min(1, progress)); const offset = clamped * PARALLAX_RANGE; img.style.transform = `translate3d(0, ${offset.toFixed(2)}px, 0)`; }; const onScroll = () => { if (raf) return; raf = window.requestAnimationFrame(update); }; const obs = new IntersectionObserver( (entries) => { for (const entry of entries) { if (entry.isIntersecting && !active) { active = true; window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); update(); } else if (!entry.isIntersecting && active) { active = false; window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); } } }, { rootMargin: "10% 0px 10% 0px", threshold: 0 } ); obs.observe(wrap); return () => { obs.disconnect(); if (active) { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); } if (raf) cancelAnimationFrame(raf); }; }, [bannerImage]); const wrapperCss = import_react2.css` direction: ${isAr ? "rtl" : "ltr"}; background: ${C.surface}; color: ${C.ink}; font-family: ${FONT}; -webkit-font-smoothing: antialiased; *, *::before, *::after { box-sizing: border-box; } .ss-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.85s cubic-bezier(.22,1,.36,1), transform 0.85s cubic-bezier(.22,1,.36,1); } .ss-reveal.ss-in { opacity: 1; transform: none; } a { color: inherit; text-decoration: none; } `; const heroSectionCss = import_react2.css` position: relative; width: 100%; height: clamp(560px, 78vh, 760px); color: ${C.ink}; overflow: hidden; background: ${C.surfaceDeep}; @media (max-width: 768px) { height: auto; aspect-ratio: 9 / 16; min-height: 560px; } `; const heroMediaCss = import_react2.css` position: absolute; inset: 0; z-index: 0; background-color: ${C.surfaceDeep}; background-image: ${heroImage ? `url(${heroImage})` : "none"}; background-size: cover; background-position: center; overflow: hidden; > video, > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } /* Desktop: faint left-to-right white wash so the bottom-left text block stays readable regardless of which frame of the hero video is showing. */ &::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient( ${isAr ? "to left" : "to right"}, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.55) 18%, rgba(255,255,255,0.18) 38%, rgba(255,255,255,0.00) 60% ); } /* Mobile: top + bottom soft white wash so both text stacks (eyebrow/title up top, body/CTA at the bottom) stay readable. */ @media (max-width: 768px) { &::after { background: linear-gradient( to bottom, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.45) 22%, rgba(255,255,255,0.00) 45%, rgba(255,255,255,0.00) 60%, rgba(255,255,255,0.55) 82%, rgba(255,255,255,0.95) 100% ); } } `; const heroInnerCss = import_react2.css` position: relative; z-index: 1; height: 100%; width: 100%; max-width: 1320px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px); /* Desktop: bottom-left aligned text column. */ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; text-align: ${isAr ? "right" : "left"}; /* Mobile: keep the original centered top + bottom flow. */ @media (max-width: 768px) { align-items: center; justify-content: space-between; text-align: center; } `; const heroDesktopBlockCss = import_react2.css` width: 100%; max-width: 620px; display: flex; flex-direction: column; align-items: ${isAr ? "flex-end" : "flex-start"}; gap: clamp(10px, 1.4vw, 18px); @media (max-width: 768px) { display: none; } `; const heroMobileTopCss = import_react2.css` display: none; @media (max-width: 768px) { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 720px; } `; const heroMobileBottomCss = import_react2.css` display: none; @media (max-width: 768px) { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 640px; } `; const heroWordmarkCss = import_react2.css` margin: 0; font-family: ${FONT}; font-weight: 600; font-size: clamp(13px, 1.3vw, 15px); letter-spacing: 0.18em; color: ${C.ink}; text-transform: uppercase; `; const heroEyebrowCss = import_react2.css` margin: 0; font-family: ${FONT}; font-weight: 400; font-size: clamp(12px, 1.2vw, 14px); line-height: 1.5; color: ${C.inkSoft}; max-width: 48ch; `; const heroTitleCss = import_react2.css` margin: 0; font-family: ${FONT}; font-weight: 400; font-size: clamp(34px, 5.2vw, 64px); line-height: 1.04; letter-spacing: -0.02em; color: ${C.ink}; & strong { font-weight: 600; color: ${C.amberDeep}; } `; const heroBodyCss = import_react2.css` margin: 0; font-family: ${FONT}; font-weight: 400; font-size: clamp(12px, 1.1vw, 14px); line-height: 1.6; color: ${C.inkSoft}; max-width: 60ch; `; const heroCtaCss = import_react2.css` display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 38px; background: ${C.ink}; color: ${C.surface}; font-family: ${FONT}; font-weight: 500; font-size: 13px; letter-spacing: 0.04em; border: 1px solid ${C.ink}; cursor: pointer; text-decoration: none; transition: background 0.4s ease, color 0.4s ease, gap 0.3s ease; margin-top: 6px; & span, & svg { color: ${C.surface}; transition: color 0.4s ease; } &:hover { background: transparent; color: ${C.ink}; gap: 14px; } &:hover span, &:hover svg { color: ${C.ink}; } `; const ingredientsSectionCss = import_react2.css` width: 100%; background: ${C.surface}; padding: clamp(48px, 7vw, 96px) 0; `; const ingredientsInnerCss = import_react2.css` width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); display: grid; grid-template-columns: minmax(260px, 320px) 1fr; column-gap: clamp(32px, 5vw, 56px); align-items: center; @media (max-width: 900px) { grid-template-columns: 1fr; row-gap: 28px; text-align: center; justify-items: center; } `; const ingredientsHeadCss = import_react2.css` @media (max-width: 900px) { width: 100%; max-width: 540px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; } `; const ingredientsTitleCss = import_react2.css` margin: 0 0 16px; font-family: ${FONT}; font-weight: 400; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.18; letter-spacing: -0.01em; color: ${C.ink}; & strong { font-weight: 700; color: ${C.ink}; } @media (max-width: 900px) { margin: 0; font-size: clamp(22px, 5vw, 28px); text-align: center; } `; const ingredientsBodyCss = import_react2.css` margin: 0; font-family: ${FONT}; font-weight: 400; font-size: clamp(12px, 1.1vw, 13px); line-height: 1.6; color: ${C.muted}; max-width: 36ch; @media (max-width: 900px) { max-width: 40ch; margin: 0 auto; text-align: center; font-size: 12px; } `; const ingredientsRowCss = import_react2.css` display: flex; align-items: flex-end; gap: clamp(20px, 2.6vw, 36px); overflow-x: auto; overflow-y: hidden; padding: 8px 4px 16px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; /* Subtle scrollbar so the affordance is there but quiet. */ scrollbar-width: thin; scrollbar-color: ${C.rule} transparent; &::-webkit-scrollbar { height: 4px; } &::-webkit-scrollbar-thumb { background: ${C.rule}; border-radius: 4px; } &::-webkit-scrollbar-track { background: transparent; } @media (max-width: 900px) { /* Switch from grid to a wrapping flex row so a partial final row (e.g. the last 2 ingredients out of 14) centers instead of sticking flush to the leading edge. */ display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 32px clamp(12px, 3vw, 24px); overflow: visible; padding: 4px 0 0; width: 100%; max-width: 360px; margin: 0 auto; } `; const ingredientItemCss = import_react2.css` flex: 0 0 auto; min-width: 84px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; scroll-snap-align: start; text-align: center; img { width: 56px; height: 56px; object-fit: contain; transition: transform 0.4s cubic-bezier(.22,1,.36,1); } &:hover img { transform: translateY(-2px) scale(1.04); } .label { font-family: ${FONT}; font-weight: 400; font-size: clamp(11px, 1.1vw, 13px); letter-spacing: 0.01em; color: ${C.muted}; text-align: center; } @media (max-width: 900px) { /* Each item takes ~1/3 of the 360px max-width container minus the row gap. Fixed basis means the last partial row stays centered as a block by the parent's justify-content: center. */ flex: 0 0 84px; width: 84px; min-width: 0; } `; const carouselSectionCss = import_react2.css` width: 100%; background: ${C.surface}; padding: clamp(40px, 6vw, 84px) 0 clamp(32px, 4vw, 56px); overflow: hidden; `; const carouselHeadCss = import_react2.css` width: 100%; max-width: 1320px; margin: 0 auto clamp(24px, 3vw, 40px); padding: 0 clamp(20px, 5vw, 56px); display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; @media (max-width: 600px) { flex-direction: column; align-items: ${isAr ? "flex-end" : "flex-start"}; gap: 14px; } `; const carouselHeadTextCss = import_react2.css` display: flex; flex-direction: column; gap: 8px; text-align: ${isAr ? "right" : "left"}; .eyebrow { margin: 0; font-family: ${FONT}; font-weight: 500; font-size: clamp(11px, 1.2vw, 13px); letter-spacing: 0.22em; text-transform: uppercase; color: ${C.amber}; } .title { margin: 0; font-family: ${FONT}; font-weight: 400; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.01em; color: ${C.ink}; } `; const carouselNavCss = import_react2.css` display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; @media (max-width: 600px) { display: none; } button { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: transparent; border: 1px solid ${C.rule}; color: ${C.ink}; cursor: pointer; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease; } button:hover:not(:disabled) { background: ${C.ink}; color: ${C.surface}; border-color: ${C.ink}; } button:disabled { opacity: 0.32; cursor: not-allowed; } button svg { color: inherit; } `; const carouselRailCss = import_react2.css` display: flex; gap: 20px; width: 100%; max-width: 1320px; margin: 0 auto; padding: 4px clamp(20px, 5vw, 56px) 20px; overflow-x: auto; overflow-y: hidden; /* "proximity" (not "mandatory") so the rail rests at its natural scroll origin — the first card stays flush with the gutter and lines up with the section header. "mandatory" force-snaps the first card to the scrollport edge, eating the left padding and pushing the cards left of the title. scroll-padding keeps snap targets respecting the gutter. */ scroll-snap-type: x proximity; scroll-padding-${isAr ? "right" : "left"}: clamp(20px, 5vw, 56px); -webkit-overflow-scrolling: touch; scrollbar-width: none; &::-webkit-scrollbar { display: none; } /* Mobile: drop the horizontal slider and lay the products out as a 2-column grid so every card is visible without swiping. Scroll-snap / overflow are reset so it behaves as a normal block grid. */ @media (max-width: 600px) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; padding: 4px clamp(16px, 5vw, 24px) 16px; overflow: visible; scroll-snap-type: none; } /* ── Card ── */ .ss-pc { flex: 0 0 auto; width: clamp(240px, 28vw, 300px); /* full height so cards in a row match the tallest one and their Add-to-Cart buttons line up on one baseline */ height: 100%; scroll-snap-align: ${isAr ? "end" : "start"}; display: flex; flex-direction: column; background: ${C.surface}; @media (max-width: 600px) { width: auto; min-width: 0; scroll-snap-align: none; } } .ss-pc-img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: ${C.surfaceSoft}; color: inherit; } .ss-pc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s cubic-bezier(.22,1,.36,1); } .ss-pc:hover .ss-pc-img img { transform: scale(1.05); } .ss-pc-arrow { position: absolute; ${isAr ? "left" : "right"}: 12px; top: 12px; width: 38px; height: 38px; border-radius: 50%; background: ${C.surface}; color: ${C.ink}; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(-4px) scale(0.9); transition: opacity 0.4s ease, transform 0.4s ease, background 0.3s ease, color 0.3s ease; pointer-events: none; } .ss-pc:hover .ss-pc-arrow { opacity: 1; transform: none; } .ss-pc-badge { position: absolute; ${isAr ? "right" : "left"}: 12px; top: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 999px; background: ${C.amberDeep}; color: ${C.white}; font-family: ${FONT}; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; } .ss-pc-badge svg { color: ${C.white}; } .ss-pc-meta { display: flex; flex-direction: column; align-items: ${isAr ? "flex-end" : "flex-start"}; text-align: ${isAr ? "right" : "left"}; gap: 6px; /* flush with the image / button frame — no horizontal inset so the name + price start exactly at the card's edge */ padding: 16px 0 0; width: 100%; /* fill the remaining card height so the button can sit at the bottom regardless of how many lines the name takes */ flex: 1 1 auto; } .ss-pc-sub { margin: 0; font-family: ${FONT}; font-weight: 500; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: ${C.amber}; } .ss-pc-name-link { color: inherit; width: 100%; } .ss-pc-name { margin: 0; font-family: ${FONT}; font-weight: 400; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.3; color: ${C.ink}; transition: color 0.3s ease; } .ss-pc:hover .ss-pc-name { color: ${C.amberDeep}; } .ss-pc-price { margin: 2px 0 12px; font-family: ${FONT}; font-weight: 500; font-size: clamp(13px, 1.2vw, 15px); color: ${C.inkSoft}; font-variant-numeric: tabular-nums; } .ss-pc-add { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 18px; background: transparent; color: ${C.ink}; font-family: ${FONT}; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid ${C.ink}; cursor: pointer; text-decoration: none; transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease; } .ss-pc-add:hover:not(:disabled) { background: ${C.ink}; color: ${C.surface}; } .ss-pc-add:disabled { cursor: not-allowed; opacity: 0.55; } .ss-pc-add--in { background: ${C.amberDeep}; color: ${C.white}; border-color: ${C.amberDeep}; } .ss-pc-add--out { opacity: 0.5; } `; const featureCss = import_react2.css` width: 100%; background: ${C.surface}; padding: clamp(48px, 6vw, 80px) clamp(20px, 5vw, 56px) clamp(40px, 5vw, 64px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2vw, 22px); `; const featureTitleCss = import_react2.css` margin: 0; font-family: ${FONT}; font-weight: 500; font-size: clamp(20px, 2.4vw, 26px); color: ${C.ink}; `; const featureBodyCss = import_react2.css` margin: 0; font-family: ${FONT}; font-weight: 400; font-size: clamp(12px, 1.1vw, 13px); line-height: 1.65; color: ${C.muted}; max-width: 68ch; `; const featureLinkCss = import_react2.css` display: inline-block; font-family: ${FONT}; font-weight: 500; font-size: clamp(13px, 1.3vw, 14px); color: ${C.ink}; border-bottom: 1px solid ${C.ink}; padding: 4px 0; transition: color 0.3s ease, border-color 0.3s ease; margin-top: 6px; &:hover { color: ${C.amberDeep}; border-bottom-color: ${C.amberDeep}; } `; const bannerCss = import_react2.css` position: relative; width: 100%; overflow: hidden; background-color: ${C.surfaceDeep}; aspect-ratio: 21 / 9; @media (max-width: 768px) { aspect-ratio: 4 / 5; } `; const bannerImgCss = import_react2.css` position: absolute; inset: 0; width: 100%; /* Over-tall so we always have travel room above + below the container when we translate the image during scroll. */ height: 130%; top: -15%; object-fit: cover; object-position: center; will-change: transform; transform: translate3d(0, 0, 0); `; const socialSectionCss = import_react2.css` width: 100%; background: ${C.surface}; padding: clamp(40px, 6vw, 80px) 0; `; const socialInnerCss = import_react2.css` width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); display: grid; grid-template-columns: 1fr auto; column-gap: clamp(32px, 5vw, 56px); align-items: center; @media (max-width: 768px) { grid-template-columns: 1fr; row-gap: 24px; text-align: center; justify-items: center; } `; const socialTextCss = import_react2.css` display: flex; flex-direction: column; gap: 10px; `; const socialTitleCss = import_react2.css` margin: 0; font-family: ${FONT}; font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.18; color: ${C.ink}; & strong { font-weight: 600; color: ${C.amberDeep}; } `; const socialHashtagCss = import_react2.css` margin: 0; font-family: ${FONT}; font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.18; color: ${C.ink}; `; const socialSubtitleCss = import_react2.css` margin: 6px 0 0; font-family: ${FONT}; font-weight: 400; font-size: clamp(12px, 1.1vw, 13px); line-height: 1.55; color: ${C.muted}; max-width: 56ch; `; const socialActionsCss = import_react2.css` display: inline-flex; align-items: center; gap: 18px; @media (max-width: 768px) { flex-direction: column; gap: 16px; } `; const socialIconsCss = import_react2.css` display: inline-flex; align-items: center; gap: 12px; `; const socialIconBtnCss = import_react2.css` display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: ${C.ink}; color: ${C.surface}; transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; /* The wrapper has \`a { color: inherit }\` which would otherwise override the white color above and leave the Tabler icon black-on-black. Force the SVG stroke to white explicitly. */ & svg { color: ${C.surface}; stroke: ${C.surface}; } &:hover { background: ${C.amberDeep}; transform: translateY(-2px); } &:hover svg { color: ${C.surface}; stroke: ${C.surface}; } `; const socialReviewBtnCss = import_react2.css` display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: ${C.ink}; color: ${C.surface}; font-family: ${FONT}; font-weight: 500; font-size: 13px; letter-spacing: 0.02em; border: 1px solid ${C.ink}; transition: background 0.35s ease, color 0.35s ease, gap 0.3s ease; text-decoration: none; & span, & svg { color: ${C.surface}; transition: color 0.35s ease; } &:hover { background: transparent; color: ${C.ink}; gap: 14px; } &:hover span, &:hover svg { color: ${C.ink}; } `; const uspSectionCss = import_react2.css` width: 100%; background: ${C.surfaceSoft}; border-top: 1px solid ${C.ruleSoft}; border-bottom: 1px solid ${C.ruleSoft}; overflow: hidden; `; const uspInnerCss = import_react2.css` width: 100%; max-width: 1320px; margin: 0 auto; padding: clamp(18px, 2.5vw, 28px) clamp(20px, 5vw, 56px); display: grid; grid-template-columns: repeat(3, 1fr); @media (max-width: 720px) { /* Switch to a horizontal scroll-snap slider on mobile — each cell is a full-width snap target. */ display: flex; grid-template-columns: none; padding: 18px 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; &::-webkit-scrollbar { display: none; } } `; const uspCellCss = import_react2.css` display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 14px clamp(12px, 2vw, 24px); &:not(:last-of-type) { border-${isAr ? "left" : "right"}: 1px solid ${C.rule}; } @media (max-width: 720px) { flex: 0 0 100%; width: 100%; padding: 8px 20px; scroll-snap-align: center; &:not(:last-of-type) { border-right: none; border-left: none; } } .t { font-family: ${FONT}; font-weight: 500; font-size: clamp(14px, 1.4vw, 16px); color: ${C.ink}; } .s { font-family: ${FONT}; font-weight: 400; font-size: 12px; color: ${C.muted}; } `; const uspDotsCss = import_react2.css` display: none; @media (max-width: 720px) { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 0 12px; } `; const uspDotCss = (active) => import_react2.css` width: ${active ? "16px" : "6px"}; height: 4px; border-radius: 2px; background: ${active ? C.ink : C.rule}; border: 0; padding: 0; transition: width 0.3s ease, background 0.3s ease; cursor: pointer; `; const ingredientsTitleParts = parseTitleHtml(String(ingredientsTitle)); const socialTitleParts = parseTitleHtml(String(socialTitle)); return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: rootRef, css: wrapperCss, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)( import_react2.Global, { styles: import_react2.css` @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); html, body { background: ${C.surface}; margin: 0; padding: 0; } ` } ), show("showHero") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { css: heroSectionCss, "aria-label": "Cover", children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { css: heroMediaCss, "aria-hidden": "true", children: heroImage ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)( "video", { ref: heroVideoRef, autoPlay: true, muted: true, loop: true, playsInline: true, preload: "auto", children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("source", { src: heroVideoMobile, media: "(max-width: 768px)", type: "video/mp4" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("source", { src: heroVideoResolved, type: "video/mp4" }) ] } ) }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: heroInnerCss, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: heroDesktopBlockCss, className: "ss-reveal", children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { css: heroWordmarkCss, children: heroWordmark }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { css: heroEyebrowCss, children: heroEyebrow }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { css: heroTitleCss, children: heroTitle }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { css: heroBodyCss, children: heroBody }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sdk.Link, { href: heroCtaUrl, css: heroCtaCss, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: heroCtaLabel }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)( import_icons_react.IconArrowRight, { size: 14, stroke: 1.8, style: { transform: isAr ? "scaleX(-1)" : "none" } } ) ] }) ] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: heroMobileTopCss, className: "ss-reveal", children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { css: heroEyebrowCss, children: heroEyebrow }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { css: heroTitleCss, children: heroTitle }) ] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: heroMobileBottomCss, className: "ss-reveal", children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { css: heroBodyCss, children: heroBody }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sdk.Link, { href: heroCtaUrl, css: heroCtaCss, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: heroCtaLabel }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)( import_icons_react.IconArrowRight, { size: 14, stroke: 1.8, style: { transform: isAr ? "scaleX(-1)" : "none" } } ) ] }) ] }) ] }) ] }), show("showProducts") && carousel.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { css: carouselSectionCss, "aria-label": String(carouselTitle), children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: carouselHeadCss, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: carouselHeadTextCss, className: "ss-reveal", children: [ carouselEyebrow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "eyebrow", children: carouselEyebrow }), carouselTitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "title", children: carouselTitle }) ] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: carouselNavCss, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)( "button", { type: "button", onClick: () => scrollRail(-1), disabled: isAr ? railAtEnd : railAtStart, "aria-label": isAr ? "\u0627\u0644\u062A\u0627\u0644\u064A" : "Previous", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_react.IconArrowLeft, { size: 18, stroke: 1.7 }) } ), /* @__PURE__ */ (0, import_jsx_runtime.jsx)( "button", { type: "button", onClick: () => scrollRail(1), disabled: isAr ? railAtStart : railAtEnd, "aria-label": isAr ? "\u0627\u0644\u0633\u0627\u0628\u0642" : "Next", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_react.IconArrowRight, { size: 18, stroke: 1.7 }) } ) ] }) ] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { css: carouselRailCss, ref: railRef, role: "list", "aria-label": String(carouselTitle), children: carousel.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)( ProductCard, { item, isAr, addToCartLabel, inCartLabel, soldOutLabel, viewProductLabel }, i )) }) ] }), show("showIngredients") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { css: ingredientsSectionCss, "aria-label": "Ingredients", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: ingredientsInnerCss, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: ingredientsHeadCss, className: "ss-reveal", children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { css: ingredientsTitleCss, children: ingredientsTitleParts.map( (p, i) => p.text === "\n" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}, i) : p.bold ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: p.text }, i) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, { children: p.text }, i) ) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { css: ingredientsBodyCss, children: ingredientsBody }) ] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { css: ingredientsRowCss, className: "ss-reveal", role: "list", "aria-label": "Natural ingredients", children: ingredients.map((it, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: ingredientItemCss, role: "listitem", children: [ it.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: it.icon, alt: "", loading: "lazy" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "label", children: it.name }) ] }, i)) }) ] }) }), show("showFeature") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { css: featureCss, "aria-label": "Choose SS Beauty", className: "ss-reveal", children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { css: featureTitleCss, children: featureTitle }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { css: featureBodyCss, children: featureBody }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sdk.Link, { href: featureLinkUrl, css: featureLinkCss, children: featureLinkLabel }) ] }), show("showBanner") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)( "div", { css: bannerCss, ref: bannerRef, role: "img", "aria-label": "SS Beauty editorial banner", className: "ss-reveal", children: bannerImage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)( "img", { ref: bannerImgRef, css: bannerImgCss, src: bannerImage, alt: "", loading: "lazy" } ) } ), show("showSocial") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { css: socialSectionCss, "aria-label": "Connect with us", className: "ss-reveal", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: socialInnerCss, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: socialTextCss, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { css: socialTitleCss, children: socialTitleParts.map( (p, i) => p.text === "\n" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}, i) : p.bold ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: p.text }, i) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, { children: p.text }, i) ) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { css: socialHashtagCss, children: socialHashtag }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { css: socialSubtitleCss, children: socialSubtitle }) ] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: socialActionsCss, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: socialIconsCss, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)( "a", { href: socialFacebookUrl, target: "_blank", rel: "noopener noreferrer", css: socialIconBtnCss, "aria-label": "Facebook", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_react.IconBrandFacebook, { size: 18, stroke: 1.6 }) } ), /* @__PURE__ */ (0, import_jsx_runtime.jsx)( "a", { href: socialInstagramUrl, target: "_blank", rel: "noopener noreferrer", css: socialIconBtnCss, "aria-label": "Instagram", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_react.IconBrandInstagram, { size: 18, stroke: 1.6 }) } ) ] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)( "a", { href: socialReviewUrl, target: "_blank", rel: "noopener noreferrer", css: socialReviewBtnCss, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: socialReviewLabel }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)( import_icons_react.IconArrowRight, { size: 13, stroke: 1.8, style: { transform: isAr ? "scaleX(-1)" : "none" } } ) ] } ) ] }) ] }) }), show("showUsps") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { css: uspSectionCss, "aria-label": "Site benefits", children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)( "div", { css: uspInnerCss, ref: uspTrackRef, onTouchStart: () => { uspPausedRef.current = true; uspUserScrollRef.current = true; }, onTouchEnd: () => { uspPausedRef.current = false; }, onMouseEnter: () => { uspPausedRef.current = true; }, onMouseLeave: () => { uspPausedRef.current = false; uspUserScrollRef.current = false; }, children: [ { t: uspOneTitle, s: uspOneSubtitle }, { t: uspTwoTitle, s: uspTwoSubtitle }, { t: uspThreeTitle, s: uspThreeSubtitle } ].map((cell, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)( "div", { css: uspCellCss, ref: (el) => { uspCellRefs.current[i] = el; }, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "t", children: cell.t }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "s", children: cell.s }) ] }, i )) } ), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { css: uspDotsCss, "aria-hidden": "true", children: Array.from({ length: USP_COUNT }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)( "button", { type: "button", css: uspDotCss(i === uspIndex), onClick: () => { uspPausedRef.current = true; uspUserScrollRef.current = false; setUspIndex(i); window.setTimeout(() => { uspPausedRef.current = false; }, 4500); }, "aria-label": `Show benefit ${i + 1}` }, i )) }) ] }) ] }); }

404

الصفحة غير موجودة