// aboutus.jsx — MilletsFit "About / Our Story" page, Editorial Calm (A) style
// Uses window globals from brand.jsx: BRAND, serif, sans, mono, LogoMark, Eyebrow

const { useEffect, useRef, useState } = React;

/* gentle scroll-reveal for fluidity */
function Reveal({ children, delay = 0, y = 24, style = {} }) {
  const ref = useRef(null);
  // Visible by default (robust for print / no-JS / capture); only elements that
  // begin BELOW the fold get hidden + animated in on scroll.
  const [shown, setShown] = useState(true);
  useEffect(() => {
    const el = ref.current;
    if (!el || !("IntersectionObserver" in window)) return;
    const rect = el.getBoundingClientRect();
    if (rect.top < window.innerHeight * 0.9) return; // already near/in view — leave shown
    setShown(false);
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => { if (e.isIntersecting) { setShown(true); io.unobserve(el); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -6% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <div ref={ref} style={{
      opacity: shown ? 1 : 0,
      transform: shown ? "none" : `translateY(${y}px)`,
      transition: `opacity .8s cubic-bezier(.2,.7,.3,1) ${delay}ms, transform .8s cubic-bezier(.2,.7,.3,1) ${delay}ms`,
      ...style,
    }}>{children}</div>
  );
}


function Nav() {
  return <SiteNav active="Our Story" />;
}

/* ── Intro ── */
function Intro() {
  return (
    <section style={{ ...WRAP, paddingTop: 92, paddingBottom: 72 }}>
      <Reveal>
        <Eyebrow style={{ color: BRAND.goldD }}>Our Story</Eyebrow>
      </Reveal>
      <div 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" }}>
            Healthy eating,<br />reimagined around<br /><span style={{ fontStyle: "italic", fontWeight: 600, color: BRAND.greenMed }}>the world's oldest grain.</span>
          </h1>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontSize: 16.5, lineHeight: 1.78, color: BRAND.body, margin: 0, paddingBottom: 6 }}>
            Empowered Millets brings a transformative approach to healthy eating in the UAE — meals built around the quiet power of millets, designed to help you live well, naturally.
          </p>
        </Reveal>
      </div>
      <Reveal delay={120} style={{ marginTop: 40 }}>
        <div style={{ width: "100%", height: 2, background: BRAND.creamD }} />
      </Reveal>
    </section>
  );
}

/* ── Mission paragraph ── */
function Mission() {
  return (
    <section style={{ ...WRAP, paddingBottom: 88 }}>
      <div style={{ display: "grid", gridTemplateColumns: "0.32fr 0.68fr", gap: 56 }}>
        <Reveal>
          <div style={{ fontFamily: mono, fontSize: 12, letterSpacing: ".08em", color: BRAND.goldD, textTransform: "uppercase" }}>Our Mission</div>
        </Reveal>
        <Reveal delay={80}>
          <p style={{ fontFamily: serif, fontSize: 27, lineHeight: 1.5, color: BRAND.forest, margin: 0, 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> — and every millet is sourced with care by <em>Joseph Dias</em>. The result: meals that are nutrient-rich, delicious, and genuinely good for you.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

/* ── Philosophy quote band ── */
function Philosophy() {
  return (
    <section style={{ background: BRAND.forest, padding: "96px 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>
          <div style={{ fontFamily: serif, fontSize: 92, lineHeight: 0.5, color: BRAND.gold, height: 40 }}>“</div>
        </Reveal>
        <Reveal delay={80}>
          <blockquote style={{ fontFamily: serif, fontWeight: 400, fontSize: 44, lineHeight: 1.28, color: "#fff", margin: "0 auto", maxWidth: 880, fontStyle: "italic", letterSpacing: "-.01em" }}>
            If your food is right, there is no need for medicine.
          </blockquote>
        </Reveal>
        <Reveal delay={160}>
          <div style={{ marginTop: 34, display: "flex", alignItems: "center", justifyContent: "center", gap: 14 }}>
            <span style={{ width: 28, height: 1, background: "rgba(255,255,255,.4)" }} />
            <span style={{ fontFamily: sans, fontSize: 13, letterSpacing: ".14em", textTransform: "uppercase", color: BRAND.softGreen }}>Dr. Khadar Valli · The Millet Man of India</span>
            <span style={{ width: 28, height: 1, background: "rgba(255,255,255,.4)" }} />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ── Profile block ── */
function Profile({ index, role, name, sub, paras, caption, img, imgPos = "center 25%", badge, flip }) {
  const imageCol = (
    <Reveal y={32}>
      <div style={{ position: "relative" }}>
        <div style={{ padding: 10, background: "#fff", boxShadow: "0 24px 60px rgba(27,58,45,.14)" }}>
          <div style={{ position: "relative", height: 540, overflow: "hidden" }}>
            <img src={img} alt={name} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: imgPos, display: "block" }} />
          </div>
        </div>
        {badge && (
          <div style={{ position: "absolute", bottom: -18, [flip ? "right" : "left"]: -18, background: BRAND.gold, color: "#fff", fontFamily: sans, fontSize: 12, fontWeight: 700, letterSpacing: ".04em", padding: "12px 18px", borderRadius: 4, boxShadow: "0 12px 30px rgba(27,58,45,.2)", textTransform: "uppercase", whiteSpace: "nowrap" }}>{badge}</div>
        )}
      </div>
    </Reveal>
  );
  const textCol = (
    <Reveal delay={90} style={{ alignSelf: "center" }}>
      <div>
        <Eyebrow style={{ color: BRAND.goldD }}>{role}</Eyebrow>
        <h3 style={{ fontFamily: serif, fontWeight: 700, fontSize: 38, color: BRAND.forest, margin: "14px 0 4px", letterSpacing: "-.01em" }}>{name}</h3>
        <div style={{ fontSize: 13.5, color: BRAND.greenMed, fontWeight: 600, letterSpacing: ".02em" }}>{sub}</div>
        <div style={{ width: 48, height: 2, background: BRAND.gold, margin: "22px 0 24px" }} />
        {paras.map((p, i) => (
          <p key={i} style={{ fontSize: 15.5, lineHeight: 1.78, color: BRAND.body, margin: i === 0 ? "0 0 16px" : "0 0 16px" }}>{p}</p>
        ))}
        <p style={{ fontFamily: serif, fontStyle: "italic", fontSize: 18, lineHeight: 1.55, color: BRAND.forest, margin: "22px 0 0", paddingLeft: 18, borderLeft: `2px solid ${BRAND.gold}` }}>{caption}</p>
      </div>
    </Reveal>
  );
  return (
    <section style={{ ...WRAP, paddingTop: 56, paddingBottom: 56 }}>
      <div style={{ display: "grid", gridTemplateColumns: "0.92fr 1.08fr", gap: 72, alignItems: "stretch" }}>
        {flip ? <>{textCol}{imageCol}</> : <>{imageCol}{textCol}</>}
      </div>
    </section>
  );
}

function People() {
  return (
    <div style={{ paddingTop: 40, paddingBottom: 40 }}>
      <section style={{ ...WRAP, paddingTop: 56, paddingBottom: 8 }}>
        <Reveal>
          <div style={{ textAlign: "center" }}>
            <Eyebrow style={{ color: BRAND.goldD }}>The People</Eyebrow>
            <h2 style={{ fontFamily: serif, fontWeight: 700, fontSize: 46, color: BRAND.forest, margin: "14px 0 0", letterSpacing: "-.01em" }}>The minds behind MilletsFit</h2>
          </div>
        </Reveal>
      </section>

      <Profile
        index="01"
        role="The Millet Man of India"
        name="Dr. Khadar Valli"
        sub="Millet Health Expert · Padma Shri Award 2023"
        img="/assets/team/dr-khadar-valli.jpg"
        imgPos="center 30%"
        badge="Padma Shri Award 2023"
        paras={[
          "Dr. Khadar Valli is a renowned food, agriculture, environment and health scientist — popularly known as the “Millet Man of India.” In 2023 he received the prestigious Padma Shri Award for his contribution to millet awareness, natural farming and sustainable living.",
          "After years of scientific research in India and the United States, he dedicated his life to promoting naturally grown millet-based foods. His work highlighted the role of traditional millets in supporting immunity, longevity and overall wellness — and forms the foundation of the MilletsFit approach.",
        ]}
        caption="Expert in sustainable meal planning — helping build long-term health through traditional wisdom and modern science."
      />

      <Profile
        index="02"
        role="Culinary Wellness Expert"
        name="Chef Bobby Kapoor"
        sub="Head Chef"
        img="/assets/team/chef-bobby.jpg"
        imgPos="center 18%"
        paras={[
          "Chef Bobby believes food should nourish the body, not just satisfy hunger. At MilletsFit he combines traditional millet nutrition with modern, wellness-focused meal planning to create meals that are as balanced as they are delicious.",
          "By replacing refined grains with nutrient-rich millets, his meals support weight management, blood-sugar balance and steady energy. Every meal is freshly prepared each day using natural ingredients — no preservatives — and delivered fresh across Abu Dhabi, Dubai and Sharjah.",
        ]}
        caption="Crafting millet-based meals that bring together flavour, nutrition and everyday ease."
      />

      <Profile
        index="03"
        role="Founder — MilletsFit UAE"
        name="Joseph Dias"
        sub="Founder, Millet Meal Plan"
        img="/assets/team/joseph-dias.jpg"
        imgPos="center 12%"
        paras={[
          "Joseph Dias is the driving force behind bringing millet-based wellness to Dubai and the UAE. Passionate about healthy living and sustainable food habits, he is dedicated to making nutritious millet meals accessible to modern families and working professionals.",
          "Inspired by the teachings and research of Dr. Khadar Valli, Joseph leads MilletsFit with a vision to build a healthier community — encouraging people to return to natural, wholesome food, freshly prepared and hygienically delivered.",
        ]}
        caption="Passionate about transforming everyday eating habits through millet-based nutrition and sustainable lifestyle solutions."
      />
    </div>
  );
}

/* ── Our promise strip ── */
function OurPromise() {
  const items = [
    ["Freshly cooked daily", "Prepared each morning — never frozen."],
    ["No preservatives", "Only natural, whole ingredients in every meal."],
    ["Single-origin millets", "Sourced and processed with care for quality you can trace."],
    ["Delivered across Abu Dhabi, Dubai, Sharjah", "Hygienically packed and brought to your door, fresh."],
  ];
  return (
    <section style={{ background: BRAND.sage }}>
      <div style={{ ...WRAP, padding: "72px 56px" }}>
        <Reveal>
          <div style={{ textAlign: "center", marginBottom: 48 }}>
            <Eyebrow style={{ color: BRAND.goldD }}>Our Promise</Eyebrow>
            <h2 style={{ fontFamily: serif, fontWeight: 700, fontSize: 38, color: BRAND.forest, margin: "12px 0 0" }}>What goes into every meal</h2>
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 0 }}>
          {items.map(([t, d], i) => (
            <Reveal key={t} delay={i * 90}>
              <div style={{ padding: "0 26px", borderLeft: i > 0 ? `1px solid ${BRAND.sageD}` : "none", height: "100%" }}>
                <div style={{ fontFamily: serif, fontSize: 22, fontWeight: 700, color: BRAND.forest, marginBottom: 12, letterSpacing: "-.01em" }}>{t}</div>
                <p style={{ fontSize: 13.5, lineHeight: 1.65, color: BRAND.body, margin: 0 }}>{d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── CTA ── */
function CTA() {
  return (
    <section style={{ ...WRAP, padding: "96px 56px", textAlign: "center" }}>
      <Reveal>
        <Eyebrow style={{ color: BRAND.goldD }}>Begin your story</Eyebrow>
        <h2 style={{ fontFamily: serif, fontWeight: 700, fontSize: 50, color: BRAND.forest, margin: "16px 0 18px", letterSpacing: "-.015em" }}>
          Eat right. The rest follows.
        </h2>
        <p style={{ fontSize: 16.5, color: BRAND.body, maxWidth: 520, margin: "0 auto 36px", lineHeight: 1.7 }}>
          Choose a condition-specific millet plan, crafted by experts and delivered fresh across the Emirates.
        </p>
        <div style={{ display: "inline-flex", gap: 16 }}>
          <a href="/plans" style={{ display: "inline-flex", alignItems: "center", gap: 10, background: BRAND.forest, color: "#fff", fontFamily: sans, fontSize: 15, fontWeight: 600, padding: "16px 32px", borderRadius: 999, textDecoration: "none" }}>Explore the plans →</a>
          <a href="https://wa.me/971554177677" target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", alignItems: "center", color: BRAND.forest, fontFamily: sans, fontSize: 15, fontWeight: 600, padding: "16px 8px", textDecoration: "none", borderBottom: `1.5px solid ${BRAND.gold}` }}>Talk to us on WhatsApp</a>
        </div>
      </Reveal>
    </section>
  );
}

function AboutPage() {
  return (
    <div className="mf-about" style={{ background: BRAND.cream, fontFamily: sans, color: BRAND.ink, minHeight: "100vh" }}>
      <Nav />
      <Intro />
      <Mission />
      <Philosophy />
      <People />
      <OurPromise />
      <CTA />
      <SiteFooter />
    </div>
  );
}

Object.assign(window, { AboutPage, Philosophy, People, OurPromise, CTA });