// Sahh — landing page sections // Each section is a self-contained band that drops into the page in order. // ============================================================ // HERO // ============================================================ const Hero = ({ t, dir, sample }) => { const ar = dir === "rtl"; const H = t.hero; return (
{H.eyebrow}

{H.h1a}
{H.h1b} {H.h1c}

{H.lede}

{["#0A5E3E","#1F7E5C","#3B9D7B","#6CC9A3"].map((c, i) => (
{["N","B","S","K"][i]}
))}
{H.metaCount} {H.meta2}
{H.meta1}
{H.meta3}
{/* floating dish card */}
); }; // ============================================================ // LOGO STRIP // ============================================================ const LogoStrip = ({ t }) => (
{t.logos}
{["Najd Kitchen", "Maraheb", "Bait Mandi", "Cafe Nouri", "Sufra Group", "Dunes Hotel"].map((n, i) => (
{n}
))}
); // ============================================================ // SECTION 01 — SAHH SCORE // ============================================================ const ScoreSection = ({ t, dir, sample }) => { const S = t.sectionScore; const ar = dir === "rtl"; return (
{S.eyebrow}

{S.h2}

{S.lede}

{/* Score breakdown */}
{[ [ar ? "السعرات والكثافة" : "Calories & density", 88], [ar ? "توازن الماكروز" : "Macro balance", 92], [ar ? "المغذّيات الدقيقة" : "Micronutrients", 78], [ar ? "المعالجة والإضافات" : "Processing & additives", 82], [ar ? "الطزاجة والأصل" : "Freshness & sourcing", 86], ].map(([l, v], i) => (
{l}
{v}
))}
{S.tagsTitle}
{S.tagsLede}
{/* Big score visual */}
{sample.dishName}
{sample.tags.map((tag, i) => ( {tag} ))}
{/* score ranges */}
{[ ["80–100", ar ? "ممتاز" : "Excellent", "var(--green)"], ["65–79", ar ? "متوازن" : "Balanced", "var(--lime)"], ["45–64", ar ? "معتدل" : "Moderate", "var(--warn)"], ["0–44", ar ? "متساهل" : "Indulgent", "var(--ink-3)"], ].map(([range, label, color], i) => (
{range}
{label}
))}
); }; // ============================================================ // SECTION 02 — CALCULATOR // ============================================================ const CalculatorSection = ({ t, dir, sample }) => { const C = t.sectionCalc; const ar = dir === "rtl"; const recipeText = ar ? "صدر دجاج 180جم\nأرز بسمتي 150جم مطبوخ\nأفوكادو ½ حبة\nزيت زيتون 1م.ك\nخس روماني 60جم\nصلصة ليمون-ثوم 30جم" : "180g chicken breast, grilled\n150g basmati rice, cooked\n½ avocado, sliced\n1 tbsp olive oil\n60g romaine lettuce\n30g lemon-garlic dressing"; return (
{C.eyebrow}

{C.h2}

{C.lede}

{/* Input */}
{ar ? "إدخال" : "Recipe input"}
{[["doc", ar ? "PDF" : "PDF"], ["scan", ar ? "صورة" : "Photo"], ["bell", ar ? "صوت" : "Voice"]].map(([icon, l], i) => ( ))}
{ar ? "// الزق وصفتك" : "// paste your recipe"} {"\n"} {recipeText}
{ar ? "6 مكوّنات · حصة واحدة" : "6 ingredients · 1 serving"}
{/* Output */}
{/* floating proof chip */}
⚡ {ar ? "في 1.2 ثانية" : "in 1.2s"}
); }; // ============================================================ // SECTION 03 — QR SMART MENU // ============================================================ const QRSection = ({ t, dir, sample }) => { const Q = t.sectionQR; const ar = dir === "rtl"; return (
{/* QR + table mock */}
{Q.eyebrow}

{Q.h2}

{Q.lede}

{[ ["scan", ar ? "مسح فوري" : "Instant scan", ar ? "يفتح خلال ثانية. لا تطبيق، لا تسجيل." : "Opens in under a second. No app, no signup."], ["globe", ar ? "ثنائي اللغة" : "Bilingual by default", ar ? "العربية والإنجليزية تلقائياً، حسب لغة الجهاز." : "Arabic + English, switched automatically by the guest's device."], ["leaf", ar ? "حساسيات وأنظمة" : "Allergens & diets", ar ? "حلال، نباتي، خالٍ من الجلوتين، مكسرات — تنبيهات قبل الطلب." : "Halal, vegan, gluten-free, peanut-safe — flagged before they order."], ["shield", ar ? "ختم رسمي" : "Official seal", ar ? "كل قائمة مرتبطة بالسجل الموثّق من وزارة الصحة." : "Every menu links to the Ministry-of-Health verified registry."], ].map(([icon, h, p], i) => (
{h}
{p}
))}
); }; // ============================================================ // SECTION 04 — DASHBOARD // ============================================================ const DashboardSection = ({ t, dir }) => { const D = t.sectionDash; return (
{D.eyebrow}

{D.h2}

{D.lede}

); }; // ============================================================ // SECTION 05 — CUSTOMER MOBILE MENU // ============================================================ const MobileSection = ({ t, dir, sample }) => { const M = t.sectionMobile; const ar = dir === "rtl"; return (
{M.eyebrow}

{M.h2}

{M.lede}

{[ [ar ? "تحميل تحت ثانية" : "Sub-second load", ar ? "حتى على شبكات بطيئة." : "Even on slow networks."], [ar ? "بدون تطبيق" : "No app needed", ar ? "يعمل في كل متصفح." : "Works in any browser."], [ar ? "وضع داكن" : "Dark mode", ar ? "تلقائياً مع الجهاز." : "Auto with device."], [ar ? "حفظ المفضّلة" : "Save favorites", ar ? "بنقرة واحدة." : "One-tap bookmarks."], ].map(([h, p], i) => (
{h}
{p}
))}
); }; // ============================================================ // PHONE MENU MOCK (used in Mobile section) // ============================================================ const PhoneMenuMock = ({ dir, sample }) => { const ar = dir === "rtl"; return (
{/* status */}
9:41
{/* header */}
{ar ? "نجد كيتشن" : "Najd Kitchen"} {ar ? "موثّق" : "Verified"}
{/* filter row */}
{[ar ? "الكل" : "All", ar ? "بروتين" : "High protein", ar ? "نباتي" : "Veg", ar ? "<500" : "<500"].map((f, i) => ( {f} ))}
{/* dishes */}
{/* featured dish */}
Sahh 86
{sample.dishName}
520 kcal · P 42g · C 44g · F 16g
{[ ["Salmon Quinoa", 612, 91, "var(--green)"], ["Kale Caesar", 380, 78, "var(--lime)"], ["Beef Shawarma", 720, 64, "var(--warn)"], ].map(([n, k, sc, col], i) => (
{sc}
{n}
{k} kcal
))}
); }; // ============================================================ // SECTION 06 — ANALYTICS // ============================================================ const AnalyticsSection = ({ t, dir }) => { const A = t.sectionAnalytics; const ar = dir === "rtl"; return (
{A.eyebrow}

{A.h2}

{A.lede}

); }; const AnalyticsKPI = ({ label, value, delta, sub, chart }) => (
{label}
{value}
{delta &&
{delta}
}
{sub &&
{sub}
}
{chart === "line" && } {chart === "bars" && } {chart === "dist" && }
); const MiniLine = () => { const pts = [10, 22, 18, 32, 28, 45, 40, 58, 52, 68, 62, 78]; const max = Math.max(...pts); const path = pts.map((v, i) => `${(i/(pts.length-1))*100} ${100 - (v/max)*100}`).join(" L"); return ( ); }; const MiniBars = () => { const bars = [40, 55, 78, 62, 91, 84, 70]; return (
{bars.map((v, i) => (
))}
); }; const MiniDist = () => { const buckets = [12, 24, 36, 48, 32, 18, 10]; const max = Math.max(...buckets); return (
{buckets.map((v, i) => (
))}
); }; // ============================================================ // PRICING // ============================================================ const PricingSection = ({ t, dir }) => { const P = t.pricing; return (
{P.eyebrow}

{P.h2}

{P.lede}

{P.tiers.map((tier, i) => { const featured = tier.featured; return (
{featured && (
★ {dir === "rtl" ? "الأكثر رواجاً" : "Most popular"}
)}

{tier.name}

{tier.for}
{tier.price}
{tier.unit}
{tier.features.map((f, j) => (
{f}
))}
); })}
); }; // ============================================================ // ONBOARDING STRIP // ============================================================ const OnboardingStrip = ({ t, dir }) => { const O = t.onboarding; return (
{O.eyebrow}

{O.h2}

{O.steps.map(([num, title, body], i) => (
{num} —
{title}
{body}
))}
); }; // ============================================================ // FINAL CTA // ============================================================ const FinalCTA = ({ t, dir }) => { const C = t.cta; return (

{C.h}

{C.sub}

); }; // ============================================================ // FOOTER // ============================================================ const Footer = ({ t, dir }) => { const F = t.foot; const ar = dir === "rtl"; return ( ); }; window.Hero = Hero; window.LogoStrip = LogoStrip; window.ScoreSection = ScoreSection; window.CalculatorSection = CalculatorSection; window.QRSection = QRSection; window.DashboardSection = DashboardSection; window.MobileSection = MobileSection; window.AnalyticsSection = AnalyticsSection; window.PricingSection = PricingSection; window.OnboardingStrip = OnboardingStrip; window.FinalCTA = FinalCTA; window.Footer = Footer;