// terms.jsx — MilletsFit Terms & Conditions page
// Uses window globals from brand.jsx + chrome.jsx: BRAND, serif, sans, mono,
// Eyebrow, WRAP, Reveal, SiteNav, SiteFooter

const TERMS_SECTIONS = [
  {
    n: "01",
    title: "Eligibility & Service Area",
    items: [
      "You must be 18 years or older to use our Services.",
      "Our services are available only within the United Arab Emirates (UAE).",
      "You must provide a valid UAE phone number and delivery address.",
      "We deliver across major cities including Dubai, Abu Dhabi, Sharjah, Ajman, Ras Al Khaimah, Fujairah, Umm Al Quwain (excluding remote areas).",
      "Our platform operates in English language only.",
    ],
  },
  {
    n: "02",
    title: "Account Registration",
    items: [
      "You must provide accurate personal details (name, phone, address, email).",
      "Only one account per user is allowed.",
      "You are responsible for maintaining your account security.",
      "Any activity under your account is your responsibility.",
    ],
  },
  {
    n: "03",
    title: "Our Services",
    items: [
      "MilletsFit offers subscription-based healthy Millet Meal Plans.",
      "Meals are delivered based on your selected plan (weekly / monthly).",
      "Plans are standardized and may not support full customization.",
      "Services are for personal use only (reselling is not allowed).",
    ],
  },
  {
    n: "04",
    title: "Pricing & Payment",
    items: [
      "All prices are in AED (UAE Dirhams).",
      "Full payment is required in advance before starting your plan.",
      "We accept Debit / Credit Cards and Online Payments.",
      "We use secure payment gateways and do not store full card details.",
    ],
  },
  {
    n: "05",
    title: "Offers & Promotions",
    items: [
      "Promo codes are valid for a limited time only and usually one-time use per user.",
      "Cannot be combined unless specified.",
      "No cash value or refunds on discounts.",
    ],
  },
  {
    n: "06",
    title: "Delivery Policy",
    items: [
      "Deliveries are scheduled based on your selected plan.",
      "You must be available to receive orders.",
      "If unavailable, meals may be forfeited without refund.",
      "Address changes require minimum 72 hours notice.",
      "Delays may happen due to traffic or unforeseen issues.",
    ],
  },
  {
    n: "07",
    title: "Allergies & Health Disclaimer",
    items: [
      "You must inform us of any allergies before subscribing.",
      "We cannot guarantee allergen-free meals.",
      "Meals are not tailored for medical conditions or strict diets.",
      "Always consult your doctor before starting any Millet Meal Plan.",
    ],
  },
  {
    n: "08",
    title: "Pause / Hold / Plan Changes",
    items: [
      "You can pause your plan with 72 hours notice.",
      "Pause days will be added to the end of the plan.",
      "Long freezes may be available (extra charges apply).",
      "Plan upgrades allowed (price difference applies).",
    ],
  },
  {
    n: "09",
    title: "Cancellation & Refund Policy",
    items: [
      "No refunds once a plan is purchased.",
      "Exceptions may be considered for medical emergencies or relocation.",
      "Approved refunds may include processing charges.",
      "If MilletsFit cancels service → pro-rata refund provided.",
    ],
  },
  {
    n: "10",
    title: "Subscription Renewal",
    items: [
      "No auto-renewal unless the user opts in.",
      "If enabled, you will be notified before renewal.",
      "You can cancel renewal 72 hours before the next cycle.",
    ],
  },
  {
    n: "11",
    title: "Customer Communication",
    items: [
      "We may contact you via WhatsApp, SMS, and Email for order updates, delivery notifications, and support.",
      "Marketing messages are optional (opt-in only).",
    ],
  },
  {
    n: "12",
    title: "Acceptable Use",
    items: [
      "You agree NOT to use the service for illegal purposes, misuse payments, or resell our products.",
      "Violation may result in account suspension.",
    ],
  },
  {
    n: "13",
    title: "Privacy & Data Protection",
    items: [
      "Your data is handled as per our Privacy Policy.",
      "We do not sell personal data.",
      "Data is used only for order processing, delivery, and communication.",
    ],
  },
  {
    n: "14",
    title: "Limitation of Liability",
    items: [
      "Services are provided “as is”.",
      "We are not responsible for delivery delays beyond our control or allergic reactions (if ingredients are disclosed).",
      "Maximum liability = amount paid by user.",
    ],
  },
  {
    n: "15",
    title: "Indemnification",
    items: [
      "You agree to protect MilletsFit from any claims arising due to violation of terms or misuse of services.",
    ],
  },
  {
    n: "16",
    title: "Governing Law",
    items: [
      "These Terms are governed by UAE Laws.",
      "Jurisdiction: Dubai Courts.",
    ],
  },
  {
    n: "17",
    title: "Termination",
    items: [
      "We may suspend or terminate accounts if terms are violated or fraud is detected.",
    ],
  },
  {
    n: "18",
    title: "Changes to Terms",
    items: [
      "We may update these Terms anytime. Continued use means acceptance.",
    ],
  },
];

/* ── Intro / hero band ── */
function TermsIntro() {
  return (
    <section style={{ background: BRAND.cream, borderBottom: `1px solid ${BRAND.creamD}` }}>
      <div style={{ ...WRAP, paddingTop: 88, paddingBottom: 60 }}>
        <Reveal><Eyebrow style={{ color: BRAND.goldD }}>Legal · Last updated June 2026</Eyebrow></Reveal>
        <div className="mf-terms-head" style={{ display: "grid", gridTemplateColumns: "1.25fr 0.75fr", gap: 64, alignItems: "end", marginTop: 22 }}>
          <Reveal delay={60}>
            <h1 style={{ fontFamily: serif, fontWeight: 700, fontSize: 60, lineHeight: 1.04, color: BRAND.forest, margin: 0, letterSpacing: "-.015em", textWrap: "balance" }}>
              Terms &amp;<br /><span style={{ fontStyle: "italic", fontWeight: 600, color: BRAND.greenMed }}>Conditions.</span>
            </h1>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontSize: 16, lineHeight: 1.75, color: BRAND.body, margin: 0, paddingBottom: 6 }}>
              Welcome to MilletsFit (milletsfit.com). These Terms &amp; Conditions (“Terms”) govern your use of our website and Millet Meal Plan subscription services (“Services”).
            </p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ── Preamble paragraphs ── */
function TermsPreamble() {
  return (
    <section style={{ ...WRAP, paddingTop: 64, paddingBottom: 32 }}>
      <div className="mf-terms-preamble" style={{ display: "grid", gridTemplateColumns: "0.32fr 0.68fr", gap: 56 }}>
        <Reveal>
          <div style={{ fontFamily: mono, fontSize: 12, letterSpacing: ".08em", color: BRAND.goldD, textTransform: "uppercase" }}>Preamble</div>
        </Reveal>
        <Reveal delay={80}>
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <p style={{ fontSize: 16, lineHeight: 1.78, color: BRAND.body, margin: 0 }}>
              By accessing our website or purchasing any Millet Meal Plan, you agree to these Terms. If you do not agree, please do not use our Services.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.78, color: BRAND.body, margin: 0 }}>
              This website <a href="https://www.milletsfit.com" style={{ color: BRAND.forest, fontWeight: 600, textDecoration: "none", borderBottom: `1.5px solid ${BRAND.gold}` }}>www.milletsfit.com</a> (“Website”) is operated by MilletsFit (“Company”, “we”, “us”, or “our”), a business providing Millet Meal Plan and food delivery services within the United Arab Emirates (UAE).
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.78, color: BRAND.body, margin: 0 }}>
              By accessing our Website, registering an account, or purchasing any product or Millet Meal Plan, you agree to be bound by these Terms of Service (“Terms”), along with our Privacy Policy, Refund Policy, and any other policies referenced herein. If you do not agree with these Terms, you must not use our Website or Services.
            </p>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ── Numbered sections ── */
function TermsSection({ n, title, items, delay }) {
  return (
    <Reveal delay={delay}>
      <article className="mf-terms-section" style={{ display: "grid", gridTemplateColumns: "0.32fr 0.68fr", gap: 56, padding: "44px 0", borderTop: `1px solid ${BRAND.creamD}` }}>
        <div>
          <div style={{ fontFamily: mono, fontSize: 12, letterSpacing: ".08em", color: BRAND.goldD, textTransform: "uppercase" }}>{n}</div>
          <h2 style={{ fontFamily: serif, fontWeight: 700, fontSize: 28, color: BRAND.forest, margin: "10px 0 0", letterSpacing: "-.01em", textWrap: "balance" }}>{title}</h2>
        </div>
        <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 12 }}>
          {items.map((t, i) => (
            <li key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 14, fontSize: 15.5, lineHeight: 1.72, color: BRAND.body }}>
              <span aria-hidden="true" style={{ marginTop: 11, width: 6, height: 6, borderRadius: 999, background: BRAND.gold, flexShrink: 0 }} />
              <span>{t}</span>
            </li>
          ))}
        </ul>
      </article>
    </Reveal>
  );
}

function TermsBody() {
  return (
    <section style={{ ...WRAP, paddingTop: 16, paddingBottom: 56 }}>
      {TERMS_SECTIONS.map((s, i) => (
        <TermsSection key={s.n} n={s.n} title={s.title} items={s.items} delay={i * 20} />
      ))}
    </section>
  );
}

/* ── Section 19 — contact card ── */
function TermsContact() {
  return (
    <section style={{ ...WRAP, paddingBottom: 96 }}>
      <Reveal>
        <div className="mf-terms-section" style={{ display: "grid", gridTemplateColumns: "0.32fr 0.68fr", gap: 56, padding: "44px 0", borderTop: `1px solid ${BRAND.creamD}` }}>
          <div>
            <div style={{ fontFamily: mono, fontSize: 12, letterSpacing: ".08em", color: BRAND.goldD, textTransform: "uppercase" }}>19</div>
            <h2 style={{ fontFamily: serif, fontWeight: 700, fontSize: 28, color: BRAND.forest, margin: "10px 0 0", letterSpacing: "-.01em" }}>Contact Us</h2>
          </div>
          <div>
            <p style={{ fontSize: 15.5, lineHeight: 1.72, color: BRAND.body, margin: "0 0 22px", maxWidth: 480 }}>
              Questions about these Terms? Reach out — we read every message.
            </p>
            <dl className="mf-terms-contact" style={{ display: "grid", gridTemplateColumns: "auto 1fr", columnGap: 24, rowGap: 14, margin: 0, fontSize: 15.5 }}>
              <dt style={{ fontFamily: mono, fontSize: 11.5, letterSpacing: ".1em", textTransform: "uppercase", color: BRAND.goldD, alignSelf: "center" }}>Email</dt>
              <dd style={{ margin: 0 }}><a href="mailto:support@milletsfit.com" style={{ color: BRAND.forest, fontWeight: 600, textDecoration: "none", borderBottom: `1.5px solid ${BRAND.gold}` }}>support@milletsfit.com</a></dd>

              <dt style={{ fontFamily: mono, fontSize: 11.5, letterSpacing: ".1em", textTransform: "uppercase", color: BRAND.goldD, alignSelf: "center" }}>WhatsApp</dt>
              <dd style={{ margin: 0 }}><a href="tel:+971554177677" style={{ color: BRAND.forest, fontWeight: 600, textDecoration: "none", borderBottom: `1.5px solid ${BRAND.gold}` }}>+971 55 417 7677</a></dd>

              <dt style={{ fontFamily: mono, fontSize: 11.5, letterSpacing: ".1em", textTransform: "uppercase", color: BRAND.goldD, alignSelf: "center" }}>Website</dt>
              <dd style={{ margin: 0 }}><a href="/" style={{ color: BRAND.forest, fontWeight: 600, textDecoration: "none", borderBottom: `1.5px solid ${BRAND.gold}` }}>milletsfit.com</a></dd>
            </dl>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

function TermsPage() {
  return (
    <div data-screen-label="Terms" style={{ background: BRAND.cream, fontFamily: sans, color: BRAND.ink, minHeight: "100vh" }}>
      <SiteNav active="" />
      <TermsIntro />
      <TermsPreamble />
      <TermsBody />
      <TermsContact />
      <SiteFooter />
    </div>
  );
}

Object.assign(window, { TermsPage });