/* global React */
/* ============================================================
   Arogya — Sections 2, 3, 4 redesigned per design brief.
   5-second test: section meaning visible BEFORE any reading.
============================================================ */
const { useState: useStateR } = React;

/* ----- Source colour mapping (generic, not branded logos) ----- */
const SOURCE_COLORS = {
  WhatsApp: "#1faa5a",
  Gmail:    "#d54d3a",
  Email:    "#1f70d6",
  Drive:    "#3b66c4",
  Photos:   "#8a4ed1",
  Notebook: "#a07a3b",
  Drawer:   "#8a5a2a",
  Memory:   "#6b7280",
  Camera:   "#0a8a8a",
};

/* ----- Source icon — small SVG glyph per source. Generic icons only,
        not brand-logo replicas. Colour cues match the app association. ----- */
function SourceIcon({ src, size = 22 }) {
  const c = SOURCE_COLORS[src] || "#666";
  const wrap = (children, bg = c) => (
    <span style={{
      display: "inline-grid", placeItems: "center",
      width: size, height: size, borderRadius: 6,
      background: bg, color: "white", flexShrink: 0,
    }}>{children}</span>
  );
  switch (src) {
    case "WhatsApp":
      // chat bubble with phone hint
      return wrap(
        <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 24 24" fill="none">
          <path d="M4 5h16v11H9l-5 4V5z" fill="white"/>
          <path d="M10 11c0 2 2 4 4 4l1.4-1 1.6.9.6-1.5-1-1.3-1.5.5c-.7-.4-1.3-1-1.7-1.7l.5-1.5L13 8l-1.5.6.9 1.6L10 11z" fill={c}/>
        </svg>
      );
    case "Gmail":
    case "Email":
      return wrap(
        <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 24 24" fill="none">
          <rect x="3" y="6" width="18" height="12" rx="1.5" fill="white"/>
          <path d="M3.5 7 L12 13 L20.5 7" stroke={c} strokeWidth="1.6" fill="none" strokeLinejoin="round"/>
        </svg>
      );
    case "Drive":
      // generic folder (not Google Drive triangle logo)
      return wrap(
        <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 24 24" fill="none">
          <path d="M3 6h6l2 2h10v10H3z" fill="white"/>
          <path d="M3 10h18" stroke={c} strokeWidth="1.2"/>
        </svg>
      );
    case "Photos":
      // camera / picture frame
      return wrap(
        <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 24 24" fill="none">
          <rect x="3" y="6" width="18" height="14" rx="1.5" fill="white"/>
          <path d="M3 17l5-5 4 4 3-3 6 6" stroke={c} strokeWidth="1.4" fill="none" strokeLinejoin="round"/>
          <circle cx="16" cy="10" r="1.6" fill={c}/>
        </svg>
      );
    case "Notebook":
      // spiral-bound notebook
      return wrap(
        <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 24 24" fill="none">
          <rect x="6" y="4" width="14" height="17" rx="1.5" fill="white"/>
          {[0, 1, 2, 3].map(i => (
            <circle key={i} cx="5" cy={7 + i * 4} r="1.2" fill="white" stroke={c} strokeWidth="1"/>
          ))}
          <path d="M10 10h7M10 13h6M10 16h5" stroke={c} strokeWidth="1.1" strokeLinecap="round"/>
        </svg>
      );
    case "Drawer":
      // dresser
      return wrap(
        <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 24 24" fill="none">
          <rect x="4" y="4" width="16" height="16" rx="1.5" fill="white"/>
          <line x1="4" y1="12" x2="20" y2="12" stroke={c} strokeWidth="1.2"/>
          <circle cx="12" cy="8" r="1" fill={c}/>
          <circle cx="12" cy="16" r="1" fill={c}/>
        </svg>
      );
    case "Memory":
      // thought cloud with a question mark
      return wrap(
        <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 24 24" fill="none">
          <path d="M6 14c-2 0-3-1.5-3-3s1-3 3-3c0-2 1.5-3.5 3.5-3.5 1.5 0 2.8.9 3.4 2.3.4-.2.9-.3 1.4-.3 1.8 0 3.2 1.3 3.2 3 1.4.2 2.5 1.4 2.5 2.8 0 1.5-1.2 2.7-2.7 2.7H6z" fill="white"/>
          <text x="12" y="14" fontSize="7" fontWeight="700" textAnchor="middle" fill={c} fontFamily="sans-serif">?</text>
        </svg>
      );
    default:
      return wrap(<span style={{ fontSize: 10, fontWeight: 700 }}>?</span>);
  }
}

/* ====== Tiny circular avatar (used only in the small Arogya unifier strip) ====== */
function PortraitAvatar({ id, placeholder, initial, tint, size = 72 }) {
  return (
    <div style={{
      position: "relative",
      width: size, height: size, borderRadius: "50%",
      overflow: "hidden",
      background: tint || "color-mix(in oklab, var(--c-brand) 16%, var(--c-bg-2))",
      border: "2px solid var(--c-card)",
      boxShadow: "0 2px 8px rgba(8,40,32,.08)",
      display: "grid", placeItems: "center",
      flexShrink: 0,
    }}>
      <span style={{
        position: "absolute", inset: 0,
        display: "grid", placeItems: "center",
        fontFamily: "var(--serif)", fontWeight: 600,
        fontSize: size * 0.42,
        color: "var(--c-brand-deep)",
        opacity: 0.5,
      }}>{initial}</span>
      <img
        src={slotSrc(id)}
        alt={placeholder}
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", borderRadius: "50%" }}
      />
    </div>
  );
}

/* ====== Large family-card portrait — full-width image with rounded crop ====== */
function LargePortrait({ id, placeholder, initial, tint }) {
  return (
    <div style={{
      position: "relative",
      width: "100%",
      aspectRatio: "4 / 5",
      borderRadius: 14,
      overflow: "hidden",
      background: tint || "color-mix(in oklab, var(--c-brand) 14%, var(--c-bg-2))",
      boxShadow: "0 1px 2px rgba(8,40,32,.05), 0 12px 28px rgba(8,40,32,.08)",
    }}>
      <span style={{
        position: "absolute", inset: 0,
        display: "grid", placeItems: "center",
        fontFamily: "var(--serif)", fontWeight: 600,
        fontSize: "clamp(48px, 6vw, 84px)",
        color: "var(--c-brand-deep)",
        opacity: 0.28,
        letterSpacing: "-0.02em",
      }}>{initial}</span>
      <img
        src={slotSrc(id)}
        alt={placeholder}
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
      />
    </div>
  );
}

/* ====== Doc chip — source icon + label + filename ====== */
function DocChip({ src, text, tilt = 0 }) {
  return (
    <div style={{
      background: "var(--c-card)",
      border: "1px solid var(--c-line)",
      borderRadius: 10,
      padding: "9px 11px",
      transform: `rotate(${tilt}deg)`,
      boxShadow: "0 1px 2px rgba(8,40,32,.04), 0 6px 14px rgba(8,40,32,.05)",
      display: "flex", alignItems: "center", gap: 10,
      width: "100%",
      transition: "transform .25s",
    }}>
      <SourceIcon src={src} size={26} />
      <div style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 0, flex: 1 }}>
        <span style={{
          fontFamily: "var(--mono)", fontSize: 9.5,
          color: SOURCE_COLORS[src] || "var(--c-mute)",
          letterSpacing: ".1em", textTransform: "uppercase",
          fontWeight: 600,
        }}>{src}</span>
        <span style={{
          fontSize: 12.5, lineHeight: 1.25,
          color: "var(--c-ink)",
          fontFamily: "var(--sans)",
          overflow: "hidden",
          textOverflow: "ellipsis",
        }}>{text}</span>
      </div>
    </div>
  );
}

/* ============================================================
   SECTION 2 — Family chaos grid
   People first; their docs scattered around them; clean Arogya bar below
============================================================ */
function FamilyChaosSection() {
  const family = [
    {
      id: "appa", name: "Appa", role: "Grandfather · 67",
      initial: "अ",
      photoId: "fam-appa",
      placeholder: "Indian grandfather, 60s–70s, warm portrait at home",
      docs: [
        { src: "WhatsApp", text: "BP report from Dr. Iyer", tilt: -3 },
        { src: "Notebook", text: "Telmisartan 40mg, after breakfast", tilt: 2.5 },
        { src: "Photos",   text: "Handwritten Rx, Aug 12", tilt: -1.5 },
        { src: "Gmail",    text: "Apollo discharge — cath lab", tilt: 1.5 },
      ],
    },
    {
      id: "amma", name: "Amma", role: "Grandmother · 62",
      initial: "अ",
      photoId: "fam-amma",
      placeholder: "Indian grandmother, 60s, soft natural light",
      docs: [
        { src: "WhatsApp", text: "Blood test forwarded by bua", tilt: 2 },
        { src: "Drive",    text: "USG_Aug_2024.pdf", tilt: -2.5 },
        { src: "Photos",   text: "Vaidya's kashayam list", tilt: 1.5 },
        { src: "Memory",   text: "the homeopath's name…?", tilt: -1 },
      ],
    },
    {
      id: "you", name: "You", role: "Priya · 38",
      initial: "P",
      photoId: "fam-you",
      placeholder: "Indian woman 30s/40s, managing family — confident, warm",
      docs: [
        { src: "Email",  text: "Annual checkup — lipid panel", tilt: -2 },
        { src: "Photos", text: "ECG strip from the gym", tilt: 1.5 },
        { src: "Drive",  text: "Lipid_2024_full.pdf", tilt: -1 },
      ],
    },
    {
      id: "kids", name: "Arjun & Riya", role: "8 & 5",
      initial: "A·R",
      photoId: "fam-kids",
      placeholder: "Two Indian children, primary school age, siblings",
      docs: [
        { src: "Drawer",   text: "Yellow vaccine card", tilt: -2.5 },
        { src: "WhatsApp", text: "Amoxicillin 5ml × 5 days", tilt: 2 },
        { src: "Photos",   text: "School health certificate", tilt: -1 },
      ],
    },
    {
      id: "bruno", name: "Bruno", role: "Beagle · 4",
      initial: "🐾",
      photoId: "fam-pet",
      placeholder: "Family dog — beagle or indie, warm domestic scene",
      docs: [
        { src: "Photos",   text: "Vet vaccine receipt", tilt: 2 },
        { src: "Notebook", text: "Deworming due Nov 12", tilt: -2 },
      ],
    },
  ];

  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>Five people. <em style={{color: "var(--c-brand)", fontStyle: "normal"}}>A dozen apps.</em> One memory missing.</h2>
          <p>Every family member generates health data every week. None of it lives in the same place.</p>
        </div>

        {/* Family grid — chaos */}
        <div className="family-chaos-grid">
          {family.map(p => (
            <div key={p.id} className="family-chaos-col">
              <LargePortrait id={p.photoId} placeholder={p.placeholder} initial={p.initial} />
              <div style={{ marginTop: 14 }}>
                <div style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 19, lineHeight: 1.15, color: "var(--c-ink)", letterSpacing: "-0.01em" }}>{p.name}</div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--c-mute)", letterSpacing: ".08em", marginTop: 3, textTransform: "uppercase" }}>{p.role}</div>
              </div>
              <div style={{
                display: "flex", flexDirection: "column", gap: 8,
                marginTop: 14,
                width: "100%",
              }}>
                {p.docs.map((d, i) => (
                  <DocChip key={i} {...d} />
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* Arogya unifier — clean horizontal counter to the chaos above */}
        <div className="family-unifier">
          <div className="family-unifier-head">
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--c-brand-deep)", letterSpacing: ".14em", textTransform: "uppercase" }}>
                  → Arogya
                </div>
                <div style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 19, color: "var(--c-ink)", marginTop: 2 }}>
                  All of the above. Filed by person. Searchable in one second.
                </div>
              </div>
            </div>
            <span className="pill" style={{ background: "color-mix(in oklab, var(--c-brand) 12%, var(--c-card))", borderColor: "color-mix(in oklab, var(--c-brand) 28%, var(--c-line))", color: "var(--c-brand-deep)" }}>
              ✓ One family memory
            </span>
          </div>
          <div className="family-unifier-row">
            {family.map(p => (
              <div key={p.id} className="family-unifier-cell">
                <PortraitAvatar id={p.photoId} placeholder={p.placeholder} initial={p.initial} size={36} />
                <div style={{ display: "flex", flexDirection: "column", gap: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 600, fontSize: 13, color: "var(--c-ink)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{p.name}</div>
                  <div style={{ fontSize: 11, color: "var(--c-mute)", fontFamily: "var(--mono)" }}>{p.docs.length} record{p.docs.length === 1 ? "" : "s"}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .family-chaos-grid {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 22px;
          align-items: start;
        }
        .family-chaos-col {
          display: flex; flex-direction: column;
          align-items: stretch;
          padding: 0;
        }
        .family-unifier {
          margin-top: 56px;
          background: var(--c-card);
          border: 1px solid color-mix(in oklab, var(--c-brand) 22%, var(--c-line));
          border-radius: 22px;
          padding: 22px 26px;
          box-shadow: 0 1px 2px rgba(8,40,32,.04), 0 18px 48px rgba(8,40,32,.06);
        }
        .family-unifier-head {
          display: flex; align-items: center; justify-content: space-between;
          gap: 16px; flex-wrap: wrap;
          padding-bottom: 16px;
          border-bottom: 1px solid var(--c-line);
        }
        .family-unifier-row {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 14px;
          padding-top: 16px;
        }
        .family-unifier-cell {
          display: flex; align-items: center; gap: 10px;
          padding: 8px 10px;
          background: color-mix(in oklab, var(--c-brand) 6%, var(--c-bg-2));
          border-radius: 12px;
          min-width: 0;
        }
        @media (max-width: 980px) {
          .family-chaos-grid { grid-template-columns: repeat(3, 1fr); }
          .family-unifier-row { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 560px) {
          .family-chaos-grid { grid-template-columns: repeat(2, 1fr); }
          .family-unifier-row { grid-template-columns: repeat(2, 1fr); }
        }
      `}</style>
    </section>
  );
}

/* ============================================================
   SECTION 3 — Sticky personas (left) + scrolling use-case panels (right)
   As the user scrolls, the active persona on the left updates to
   match the panel in view. Click a persona to jump to its panel.
============================================================ */

const { useEffect, useRef } = React;


/* Map image-slot IDs to actual filenames in /static/landing/images/ */
function slotSrc(id) {
  const map = {
    "fam-appa": "appa.png",
    "fam-amma": "amma.png",
    "fam-you":  "you.png",
    "fam-kids": "arjun-riya.png",
    "fam-pet":  "bruno.png",
    "bp-hero-adults": "family.png",
    "bp-hero-adults-thumb": "you.png",
    "bp-hero-kids": "kids.png",
    "bp-hero-kids-thumb": "arjun-riya.png",
    "bp-hero-elders": "elders_family.png",
    "bp-hero-elders-thumb": "appa.png",
    "bp-hero-pet": "pets.png",
    "bp-hero-pet-thumb": "bruno.png",
    "hero-grandmother": "hero.png",
    "family-across-generations": "family.png",
  };
  return "/static/landing/images/" + (map[id] || id.replace(/^(fam-|bp-hero-)/, "") + ".png");
}

function PersonaHeroPhoto({ id, placeholder, initial, tint }) {
  return (
    <div style={{
      position: "relative",
      width: "100%",
      aspectRatio: "16 / 7",
      maxHeight: 300,
      borderRadius: 18,
      overflow: "hidden",
      background: tint || "color-mix(in oklab, var(--c-brand) 12%, var(--c-bg-2))",
      boxShadow: "0 1px 2px rgba(11,21,48,.05), 0 18px 38px rgba(11,21,48,.08)",
    }}>
      <span style={{
        position: "absolute", inset: 0,
        display: "grid", placeItems: "center",
        fontFamily: "var(--serif)", fontWeight: 600,
        fontSize: "clamp(64px, 8vw, 132px)",
        color: "var(--c-brand-deep)",
        opacity: 0.22,
        letterSpacing: "-0.02em",
      }}>{initial}</span>
      <img
        src={slotSrc(id)}
        alt={placeholder}
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
      />
    </div>
  );
}

/* === Use case mini-cards live in window.UCV (arogya-uc-vizes.jsx) === */
const _legacy_UC_LipidChart_removed = null;

const _legacyVisitQuote = null;

const _legacySymptoms = null;

const _legacyCycle = null;

const _legacyVaccines = null;

const _legacySchool = null;

const _legacyAntibiotics = null;

const _legacyMeds = null;

const _legacyFourDoctors = null;

const _legacyFromAfar = null;

const _legacyEmergency = null;

const _legacyPetVaccines = null;

const _legacyPetWeight = null;

const _legacyPetDeworm = null;

function ByPersonSection() {
  const UCV = (typeof window !== "undefined" && window.UCV) || { ADULTS: [], CHILDREN: [], ELDERS: [], PETS: [] };
  const UCFrame = UCV.UCFrame;
  const personas = [
    {
      id: "adults",
      label: "For you",
      who: "Adults",
      range: "25 – 50",
      heroId: "bp-hero-adults",
      placeholder: "Indian adult 30s/40s — confident, warm portrait at home",
      initial: "A",
      preview: "Blood trends · Menstrual cycles · Thyroid",
      headline: "Your own health, finally tracked.",
      sub: "Sixteen kinds of records, one timeline. Trends across years that no individual visit reveals.",
      useCases: UCV.ADULTS,
    },
    {
      id: "kids",
      label: "For your children",
      who: "Children",
      range: "0 – 18",
      heroId: "bp-hero-kids",
      placeholder: "Indian children, primary school age, siblings, warm domestic",
      initial: "C",
      preview: "Vaccines · Growth · Allergies · Antibiotics",
      headline: "Every booster. Every milestone. Every certificate.",
      sub: "Twelve things every parent juggles — vaccines, growth, allergies, antibiotics, ENT, myopia, dental — finally in one place.",
      useCases: UCV.CHILDREN,
    },
    {
      id: "elders",
      label: "For your parents",
      who: "Elder care",
      range: "60+",
      heroId: "bp-hero-elders",
      placeholder: "Indian senior couple at home, warm afternoon light",
      initial: "E",
      preview: "Medications · Multi-specialist · Emergency",
      headline: "Fifteen specialists. One memory. From anywhere.",
      sub: "Cardiac, kidney, diabetes, neurology, ortho — every specialist, every report, every pill. Manage from another city. Emergency-ready.",
      useCases: UCV.ELDERS,
    },
    {
      id: "pets",
      label: "For your pet",
      who: "Pet care",
      range: "family",
      heroId: "bp-hero-pet",
      placeholder: "Family dog or cat, warm domestic scene",
      initial: "P",
      preview: "Vaccines · Deworming · Wellness · Oncology",
      headline: "Furry family. Same memory.",
      sub: "Vaccines, deworming, wellness, weight, dental, allergies, surgery, oncology, breed screening — twelve kinds of records for the family member that can't speak.",
      useCases: UCV.PETS,
    },
  ];

  const [active, setActive] = useStateR(0);
  const panelRefs = useRef([]);

  useEffect(() => {
    const obs = new IntersectionObserver(entries => {
      // pick the entry closest to top of viewport that is intersecting
      let best = null;
      entries.forEach(e => {
        if (e.isIntersecting) {
          if (!best || e.boundingClientRect.top < best.boundingClientRect.top) best = e;
        }
      });
      if (best) {
        const idx = +best.target.dataset.idx;
        setActive(idx);
      }
    }, { rootMargin: "-40% 0px -50% 0px", threshold: [0, 0.5, 1] });
    panelRefs.current.forEach(r => r && obs.observe(r));
    return () => obs.disconnect();
  }, []);

  const jumpTo = (i) => {
    const el = panelRefs.current[i];
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.pageYOffset - 88;
    window.scrollTo({ top, behavior: "smooth" });
  };

  return (
    <section>
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot"></span>Built for the whole family</span>
          <h2>Every person in your family has a health story. <em style={{color: "var(--c-brand-deep)", fontStyle: "normal"}}>Arogya holds all of them.</em></h2>
          <p>Scroll through every life stage — each with the use cases Arogya actually covers.</p>
        </div>

        <div className="bp-layout">
          {/* LEFT — sticky persona list */}
          <aside className="bp-rail">
            <div className="bp-rail-inner">
              <div className="bp-rail-eyebrow">Family</div>
              <div className="bp-rail-list">
                {personas.map((p, i) => (
                  <button
                    key={p.id}
                    onClick={() => jumpTo(i)}
                    className={"bp-persona-btn" + (active === i ? " is-active" : "")}
                  >
                    <div className="bp-persona-thumb">
                      <span style={{
                        position: "absolute", inset: 0,
                        display: "grid", placeItems: "center",
                        fontFamily: "var(--serif)", fontWeight: 600, fontSize: 22,
                        color: "var(--c-brand-deep)", opacity: 0.4,
                      }}>{p.initial}</span>
                      <img
                        src={slotSrc(p.heroId + "-thumb")}
                        alt={p.placeholder}
                        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
                      />
                    </div>
                    <div style={{ minWidth: 0 }}>
                      <div className="bp-persona-who">{p.who}</div>
                      <div className="bp-persona-range">{p.range}</div>
                      {p.preview && <div className="bp-persona-preview">{p.preview}</div>}
                    </div>
                    <div className="bp-persona-bar" aria-hidden />
                  </button>
                ))}
              </div>
              <div className="bp-rail-progress">
                <span style={{ height: `${((active + 1) / personas.length) * 100}%` }} />
              </div>
            </div>
          </aside>

          {/* RIGHT — scrolling panels */}
          <div className="bp-stream">
            {personas.map((p, i) => (
              <div
                key={p.id}
                ref={el => panelRefs.current[i] = el}
                data-idx={i}
                className="bp-panel"
              >
                <div className="bp-panel-head">
                  <span className="bp-panel-eyebrow">{p.label} · <b>{p.range}</b></span>
                  <h3 className="bp-panel-title">{p.headline}</h3>
                  <p className="bp-panel-sub">{p.sub}</p>
                </div>
                <PersonaHeroPhoto id={p.heroId} placeholder={p.placeholder} initial={p.initial} />
                <div className="bp-uc-grid">
                  {p.useCases.map((u, j) => (
                    <UCFrame key={u.id || j} title={u.title} eyebrow={u.eyebrow} flag={u.flag}>
                      <u.Viz />
                    </UCFrame>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .bp-layout {
          display: grid;
          grid-template-columns: 260px minmax(0, 1fr);
          gap: 48px;
          align-items: start;
        }
        .bp-rail {
          position: sticky;
          top: 96px;
          align-self: start;
        }
        .bp-rail-inner {
          position: relative;
          padding: 18px 14px;
          background: var(--c-card);
          border: 1px solid var(--c-line);
          border-radius: 18px;
          box-shadow: 0 1px 2px rgba(11,21,48,.04), 0 12px 28px rgba(11,21,48,.05);
        }
        .bp-rail-eyebrow {
          font-family: var(--mono); font-size: 10.5px;
          letter-spacing: .14em; text-transform: uppercase;
          color: var(--c-mute);
          padding: 2px 6px 12px;
          border-bottom: 1px solid var(--c-line);
          margin-bottom: 8px;
        }
        .bp-rail-list {
          display: flex; flex-direction: column; gap: 4px;
        }
        .bp-persona-btn {
          all: unset;
          cursor: pointer;
          display: grid;
          grid-template-columns: 48px 1fr 3px;
          align-items: center;
          gap: 12px;
          padding: 8px 10px;
          border-radius: 12px;
          transition: background .2s, transform .2s;
          position: relative;
        }
        .bp-persona-btn:hover {
          background: color-mix(in oklab, var(--c-brand) 6%, transparent);
        }
        .bp-persona-btn.is-active {
          background: color-mix(in oklab, var(--c-brand) 10%, transparent);
        }
        .bp-persona-thumb {
          position: relative;
          width: 48px; height: 48px;
          border-radius: 10px;
          overflow: hidden;
          background: color-mix(in oklab, var(--c-brand) 12%, var(--c-bg-2));
          flex-shrink: 0;
        }
        .bp-persona-who {
          font-family: var(--serif); font-weight: 600;
          font-size: 15px; color: var(--c-ink);
          letter-spacing: -0.01em;
          line-height: 1.2;
        }
        .bp-persona-range {
          font-family: var(--mono); font-size: 11px;
          color: var(--c-mute);
          margin-top: 2px;
        }
        .bp-persona-preview {
          font-family: var(--sans); font-size: 11px;
          color: var(--c-mute); line-height: 1.4;
          margin-top: 3px; opacity: 0.85;
        }
        .bp-persona-bar {
          width: 3px; height: 0;
          background: var(--c-brand);
          border-radius: 2px;
          transition: height .3s ease;
          align-self: center;
          justify-self: end;
        }
        .bp-persona-btn.is-active .bp-persona-bar { height: 32px; }
        .bp-rail-progress {
          margin-top: 14px;
          height: 4px;
          background: var(--c-bg-2);
          border-radius: 99px;
          overflow: hidden;
          position: relative;
        }
        .bp-rail-progress > span {
          display: block;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, var(--c-brand), var(--c-brand-deep));
          transition: height .35s ease;
        }
        /* progress is horizontal: use width via inline style coming from height value */
        .bp-rail-progress > span {
          height: 100% !important;
        }

        .bp-stream {
          display: flex; flex-direction: column;
          gap: 80px;
        }
        .bp-panel {
          display: flex; flex-direction: column;
          gap: 22px;
          scroll-margin-top: 96px;
        }
        .bp-panel-head { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
        .bp-panel-eyebrow {
          font-family: var(--mono); font-size: 11.5px;
          letter-spacing: .14em; text-transform: uppercase;
          color: var(--c-brand-deep);
        }
        .bp-panel-title {
          font-family: var(--serif); font-weight: 600;
          font-size: clamp(28px, 3vw, 38px);
          line-height: 1.08; letter-spacing: -0.02em;
          color: var(--c-ink);
        }
        .bp-panel-sub {
          color: var(--c-ink-2); font-size: 16px; line-height: 1.55;
        }
        .bp-uc-grid {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: 12px;
        }
        .bp-uc-card {
          background: var(--c-card);
          border: 1px solid var(--c-line);
          border-radius: 14px;
          padding: 14px;
          display: flex; flex-direction: column; gap: 10px;
          transition: transform .25s, box-shadow .25s, border-color .25s;
        }
        .bp-uc-card:hover {
          transform: translateY(-2px);
          border-color: color-mix(in oklab, var(--c-brand) 24%, var(--c-line));
          box-shadow: 0 1px 2px rgba(11,21,48,.04), 0 14px 28px rgba(11,21,48,.06);
        }
        .bp-uc-title {
          font-family: var(--serif); font-weight: 600;
          font-size: 15px; color: var(--c-ink);
          letter-spacing: -0.01em;
        }

        /* mini-card internals */
        .uc-mini {
          background: color-mix(in oklab, var(--c-bg-2) 60%, transparent);
          border: 1px solid var(--c-line);
          border-radius: 10px;
          padding: 12px 14px;
          font-family: var(--sans); font-size: 13px;
          color: var(--c-ink);
          display: flex; flex-direction: column; gap: 4px;
        }
        .uc-mini-head {
          display: flex; align-items: center; justify-content: space-between; gap: 8px;
        }
        .uc-mini-title {
          font-weight: 600; font-size: 13px; color: var(--c-ink);
        }
        .uc-mini-eyebrow {
          font-family: var(--mono); font-size: 10px;
          letter-spacing: .14em; text-transform: uppercase;
          color: var(--c-brand-deep);
        }
        .uc-mini-foot {
          display: flex; justify-content: space-between;
          font-family: var(--mono); font-size: 10px; color: var(--c-mute);
          margin-top: 2px;
        }
        .uc-mini-flag {
          font-family: var(--mono); font-size: 10px;
          letter-spacing: .04em;
          padding: 2px 7px; border-radius: 99px;
        }
        .uc-mini-flag--ok    { background: color-mix(in oklab, var(--c-brand) 14%, transparent); color: var(--c-brand-deep); }
        .uc-mini-flag--warn  { background: color-mix(in oklab, var(--c-accent) 14%, transparent); color: var(--c-accent); }
        .uc-mini-flag--brand { background: color-mix(in oklab, var(--c-brand-deep) 14%, transparent); color: var(--c-brand-deep); }

        @media (max-width: 1200px) {
          .bp-uc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }
        @media (max-width: 900px) {
          .bp-layout { grid-template-columns: 1fr; gap: 24px; }
          .bp-rail { position: static; }
          .bp-rail-inner { padding: 12px 10px; }
          .bp-rail-list { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
          .bp-persona-btn { flex-shrink: 0; min-width: 0; width: auto;
            grid-template-columns: 36px 1fr; padding: 8px; }
          .bp-persona-thumb { width: 36px; height: 36px; }
          .bp-persona-preview { display: none; }
          .bp-persona-bar { display: none; }
          .bp-uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
          .bp-stream { gap: 48px; }
        }
        @media (max-width: 560px) {
          .bp-layout { gap: 16px; }
          .bp-uc-grid { grid-template-columns: 1fr !important; }
          .bp-panel-title { font-size: 22px !important; }
          .bp-stream { gap: 32px; }
          .bp-persona-who { font-size: 13px; }
          .bp-persona-range { display: none; }
        }
      `}</style>
    </section>
  );
}

/* ============================================================
   SECTION 4 — Capability wall: documents Arogya reads
============================================================ */

/* Faux document previews — each visually distinct. Each is a small visual
   pretending to be the actual document type. Not branded; generic shapes. */

function DocPreview_LabPDF() {
  return (
    <div style={{
      background: "white", borderRadius: 8,
      border: "1px solid var(--c-line)", aspectRatio: "4 / 3",
      display: "flex", flexDirection: "column",
      fontFamily: "var(--mono)", color: "#1a2937",
      overflow: "hidden",
    }}>
      <div style={{ background: "#0a3a8c", color: "white", padding: "5px 8px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#dc2626" }} />
          <span style={{ fontSize: 8, fontWeight: 700, letterSpacing: ".1em" }}>METROPOLIS DIAGNOSTICS</span>
        </div>
        <span style={{ fontSize: 6.5, opacity: 0.8 }}>NABL · ISO 15189</span>
      </div>
      <div style={{ background: "#f4f6fa", padding: "4px 8px", display: "flex", justifyContent: "space-between", fontSize: 6.5, color: "#3a4a5a", borderBottom: "1px solid #e2e6ee" }}>
        <span>A. Krishnan · M / 67</span>
        <span>22-AUG-2026</span>
      </div>
      <div style={{ padding: "6px 8px 2px", fontSize: 8.5, fontWeight: 700, color: "#0a3a8c", letterSpacing: ".05em" }}>LIPID PROFILE</div>
      <div style={{ display: "grid", gridTemplateColumns: "1.5fr 0.8fr 0.9fr 0.5fr", gap: 4, padding: "2px 8px", fontSize: 6, color: "#7a8a9a", borderBottom: "1px solid #e2e6ee" }}>
        <span>TEST</span><span style={{ textAlign: "right" }}>RESULT</span><span style={{ textAlign: "right" }}>REF</span><span></span>
      </div>
      <div style={{ flex: 1, padding: "0 8px" }}>
        {[
          { n: "Total Chol.",  v: "234", r: "<200", hi: true },
          { n: "LDL",          v: "152", r: "<130", hi: true },
          { n: "HDL",          v: "48",  r: ">40",  hi: false },
          { n: "Triglyceride", v: "168", r: "<150", hi: true },
          { n: "VLDL",         v: "33",  r: "<30",  hi: true },
        ].map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1.5fr 0.8fr 0.9fr 0.5fr", gap: 4, padding: "2.5px 0", fontSize: 7, borderBottom: i < 4 ? "1px dotted #e8ebf0" : "none", alignItems: "center" }}>
            <span>{r.n}</span>
            <span style={{ textAlign: "right", fontWeight: 700, color: r.hi ? "#c92020" : "#1a2937" }}>{r.v}</span>
            <span style={{ textAlign: "right", color: "#7a8a9a", fontSize: 6.5 }}>{r.r}</span>
            <span style={{ textAlign: "right" }}>
              {r.hi && <span style={{ background: "#fee2e2", color: "#c92020", padding: "0 4px", borderRadius: 2, fontSize: 5.5, fontWeight: 700, letterSpacing: ".06em" }}>HIGH</span>}
            </span>
          </div>
        ))}
      </div>
      <div style={{ padding: "3px 8px", borderTop: "1px solid #e2e6ee", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ display: "flex", gap: 0.6 }}>
          {[1,2,1,3,1,2,3,1,2,1,3,2,1,2,3,1,2,1,3,1,2,3].map((w, i) => (
            <span key={i} style={{ width: w * 0.6, height: 10, background: "#1a2937" }} />
          ))}
        </div>
        <span style={{ fontSize: 5.5, color: "#7a8a9a" }}>APL-2026-88341</span>
      </div>
    </div>
  );
}

function DocPreview_HandwrittenRx() {
  return (
    <div style={{
      background:
        "linear-gradient(180deg, #fefaf0 0%, #fdf6e3 100%)",
      backgroundImage:
        "linear-gradient(180deg, #fefaf0 0%, #fdf6e3 100%), repeating-linear-gradient(0deg, transparent 0, transparent 11px, rgba(120,80,40,.07) 11px, rgba(120,80,40,.07) 12px)",
      backgroundBlendMode: "multiply",
      borderRadius: 8,
      border: "1px solid #ead9b3",
      aspectRatio: "4 / 3",
      display: "flex", flexDirection: "column",
      position: "relative", overflow: "hidden",
      fontFamily: "'Caveat', cursive",
      color: "#16324a",
    }}>
      <div style={{ background: "rgba(255,255,255,0.7)", padding: "5px 10px", borderBottom: "1px solid #c89c63" }}>
        <div style={{ fontFamily: "var(--serif)", fontWeight: 700, fontSize: 9.5, color: "#7a4520", letterSpacing: ".02em" }}>
          Dr. K. Ramachandran
        </div>
        <div style={{ fontFamily: "var(--mono)", fontSize: 5.5, color: "#a07a3b", marginTop: 1, letterSpacing: ".08em" }}>
          MBBS · MD (CARDIOLOGY) · REG. 22831
        </div>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", padding: "3px 10px 4px", fontFamily: "var(--mono)", fontSize: 5.5, color: "#6a5a3a", borderBottom: "1px dashed #c89c63" }}>
        <span>NAME: A. Krishnan, 67/M</span>
        <span>22 / 08 / 2026</span>
      </div>
      <div style={{ flex: 1, padding: "8px 10px", position: "relative" }}>
        <div style={{ position: "absolute", left: 4, top: 6, fontFamily: "var(--serif)", fontSize: 26, color: "#7a4520", opacity: 0.7, lineHeight: 1, fontStyle: "italic" }}>℞</div>
        <div style={{ paddingLeft: 22, display: "flex", flexDirection: "column", gap: 5, fontSize: 14, lineHeight: 1.0 }}>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <span style={{ transform: "rotate(-1deg)", display: "inline-block" }}>Telmisartan 40</span>
            <span style={{ fontSize: 10, color: "#6a5a3a" }}>1—0—0</span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <span style={{ transform: "rotate(0.5deg)", display: "inline-block" }}>Metformin 500</span>
            <span style={{ fontSize: 10, color: "#6a5a3a" }}>1—0—1</span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <span style={{ transform: "rotate(-0.8deg)", display: "inline-block" }}>Atorvastatin 10</span>
            <span style={{ fontSize: 10, color: "#6a5a3a" }}>0—0—1</span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 2 }}>
            <span style={{ transform: "rotate(0.6deg)", display: "inline-block", fontStyle: "italic", color: "#3a5a72" }}>Walk 30 min</span>
            <span style={{ fontSize: 10, color: "#6a5a3a" }}>F/U 3 m</span>
          </div>
        </div>
      </div>
      <div style={{ display: "flex", justifyContent: "flex-end", padding: "0 10px 6px", position: "relative" }}>
        <div style={{ fontSize: 20, transform: "rotate(-8deg)", color: "#16324a", opacity: 0.75, letterSpacing: "-0.04em" }}>~Ramach~</div>
        <div style={{
          position: "absolute", right: 70, bottom: 4,
          width: 34, height: 34, borderRadius: "50%",
          border: "1.5px dashed #7a4520",
          opacity: 0.4,
          display: "grid", placeItems: "center",
          fontFamily: "var(--mono)", fontSize: 4.5, color: "#7a4520",
          transform: "rotate(-4deg)",
          textAlign: "center", lineHeight: 1.1,
        }}>CLINIC<br/>SEAL</div>
      </div>
    </div>
  );
}

function DocPreview_MedicineStrip() {
  return (
    <div style={{
      borderRadius: 8,
      aspectRatio: "4 / 3",
      overflow: "hidden",
      border: "1px solid #b8c0c5",
      background: "linear-gradient(180deg, #f5f5f7 0%, #d8dce2 50%, #ebedf0 100%)",
      position: "relative",
      padding: "6px 8px",
      display: "flex", flexDirection: "column", gap: 4,
    }}>
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(110deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%)",
        pointerEvents: "none",
      }} />
      <div style={{
        background: "#0a5fa8", color: "white",
        padding: "3px 6px", borderRadius: 2,
        fontFamily: "var(--mono)", fontSize: 8, fontWeight: 700,
        letterSpacing: ".15em",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        position: "relative", zIndex: 1,
      }}>
        <span>TELMA 40</span>
        <span style={{ fontSize: 5.5, opacity: 0.85 }}>Rx</span>
      </div>
      <div style={{
        flex: 1,
        display: "grid",
        gridTemplateColumns: "repeat(5, 1fr)",
        gridTemplateRows: "repeat(2, 1fr)",
        gap: 5,
        padding: "4px 2px",
        position: "relative", zIndex: 1,
      }}>
        {Array.from({ length: 10 }).map((_, i) => (
          <div key={i} style={{
            background: "radial-gradient(ellipse at 32% 28%, #ffffff 0%, #d4d8dc 60%, #8a9098 100%)",
            borderRadius: "50%",
            boxShadow: "inset 0 1.5px 2px rgba(255,255,255,.8), inset 0 -2px 2.5px rgba(0,0,0,.22), 0 0.5px 0.5px rgba(0,0,0,.12)",
          }} />
        ))}
      </div>
      <div style={{
        display: "flex", justifyContent: "space-between",
        fontFamily: "var(--mono)", fontSize: 5.5, color: "#3a4a5a",
        position: "relative", zIndex: 1,
      }}>
        <span>B.NO. TLM2438</span>
        <span>EXP 02/27</span>
      </div>
    </div>
  );
}

function DocPreview_WhatsAppScan() {
  return (
    <div style={{
      borderRadius: 8,
      aspectRatio: "4 / 3",
      overflow: "hidden",
      border: "1px solid #c8d4cc",
      background: "#e5ddd5",
      position: "relative",
      display: "flex", flexDirection: "column",
      padding: 6,
      gap: 4,
      fontFamily: "var(--sans)",
    }}>
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "radial-gradient(rgba(180,150,110,.10) 0.7px, transparent 0.7px)",
        backgroundSize: "6px 6px",
        pointerEvents: "none",
      }} />
      <div style={{ alignSelf: "flex-end", maxWidth: "82%", position: "relative", zIndex: 1 }}>
        <div style={{
          background: "#dcf8c6", borderRadius: "7px 7px 1px 7px",
          padding: 4,
          boxShadow: "0 1px 0.5px rgba(0,0,0,.13)",
          display: "flex", flexDirection: "column", gap: 3,
        }}>
          <div style={{ fontSize: 6, fontWeight: 700, color: "#1f7a3a" }}>Bua · +91 98xxx</div>
          <div style={{
            background: "linear-gradient(135deg, #f8f6f0 0%, #e8e2d6 100%)",
            borderRadius: 3,
            height: 56,
            position: "relative",
            overflow: "hidden",
            border: "1px solid rgba(0,0,0,.05)",
          }}>
            <div style={{
              position: "absolute",
              inset: "5px 8px",
              background: "white",
              borderRadius: 1.5,
              transform: "rotate(-1.5deg)",
              boxShadow: "0 1px 2px rgba(0,0,0,.12)",
              padding: "3px 5px",
              display: "flex", flexDirection: "column", gap: 1.5,
              fontFamily: "var(--mono)",
              fontSize: 4.5, color: "#3a4a5a",
            }}>
              <div style={{ fontWeight: 700, color: "#0a3a8c" }}>APOLLO LABS</div>
              <div>BP: 128/82 · HR: 76</div>
              <div>FBS: 108 · PPBS: 168</div>
              <div style={{ height: 1, background: "#1a2937", width: "40%", opacity: 0.5 }}/>
              <div style={{ height: 1, background: "#1a2937", width: "60%", opacity: 0.5 }}/>
              <div style={{ height: 1, background: "#1a2937", width: "30%", opacity: 0.5 }}/>
            </div>
            <div style={{
              position: "absolute", top: 0, right: 0, width: "40%", height: "100%",
              background: "linear-gradient(135deg, transparent 60%, rgba(255,255,255,.4) 80%, transparent 100%)",
            }}/>
          </div>
          <div style={{ fontSize: 6, color: "#16324a" }}>Mom's report — pls file</div>
          <div style={{ fontSize: 5, color: "#6a8074", alignSelf: "flex-end", display: "flex", alignItems: "center", gap: 2 }}>
            10:42 AM
            <svg width="7" height="5" viewBox="0 0 12 8" fill="none"><path d="M1 4 L4 7 L8 2 M4 4 L7 7 L11 2" stroke="#3a8fe5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
        </div>
      </div>
      <div style={{ alignSelf: "flex-start", position: "relative", zIndex: 1 }}>
        <div style={{
          background: "white", borderRadius: "7px 7px 7px 1px",
          padding: "3px 6px",
          fontSize: 6, color: "#1a2937",
          boxShadow: "0 1px 0.5px rgba(0,0,0,.13)",
        }}>Got it ✅</div>
      </div>
    </div>
  );
}

function DocPreview_Discharge() {
  return (
    <div style={{
      background: "white", borderRadius: 8,
      border: "1px solid var(--c-line)", aspectRatio: "4 / 3",
      display: "flex", flexDirection: "column",
      fontFamily: "var(--mono)", color: "#1a2937",
      overflow: "hidden",
    }}>
      <div style={{
        background: "linear-gradient(180deg, #f7faf9, white)",
        padding: "5px 10px 4px",
        borderBottom: "2px solid #14a085",
        display: "flex", alignItems: "center", gap: 6,
      }}>
        <div style={{
          width: 18, height: 18, borderRadius: 3,
          background: "linear-gradient(135deg, #14a085, #0a6e5c)",
          display: "grid", placeItems: "center",
          color: "white", fontSize: 10, fontWeight: 700, fontFamily: "var(--serif)",
          flexShrink: 0,
        }}>+</div>
        <div>
          <div style={{ fontFamily: "var(--serif)", fontWeight: 700, fontSize: 9, color: "#0a3a30", letterSpacing: ".02em" }}>APOLLO HOSPITALS</div>
          <div style={{ fontSize: 5.5, color: "#5a6a74", marginTop: -1 }}>Greams Road · Chennai 600006</div>
        </div>
      </div>
      <div style={{
        display: "flex", justifyContent: "space-between",
        background: "#f4f6fa", padding: "2px 10px",
        fontSize: 5.5, color: "#3a4a5a", borderBottom: "1px solid #e2e6ee",
      }}>
        <span>MRN: 2024-08-22-4421</span>
        <span>WARD 4-B</span>
      </div>
      <div style={{
        padding: "5px 10px 3px", fontSize: 8.5, fontWeight: 700,
        color: "#0a3a30", letterSpacing: ".06em", textAlign: "center",
      }}>DISCHARGE SUMMARY</div>
      <div style={{ flex: 1, padding: "2px 10px 4px", display: "flex", flexDirection: "column", gap: 3, fontSize: 6.5 }}>
        {[
          ["PATIENT", "Krishnan, 67 / M"],
          ["DX",      "Acute gastroenteritis, mild dehydration"],
          ["PROC",    "IV fluids × 24h, antiemetics"],
          ["MEDS",    "Ondansetron 4mg BD × 3d, ORS PRN"],
          ["F/U",     "5 days — Dr. Sahu, Gastro"],
          ["NEXT",    "Bland diet 48h, ORS 3L/day"],
        ].map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "42px 1fr", gap: 6, alignItems: "baseline" }}>
            <span style={{ fontSize: 5.5, color: "#7a8a9a", letterSpacing: ".08em", fontWeight: 700 }}>{r[0]}</span>
            <span>{r[1]}</span>
          </div>
        ))}
      </div>
      <div style={{
        padding: "3px 10px 5px", borderTop: "1px dashed #cbd5e1",
        display: "flex", justifyContent: "space-between", alignItems: "flex-end",
      }}>
        <span style={{ fontSize: 5, color: "#5a6a74" }}>22-AUG-2026 · 18:42</span>
        <span style={{ fontFamily: "'Caveat', cursive", fontSize: 12, color: "#1a2937", opacity: 0.7, transform: "rotate(-6deg)", display: "inline-block" }}>R. Sahu</span>
      </div>
    </div>
  );
}

function DocPreview_VaccineCard() {
  return (
    <div style={{
      background: "linear-gradient(180deg, #fff4cc 0%, #fcecaa 100%)",
      borderRadius: 8,
      border: "1px solid #d4a64a",
      aspectRatio: "4 / 3",
      display: "flex", flexDirection: "column",
      fontFamily: "var(--mono)", color: "#4a3a14",
      overflow: "hidden",
      boxShadow: "inset 0 0 0 2px rgba(255,255,255,.4)",
      position: "relative",
    }}>
      <div style={{
        position: "absolute", left: 8, top: 0, bottom: 0, width: 1,
        background: "repeating-linear-gradient(0deg, #d4a64a 0 3px, transparent 3px 7px)",
        opacity: 0.5,
      }}/>
      <div style={{ padding: "5px 10px 3px 14px", borderBottom: "1.5px solid #b88f3a" }}>
        <div style={{ fontFamily: "var(--serif)", fontWeight: 700, fontSize: 9, color: "#5a3f10", textAlign: "center", letterSpacing: ".06em" }}>IMMUNISATION RECORD</div>
        <div style={{ fontSize: 5, color: "#7a5a20", textAlign: "center", marginTop: 1, letterSpacing: ".1em" }}>INDIAN ACADEMY OF PEDIATRICS</div>
      </div>
      <div style={{ padding: "3px 10px 2px 14px", fontSize: 5.5, color: "#6a4f15", display: "flex", justifyContent: "space-between" }}>
        <span><b>Arjun K.</b> · DOB 14/03/2020</span>
        <span>Blood O+</span>
      </div>
      <div style={{ flex: 1, padding: "2px 10px 4px 14px", display: "flex", flexDirection: "column" }}>
        {[
          { v: "BCG",   age: "Birth", d: "15.3.20",  done: true },
          { v: "OPV-1", age: "6 wk",  d: "28.4.20",  done: true },
          { v: "DTwP",  age: "10 wk", d: "08.6.20",  done: true },
          { v: "MMR",   age: "9 mo",  d: "15.12.20", done: true },
          { v: "DPT",   age: "5 yr",  d: "",         done: false },
        ].map((r, i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "38px 28px 1fr 36px", gap: 4,
            alignItems: "center", padding: "1px 0",
            borderBottom: i < 4 ? "1px dotted rgba(184,143,58,.4)" : "none",
            fontSize: 6,
          }}>
            <b>{r.v}</b>
            <span style={{ color: "#7a5a20" }}>{r.age}</span>
            <span style={{
              fontFamily: "'Caveat', cursive", fontSize: 9,
              color: "#16324a",
              transform: r.done ? "rotate(-2deg)" : "none",
              display: "inline-block",
            }}>{r.d}</span>
            <span style={{
              padding: "0.5px 4px", borderRadius: 1.5,
              background: r.done ? "#1a7a3a" : "transparent",
              color: r.done ? "white" : "#a86",
              border: r.done ? "none" : "1px dashed #a86",
              fontSize: 5, fontWeight: 700, textAlign: "center",
            }}>{r.done ? "✓ DONE" : "DUE"}</span>
          </div>
        ))}
      </div>
      <div style={{
        position: "absolute", bottom: 6, right: 8,
        width: 38, height: 30,
        border: "1.5px solid #1a7a3a", opacity: 0.42,
        borderRadius: 2,
        display: "grid", placeItems: "center",
        fontSize: 4.5, color: "#1a7a3a", letterSpacing: ".08em",
        transform: "rotate(-6deg)",
        textAlign: "center", lineHeight: 1.1,
      }}>DR. SHAH<br/>CLINIC<br/>15.3.20</div>
    </div>
  );
}

function DocPreview_DentalChart() {
  /* Tooth chart: 16 ovals top / 16 bottom; few marked */
  return (
    <div style={{
      background: "white", borderRadius: 8, padding: 10,
      border: "1px solid var(--c-line)", aspectRatio: "4 / 3",
      display: "flex", flexDirection: "column", gap: 6,
    }}>
      <div style={{ fontFamily: "var(--mono)", fontWeight: 700, fontSize: 8, color: "#0a3a30" }}>DENTAL CHART</div>
      {[0, 1].map(row => (
        <div key={row} style={{ display: "grid", gridTemplateColumns: "repeat(16, 1fr)", gap: 2, alignItems: "center" }}>
          {Array.from({ length: 16 }).map((_, i) => {
            const flagged = (row === 0 && (i === 4 || i === 11)) || (row === 1 && i === 7);
            return (
              <div key={i} style={{
                height: 11, borderRadius: "40% 40% 30% 30% / 60% 60% 40% 40%",
                background: flagged ? "#c84a3a" : "#e9eef0",
                border: "1px solid " + (flagged ? "#a8392c" : "#d1d6d8"),
              }} />
            );
          })}
        </div>
      ))}
      <div style={{ fontFamily: "var(--mono)", fontSize: 7, color: "var(--c-ink-2)", marginTop: 2 }}>
        #14 · #21 · #36 — flagged for review
      </div>
    </div>
  );
}

function DocPreview_Scan() {
  return (
    <div style={{
      background: "#020407",
      borderRadius: 8,
      aspectRatio: "4 / 3",
      overflow: "hidden",
      position: "relative",
      border: "1px solid #0a1018",
      fontFamily: "var(--mono)",
      color: "#cbe3da",
    }}>
      <div style={{ position: "absolute", top: 5, left: 6, fontSize: 9, color: "#ffea50", fontWeight: 700 }}>L</div>
      <div style={{ position: "absolute", top: 5, right: 6, fontSize: 5.5, opacity: 0.7, textAlign: "right", lineHeight: 1.3 }}>
        APL-08220<br/>22-AUG-26
      </div>
      <div style={{
        position: "absolute", inset: "24% 18% 18% 18%",
        background: "radial-gradient(ellipse 60% 80% at 50% 55%, #3e5258 0%, #1a2226 50%, #0a1014 90%)",
        borderRadius: "42% 42% 38% 38% / 50% 50% 50% 50%",
        filter: "blur(0.4px)",
      }} />
      <div style={{
        position: "absolute", left: "49%", top: "20%", bottom: "15%", width: "2%",
        background: "linear-gradient(180deg, rgba(220,220,220,.55) 0%, rgba(180,180,180,.35) 100%)",
        borderRadius: 2,
      }} />
      {Array.from({ length: 7 }).map((_, i) => (
        <svg key={i} style={{
          position: "absolute", left: "18%", top: `${28 + i * 7}%`,
          width: "64%", height: 10,
        }} viewBox="0 0 100 10" preserveAspectRatio="none">
          <path d="M 0 5 Q 50 -2 100 5" fill="none" stroke="rgba(255,255,255,.18)" strokeWidth="0.8"/>
        </svg>
      ))}
      <svg style={{ position: "absolute", top: "19%", left: "22%", width: "56%", height: 12 }} viewBox="0 0 100 12" preserveAspectRatio="none">
        <path d="M 0 8 Q 25 0 50 6 Q 75 0 100 8" fill="none" stroke="rgba(255,255,255,.28)" strokeWidth="1.2"/>
      </svg>
      <div style={{
        position: "absolute", left: "38%", top: "45%", width: "22%", height: "30%",
        background: "radial-gradient(ellipse, rgba(60,80,90,.5) 0%, transparent 70%)",
        borderRadius: "50%",
      }} />
      <div style={{
        position: "absolute", bottom: 0, left: 0, right: 0,
        background: "rgba(10,18,24,.85)",
        padding: "3px 6px",
        fontSize: 5.5, color: "#7eb29f",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        borderTop: "1px solid rgba(126,178,159,.2)",
      }}>
        <span>CXR · PA</span>
        <span style={{ color: "#a8d8c2" }}>IMP: No focal consolidation</span>
        <span>kVp 110</span>
      </div>
    </div>
  );
}

function DocPreview_Homeo() {
  return (
    <div style={{
      background: "linear-gradient(180deg, #f9f1e3 0%, #f0e4cc 100%)",
      borderRadius: 8,
      aspectRatio: "4 / 3",
      border: "1px solid #c8a865",
      display: "flex", flexDirection: "column",
      fontFamily: "var(--serif)", color: "#4a3a20",
      overflow: "hidden",
      position: "relative",
    }}>
      <div style={{
        height: 4,
        background: "repeating-linear-gradient(90deg, #7a4520 0 6px, #b88f3a 6px 9px)",
      }} />
      <div style={{ padding: "5px 10px 3px", textAlign: "center", borderBottom: "1px solid #c8a865" }}>
        <div style={{ fontWeight: 700, fontSize: 9.5, color: "#5a3f10", letterSpacing: ".05em" }}>Vaidya R. Iyer</div>
        <div style={{ fontFamily: "var(--mono)", fontSize: 5, color: "#7a5a20", marginTop: 1, letterSpacing: ".12em" }}>HOMEOPATHY · EST. CHENNAI · 1972</div>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", padding: "3px 10px", fontFamily: "var(--mono)", fontSize: 5.5, color: "#6a5a3a", borderBottom: "1px dashed #c8a865" }}>
        <span>L. Krishnan · 62/F</span>
        <span>10 / 08 / 2026</span>
      </div>
      <div style={{ flex: 1, padding: "8px 10px", display: "flex", flexDirection: "column", gap: 5, fontSize: 9 }}>
        {[
          { n: "Nux Vomica",    p: "30",  d: "4 pellets · TDS" },
          { n: "Arsenicum Alb", p: "200", d: "2 pellets · OD" },
          { n: "Carbo Veg",     p: "30",  d: "SOS" },
        ].map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1.4fr 0.5fr 1.3fr", gap: 4, alignItems: "baseline" }}>
            <span style={{ fontStyle: "italic", color: "#3a1a08" }}>{r.n}</span>
            <span style={{ fontFamily: "var(--mono)", fontSize: 7, color: "#7a4520" }}>{r.p}</span>
            <span style={{ fontFamily: "var(--mono)", fontSize: 6.5, color: "#5a4525", textAlign: "right" }}>{r.d}</span>
          </div>
        ))}
        <div style={{ marginTop: 6, fontStyle: "italic", color: "#7a4520", fontSize: 7.5 }}>Avoid: tea, coffee, mint · F/U 14 days</div>
      </div>
      <div style={{
        position: "absolute", left: "50%", top: "55%",
        transform: "translate(-50%, -50%) rotate(-12deg)",
        fontFamily: "var(--serif)", fontSize: 32, color: "#7a4520",
        opacity: 0.06, fontWeight: 700, letterSpacing: ".1em",
        pointerEvents: "none",
      }}>SIMILIA</div>
      <div style={{
        padding: "3px 10px 5px",
        display: "flex", justifyContent: "flex-end",
        borderTop: "1px dashed #c8a865",
      }}>
        <span style={{ fontFamily: "'Caveat', cursive", fontSize: 13, color: "#3a1a08", opacity: 0.7, transform: "rotate(-5deg)", display: "inline-block" }}>R. Iyer</span>
      </div>
    </div>
  );
}

function DocCard({ format, type, color, extracted }) {
  return (
    <div className="doc-card">
      <div className="doc-poster" style={{
        background: color.bg,
        color: color.fg,
        borderBottom: `4px solid ${color.accent}`,
      }}>
        <div className="doc-poster-format" style={{ background: color.accent, color: color.fg2 || color.bg }}>
          {format}
        </div>
        <div className="doc-poster-type" style={{ color: color.bg === "#1a2438" ? "#e8f4f0" : "#1e3a8a" }}>{type}</div>
      </div>
      <div className="doc-card-extracted">
        {extracted.map((e, i) => (
          <div key={i} className="doc-extract-row">
            <span className="doc-extract-key">{e[0]}</span>
            <span className="doc-extract-val">{e[1]}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function CapabilityWallSection() {
  const docs = [
    {
      format: "PDF · Typed",
      type: "Lab report",
      color: { bg: "#e8f0fc", fg: "#1e3a8a", accent: "#2563eb", fg2: "#fff" },
      extracted: [["Trend", "LDL +12% since Feb"], ["Filed under", "Appa · Cardiology"]],
    },
    {
      format: "Photo · Handwritten",
      type: "Doctor's prescription",
      color: { bg: "#e8f0fc", fg: "#1e3a8a", accent: "#c98038", fg2: "#fff" },
      extracted: [["Medicine", "Telmisartan 40mg"], ["Schedule", "Once daily, after breakfast"]],
    },
    {
      format: "Photo · Strip",
      type: "Medicine pack",
      color: { bg: "#e8f0fc", fg: "#1e3a8a", accent: "#5172a3", fg2: "#fff" },
      extracted: [["Drug", "Metformin 500mg"], ["Linked to", "Amma · Diabetes"]],
    },
    {
      format: "WhatsApp · Forward",
      type: "Forwarded scan",
      color: { bg: "#e8f0fc", fg: "#1e3a8a", accent: "#1faa5a", fg2: "#fff" },
      extracted: [["Sender", "Bua · 10:42 AM"], ["Filed under", "Amma · Cardiology"]],
    },
    {
      format: "PDF · Hospital",
      type: "Discharge summary",
      color: { bg: "#e8f0fc", fg: "#1e3a8a", accent: "#14a085", fg2: "#fff" },
      extracted: [["Diagnosis", "Acute gastroenteritis"], ["Follow-up", "5 days · Dr. Sahu"]],
    },
    {
      format: "Photo · Card",
      type: "Vaccination card",
      color: { bg: "#e8f0fc", fg: "#1e3a8a", accent: "#c89417", fg2: "#fff" },
      extracted: [["Next due", "DPT booster, age 5"], ["Filed under", "Arjun · Kids"]],
    },
    {
      format: "PDF · X-ray",
      type: "Scan & radiology",
      color: { bg: "#e8f0fc", fg: "#1e3a8a", accent: "#1e3a8a", fg2: "#fff" },
      extracted: [["Modality", "Chest X-ray · PA"], ["Impression", "No focal consolidation"]],
    },
    {
      format: "Photo · Handwritten",
      type: "Ayurveda · Homeopathy",
      color: { bg: "#e8f0fc", fg: "#1e3a8a", accent: "#b8542a", fg2: "#fff" },
      extracted: [["Remedy", "Nux Vomica 30 · TDS"], ["System", "Homeopathy"]],
    },
  ];

  return (
    <section style={{ background: "var(--c-bg-2)" }}>
      <div className="wrap">
        <div className="sec-head" style={{ maxWidth: 820 }}>
          <span className="eyebrow"><span className="dot"></span>What Arogya actually reads</span>
          <h2>Typed PDF or blurry photo. Printed or handwritten. <em style={{color: "var(--c-brand-deep)", fontStyle: "normal"}}>Filed for the right person.</em></h2>
          <p>The messy reality of Indian family health — not perfect digital records, but forwards, photos and notes in three languages.</p>
        </div>

        <div className="doc-wall">
          {docs.map((d, i) => <DocCard key={i} {...d} />)}
        </div>

        <p className="doc-disclaimer">
          Arogya organises your records. It does not diagnose or replace your doctor.
        </p>
      </div>

      <style>{`
        .doc-wall {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 16px;
        }
        .doc-card {
          background: var(--c-card);
          border: 1px solid var(--c-line);
          border-radius: 16px;
          overflow: hidden;
          display: flex; flex-direction: column;
          transition: transform .25s, box-shadow .25s, border-color .25s;
        }
        .doc-card:hover {
          transform: translateY(-3px);
          box-shadow: 0 1px 2px rgba(8,40,32,.04), 0 18px 38px rgba(8,40,32,.08);
          border-color: color-mix(in oklab, var(--c-brand) 30%, var(--c-line));
        }
        .doc-poster {
          padding: 22px 20px 24px;
          display: flex; flex-direction: column; gap: 14px;
          min-height: 168px;
          justify-content: space-between;
          position: relative;
        }
        .doc-poster-format {
          display: inline-flex; align-items: center;
          align-self: flex-start;
          font-family: var(--mono); font-size: 10.5px;
          letter-spacing: .14em; text-transform: uppercase;
          font-weight: 700;
          padding: 5px 10px; border-radius: 4px;
          width: max-content;
        }
        .doc-poster-type {
          font-family: var(--serif);
          font-weight: 700;
          font-size: 26px;
          line-height: 1.05;
          letter-spacing: -0.025em;
        }
        .doc-card-extracted {
          padding: 16px 16px 16px;
          display: flex; flex-direction: column; gap: 8px;
          flex: 1;
        }
        .doc-extract-row {
          display: flex; flex-direction: column; gap: 3px;
          padding: 10px 12px;
          background: color-mix(in oklab, var(--c-brand) 5%, var(--c-bg-2));
          border-radius: 8px;
        }
        .doc-extract-key {
          font-family: var(--mono); font-size: 9.5px;
          color: var(--c-mute); text-transform: uppercase;
          letter-spacing: .14em;
          font-weight: 600;
        }
        .doc-extract-val {
          font-family: var(--sans); font-size: 13.5px; font-weight: 500;
          color: var(--c-ink);
          line-height: 1.3;
        }
        .doc-disclaimer {
          margin-top: 36px;
          text-align: center;
          font-family: var(--mono);
          font-size: 12px;
          color: var(--c-mute);
          letter-spacing: 0.02em;
        }
        @media (max-width: 1080px) {
          .doc-wall { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 560px) {
          .doc-wall { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}

window.AroRedesign = { FamilyChaosSection, ByPersonSection, CapabilityWallSection };
