// plandetail.jsx — MilletsFit single plan (product) page, Editorial Calm style // Uses globals: BRAND, serif, sans, mono, Ph, Eyebrow, WRAP, Reveal, SiteNav, SiteFooter, // PLANS, getPlan, MealExplorer, FAQ const { useState: useStateD, useEffect: useEffectD, useRef: useRefD } = React; const DEFAULT_DURATIONS = [10, 20, 30]; const aed = (n) => `AED ${n.toLocaleString()}`; // A plan's meals-per-day badge — most plans are 3 meals; a plan whose menu // includes a snack (e.g. the Trial Meal Plan) shows 4. const mealsPerDay = (plan) => (plan.days && plan.days[0] && plan.days[0].snack ? 4 : 3); /* ── check bullet ── */ function Check() { return ( ); } /* ── image gallery ── */ function Gallery({ plan }) { const imgs = [plan.img, ...(plan.gallery || [])].filter(Boolean); const captions = ["plated meal", "the spread", "fresh ingredients", "daily delivery"]; const [sel, setSel] = useStateD(0); const cur = imgs[sel]; return (
{plan.category}
{imgs.length > 1 && (
{imgs.map((s, i) => ( ))}
)}
{captions[sel] || "meal"}
); } /* ── purchase panel ── */ function PurchasePanel({ plan, duration, setDuration, onAdd, added, innerRef }) { const price = plan.pricing[`d${duration}`]; const perDay = Math.round(price / duration); const durations = (plan.durations || DEFAULT_DURATIONS).map((d) => ({ d, key: `d${d}` })); const longest = durations[durations.length - 1]?.d; return (
Plans — {plan.category}

{plan.name}

{plan.intro}

{/* benefits */}
{plan.benefits.map((b) => (
{b}
))}
{/* duration */}
Choose your duration {mealsPerDay(plan)} meals / day
{durations.map(({ d, key }) => { const active = d === duration; const pr = plan.pricing[key]; const op = plan.oldPricing && plan.oldPricing[key]; return ( ); })}
{/* price + cta */}
Total · incl. VAT
{plan.oldPricing && plan.oldPricing[`d${duration}`] &&
{aed(plan.oldPricing[`d${duration}`])}
}
{aed(price)}
{aed(perDay)} per day
{/* reassurance */}
{[["Allergies?", "On the checkout page, tell our team if you have any allergies."], ["Storage", "Keep refrigerated at 0–5°C and enjoy fresh."]].map(([t, d]) => (
{t} {d}
))}
); } /* ── the science band ── */ function ScienceBand({ plan }) { return (
The science

{plan.science.heading}

{plan.science.body}

{plan.science.stats.map(([n, l], i) => (
{n}
{l}
))}
); } /* ── convenience / how it arrives (forest band) ── */ function Convenience() { const steps = [ ["Cooked fresh each morning", "Whole, single-origin millets prepared daily by our chefs — no preservatives."], ["Delivered to your door", "Daily or in 3-day packs across Dubai, Abu Dhabi, Sharjah & Ajman, in eco-friendly insulated packaging."], ["Keep it fresh", "Store your meals refrigerated at 0–5°C and enjoy them fresh through the day for the best taste."], ]; return (
How it arrives

Fresh from our kitchen, every day
{steps.map(([t, d], i) => (
0{i + 1}

{t}

{d}

 ))}
); } /* ── related plans ── */ function Related({ plan }) { const others = PLANS.filter((p) => p.slug !== plan.slug && !p.hidden).slice(0, 3); return (
More plans

You might also like
{others.map((p, i) => (
{p.category}

{p.name}

From {aed(p.pricing.d10)} View →
))}
); } /* ── reviews ── */ function StarRow({ rating, size = 15 }) { return ( {[1, 2, 3, 4, 5].map((n) => ( ))} ); } function PlanReviews({ plan }) { const [data, setData] = useStateD(null); useEffectD(() => { fetch(`/api/reviews?action=list&slug=${plan.slug}`) .then((r) => (r.ok ? r.json() : null)) .then(setData) .catch(() => setData(null)); }, [plan.slug]); if (!data || data.count === 0) return null; return (
Customer reviews
{data.average.toFixed(1)} · {data.count} review{data.count === 1 ? "" : "s"}
{data.reviews.map((r, i) => (
{r.name}
{r.date}
{r.text &&

{r.text}

}
))}
); } /* ── sticky purchase bar ── */ function StickyBar({ plan, duration, show, onAdd, added }) { const price = plan.pricing[`d${duration}`]; return (
{plan.name}
{duration}-day · {aed(Math.round(price / duration))}/day
Total
{aed(price)}
); } /* ── page ── */ function PlanDetailPage() { const params = new URLSearchParams(window.location.search); const plan = getPlan(window.__PLAN_SLUG) || getPlan(params.get("plan")) || PLANS[0]; const [duration, setDuration] = useStateD(() => (plan.durations && plan.durations[0]) || 10); const [added, setAdded] = useStateD(false); const [showBar, setShowBar] = useStateD(false); const panelRef = useRefD(null); const handleAdd = () => { try { window.CartAPI && window.CartAPI.add(plan.slug, duration, 1); } catch {} setAdded(true); clearTimeout(window.__addT); window.__addT = setTimeout(() => setAdded(false), 2400); }; useEffectD(() => { const el = panelRef.current; if (!el || !("IntersectionObserver" in window)) return; const io = new IntersectionObserver(([e]) => setShowBar(!e.isIntersecting && e.boundingClientRect.top < 0), { rootMargin: "-100px 0px 0px 0px" }); io.observe(el); return () => io.disconnect(); }, []); return (
); } Object.assign(window, { PlanDetailPage });