// whymillets.jsx — MilletsFit "Why Millets" page, Editorial Calm style
// Uses globals: BRAND, serif, sans, mono, Ph, Eyebrow, WRAP, Reveal, SiteNav, SiteFooter, SiteCTA

/* ── Intro ── */
function WMIntro() {
  return (
    <section style={{ ...WRAP, paddingTop: 88, paddingBottom: 80 }}>
      <Reveal><Eyebrow style={{ color: BRAND.goldD }}>Why Millets</Eyebrow></Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 64, alignItems: "center", marginTop: 22 }}>
        <Reveal delay={60}>
          <div>
            <h1 style={{ fontFamily: serif, fontWeight: 700, fontSize: 58, lineHeight: 1.04, color: BRAND.forest, margin: 0, letterSpacing: "-.015em", textWrap: "balance" }}>
              The world's oldest grain,<br /><span style={{ fontStyle: "italic", fontWeight: 600, color: BRAND.greenMed }}>its most modern answer.</span>
            </h1>
            <div style={{ width: 56, height: 2, background: BRAND.gold, margin: "30px 0 24px" }} />
            <p style={{ fontSize: 16.5, lineHeight: 1.78, color: BRAND.body, margin: 0, maxWidth: 480 }}>
              Millets — a group of small-seeded grains — have been cultivated for thousands of years and prized for their nutritional profile. At MilletsFit, Chef Bobby crafts wholesome millet-based meals on Dr. Khadar Valli's protocols. Here's why we believe they're a genuine game-changer for health and well-being today.
            </p>
          </div>
        </Reveal>
        <Reveal delay={120} y={32}>
          <div style={{ position: "relative" }}>
            <div style={{ borderRadius: 12, overflow: "hidden", boxShadow: "0 24px 60px rgba(27,58,45,.14)" }}>
              <PImg src="/assets/img/image-2.jpg" label="six millets · wooden board" tone="gold" style={{ width: "100%", height: 440 }} />
            </div>
            <div style={{ position: "absolute", top: -14, left: 6, fontFamily: mono, fontSize: 11, letterSpacing: ".06em", color: BRAND.goldD }}>single-origin varieties</div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ── The case: 5 benefit cards ── */
function WMCase() {
  const items = [
    ["01", "Nutrient-rich & low-GI", "Millets are naturally rich in essential nutrients — fibre, proteins, vitamins, and minerals like iron, magnesium and phosphorus — with a low glycaemic index."],
    ["02", "Supports heart health", "Abundant in antioxidants, including phenolic acids and flavonoids, which combat oxidative stress and support a healthy heart."],
    ["03", "Ideal for weight management", "Low in calories but high in fibre, millets promote satiety and help control hunger — an effective, satisfying choice for anyone."],
    ["04", "Alkaline & easy on digestion", "Unlike refined grains, millets are naturally alkaline, helping reduce acidity. Dr. Khadar Valli's approach favours varieties known for their gentle, gut-friendly qualities."],
    ["05", "Eco-friendly & sustainable", "Millets need fewer resources and thrive in arid, low-water conditions. Choosing them supports sustainable agriculture, as championed by Joseph Dias."],
  ];
  return (
    <section style={{ background: BRAND.sage }}>
      <div style={{ ...WRAP, padding: "84px 56px" }}>
        <Reveal>
          <div style={{ marginBottom: 48, maxWidth: 620 }}>
            <Eyebrow style={{ color: BRAND.goldD }}>The case for millets</Eyebrow>
            <h2 style={{ fontFamily: serif, fontWeight: 700, fontSize: 38, color: BRAND.forest, margin: "12px 0 0", letterSpacing: "-.01em" }}>Five reasons they belong on your plate</h2>
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: BRAND.sageD, border: `1px solid ${BRAND.sageD}` }}>
          {items.map(([n, t, d], i) => (
            <Reveal key={n} delay={(i % 3) * 80}>
              <div style={{ background: BRAND.sage, padding: "30px 28px", height: "100%", boxSizing: "border-box" }}>
                <div style={{ fontFamily: serif, fontSize: 30, fontWeight: 700, color: BRAND.gold, marginBottom: 14 }}>{n}</div>
                <h3 style={{ fontFamily: serif, fontSize: 21, fontWeight: 700, color: BRAND.forest, margin: "0 0 10px", lineHeight: 1.2 }}>{t}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.7, color: BRAND.body, margin: 0 }}>{d}</p>
              </div>
            </Reveal>
          ))}
          {/* fill last cell to keep grid tidy */}
          <div style={{ background: BRAND.sage, padding: "30px 28px", display: "flex", alignItems: "center" }}>
            <Reveal delay={80}>
              <p style={{ fontFamily: serif, fontStyle: "italic", fontSize: 19, lineHeight: 1.5, color: BRAND.forest, margin: 0 }}>
                “If your food is right, there is no need for medicine.”
                <span style={{ display: "block", fontFamily: sans, fontStyle: "normal", fontSize: 12, letterSpacing: ".1em", textTransform: "uppercase", color: BRAND.greenMed, marginTop: 14 }}>Dr. Khadar Valli</span>
              </p>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Commitment band (forest) ── */
function WMCommitment() {
  return (
    <section style={{ background: BRAND.forest, position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, opacity: 0.5, background: "radial-gradient(circle at 16% 30%, rgba(115,173,146,.12), transparent 45%)" }} />
      <div style={{ ...WRAP, padding: "88px 56px", position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 64, alignItems: "center" }}>
          <Reveal>
            <div>
              <Eyebrow style={{ color: BRAND.gold }}>Our commitment</Eyebrow>
              <h2 style={{ fontFamily: serif, fontWeight: 700, fontSize: 38, color: "#fff", margin: "14px 0 22px", lineHeight: 1.12, letterSpacing: "-.01em" }}>Meals made with a purpose</h2>
              <p style={{ fontSize: 16, lineHeight: 1.78, color: "rgba(255,255,255,.8)", margin: "0 0 16px", maxWidth: 500 }}>
                Our meals are not just about sustenance — they're crafted with intent. Through Chef Bobby's expertise, Dr. Khadar Valli's protocols, and Joseph Dias's dedication to nutrient retention, we make meals that support your goals: from managing diabetes and weight loss to heart health and overall vitality.
              </p>
              <p style={{ fontSize: 16, lineHeight: 1.78, color: "rgba(255,255,255,.8)", margin: 0, maxWidth: 500 }}>
                Explore our millet-based plans and experience the transformative benefits of these ancient grains. MilletsFit can become a vital part of your health journey.
              </p>
            </div>
          </Reveal>
          <Reveal delay={90} y={32}>
            <div style={{ position: "relative" }}>
              <div style={{ borderRadius: 12, overflow: "hidden", border: "1px solid rgba(255,255,255,.12)" }}>
                <PImg src="/assets/img/image-1.png" label="balanced millet plate" tone="dark" dark style={{ width: "100%", height: 380 }} />
              </div>
              <div style={{ position: "absolute", bottom: -16, left: -16, right: 40, background: BRAND.softGreen, color: BRAND.forestD, padding: "16px 20px", boxShadow: "0 16px 40px rgba(0,0,0,.3)" }}>
                <div style={{ fontFamily: sans, fontSize: 14, fontWeight: 800, letterSpacing: ".06em", textTransform: "uppercase" }}>Healthy diet</div>
                <div style={{ fontSize: 12.5, marginTop: 4, color: BRAND.forest }}>Well-balanced nutrients with calorie-controlled Millet Meal Plans.</div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function WhyMilletsPage() {
  return (
    <div style={{ background: BRAND.cream, fontFamily: sans, color: BRAND.ink, minHeight: "100vh" }}>
      <SiteNav active="Why Millets" />
      <WMIntro />
      <WMCase />
      <WMCommitment />
      <SiteCTA eyebrow="Ready to begin?" title="Taste the difference an ancient grain makes." body="Explore our condition-specific millet plans, crafted by experts and delivered fresh across the Emirates." />
      <SiteFooter />
    </div>
  );
}

Object.assign(window, { WhyMilletsPage });