// home.jsx — MilletsFit Home / landing page
// Uses window globals from brand.jsx + chrome.jsx: BRAND, serif, sans, mono,
// LogoMark, Eyebrow, PImg, WRAP, Reveal, SiteNav, SiteFooter, SiteCTA

/* ============================================================
   HERO — Editorial calm, new tagline, real imagery
   ============================================================ */
function HomeHero() {
  return (
    <section style={{ background: BRAND.cream, borderBottom: `1px solid ${BRAND.creamD}` }}>
      <div style={{ ...WRAP, paddingTop: 76, paddingBottom: 84 }}>
        <div className="mf-home-hero-grid" style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 64, alignItems: "start" }}>
          {/* left — copy */}
          <div>
            <Reveal>
              <Eyebrow style={{ color: BRAND.goldD }}>Est. UAE — A Whole-Millet Kitchen</Eyebrow>
            </Reveal>
            <Reveal delay={60}>
              <h1 style={{ fontFamily: serif, fontWeight: 700, fontSize: 62, lineHeight: 1.04, color: BRAND.forest, margin: "22px 0 0", letterSpacing: "-.015em", textWrap: "balance" }}>
                Nourish your<br />family<br /><span style={{ fontStyle: "italic", fontWeight: 600, color: BRAND.greenMed }}>naturally.</span>
              </h1>
            </Reveal>
            <Reveal delay={120}>
              <div style={{ width: 56, height: 2, background: BRAND.gold, margin: "30px 0 24px" }} />
              <p style={{ fontSize: 16.5, lineHeight: 1.75, color: BRAND.body, maxWidth: 460, margin: 0 }}>
                Expert-crafted millet meal plans, cooked fresh each morning and delivered to your door. Ancient grains, quietly modern nutrition.
              </p>
            </Reveal>
            <Reveal delay={180}>
              <div className="mf-home-hero-cta" style={{ display: "flex", alignItems: "center", gap: 28, marginTop: 36, flexWrap: "wrap" }}>
                <a href="/plans" style={{ display: "inline-flex", alignItems: "center", gap: 10, background: BRAND.forest, color: "#fff", fontFamily: sans, fontSize: 14.5, fontWeight: 600, padding: "15px 28px", borderRadius: 999, textDecoration: "none" }}>
                  Explore the six plans <span style={{ fontSize: 16 }}>→</span>
                </a>
                <a href="/how-it-works" style={{ fontFamily: sans, fontSize: 13.5, color: BRAND.body, borderBottom: `1.5px solid ${BRAND.gold}`, paddingBottom: 2, textDecoration: "none" }}>Read how it works</a>
              </div>
            </Reveal>
            <Reveal delay={240}>
              <div className="mf-home-meta" style={{ display: "flex", gap: 0, marginTop: 52, borderTop: `1px solid ${BRAND.creamD}`, paddingTop: 22 }}>
                {[["06", "millet varieties"], ["06", "wellness plans"], ["10–30", "day durations"]].map(([n, l], i) => (
                  <div key={l} style={{ paddingRight: 30, marginRight: 30, borderRight: i < 2 ? `1px solid ${BRAND.creamD}` : "none" }}>
                    <div style={{ fontFamily: serif, fontSize: 26, fontWeight: 700, color: BRAND.forest, lineHeight: 1, whiteSpace: "nowrap" }}>{n}</div>
                    <div style={{ fontSize: 11.5, color: BRAND.body, marginTop: 5, letterSpacing: ".02em" }}>{l}</div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>

          {/* right — hero image, aligned from heading to CTA */}
          <Reveal delay={100}>
            <div style={{ marginTop: 42, borderRadius: 16, overflow: "hidden", boxShadow: "0 24px 60px rgba(27,58,45,.13)" }}>
              <PImg src="/assets/img/hero-landing.jpg" label="hero bowl · top-down" tone="sage" style={{ width: "100%", height: 420, display: "block" }} />
            </div>
          </Reveal>
        </div>
      </div>

      {/* baseline strip */}
      <div style={{ borderTop: `1px solid ${BRAND.creamD}`, padding: "16px 56px", textAlign: "center" }}>
        <span style={{ fontFamily: sans, fontSize: 11.5, letterSpacing: ".18em", textTransform: "uppercase", color: BRAND.body }}>
          Free delivery across Dubai · Abu Dhabi · Sharjah on orders over AED 399
        </span>
      </div>
    </section>
  );
}

/* ============================================================
   PLAN STRIP — six plans, each with own dish
   ============================================================ */
function HomePlans() {
  const plans = [
    { name: "Weight Loss",       cat: "Weight Management",  tag: "Calorie-controlled, never hungry.",          price: 549, img: "/assets/img/weight-loss.jpg",   href: "/plans/weight-loss",      accent: BRAND.greenMed },
    { name: "Diabetic-Friendly", cat: "Condition-Specific", tag: "Low-GI millets to steady blood sugar.",      price: 599, img: "/assets/img/diabetic.jpg",      href: "/plans/diabetic-friendly",  accent: BRAND.goldD },
    { name: "Blood Pressure",    cat: "Heart Health",       tag: "Low-sodium meals that nourish the heart.",   price: 579, img: "/assets/img/blood-pressure.jpg", href: "/plans/blood-pressure",   accent: BRAND.greenMed },
    { name: "Fatty Liver",       cat: "Liver Wellness",     tag: "Whole-grain meals to reset the liver.",      price: 589, img: "/assets/img/fatty-liver.jpg",   href: "/plans/fatty-liver",      accent: BRAND.goldD },
    { name: "Hormonal Balance",  cat: "Women's Wellness",   tag: "Nutrient-dense bowls for hormonal calm.",    price: 599, img: "/assets/img/diet-plan.jpg",     href: "/plans/hormonal-balance", accent: BRAND.greenMed },
    { name: "Millet Diet",       cat: "Everyday Wellness",  tag: "A balanced introduction to millets.",        price: 499, img: "/assets/img/millet-meals.jpg",  href: "/plans/millet-diet",      accent: BRAND.goldD },
  ];
  return (
    <section style={{ background: "#fff" }}>
      <div style={{ ...WRAP, paddingTop: 88, paddingBottom: 88 }}>
        <div className="mf-home-plans-head" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 36, gap: 24, flexWrap: "wrap" }}>
          <Reveal>
            <Eyebrow style={{ color: BRAND.goldD }}>Shop the plans</Eyebrow>
            <h2 style={{ fontFamily: serif, fontWeight: 700, fontSize: 40, color: BRAND.forest, margin: "12px 0 0", letterSpacing: "-.01em", textWrap: "balance" }}>Six plans, one philosophy.</h2>
            <p style={{ fontSize: 15, color: BRAND.body, margin: "10px 0 0", maxWidth: 460 }}>Every plan, its own dish — pick by goal, choose 10, 20 or 30 days.</p>
          </Reveal>
          <Reveal delay={60}>
            <a href="/plans" style={{ display: "inline-flex", alignItems: "center", gap: 9, border: `1.5px solid ${BRAND.forest}`, color: BRAND.forest, fontSize: 13.5, fontWeight: 600, padding: "13px 24px", borderRadius: 999, whiteSpace: "nowrap", textDecoration: "none" }}>View all six plans →</a>
          </Reveal>
        </div>

        <div className="mf-home-plans-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 26 }}>
          {plans.map((p, i) => (
            <Reveal key={p.name} delay={i * 50}>
              <a href={p.href} style={{ display: "block", textDecoration: "none", background: "#fff", borderRadius: 20, overflow: "hidden", boxShadow: "0 6px 30px rgba(27,58,45,.08)", border: `1px solid ${BRAND.creamD}` }}>
                <div style={{ position: "relative", aspectRatio: "4 / 3", overflow: "hidden", background: BRAND.sage }}>
                  <PImg src={p.img} label={`${p.name.toLowerCase()} dish`} tone="sage" style={{ width: "100%", height: "100%" }} />
                  <span style={{ position: "absolute", top: 13, left: 13, fontSize: 10.5, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: "#fff", background: p.accent, padding: "5px 11px", borderRadius: 999, whiteSpace: "nowrap" }}>{p.cat}</span>
                </div>
                <div style={{ padding: "20px 22px 22px" }}>
                  <h3 style={{ fontFamily: serif, fontSize: 21, fontWeight: 700, color: BRAND.forest, margin: "0 0 8px" }}>{p.name}</h3>
                  <p style={{ fontSize: 13.5, color: BRAND.body, lineHeight: 1.6, margin: "0 0 16px" }}>{p.tag}</p>
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <span style={{ fontSize: 12, color: BRAND.body }}>From <strong style={{ color: BRAND.forest, fontSize: 15 }}>AED {p.price}</strong></span>
                    <span style={{ fontSize: 12.5, fontWeight: 600, color: BRAND.forest, borderBottom: `1.5px solid ${BRAND.gold}`, paddingBottom: 2 }}>View plan →</span>
                  </div>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   HOW IT WORKS — three steps + proof band
   ============================================================ */
function HomeHowItWorks() {
  const steps = [
    ["01", "Pick your goal",        "Answer a few questions — we match you to the right condition-specific plan."],
    ["02", "We cook fresh daily",   "Whole, traceable millets prepared each morning by our chefs. No preservatives."],
    ["03", "Delivered to your door","Fresh meals arrive every morning in insulated, eco-friendly packaging."],
  ];
  return (
    <section style={{ background: BRAND.cream }}>
      <div style={{ ...WRAP, paddingTop: 88, paddingBottom: 88 }}>
        <Reveal>
          <div style={{ textAlign: "center", marginBottom: 56 }}>
            <Eyebrow style={{ color: BRAND.goldD }}>Simple &amp; convenient</Eyebrow>
            <h2 style={{ fontFamily: serif, fontWeight: 700, fontSize: 40, color: BRAND.forest, margin: "12px 0 0", letterSpacing: "-.01em", textWrap: "balance" }}>From goal to doorstep in three steps.</h2>
          </div>
        </Reveal>

        <div className="mf-home-steps" style={{ position: "relative", display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 40 }}>
          <div className="mf-home-steps-line" style={{ position: "absolute", top: 32, left: "16%", right: "16%", height: 2, background: `repeating-linear-gradient(90deg, ${BRAND.sageD} 0 8px, transparent 8px 16px)` }} />
          {steps.map(([n, t, d], i) => (
            <Reveal key={n} delay={i * 70}>
              <div style={{ position: "relative", textAlign: "center" }}>
                <div style={{ width: 64, height: 64, margin: "0 auto 18px", borderRadius: "50%", background: BRAND.forest, color: BRAND.softGreen, fontFamily: serif, fontSize: 24, fontWeight: 700, display: "flex", alignItems: "center", justifyContent: "center", position: "relative", zIndex: 1 }}>{n}</div>
                <h3 style={{ fontFamily: serif, fontSize: 22, fontWeight: 700, color: BRAND.forest, margin: "0 0 10px" }}>{t}</h3>
                <p style={{ fontSize: 14.5, color: BRAND.body, lineHeight: 1.65, maxWidth: 280, margin: "0 auto" }}>{d}</p>
              </div>
            </Reveal>
          ))}
        </div>

        {/* proof band */}
        <Reveal delay={200}>
          <div className="mf-home-proof" style={{ marginTop: 72, background: "#fff", border: `1px solid ${BRAND.creamD}`, borderRadius: 18, padding: "26px 36px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
            {[["50,000+", "meals delivered across the UAE"], ["6", "millet varieties, single-origin"], ["4.9 / 5", "across 2,400 reviews"], ["30 days", "to a measurable change"]].map(([n, l], i) => (
              <React.Fragment key={l}>
                <div style={{ textAlign: "center", flex: 1, minWidth: 140 }}>
                  <div style={{ fontFamily: serif, fontSize: 28, fontWeight: 700, color: BRAND.forest }}>{n}</div>
                  <div style={{ fontSize: 12, color: BRAND.body, marginTop: 4, maxWidth: 180, marginLeft: "auto", marginRight: "auto" }}>{l}</div>
                </div>
                {i < 3 && <div className="mf-home-proof-divider" style={{ width: 1, height: 48, background: BRAND.sageD }} />}
              </React.Fragment>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ============================================================
   PAGE
   ============================================================ */
function HomePage() {
  return (
    <div data-screen-label="Home" style={{ background: BRAND.cream, fontFamily: sans, color: BRAND.ink, minHeight: "100vh" }}>
      <SiteNav active="Home" />
      <HomeHero />
      <HomePlans />
      <HomeHowItWorks />
      <SiteCTA />
      <SiteFooter />
    </div>
  );
}

Object.assign(window, { HomeHero, HomePlans, HomeHowItWorks, HomePage });