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

/* ── Intro / overview ── */
function GoalsIntro() {
  return (
    <section style={{ ...WRAP, paddingTop: 88, paddingBottom: 76 }}>
      <Reveal><Eyebrow style={{ color: BRAND.goldD }}>MilletsFit Goals</Eyebrow></Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 0.8fr", gap: 64, alignItems: "end", marginTop: 22 }}>
        <Reveal delay={60}>
          <h1 style={{ fontFamily: serif, fontWeight: 700, fontSize: 56, lineHeight: 1.05, color: BRAND.forest, margin: 0, letterSpacing: "-.015em", textWrap: "balance" }}>
            A transformative approach to <span style={{ fontStyle: "italic", fontWeight: 600, color: BRAND.greenMed }}>eating well.</span>
          </h1>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontSize: 15.5, lineHeight: 1.75, color: BRAND.body, margin: 0, paddingBottom: 6 }}>
            Empowered Millets brings a transformative approach to healthy eating in the UAE — MilletsFit Meals, curated to support health-focused goals through the power of millets.
          </p>
        </Reveal>
      </div>
      <Reveal delay={120} style={{ marginTop: 40 }}>
        <div style={{ width: "100%", height: 1, background: BRAND.creamD, marginBottom: 36 }} />
        <div style={{ display: "grid", gridTemplateColumns: "0.32fr 0.68fr", gap: 56 }}>
          <div style={{ fontFamily: mono, fontSize: 12, letterSpacing: ".08em", color: BRAND.goldD, textTransform: "uppercase" }}>Overview</div>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: BRAND.forest, margin: 0, fontFamily: serif, fontWeight: 400, textWrap: "pretty" }}>
            Inspired by the pioneering work of <em>Dr. Khadar Valli</em>, MilletsFit Meals are expertly designed and prepared by <em>Chef Bobby</em>, who brings innovation to every dish. Every millet is sourced with care by <em>Joseph Dias</em>, a passionate advocate for millet agriculture — ensuring each meal is nutrient-rich, delicious, and delivers the maximum possible health benefit.
          </p>
        </div>
      </Reveal>
    </section>
  );
}

/* ── Mission (forest quote band) ── */
function GoalsMission() {
  return (
    <section style={{ background: BRAND.forest, padding: "92px 0", 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, position: "relative", textAlign: "center" }}>
        <Reveal><Eyebrow style={{ color: BRAND.gold }}>Our Mission</Eyebrow></Reveal>
        <Reveal delay={80}>
          <p style={{ fontFamily: serif, fontWeight: 400, fontSize: 32, lineHeight: 1.4, color: "#fff", margin: "20px auto 0", maxWidth: 940, letterSpacing: "-.01em", textWrap: "pretty" }}>
            To improve lives with delicious, health-centred meals that leverage the natural benefits of millets — making wellness more accessible through balanced, nutritious food that empowers people to reach their health goals, <span style={{ fontStyle: "italic", color: BRAND.softGreen }}>naturally.</span>
          </p>
        </Reveal>
      </div>
    </section>
  );
}

/* ── Health-focused offerings (4 condition cards) ── */
function GoalsOfferings() {
  const conditions = [
    ["Diabetes", "diabetic", "/assets/img/cond-diabetes.png"],
    ["High Cholesterol", "blood-pressure", "/assets/img/cond-cholesterol.png"],
    ["Weight & Overweight", "weight-loss", "/assets/img/cond-weight.png"],
    ["High Blood Pressure", "blood-pressure", "/assets/img/cond-blood-pressure.png"],
  ];
  const desc = "A curated selection of Kodo, Barnyard, Browntop, Little and Foxtail millet — chosen for their unique health properties and prepared using protocols created by Dr. Khadar Valli.";
  return (
    <section style={{ background: BRAND.cream }}>
      <div style={{ ...WRAP, padding: "84px 56px" }}>
        <Reveal>
          <div style={{ marginBottom: 44, maxWidth: 620 }}>
            <Eyebrow style={{ color: BRAND.goldD }}>Health-focused offerings</Eyebrow>
            <h2 style={{ fontFamily: serif, fontWeight: 700, fontSize: 38, color: BRAND.forest, margin: "12px 0 10px", letterSpacing: "-.01em" }}>Plans designed around real conditions</h2>
            <p style={{ fontSize: 15, color: BRAND.body, margin: 0 }}>MilletsFit Millet Meal Plans are specifically designed to assist with common health conditions, including:</p>
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 22 }}>
          {conditions.map(([t, slug, img], i) => (
            <Reveal key={t + i} delay={(i % 4) * 70}>
              <a href={PLAN_HREF[slug]} style={{ display: "block", textDecoration: "none", background: "#fff", border: `1px solid ${BRAND.creamD}`, height: "100%", boxSizing: "border-box" }}>
                <div style={{ padding: 9, overflow: "hidden" }}>
                  <PImg src={img} label={t.toLowerCase()} tone={i % 2 ? "gold" : "sage"} style={{ width: "100%", height: 120 }} />
                </div>
                <div style={{ padding: "8px 20px 24px" }}>
                  <div style={{ fontFamily: mono, fontSize: 10, letterSpacing: ".06em", textTransform: "uppercase", color: BRAND.goldD, marginBottom: 8 }}>Condition {String(i + 1).padStart(2, "0")}</div>
                  <h3 style={{ fontFamily: serif, fontSize: 20, fontWeight: 700, color: BRAND.forest, margin: "0 0 10px", lineHeight: 1.18 }}>{t}</h3>
                  <p style={{ fontSize: 13, lineHeight: 1.6, color: BRAND.body, margin: "0 0 14px" }}>{desc}</p>
                  <span style={{ fontSize: 12.5, fontWeight: 600, color: BRAND.forest, borderBottom: `1.5px solid ${BRAND.gold}`, paddingBottom: 1 }}>See the plan →</span>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Brand differentiation (3 points + image) ── */
function GoalsDifferentiation() {
  const points = [
    ["Science evidence-backed nutrition", "Developed in alignment with Dr. Khadar Valli's health protocols, each meal is tailored to address specific health concerns."],
    ["Culinary excellence", "Led by Chef Bobby, our meals are not only healthy but genuinely delicious — diverse flavours and vibrant ingredients, with no compromise on health."],
    ["Nutrient preservation", "Joseph Dias oversees sourcing and processing, upholding Dr. Khadar Valli's recommendations so every grain retains maximum nutrient density."],
  ];
  return (
    <section style={{ background: BRAND.sage }}>
      <div style={{ ...WRAP, padding: "84px 56px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 64, alignItems: "center" }}>
          <Reveal>
            <div>
              <Eyebrow style={{ color: BRAND.goldD }}>Brand differentiation</Eyebrow>
              <h2 style={{ fontFamily: serif, fontWeight: 700, fontSize: 36, color: BRAND.forest, margin: "14px 0 14px", lineHeight: 1.14, letterSpacing: "-.01em" }}>Not just meals — a holistic experience</h2>
              <p style={{ fontSize: 15, lineHeight: 1.7, color: BRAND.body, margin: "0 0 28px", maxWidth: 480 }}>What sets MilletsFit apart is a dedication to quality and authenticity across every step:</p>
              <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
                {points.map(([t, d], i) => (
                  <Reveal key={t} delay={i * 80}>
                    <div style={{ display: "grid", gridTemplateColumns: "44px 1fr", gap: 18, padding: "20px 0", borderTop: `1px solid ${BRAND.sageD}` }}>
                      <div style={{ fontFamily: serif, fontSize: 22, fontWeight: 700, color: BRAND.gold }}>0{i + 1}</div>
                      <div>
                        <h3 style={{ fontFamily: serif, fontSize: 19, fontWeight: 700, color: BRAND.forest, margin: "0 0 6px" }}>{t}</h3>
                        <p style={{ fontSize: 14, lineHeight: 1.65, color: BRAND.body, margin: 0 }}>{d}</p>
                      </div>
                    </div>
                  </Reveal>
                ))}
              </div>
            </div>
          </Reveal>
          <Reveal delay={90} y={32}>
            <div style={{ borderRadius: 16, overflow: "hidden", boxShadow: "0 24px 60px rgba(27,58,45,.14)" }}>
              <PImg src="/assets/img/holistic-v1.png" label="holistic experience" tone="cream" style={{ width: "100%", height: 460 }} />
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ── Key health benefits (4 items + image + closing) ── */
function GoalsBenefits() {
  const benefits = [
    ["Blood sugar control", "A naturally low glycaemic index makes millets ideal for stable blood sugar, aiding diabetes management."],
    ["Heart health", "Rich in fibre and magnesium, supporting a healthy heart by helping reduce cholesterol and blood pressure."],
    ["Weight management", "High fibre and protein keep you feeling full for longer, naturally aiding weight loss."],
    ["Improved digestion", "Gentle on the digestive system, promoting gut health — an easy-to-digest option for daily meals."],
  ];
  return (
    <section style={{ background: "#fff" }}>
      <div style={{ ...WRAP, padding: "88px 56px" }}>
        <Reveal>
          <Eyebrow style={{ color: BRAND.goldD }}>Key benefits of millets</Eyebrow>
          <h2 style={{ fontFamily: serif, fontWeight: 700, fontSize: 36, color: BRAND.forest, margin: "14px 0 28px", lineHeight: 1.14, letterSpacing: "-.01em" }}>The health benefits of millets</h2>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 28 }}>
          {benefits.map(([t, d], i) => (
            <Reveal key={t} delay={i * 70}>
              <div>
                <div style={{ fontFamily: mono, fontSize: 11, color: BRAND.goldD, letterSpacing: ".06em", marginBottom: 8 }}>0{i + 1}</div>
                <h3 style={{ fontFamily: serif, fontSize: 19, fontWeight: 700, color: BRAND.forest, margin: "0 0 7px" }}>{t}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.65, color: BRAND.body, margin: 0 }}>{d}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={60}>
          <p style={{ fontFamily: serif, fontStyle: "italic", fontSize: 22, lineHeight: 1.5, color: BRAND.forest, textAlign: "center", maxWidth: 820, margin: "64px auto 0", textWrap: "balance" }}>
            Where culinary artistry meets science-backed nutrition — making it simpler than ever to embrace a millet-focused lifestyle that's healthy, delicious, convenient and rewarding.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function GoalsPage() {
  return (
    <div style={{ background: BRAND.cream, fontFamily: sans, color: BRAND.ink, minHeight: "100vh" }}>
      <SiteNav active="MilletsFit Goals" />
      <GoalsIntro />
      <GoalsMission />
      <GoalsOfferings />
      <GoalsDifferentiation />
      <GoalsBenefits />
      <SiteCTA eyebrow="Start with a goal" title="Find the plan that fits your health goal." body="Every MilletsFit plan is built around a condition and delivered fresh across the UAE — wellness made accessible." />
      <SiteFooter />
    </div>
  );
}

Object.assign(window, { GoalsPage });