// shop.jsx — MilletsFit Shop grid, Editorial Calm style
// Uses window globals: BRAND, serif, sans, mono, Ph, Eyebrow, WRAP, Reveal, SiteNav, SiteFooter, PLANS

const { useState: useStateS } = React;
const PRODUCT_HREF = "/plans/product";

const SORT_OPTIONS = [
  { label: "Recommended", fn: null },
  { label: "Price: Low → High", fn: (a, b) => a.pricing.d10 - b.pricing.d10 },
  { label: "Price: High → Low", fn: (a, b) => b.pricing.d10 - a.pricing.d10 },
];

function ShopHero({ sort, setSort }) {
  const [dropOpen, setDropOpen] = useStateS(false);
  return (
    <section style={{ ...WRAP, paddingTop: 84, paddingBottom: 8 }}>
      <Reveal><Eyebrow style={{ color: BRAND.goldD }}>Veg Millet Meal Plans</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: 58, lineHeight: 1.04, color: BRAND.forest, margin: 0, letterSpacing: "-.015em", textWrap: "balance" }}>
            Millet Meal Plans, chosen<br />by how you want to<br /><span style={{ fontStyle: "italic", fontWeight: 600, color: BRAND.greenMed }}>feel.</span>
          </h1>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontSize: 16.5, lineHeight: 1.78, color: BRAND.body, margin: 0, paddingBottom: 6 }}>
            Every plan is built around a goal — heart health, blood sugar, the liver, hormones, weight — and cooked fresh each morning from whole, single-origin millets. Pick yours, choose 10, 20 or 30 days, and we deliver.
          </p>
        </Reveal>
      </div>
      <Reveal delay={120} style={{ marginTop: 40 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: `1px solid ${BRAND.creamD}`, borderBottom: `1px solid ${BRAND.creamD}`, padding: "16px 0" }}>
          <span style={{ fontFamily: mono, fontSize: 12, letterSpacing: ".06em", color: BRAND.goldD, textTransform: "uppercase" }}>Showing all 6 plans</span>
          <span style={{ position: "relative", display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: BRAND.body }}>
            Sort
            <button onClick={() => setDropOpen(!dropOpen)} style={{ cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 8, border: `1px solid ${BRAND.creamD}`, background: "#fff", borderRadius: 999, padding: "8px 16px", fontWeight: 600, color: BRAND.forest, fontSize: 13 }}>
              {SORT_OPTIONS[sort].label} <span style={{ fontSize: 10, color: BRAND.body }}>▾</span>
            </button>
            {dropOpen && (
              <div style={{ position: "absolute", top: "100%", right: 0, marginTop: 6, background: "#fff", border: `1px solid ${BRAND.creamD}`, borderRadius: 12, boxShadow: "0 6px 30px rgba(27,58,45,.08)", overflow: "hidden", zIndex: 50, minWidth: 190 }}>
                {SORT_OPTIONS.map((opt, i) => (
                  <button key={opt.label} onClick={() => { setSort(i); setDropOpen(false); }} style={{ cursor: "pointer", display: "block", width: "100%", textAlign: "left", border: "none", background: i === sort ? BRAND.sage : "transparent", color: BRAND.forest, fontFamily: sans, fontSize: 13, fontWeight: i === sort ? 600 : 400, padding: "11px 18px", borderBottom: i < SORT_OPTIONS.length - 1 ? `1px solid ${BRAND.creamD}` : "none" }}>
                    {opt.label}
                  </button>
                ))}
              </div>
            )}
          </span>
        </div>
      </Reveal>
    </section>
  );
}

function PlanCard({ p, i }) {
  const dark = p.tone === "dark";
  return (
    <Reveal delay={(i % 3) * 80} y={30}>
      <a href={PLAN_HREF[p.slug] || `${PRODUCT_HREF}?plan=${p.slug}`} style={{ display: "flex", flexDirection: "column", height: "100%", textDecoration: "none", background: "#fff", border: `1px solid ${BRAND.creamD}`, boxShadow: "0 6px 30px rgba(27,58,45,.06)" }}>
        {/* framed image */}
        <div style={{ padding: 10 }}>
          <div style={{ position: "relative", height: 230, overflow: "hidden" }}>
            <PImg src={p.img} label={`${p.slug.replace(/-/g, " ")} dish`} tone={p.tone} dark={dark} style={{ width: "100%", height: "100%" }} />
            <span style={{ position: "absolute", top: 13, left: 13, fontSize: 10, fontWeight: 700, letterSpacing: ".08em", textTransform: "uppercase", color: "#fff", background: p.accent, padding: "6px 12px", borderRadius: 999, whiteSpace: "nowrap" }}>{p.category}</span>
          </div>
        </div>
        {/* body */}
        <div style={{ padding: "8px 24px 26px", flex: 1, display: "flex", flexDirection: "column" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 10 }}>
            <span style={{ color: BRAND.gold, fontSize: 13, letterSpacing: "1px" }}>★★★★★</span>
            <span style={{ fontSize: 12, color: BRAND.body }}>{p.rating} · {p.reviews} reviews</span>
          </div>
          <h2 style={{ fontFamily: serif, fontSize: 23, fontWeight: 700, color: BRAND.forest, margin: "0 0 9px", lineHeight: 1.18, letterSpacing: "-.01em" }}>{p.name}</h2>
          <p style={{ fontSize: 13.5, lineHeight: 1.6, color: BRAND.body, margin: "0 0 20px", flex: 1 }}>{p.tagline}</p>
          <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", borderTop: `1px solid ${BRAND.creamD}`, paddingTop: 16, marginTop: "auto" }}>
            <div>
              <div style={{ fontSize: 11, color: BRAND.body, letterSpacing: ".02em" }}>From</div>
              <div style={{ fontFamily: serif, fontSize: 22, fontWeight: 700, color: BRAND.forest }}>AED {p.pricing.d10} <span style={{ fontFamily: sans, fontSize: 11.5, fontWeight: 400, color: BRAND.body }}>/ 10 days</span></div>
            </div>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 13.5, fontWeight: 600, color: BRAND.forest, borderBottom: `1.5px solid ${BRAND.gold}`, paddingBottom: 2 }}>View plan →</span>
          </div>
        </div>
      </a>
    </Reveal>
  );
}

function ShopGrid({ sort }) {
  const sorted = SORT_OPTIONS[sort].fn ? [...PLANS].sort(SORT_OPTIONS[sort].fn) : PLANS;
  return (
    <section style={{ ...WRAP, paddingTop: 48, paddingBottom: 24 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28 }}>
        {sorted.map((p, i) => <PlanCard key={p.slug} p={p} i={i} />)}
      </div>
    </section>
  );
}

/* reassurance strip */
function Assurance() {
  const items = [
    ["Freshly cooked daily", "Prepared each morning — never reheated or frozen."],
    ["Nutritionist-approved", "Every plan is reviewed for balanced, goal-specific macros."],
    ["Delivered across the UAE", "Dubai · Abu Dhabi · Sharjah · Ajman, in eco packaging."],
    ["Customisable for allergies", "Message our team and we'll adapt any plan to you."],
  ];
  return (
    <section style={{ background: BRAND.sage, marginTop: 40 }}>
      <div style={{ ...WRAP, padding: "60px 56px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 0 }}>
          {items.map(([t, d], i) => (
            <Reveal key={t} delay={i * 80}>
              <div style={{ padding: "0 26px", borderLeft: i > 0 ? `1px solid ${BRAND.sageD}` : "none", height: "100%" }}>
                <div style={{ fontFamily: serif, fontSize: 19, fontWeight: 700, color: BRAND.forest, marginBottom: 10, letterSpacing: "-.01em" }}>{t}</div>
                <p style={{ fontSize: 13, lineHeight: 1.6, color: BRAND.body, margin: 0 }}>{d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ShopPage() {
  const [sort, setSort] = useStateS(0);
  return (
    <div style={{ background: BRAND.cream, fontFamily: sans, color: BRAND.ink, minHeight: "100vh" }}>
      <SiteNav active="Plans" />
      <ShopHero sort={sort} setSort={setSort} />
      <ShopGrid sort={sort} />
      <Assurance />
      <SiteFooter />
    </div>
  );
}

Object.assign(window, { ShopPage });