const { useState, useEffect } = React;
function useNarrow(bp) {
  bp = bp || 760;
  const [narrow, setNarrow] = useState(typeof window !== "undefined" && window.innerWidth < bp);
  useEffect(function() {
    function h() { setNarrow(window.innerWidth < bp); }
    window.addEventListener("resize", h);
    return function() { window.removeEventListener("resize", h); };
  }, []);
  return narrow;
}

/* ============================================================
   Section 1 — The chaos / problem
============================================================ */
function ChaosSection() {
  const scattered = [
    { tag: "WhatsApp", text: "Mom's blood test forwarded to bua" },
    { tag: "Drive",    text: "Scans_2023_Apollo.pdf" },
    { tag: "Photos",   text: "IMG_2391 — prescription" },
    { tag: "Email",    text: "Discharge summary — Fortis" },
    { tag: "Notebook", text: "Telmisartan, after breakfast" },
    { tag: "Memory",   text: "the homeopath's name?" },
  ];
  return (
    <section style={{ background: "var(--c-bg-2)" }}>
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot"></span>The reality every family knows</span>
          <h2>Your family's health is scattered across <em style={{color: "var(--c-accent)", fontStyle: "normal"}}>twelve different places.</em></h2>
          <p>And the one place it really needs to be — in front of you when something is wrong — is the one place it never is.</p>
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
          gap: 14
        }}>
          {scattered.map((s, i) => (
            <div key={i} style={{
              background: "var(--c-card)",
              border: "1px solid var(--c-line)",
              borderRadius: 14,
              padding: "18px 18px",
              transform: `rotate(${[-1.5, 1, -0.5, 1.5, -1, 0.5][i]}deg)`,
              display: "flex", flexDirection: "column", gap: 8
            }}>
              <span style={{
                fontFamily: "var(--mono)", fontSize: 10.5,
                color: "var(--c-mute)", textTransform: "uppercase", letterSpacing: ".12em"
              }}>{s.tag}</span>
              <span style={{ fontFamily: "var(--serif)", fontSize: 16, color: "var(--c-ink)" }}>{s.text}</span>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 56, padding: "28px 32px",
          background: "var(--c-card)",
          border: "1px solid var(--c-line)",
          borderRadius: 18,
          display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap"
        }}>
          <div style={{ flex: "1 1 360px" }}>
            <div style={{ fontFamily: "var(--serif)", fontSize: 20, fontWeight: 600 }}>When an emergency happens, families shouldn't waste time searching for files.</div>
            <div style={{ color: "var(--c-ink-2)", marginTop: 6, fontSize: 15 }}>Arogya keeps every record one tap away — for everyone in the family.</div>
          </div>
          <div style={{ display: "flex", gap: 10 }}>
            <span className="pill">Reports</span>
            <span className="pill">Prescriptions</span>
            <span className="pill">Vaccinations</span>
            <span className="pill">Medicines</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Section 2 — What Arogya remembers (feature grid)
============================================================ */
function RemembersSection() {
  const items = [
    { t: "Reports",          d: "Lab results, scans, discharge summaries — auto-categorised by person and date.", k: "▤" },
    { t: "Prescriptions",    d: "Every drug, every dose, every doctor. Searchable across years.", k: "℞" },
    { t: "Medicines",        d: "What's being taken now, what was stopped, and why.", k: "◔" },
    { t: "Vaccinations",     d: "Childhood schedule, boosters, travel shots — never miss one again.", k: "✦" },
    { t: "Doctor visits",    d: "Who said what, on which date, and what to follow up on.", k: "✎" },
    { t: "Menstrual cycles", d: "Tracked privately, with the context the rest of healthcare needs.", k: "○" },
    { t: "Ayurveda & more",  d: "Allopathy, Ayurveda, homeopathy, naturopathy — all in one memory.", k: "❋" },
    { t: "Health history",   d: "Conditions, allergies, surgeries, family history — finally in one place.", k: "⌥" },
  ];
  return (
    <section>
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot"></span>What Arogya remembers</span>
          <h2>Everything your family's body has been through — <em style={{color: "var(--c-brand-deep)", fontStyle: "normal"}}>finally in one timeline.</em></h2>
          <p>Forward a report on Telegram. Snap a prescription. Forget about it. Arogya files it for the right person, in the right place, with the right context.</p>
        </div>
        <div className="grid cols-4">
          {items.map((it, i) => (
            <div key={i} className="card" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <div style={{
                width: 40, height: 40, borderRadius: 12,
                background: "color-mix(in oklab, var(--c-brand) 18%, transparent)",
                color: "var(--c-brand-deep)",
                display: "grid", placeItems: "center",
                fontSize: 20, fontFamily: "var(--serif)", fontWeight: 600
              }}>{it.k}</div>
              <div style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 18 }}>{it.t}</div>
              <div style={{ color: "var(--c-ink-2)", fontSize: 14, lineHeight: 1.55 }}>{it.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Section 3 — Quiet AI
============================================================ */
function QuietAISection() {
  return (
    <section style={{ background: "var(--c-bg-2)" }}>
      <div className="wrap" style={{
        display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.1fr)", gap: 56, alignItems: "center"
      }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
          <span className="eyebrow"><span className="dot"></span>Quietly intelligent</span>
          <h2 style={{ fontSize: "clamp(28px, 3.6vw, 44px)", lineHeight: 1.08 }}>
            AI that quietly organizes your family's health. <em style={{color:"var(--c-brand-deep)", fontStyle:"normal"}}>Not an AI doctor.</em>
          </h2>
          <p style={{ color: "var(--c-ink-2)", fontSize: 16.5, lineHeight: 1.6 }}>
            Arogya doesn't diagnose. It doesn't replace your doctor. It does the work no one wants to do — reading every PDF, naming every file, linking every prescription to the right person, surfacing what matters before a visit.
          </p>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {[
              "Reads handwritten prescriptions, lab PDFs, discharge summaries.",
              "Links a new report to the right family member, automatically.",
              "Surfaces what's relevant before a doctor's visit — without you asking.",
              "Reminds you about boosters, refills, and follow-ups, gently."
            ].map((l, i) => (
              <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                <span style={{
                  width: 22, height: 22, borderRadius: "50%",
                  background: "color-mix(in oklab, var(--c-brand) 22%, transparent)",
                  color: "var(--c-brand-deep)",
                  display: "grid", placeItems: "center",
                  fontSize: 12, fontWeight: 700, marginTop: 2
                }}>✓</span>
                <span style={{ fontSize: 15.5, color: "var(--c-ink)" }}>{l}</span>
              </div>
            ))}
          </div>
        </div>
        <AIDemo />
      </div>
    </section>
  );
}

function AIDemo() {
  return (
    <div style={{
      background: "var(--c-card)",
      border: "1px solid var(--c-line)",
      borderRadius: 22,
      padding: 22,
      boxShadow: "var(--shadow-md)",
      display: "flex", flexDirection: "column", gap: 14
    }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 15 }}>Today · prepared for Amma's visit</div>
        <span className="pill" style={{ fontSize: 11 }}>Updated 6 min ago</span>
      </div>

      <div className="img-slot" data-label="UPLOAD PREVIEW — LAB REPORT THUMBNAIL" style={{ height: 130 }}></div>

      <div style={{
        background: "color-mix(in oklab, var(--c-brand) 8%, transparent)",
        border: "1px solid color-mix(in oklab, var(--c-brand) 18%, var(--c-line))",
        borderRadius: 14, padding: 16,
        display: "flex", flexDirection: "column", gap: 8
      }}>
        <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: ".12em", color: "var(--c-brand-deep)" }}>
          AROGYA NOTICED →
        </div>
        <div style={{ fontFamily: "var(--serif)", fontSize: 17, fontWeight: 600, lineHeight: 1.3 }}>
          LDL up 12% since February. Probably worth mentioning to Dr. Mehta tomorrow.
        </div>
        <div style={{ color: "var(--c-ink-2)", fontSize: 13.5 }}>
          I've added a comparison chart and last visit's notes to her file. Open it before the appointment?
        </div>
      </div>

      <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
        <button className="btn btn-primary" style={{ padding: "10px 16px", fontSize: 13.5 }}>Open Amma's file</button>
        <button className="btn btn-ghost" style={{ padding: "10px 16px", fontSize: 13.5 }}>Remind me at 8 am</button>
      </div>
    </div>
  );
}

/* ============================================================
   Section 4 — Family (collective health)
============================================================ */
function FamilySection() {
  const narrow = useNarrow(760);
  const roles = [
    { who: "Daughters & sons", d: "managing parents' appointments, medicines, and reports from afar." },
    { who: "Spouses",          d: "coordinating refills, side-effects, and tomorrow's tests." },
    { who: "Caregivers",       d: "given controlled access to only what they need." },
    { who: "In an emergency",  d: "the right history is one tap away — for anyone you trust." },
  ];
  return (
    <section>
      <div className="wrap" style={{
        display: "grid", gridTemplateColumns: narrow ? "1fr" : "1.1fr 1fr",
        gap: narrow ? 24 : 56, alignItems: "center"
      }}>
        <img
          src="/static/landing/images/family.png"
          alt="Multi-generational Indian family at home"
          style={{ height: narrow ? 220 : 460, width: "100%", display: "block",
                   objectFit: "cover", borderRadius: 24 }}
        />
        <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
          <span className="eyebrow"><span className="dot"></span>Healthcare is a family activity</span>
          <h2 style={{ fontSize: "clamp(28px, 3.6vw, 44px)", lineHeight: 1.08 }}>
            Because no one manages their health alone.
          </h2>
          <p style={{ color: "var(--c-ink-2)", fontSize: 16.5 }}>
            In Indian families, healthcare is collective. Arogya is built for that — with shared access, role-based controls, and a single timeline that follows your family across years and doctors.
          </p>
          <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 8 }}>
            {roles.map(function(r, i) { return (
              <div key={i} style={{
                display: "flex", flexDirection: "column", gap: 4,
                paddingBottom: 14, borderBottom: i < roles.length - 1 ? "1px solid var(--c-line)" : "none"
              }}>
                <div style={{ fontFamily: "var(--serif)", fontWeight: 600, color: "var(--c-ink)", fontSize: 15 }}>{r.who}</div>
                <div style={{ color: "var(--c-ink-2)", fontSize: 14.5 }}>{r.d}</div>
              </div>
            ); })}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Section 5 — Invisible health history + Indian medicine
============================================================ */
function InvisibleSection() {
  const forgotten = [
    "self-medication",
    "supplements & vitamins",
    "menstrual cycles",
    "home remedies",
    "Ayurvedic medicine",
    "homeopathy",
    "naturopathy",
    "recurring symptoms",
    "yoga & lifestyle",
    "doctor's verbal advice",
  ];
  return (
    <section style={{ background: "var(--c-ink)", color: "var(--c-bg)" }}>
      <div className="wrap">
        <div style={{ maxWidth: 780, display: "flex", flexDirection: "column", gap: 20, marginBottom: 48 }}>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 8, alignSelf: "flex-start",
            fontFamily: "var(--mono)", fontSize: 11.5, letterSpacing: ".14em",
            textTransform: "uppercase",
            padding: "6px 12px", borderRadius: 999,
            background: "color-mix(in oklab, var(--c-brand) 22%, transparent)",
            color: "color-mix(in oklab, var(--c-brand) 55%, white)"
          }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "currentColor" }} />
            The invisible 80%
          </span>
          <h2 style={{ color: "var(--c-bg)", fontSize: "clamp(32px, 4.4vw, 56px)", lineHeight: 1.05 }}>
            Real healthcare is everything <em style={{color:"color-mix(in oklab, var(--c-brand) 55%, white)", fontStyle:"normal"}}>between</em> doctor visits.
          </h2>
          <p style={{ color: "color-mix(in oklab, var(--c-bg) 70%, var(--c-mute))", fontSize: 17.5, lineHeight: 1.6 }}>
            Most apps only remember what gets a printed report. Arogya remembers everything else — because families don't follow just one system of medicine.
          </p>
        </div>

        <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
          {forgotten.map((f, i) => (
            <span key={i} style={{
              padding: "10px 18px",
              borderRadius: 999,
              border: "1px solid color-mix(in oklab, var(--c-bg) 18%, transparent)",
              fontFamily: "var(--serif)", fontSize: 16,
              color: "var(--c-bg)",
              background: i % 3 === 0 ? "color-mix(in oklab, var(--c-brand) 22%, transparent)" : "transparent"
            }}>{f}</span>
          ))}
        </div>

        <div style={{
          marginTop: 56,
          display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
          gap: 0,
          borderTop: "1px solid color-mix(in oklab, var(--c-bg) 14%, transparent)",
        }}>
          {[
            { k: "Allopathy",   d: "Doctors, hospitals, labs" },
            { k: "Ayurveda",    d: "Vaidyas, kashayams, panchakarma" },
            { k: "Homeopathy",  d: "Constitutional + acute" },
            { k: "Naturopathy", d: "Diet, fasting, lifestyle" },
            { k: "Yoga",        d: "Practice, breath, posture" },
          ].map((c, i) => (
            <div key={i} style={{
              padding: "22px 18px",
              borderRight: "1px solid color-mix(in oklab, var(--c-bg) 14%, transparent)",
              borderBottom: "1px solid color-mix(in oklab, var(--c-bg) 14%, transparent)"
            }}>
              <div style={{ fontFamily: "var(--serif)", fontSize: 19, fontWeight: 600 }}>{c.k}</div>
              <div style={{ color: "color-mix(in oklab, var(--c-bg) 65%, var(--c-mute))", fontSize: 13.5, marginTop: 4 }}>{c.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Section 6 — Privacy / Google Drive
============================================================ */
function PrivacySection() {
  const narrow = useNarrow(760);
  return (
    <section>
      <div className="wrap" style={{
        display: "grid", gridTemplateColumns: narrow ? "1fr" : "1.05fr 1fr",
        gap: narrow ? 24 : 56, alignItems: "center"
      }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
          <span className="eyebrow"><span className="dot"></span>Yours. Forever.</span>
          <h2 style={{ fontSize: "clamp(28px, 3.6vw, 44px)", lineHeight: 1.08 }}>
            Your files stay in your Google Drive. <em style={{color:"var(--c-brand-deep)", fontStyle:"normal"}}>Not ours.</em>
          </h2>
          <p style={{ color: "var(--c-ink-2)", fontSize: 16.5 }}>
            Most health apps trap your data in their vault. Arogya doesn't. Every document you upload is saved to your own Drive — neatly organized into folders you can browse without us.
          </p>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 4 }}>
            {[
              { t: "You own it",      d: "Files live in your Drive, in folders you control." },
              { t: "You control access", d: "Add or revoke family access at any time." },
              { t: "Nothing trapped", d: "Cancel Arogya tomorrow — your archive stays intact." },
              { t: "Encrypted in transit", d: "And never sold, shared, or trained on." },
            ].map((c, i) => (
              <div key={i} style={{
                padding: 16, borderRadius: 14,
                background: "var(--c-card)", border: "1px solid var(--c-line)"
              }}>
                <div style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 15 }}>{c.t}</div>
                <div style={{ color: "var(--c-ink-2)", fontSize: 13.5, marginTop: 4 }}>{c.d}</div>
              </div>
            ))}
          </div>
        </div>
        {narrow ? <DriveCompact /> : <DriveMock />}
      </div>
    </section>
  );
}

function DriveCompact() {
  return (
    <div style={{ background: "var(--c-card)", border: "1px solid var(--c-line)", borderRadius: 14, padding: 16 }}>
      <div style={{ fontSize: 11, fontWeight: 600, color: "var(--c-ink)", marginBottom: 10, display: "flex", alignItems: "center", gap: 6 }}>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.3 78" style={{ width: 16, height: 14 }}>
          <path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/><path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0-1.2 4.5h27.5z" fill="#00ac47"/><path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.5l5.85 11.5z" fill="#ea4335"/><path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d"/><path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc"/><path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 27h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/>
        </svg>
        My Arogya Family Health
      </div>
      {[{n:"Amma",s:"42 files"},{n:"Appa",s:"29 files"},{n:"Arjun",s:"17 files"},{n:"Riya",s:"23 files"}].map(function(f) { return (
        <div key={f.n} style={{ display: "flex", justifyContent: "space-between", fontSize: 13, color: "var(--c-ink-2)", padding: "6px 0", borderBottom: "1px solid var(--c-line)" }}>
          <span>📂 {f.n}</span><span style={{ color: "var(--c-mute)" }}>{f.s}</span>
        </div>
      ); })}
    </div>
  );
}

function DriveMock() {
  const folders = [
    { n: "Amma",  s: "42 files · 18 MB" },
    { n: "Appa",  s: "29 files · 11 MB" },
    { n: "Arjun", s: "17 files · 6 MB"  },
    { n: "Riya",  s: "23 files · 8 MB"  },
  ];
  return (
    <div style={{
      background: "var(--c-card)",
      border: "1px solid var(--c-line)",
      borderRadius: 18,
      padding: 22,
      boxShadow: "var(--shadow-md)"
    }}>
      <div style={{
        display: "flex", alignItems: "center", gap: 10,
        paddingBottom: 14, borderBottom: "1px solid var(--c-line)"
      }}>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.3 78" style={{ width: 22, height: 19, flexShrink: 0 }}>
          <path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/>
          <path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0-1.2 4.5h27.5z" fill="#00ac47"/>
          <path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.5l5.85 11.5z" fill="#ea4335"/>
          <path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d"/>
          <path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc"/>
          <path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 27h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/>
        </svg>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{
            width: 26, height: 26, borderRadius: 6,
            background: "linear-gradient(135deg, #4285F4, #34A853, #FBBC04, #EA4335)",
            opacity: 0.85
          }} />
          <div style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 14 }}>My Drive · Arogya · Family Health</div>
        </div>
        <span className="pill" style={{ fontSize: 11 }}>Shared with 3</span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", marginTop: 6 }}>
        {folders.map((f, i) => (
          <div key={i} style={{
            display: "flex", alignItems: "center", gap: 12,
            padding: "12px 4px",
            borderBottom: i < folders.length - 1 ? "1px solid var(--c-line)" : "none"
          }}>
            <div style={{
              width: 32, height: 26, borderRadius: 4,
              background: "color-mix(in oklab, var(--c-brand) 28%, transparent)",
              border: "1px solid color-mix(in oklab, var(--c-brand) 40%, var(--c-line))",
              position: "relative"
            }}>
              <div style={{
                position: "absolute", top: -4, left: 4, width: 12, height: 5,
                borderRadius: "2px 2px 0 0",
                background: "color-mix(in oklab, var(--c-brand) 50%, var(--c-line))"
              }} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 500, fontSize: 14 }}>{f.n}</div>
              <div style={{ color: "var(--c-mute)", fontSize: 12 }}>{f.s}</div>
            </div>
            <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--c-mute)" }}>updated today</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ============================================================
   Section 7 — Multi-channel future
============================================================ */
function ChannelsSection() {
  const channels = [
    { k: "Web",        d: "Sign in and manage your family's complete health timeline.", active: true },
    { k: "Telegram",   d: "Forward reports, snap prescriptions, ask questions.", active: true },
    { k: "WhatsApp",   d: "Same intelligence, where more families already are.", active: false },
    { k: "Mobile app", d: "iOS & Android — native experience, same memory.", active: false },
  ];
  return (
    <section style={{ background: "var(--c-bg-2)" }}>
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot"></span>Wherever your family already is</span>
          <h2>The interface can change. <em style={{color:"var(--c-brand-deep)", fontStyle:"normal"}}>Your health memory remains.</em></h2>
          <p>Arogya works on the web today, and on Telegram for forwarding reports on the go. WhatsApp and a native mobile app are on the roadmap.</p>
        </div>
        <div className="grid cols-4">
          {channels.map((c, i) => (
            <div key={i} style={{
              padding: 22,
              borderRadius: 16,
              background: c.active ? "var(--c-ink)" : "var(--c-card)",
              color: c.active ? "var(--c-bg)" : "var(--c-ink)",
              border: "1px solid var(--c-line)",
              display: "flex", flexDirection: "column", gap: 10,
              minHeight: 160,
              justifyContent: "space-between"
            }}>
              <div style={{
                fontFamily: "var(--mono)",
                fontSize: 10.5, letterSpacing: ".14em", textTransform: "uppercase",
                color: c.active ? "color-mix(in oklab, var(--c-brand) 55%, white)" : "var(--c-mute)"
              }}>{c.active ? "Available now" : "On the roadmap"}</div>
              <div>
                <div style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 22 }}>{c.k}</div>
                <div style={{
                  marginTop: 4,
                  color: c.active ? "color-mix(in oklab, var(--c-bg) 70%, var(--c-mute))" : "var(--c-ink-2)",
                  fontSize: 14
                }}>{c.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Section 8 — Final CTA
============================================================ */
function FinalCTA() {
  return (
    <section style={{ paddingBottom: 120 }}>
      <div className="wrap">
        <div style={{
          position: "relative",
          background: "linear-gradient(135deg, color-mix(in oklab, var(--c-brand) 28%, var(--c-bg)) 0%, var(--c-bg-2) 100%)",
          border: "1px solid color-mix(in oklab, var(--c-brand) 26%, var(--c-line))",
          borderRadius: 28,
          padding: "72px 56px",
          textAlign: "center",
          overflow: "hidden"
        }}>
          <span className="eyebrow"><span className="dot"></span>Begin</span>
          <h2 style={{
            fontSize: "clamp(36px, 5vw, 60px)",
            lineHeight: 1.05,
            margin: "20px auto 16px",
            maxWidth: 880
          }}>
            Your family's health memory <em style={{color:"var(--c-brand-deep)", fontStyle:"normal"}}>should stay with your family forever.</em>
          </h2>
          <p style={{
            color: "var(--c-ink-2)", fontSize: 17,
            maxWidth: 560, margin: "0 auto 32px"
          }}>
            Start on web or Telegram. Two minutes to set up. A lifetime of continuity.
          </p>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
            <a href="/auth/google/login" className="btn btn-primary" style={{ padding: "16px 26px", fontSize: 15.5, textDecoration: "none" }}>
              Log in to Arogya <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Footer
============================================================ */
function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="logo" style={{ marginBottom: 14 }}>
              <span className="logo-mark"></span>
              Arogya
            </div>
            <div style={{ color: "var(--c-ink-2)", fontSize: 14, maxWidth: 320 }}>
              Your family's complete health memory. Quietly intelligent. Built in India, for families everywhere.
            </div>
          </div>
          <div>
            <h5>Product</h5>
            <a href="#features">How it works</a>
            <a href="#family">For families</a>
            <a href="#channels">Roadmap</a>
          </div>
          <div>
            <h5>Support</h5>
            <a href="mailto:support@ayur-arogya.com">support@ayur-arogya.com</a>
            <a href="/how-it-works">How it works</a>
            <a href="/pricing">Pricing</a>
            <a href="/privacy">Privacy policy</a>
            <a href="/terms">Terms of service</a>
            <a href="/faq">FAQ</a>
          </div>
          <div>
            <h5>Get in touch</h5>
            <a href="https://t.me/Ayur_arogya_bot">Start on Telegram</a>
            <a href="mailto:support@ayur-arogya.com">support@ayur-arogya.com</a>
            <a href="mailto:support@ayur-arogya.com">Help & support</a>
          </div>
        </div>
        <div className="footer-bot">
          <div>© 2026 Arogya Health Memory · Made for Indian families</div>
          <div style={{ display: "flex", gap: 18 }}>
            <a href="/how-it-works">How it works</a>
            <a href="/pricing">Pricing</a>
            <a href="/terms">Terms</a>
            <a href="/privacy">Privacy</a>
            <a href="/faq">FAQ</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.AroSections = {
  ChaosSection, RemembersSection, QuietAISection, FamilySection,
  InvisibleSection, PrivacySection, ChannelsSection, FinalCTA, Footer
};
