// Nawi — Landing Page sections
// Single source of truth for EN + AR. Each section takes `lang` ('en' or 'ar').
// AR pages render with dir="rtl" on , Almarai as primary font.
const { useState: useStateLP, useEffect: useEffectLP, useRef: useRefLP } = React;
// Bilingual string helper — pick by current lang
function T(strings, lang) {return strings[lang] || strings.en;}
// Quick inline helper for short bilingual strings used inline
function tx(en, ar, lang) {return lang === 'ar' ? ar : en;}
// ────────────────────────────────────────────────────────────────────
// Atoms
// ────────────────────────────────────────────────────────────────────
function Eyebrow({ children, color, style = {} }) {
return (
);
}
// ────────────────────────────────────────────────────────────────────
// BRAND STATEMENT
// ────────────────────────────────────────────────────────────────────
function LPBrandStatement({ lang }) {
const s = T({
en: {
eyebrow: 'Zero clutter · one voice',
title: <>One color does the work of ten.,
body: 'Nawi uses one accent color — Ultraviolet. Everything else is type, whitespace, and intention. No chrome that doesn\u2019t carry meaning.',
swatchName: 'Ultraviolet'
},
ar: {
eyebrow: 'دون فوضى · صوتٌ واحد',
title: <>لونٌ واحد يقومُ بعملِ العشرة,
body: 'ناوي يستخدم لونًا مميّزًا واحدًا — أُلتراڤايلوت. وما تبقّى خطٌّ وفراغٌ ونيّة. لا زخرفةَ لا تحمل معنىً.',
swatchName: 'أُلتراڤايلوت'
}
}, lang);
return (
{s.eyebrow}
{s.title}
{s.body}
{s.swatchName}
#4D21FC
);
}
// ────────────────────────────────────────────────────────────────────
// CALENDARS
// ────────────────────────────────────────────────────────────────────
function LPCalendars({ lang }) {
const s = T({
en: {
eyebrow: 'Hijri + Gregorian',
title1: 'Two calendars,',
title2: 'one calm.',
body: 'The 1st of every month shows both. Saudi National holidays, Islamic dates, and your team\u2019s standup live on the same grid — never stacked, never an afterthought.',
stack: {
l1: 'Gregorian', v1: 'Mon, May 18 · 2026',
l2: 'Hijri', v2en: 'Mon, 3 Ramadan', v2yr: '1447',
l3: 'Maghrib', v3: '18:42'
},
pills: [
{ c: 'lp-event-saudi', label: 'Saudi National' },
{ c: 'lp-event-islamic', label: 'Islamic' },
{ c: 'lp-event-international', label: 'International' }]
},
ar: {
eyebrow: 'هجريّ + ميلاديّ',
title1: 'تقويمان،',
title2: 'صَفاءٌ واحد',
body: 'أوّلُ كلِّ شهرٍ يظهر بالتقويمين. المناسبات الوطنيّة، والتّواريخُ الإسلاميّة، واجتماعاتُ فريقِك على الشبكةِ نفسِها. لا تراكم، ولا تأجيل.',
stack: {
l1: 'الميلاديّ', v1: 'الإثنين، ١٨ مايو · ٢٠٢٦',
l2: 'الهجريّ', v2en: 'الإثنين، ٣ رمضان', v2yr: '١٤٤٧',
l3: 'المغرب', v3: '١٨:٤٢'
},
pills: [
{ c: 'lp-event-saudi', label: 'وطنيّ سعوديّ' },
{ c: 'lp-event-islamic', label: 'إسلاميّ' },
{ c: 'lp-event-international', label: 'دوليّ' }]
}
}, lang);
return (
);
}
// ────────────────────────────────────────────────────────────────────
// MATRIX
// ────────────────────────────────────────────────────────────────────
function LPMatrix({ lang }) {
const s = T({
en: {
eyebrow: 'Eisenhower priorities',
title1: 'Important.',
title2: 'Or just loud?',
body: 'A 2 × 2 you can actually live in. Every task lands in one of four boxes, and the box decides what happens to it. Drag, re-rank, or let the priority flag do the routing.',
quadrants: [
{ id: 'do', en: 'Do', color: '#EF4444', body: 'Urgent + important. Today, by name.' },
{ id: 'schedule', en: 'Schedule', color: 'var(--accent)', body: 'Important, not urgent. Put it on the calendar.' },
{ id: 'delegate', en: 'Delegate', color: '#F59E0B', body: 'Urgent, not important. Hand it off.' },
{ id: 'eliminate', en: 'Eliminate', color: 'var(--fg2)', body: 'Neither. Be honest. Let it go.' }]
},
ar: {
eyebrow: 'مصفوفة آيزنهاور',
title1: 'مُهمّ؟',
title2: 'أم مجرّد ضوضاء؟',
body: 'مصفوفةٌ بحجمِ ٢×٢ يمكنك أن تعيش فيها. كلُّ مهمّةٍ تحطّ في إحدى الخاناتِ الأربع، والخانةُ تقرّر مصيرها. اسحب، أو رتّب، أو دع علَم الأولويّة يتولّى الأمر.',
quadrants: [
{ id: 'do', en: 'افعل', color: '#EF4444', body: 'عاجل ومهمّ. اليوم، بالاسم.' },
{ id: 'schedule', en: 'جدول', color: 'var(--accent)', body: 'مهمّ، غير عاجل. ضعهُ على التّقويم.' },
{ id: 'delegate', en: 'فوّض', color: '#F59E0B', body: 'عاجل، غير مهمّ. سلّمهُ لغيرِك.' },
{ id: 'eliminate', en: 'احذف', color: 'var(--fg2)', body: 'لا هذا ولا ذاك. كن صريحًا. تخلَّ عنه.' }]
}
}, lang);
return (
{s.eyebrow}
{s.title1}
{s.title2}
{s.body}
{s.quadrants.map((q) =>
{q.en}
{q.body}
)}
);
}
// ────────────────────────────────────────────────────────────────────
// PRIVACY
// ────────────────────────────────────────────────────────────────────
function LPPrivacy({ lang }) {
const s = T({
en: {
eyebrow: 'On-device · local-first',
title: 'Your day, your data.',
body: <>The Saudi-Parser model that reads "بعد المغرب" runs on your phone. Sync is opt-in, end-to-end. We don\u2019t sell anything, because we sell the app.,
stats: [
{ num: '0', label: 'trackers' },
{ num: '0', label: 'ads' },
{ num: '100%', label: 'local-first', accent: true }]
},
ar: {
eyebrow: 'على الجهاز · محلّيٌ أوّلًا',
title: 'يومُك، بياناتُك',
body: <>نموذجُ «المحلّل السّعودي» الذي يقرأ «بعد المغرب» يعمل على هاتفِك. المزامنةُ اختياريّة ولا نبيع بياناتِك.,
stats: [
{ num: '٠', label: 'تتبع' },
{ num: '٠', label: 'إعلانات' },
{ num: '٪١٠٠', label: 'محلّيّ أوّلًا', accent: true }]
}
}, lang);
return (
{s.eyebrow}
{s.title}
{s.body}
{s.stats.map((st, i) =>
{i > 0 && }
{st.num}
{st.label}
)}
);
}
// ────────────────────────────────────────────────────────────────────
// QUOTE MOMENT
// ────────────────────────────────────────────────────────────────────
function LPQuote({ lang }) {
const s = T({
en: {
label: 'The principle',
quote: <>Write a task tomorrow at 9. The app figures out the rest.
},
ar: {
label: 'المبدأ',
quote: <>اكتبِ المُهمّة بعد المغرب. التّطبيقُ يتكفّلُ بالباقي.
}
}, lang);
return (
{s.label}
{s.quote}
);
}
// ────────────────────────────────────────────────────────────────────
// FINAL CTA
// ────────────────────────────────────────────────────────────────────
function LPFinalCTA({ lang }) {
const s = T({
en: {
eyebrow: 'Request an invite',
title: 'Get on the list.',
body: 'Nawi is in closed beta. iOS 16+ and Android 10+. Drop your email and we\u2019ll send an invite when a seat opens.',
note: 'Closed beta · TestFlight + Play Internal Testing'
},
ar: {
eyebrow: 'اطلب دعوة',
title: 'انضمّ للقائمة',
body: 'ناوي حاليًا في بيتا مغلقة. للـ iOS 16 فما فوق، وأندرويد 10 فما فوق. اترك بريدك، وسنرسل دعوة عندما يتاح مكان.',
note: 'بيتا مغلقة · عبر TestFlight و Play Internal Testing'
}
}, lang);
return (