// 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

/* ============================================================
   OFFER BAR — introductory offer, pinned above everything
   ============================================================ */
const HOME_OFFER_BAR_HEIGHT = 38;

function HomeOfferBar() {
  return (
    <div style={{ position: "sticky", top: 0, zIndex: 210, height: HOME_OFFER_BAR_HEIGHT, display: "flex", alignItems: "center", justifyContent: "center", background: BRAND.greenMed, padding: "0 20px", textAlign: "center" }}>
      <span style={{ fontFamily: sans, fontSize: 12, fontWeight: 700, letterSpacing: ".14em", textTransform: "uppercase", color: "#fff" }}>
        Free delivery as an introductory offer
      </span>
    </div>
  );
}

/* ============================================================
   HERO — Editorial calm, new tagline, real imagery
   (one bordered card holding copy + image together)
   ============================================================ */
function HomeHero() {
  return (
    <section style={{ background: BRAND.cream, borderBottom: `1px solid ${BRAND.creamD}` }}>
      <div style={{ ...WRAP, paddingTop: 56, paddingBottom: 84 }}>
        <Reveal>
          <div
            className="mf-home-hero-grid"
            style={{
              display: "grid",
              gridTemplateColumns: "1.05fr 0.95fr",
              alignItems: "stretch",
              background: "#fff",
              border: `1px solid ${BRAND.creamD}`,
              borderRadius: 20,
              overflow: "hidden",
              boxShadow: "0 24px 60px rgba(27,58,45,.10)",
            }}
          >
            {/* left — copy */}
            <div className="mf-home-hero-copy" style={{ padding: "56px 48px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
              <Eyebrow style={{ color: BRAND.goldD }}>Est. UAE — A Whole-Millet Kitchen</Eyebrow>
              <h1 style={{ fontFamily: serif, fontWeight: 700, fontSize: 54, lineHeight: 1.06, color: BRAND.forest, margin: "20px 0 0", letterSpacing: "-.015em", textWrap: "balance" }}>
                Nourish your family <span style={{ fontStyle: "italic", fontWeight: 600, color: BRAND.greenMed }}>naturally.</span>
              </h1>
              <div style={{ width: 56, height: 2, background: BRAND.gold, margin: "26px 0 22px" }} />
              <p style={{ fontSize: 16, lineHeight: 1.7, color: BRAND.body, maxWidth: 420, margin: 0 }}>
                Expert-crafted millet meal plans, cooked fresh each morning and delivered to your door. Ancient grains, quietly modern nutrition.
              </p>
              <div className="mf-home-hero-cta" style={{ display: "flex", alignItems: "center", gap: 28, marginTop: 32, 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 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>
              <div className="mf-home-meta" style={{ display: "flex", gap: 0, marginTop: 40, borderTop: `1px solid ${BRAND.creamD}`, paddingTop: 20 }}>
                {[["06", "millet varieties"], ["06", "wellness plans"], ["3–30", "day durations"]].map(([n, l], i) => (
                  <div key={l} style={{ paddingRight: 24, marginRight: 24, borderRight: i < 2 ? `1px solid ${BRAND.creamD}` : "none" }}>
                    <div style={{ fontFamily: serif, fontSize: 22, fontWeight: 700, color: BRAND.forest, lineHeight: 1, whiteSpace: "nowrap" }}>{n}</div>
                    <div style={{ fontSize: 11, color: BRAND.body, marginTop: 5, letterSpacing: ".02em" }}>{l}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* right — hero image, flush to the card edges */}
            <div className="mf-home-hero-art" style={{ minHeight: 480 }}>
              <PImg src="/assets/img/hero-landing.jpg" label="hero bowl · top-down" tone="sage" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ============================================================
   PLAN STRIP — six plans, each with own dish
   ============================================================ */
function HomePlans() {
  const plans = [
    { name: "MilletsFit Daily Meal Plans", cat: "Everyday Wellness", tag: "Balanced everyday meals — plus a 3-day launch offer.", price: 678, oldPrice: null, img: "/assets/img/diabetes-lunch-day1.jpg", href: "/plans/daily", accent: BRAND.goldD },
    { name: "Strength & Weight Loss",       cat: "Weight Management",  tag: "Calorie-controlled, never hungry.",          price: 849, oldPrice: 999, img: "/assets/img/weight-loss-dinner-day1.jpg",   href: "/plans/weight-loss",      accent: BRAND.greenMed },
    { name: "Diabetic-Friendly", cat: "Condition-Specific", tag: "Low-GI millets to steady blood sugar.",      price: 849, oldPrice: 999, img: "/assets/img/diabetes-lunch-day1.jpg",          href: "/plans/diabetic-friendly",  accent: BRAND.goldD },
    { name: "Blood Pressure",    cat: "Heart Health",       tag: "Potassium-rich meals that nourish the heart.", price: 749, oldPrice: 899, img: "/assets/img/blood-pressure-lunch-day1.jpg",     href: "/plans/blood-pressure",   accent: BRAND.greenMed },
    { name: "Cholesterol",       cat: "Heart Health",       tag: "Fibre-rich meals to help manage cholesterol.", price: 749, oldPrice: 899, img: "/assets/img/cholesterol-lunch-day1.jpg",      href: "/plans/cholesterol",      accent: BRAND.goldD },
    { name: "Hormonal Balance",  cat: "Women's Wellness",   tag: "Nutrient-dense bowls for hormonal calm.",    price: 699, oldPrice: 799, img: "/assets/img/hormonal-dinner-day1.jpg",     href: "/plans/hormonal-balance", accent: BRAND.greenMed },
  ];
  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 }}>Pick by goal, or keep it simple — choose 3, 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 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" fit="contain" position="center" style={{ width: "100%", height: "100%", background: "#fff" }} />
                  <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 {p.oldPrice && <span style={{ textDecoration: "line-through", marginRight: 4 }}>AED {p.oldPrice}</span>}<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 delivered to your door 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" }}>
            {[["6", "millet varieties, single-origin"], ["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 < 1 && <div className="mf-home-proof-divider" style={{ width: 1, height: 48, background: BRAND.sageD }} />}
              </React.Fragment>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ── Google reviews (manually curated — ask to update this list) ──
   TODO: replace with real reviews copied from the MilletsFit Google
   Business listing before this goes live. Update GOOGLE_RATING/COUNT/URL
   to match, too. */
const GOOGLE_RATING = 4.9;
const GOOGLE_REVIEW_COUNT = 0; // e.g. 128
const GOOGLE_BUSINESS_URL = "https://g.page/r/REPLACE-WITH-YOUR-GOOGLE-BUSINESS-ID/review";
const GOOGLE_REVIEWS = [
  // { name: "First name L.", text: "Paste a real review here.", rating: 5 },
];

function GoogleStars({ rating, size = 16 }) {
  return (
    <span style={{ display: "inline-flex", gap: 2 }}>
      {[1, 2, 3, 4, 5].map((n) => (
        <svg key={n} width={size} height={size} viewBox="0 0 24 24" fill={n <= Math.round(rating) ? "#F4B400" : "none"} stroke={n <= Math.round(rating) ? "#F4B400" : BRAND.creamD} strokeWidth="1.5">
          <path d="M12 2.5l2.9 6.4 6.9.7-5.2 4.7 1.5 6.9L12 17.6l-6.1 3.6 1.5-6.9-5.2-4.7 6.9-.7z" strokeLinejoin="round" />
        </svg>
      ))}
    </span>
  );
}

function GoogleG({ size = 20 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" aria-hidden="true">
      <path fill="#4285F4" d="M45.1 24.5c0-1.6-.1-3.1-.4-4.5H24v9h11.8c-.5 2.8-2.1 5.1-4.4 6.7v5.5h7.1c4.2-3.9 6.6-9.6 6.6-16.7z" />
      <path fill="#34A853" d="M24 46c6 0 11-2 14.6-5.3l-7.1-5.5c-2 1.3-4.5 2.1-7.5 2.1-5.8 0-10.7-3.9-12.4-9.1H4.3v5.7C7.9 41.1 15.3 46 24 46z" />
      <path fill="#FBBC05" d="M11.6 28.2c-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2v-5.7H4.3C2.8 17 2 20.4 2 24s.8 7 2.3 9.9z" />
      <path fill="#EA4335" d="M24 10.8c3.3 0 6.2 1.1 8.5 3.3l6.3-6.3C35 4.2 30 2 24 2 15.3 2 7.9 6.9 4.3 14.1l7.3 5.7c1.7-5.2 6.6-9 12.4-9z" />
    </svg>
  );
}

function HomeGoogleReviews() {
  if (GOOGLE_REVIEWS.length === 0) return null; // nothing curated yet — section stays hidden
  return (
    <section style={{ background: "#fff" }}>
      <div style={{ ...WRAP, paddingTop: 88, paddingBottom: 88 }}>
        <Reveal>
          <div style={{ textAlign: "center", marginBottom: 44 }}>
            <Eyebrow style={{ color: BRAND.goldD }}>What people say</Eyebrow>
            <h2 style={{ fontFamily: serif, fontWeight: 700, fontSize: 38, color: BRAND.forest, margin: "12px 0 18px", letterSpacing: "-.01em" }}>Loved on Google</h2>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 10, background: BRAND.cream, border: `1px solid ${BRAND.creamD}`, borderRadius: 999, padding: "9px 20px" }}>
              <GoogleG size={18} />
              <span style={{ fontFamily: serif, fontSize: 17, fontWeight: 700, color: BRAND.forest }}>{GOOGLE_RATING.toFixed(1)}</span>
              <GoogleStars rating={GOOGLE_RATING} />
              <span style={{ fontSize: 12.5, color: BRAND.body }}>· {GOOGLE_REVIEW_COUNT} reviews</span>
            </div>
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: `repeat(${Math.min(3, GOOGLE_REVIEWS.length)}, 1fr)`, gap: 20 }} className="mf-google-reviews">
          {GOOGLE_REVIEWS.slice(0, 6).map((r, i) => (
            <Reveal key={i} delay={i * 60}>
              <div style={{ background: BRAND.cream, border: `1px solid ${BRAND.creamD}`, borderRadius: 14, padding: "22px 24px", height: "100%" }}>
                <GoogleStars rating={r.rating} />
                <p style={{ fontSize: 14, lineHeight: 1.65, color: BRAND.body, margin: "12px 0 14px" }}>"{r.text}"</p>
                <strong style={{ fontFamily: sans, fontSize: 13, color: BRAND.forest }}>{r.name}</strong>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={100}>
          <div style={{ textAlign: "center", marginTop: 36 }}>
            <a href={GOOGLE_BUSINESS_URL} target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 14, fontWeight: 600, color: BRAND.forest, textDecoration: "none", borderBottom: `1.5px solid ${BRAND.gold}`, paddingBottom: 2 }}>
              See all reviews on Google <GoogleG size={16} />
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

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

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