/* global React */
const { useEffect, useRef, useState } = React;

/* ============================================================
   Cinematic Use Cases — scroll-driven family vignettes
   8 scenes, each 100vh, alternating left/right image+artifact,
   with image-slot drop targets so real family photos land here.
============================================================ */

function CinematicUseCases() {
  const scenes = [
    {
      id: "cycles",
      n: "01",
      eyebrow: "For her",
      head: "Her cycle. On her terms.",
      sub: "Track periods, symptoms, and patterns privately. Arogya links them to the rest of her health — so cycles aren't a footnote anymore.",
      photo: { id: "scene-cycles",      placeholder: "Drop a photo — young woman, soft window light" },
      side: "right",
      Artifact: CycleArtifact,
    },
    {
      id: "meds",
      n: "02",
      eyebrow: "For Amma & Appa",
      head: "Every pill. Every dose. Even the ones grandma forgets to mention.",
      sub: "Forward a prescription, snap a strip, ask 'what are mom's medicines right now?' — Arogya knows.",
      photo: { id: "scene-meds",        placeholder: "Drop a photo — close-up of medicines on a wooden table" },
      side: "left",
      Artifact: MedicationArtifact,
    },
    {
      id: "vaccines",
      n: "03",
      eyebrow: "For the kids",
      head: "Never miss a booster again.",
      sub: "Childhood schedule, travel shots, boosters at school age — all tracked, all reminded.",
      photo: { id: "scene-vaccines",    placeholder: "Drop a photo — child at a clinic, warm light" },
      side: "right",
      Artifact: VaccineArtifact,
    },
    {
      id: "visit",
      n: "04",
      eyebrow: "Memory you can search",
      head: "What did the cardiologist say last March?",
      sub: "Every doctor visit captured — who, when, what was advised, what to follow up on. Searchable forever.",
      photo: { id: "scene-visit",       placeholder: "Drop a photo — doctor's hands with a stethoscope" },
      side: "left",
      Artifact: VisitArtifact,
    },
    {
      id: "labs",
      n: "05",
      eyebrow: "Trends, not paper",
      head: "Appa's cholesterol over five years, in one chart.",
      sub: "Lab reports aren't files. They're a story over time. Arogya reads every PDF and plots the line.",
      photo: { id: "scene-labs",        placeholder: "Drop a photo — elderly father reading the newspaper" },
      side: "right",
      Artifact: LabArtifact,
    },
    {
      id: "traditional",
      n: "06",
      eyebrow: "All systems, one memory",
      head: "Your vaidya, your homeopath, your GP — one timeline.",
      sub: "Indian families don't follow one system of medicine. Arogya remembers all of them, side by side.",
      photo: { id: "scene-traditional", placeholder: "Drop a photo — Ayurvedic herbs, mortar & pestle" },
      side: "left",
      Artifact: TraditionalArtifact,
    },
    {
      id: "symptoms",
      n: "07",
      eyebrow: "The invisible 80%",
      head: "That recurring cough since last winter.",
      sub: "Symptoms, home remedies, supplements, sleep — everything between doctor visits, finally captured.",
      photo: { id: "scene-symptoms",    placeholder: "Drop a photo — woman pouring herself tea by a window" },
      side: "right",
      Artifact: SymptomsArtifact,
    },
    {
      id: "emergency",
      n: "08",
      eyebrow: "When seconds matter",
      head: "Everything a doctor needs, in ten seconds.",
      sub: "Blood group, allergies, current medicines, last hospital — one tap, one screen. Share with anyone you trust.",
      photo: { id: "scene-emergency",   placeholder: "Drop a photo — family hands together" },
      side: "left",
      Artifact: EmergencyArtifact,
    },
  ];

  return (
    <section style={{ padding: "120px 0 40px", position: "relative" }}>
      <div className="wrap" style={{ marginBottom: 64 }}>
        <div className="sec-head" style={{ marginBottom: 0 }}>
          <span className="eyebrow"><span className="dot"></span>What Arogya remembers — in real life</span>
          <h2>Eight things every family is already tracking. <em style={{color:"var(--c-brand-deep)", fontStyle:"normal"}}>Just not in one place.</em></h2>
          <p>Scroll through the moments that show up in real family life — and what Arogya does with them.</p>
        </div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
        {scenes.map((s, i) => (
          <Scene key={s.id} idx={i} total={scenes.length} {...s} />
        ))}
      </div>
    </section>
  );
}

/* ============================================================
   Scene shell
============================================================ */
function Scene({ idx, total, n, eyebrow, head, sub, photo, side, Artifact }) {
  const ref = useRef(null);
  const [active, setActive] = useState(false);

  useEffect(() => {
    const obs = new IntersectionObserver(
      ([entry]) => setActive(entry.intersectionRatio > 0.35),
      { threshold: [0, 0.35, 0.6, 1] }
    );
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const photoFirst = side === "left";

  return (
    <div
      ref={ref}
      style={{
        minHeight: "92vh",
        display: "grid",
        gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
        gap: 64,
        alignItems: "center",
        padding: "64px 0",
        position: "relative",
      }}
    >
      {/* counter rail */}
      <div style={{
        position: "absolute",
        left: 32, top: 64,
        display: "flex", flexDirection: "column", gap: 6,
        fontFamily: "var(--mono)", fontSize: 11,
        color: "var(--c-mute)",
        letterSpacing: ".14em",
      }}>
        <span>{n} / {String(total).padStart(2, "0")}</span>
        <span style={{
          display: "block",
          width: 28, height: 2,
          background: "var(--c-brand)",
        }} />
      </div>

      <div className="wrap" style={{
        gridColumn: "1 / -1",
        display: "grid",
        gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 1fr)",
        gap: 64,
        alignItems: "center",
      }}>
        {/* photo side */}
        <div style={{
          order: photoFirst ? 0 : 1,
          opacity: active ? 1 : 0.0,
          transform: active ? "translateY(0)" : "translateY(20px)",
          transition: "opacity .9s ease, transform .9s ease",
        }}>
          <PhotoFrame photoId={photo.id} placeholder={photo.placeholder} />
        </div>

        {/* copy + artifact side */}
        <div style={{
          order: photoFirst ? 1 : 0,
          display: "flex", flexDirection: "column", gap: 22,
          opacity: active ? 1 : 0.0,
          transform: active ? "translateY(0)" : "translateY(28px)",
          transition: "opacity 1s ease .12s, transform 1s ease .12s",
        }}>
          <span style={{
            fontFamily: "var(--mono)",
            fontSize: 11.5,
            letterSpacing: ".14em",
            textTransform: "uppercase",
            color: "var(--c-brand-deep)",
          }}>{eyebrow}</span>
          <h3 style={{
            fontFamily: "var(--serif)",
            fontWeight: 600,
            fontSize: "clamp(32px, 4vw, 52px)",
            lineHeight: 1.05,
            letterSpacing: "-0.025em",
          }}>{head}</h3>
          <p style={{ color: "var(--c-ink-2)", fontSize: 17, lineHeight: 1.55, maxWidth: 480 }}>{sub}</p>

          <div style={{ marginTop: 12 }}>
            <Artifact />
          </div>
        </div>
      </div>
    </div>
  );
}

function PhotoFrame({ photoId, placeholder }) {
  return (
    <div style={{
      position: "relative",
      borderRadius: 28,
      overflow: "hidden",
      aspectRatio: "4 / 5",
      background: "var(--c-bg-2)",
      border: "1px solid var(--c-line)",
      boxShadow: "var(--shadow-md)",
    }}>
      {/* image-slot fills the frame; user drags a real photo onto it */}
      <image-slot
        id={photoId}
        shape="rect"
        radius="28"
        placeholder={placeholder}
        style={{
          position: "absolute",
          inset: 0,
          width: "100%",
          height: "100%",
        }}
      ></image-slot>
    </div>
  );
}

/* ============================================================
   ARTIFACTS — small product-mocks per scene
============================================================ */

const cardSx = {
  background: "var(--c-card)",
  border: "1px solid var(--c-line)",
  borderRadius: 18,
  padding: 20,
  boxShadow: "var(--shadow-sm)",
};

function CycleArtifact() {
  // Cycle ring + day chips
  const days = ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
  const states = ["light","mid","mid","heavy","mid","light","fertile"];
  const colorMap = {
    light:  "color-mix(in oklab, var(--c-accent) 30%, transparent)",
    mid:    "color-mix(in oklab, var(--c-accent) 55%, transparent)",
    heavy:  "var(--c-accent)",
    fertile:"color-mix(in oklab, var(--c-brand) 70%, transparent)",
  };
  return (
    <div style={cardSx}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
        <div style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 15 }}>Cycle · this month</div>
        <span className="pill" style={{ fontSize: 11 }}>Day 14 · fertile window</span>
      </div>
      <div style={{ display: "flex", gap: 18, alignItems: "center" }}>
        {/* ring */}
        <svg viewBox="0 0 120 120" width="120" height="120" aria-hidden>
          <circle cx="60" cy="60" r="48" fill="none" stroke="var(--c-bg-2)" strokeWidth="14"/>
          <circle cx="60" cy="60" r="48" fill="none"
            stroke="var(--c-brand)" strokeWidth="14"
            strokeDasharray="301" strokeDashoffset="120"
            strokeLinecap="round" transform="rotate(-90 60 60)"/>
          <circle cx="60" cy="60" r="48" fill="none"
            stroke="var(--c-accent)" strokeWidth="14"
            strokeDasharray="60 600" strokeDashoffset="-30"
            strokeLinecap="round" transform="rotate(-90 60 60)"/>
          <text x="60" y="58" textAnchor="middle" fontFamily="Manrope" fontWeight="600" fontSize="22" fill="var(--c-ink)">14</text>
          <text x="60" y="76" textAnchor="middle" fontFamily="Manrope" fontSize="10" fill="var(--c-mute)">of 28</text>
        </svg>
        <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 10 }}>
          <div style={{ display: "flex", gap: 6 }}>
            {days.map((d, i) => (
              <div key={i} style={{ flex: 1, textAlign: "center" }}>
                <div style={{
                  width: "100%", height: 28, borderRadius: 6,
                  background: colorMap[states[i]],
                  marginBottom: 4,
                }}/>
                <div style={{ fontSize: 10, color: "var(--c-mute)", fontFamily: "var(--mono)" }}>{d}</div>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", gap: 8, fontSize: 12 }}>
            <span className="pill" style={{ fontSize: 11 }}>cramps · day 1-2</span>
            <span className="pill" style={{ fontSize: 11 }}>regular</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function MedicationArtifact() {
  const meds = [
    { name: "Telmisartan", dose: "40 mg",  time: "Morning",   color: "var(--c-brand)" },
    { name: "Metformin",   dose: "500 mg", time: "After meals", color: "var(--c-slate)" },
    { name: "Atorvastatin",dose: "10 mg",  time: "Night",      color: "var(--c-accent)" },
    { name: "Vitamin D3",  dose: "60K IU/wk", time: "Sunday",  color: "#9b8cc9" },
  ];
  return (
    <div style={cardSx}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
        <div style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 15 }}>Amma · current medicines</div>
        <span className="pill" style={{ fontSize: 11 }}>4 active</span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {meds.map((m, i) => (
          <div key={i} style={{
            display: "grid",
            gridTemplateColumns: "auto 1fr auto auto",
            alignItems: "center",
            gap: 12,
            padding: "10px 12px",
            background: "color-mix(in oklab, var(--c-bg-2) 50%, transparent)",
            borderRadius: 12,
          }}>
            <span style={{
              width: 10, height: 30, borderRadius: 4,
              background: m.color,
            }}/>
            <div>
              <div style={{ fontWeight: 600, fontSize: 14 }}>{m.name}</div>
              <div style={{ color: "var(--c-mute)", fontSize: 12 }}>{m.dose}</div>
            </div>
            <span style={{
              fontFamily: "var(--mono)", fontSize: 10.5,
              color: "var(--c-ink-2)",
              padding: "4px 8px",
              borderRadius: 999,
              background: "var(--c-card)",
              border: "1px solid var(--c-line)",
            }}>{m.time}</span>
            <span style={{ color: "var(--c-mute)", fontSize: 16 }}>·</span>
          </div>
        ))}
      </div>
      <div style={{
        marginTop: 12, padding: 12,
        background: "color-mix(in oklab, var(--c-brand) 10%, transparent)",
        borderRadius: 10,
        fontSize: 12.5, color: "var(--c-brand-deep)",
        display: "flex", alignItems: "center", gap: 8,
      }}>
        <span>⏰</span> Refill: Telmisartan runs out in 5 days
      </div>
    </div>
  );
}

function VaccineArtifact() {
  const rows = [
    { age: "Birth",   v: "BCG, OPV, Hep B",     done: true },
    { age: "6 wks",   v: "DTwP, Hib, IPV",      done: true },
    { age: "9 mo",    v: "MMR",                 done: true },
    { age: "5 yrs",   v: "MMR booster",         done: false, due: "Sep 14" },
    { age: "10 yrs",  v: "Tdap booster",        done: false, due: "2027" },
  ];
  return (
    <div style={cardSx}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
        <div style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 15 }}>Riya · vaccination schedule</div>
        <span className="pill" style={{ fontSize: 11, background: "color-mix(in oklab, var(--c-accent) 14%, transparent)", color: "var(--c-accent)", border: "1px solid color-mix(in oklab, var(--c-accent) 30%, var(--c-line))" }}>1 due soon</span>
      </div>
      <div style={{ position: "relative", paddingLeft: 16 }}>
        <div style={{ position: "absolute", left: 4, top: 6, bottom: 6, width: 2, background: "var(--c-line)" }}/>
        {rows.map((r, i) => (
          <div key={i} style={{
            position: "relative",
            display: "grid", gridTemplateColumns: "70px 1fr auto",
            gap: 12,
            padding: "10px 0",
            alignItems: "center",
          }}>
            <span style={{
              position: "absolute", left: -16, top: 16,
              width: 12, height: 12, borderRadius: "50%",
              background: r.done ? "var(--c-brand)" : "var(--c-card)",
              border: `2px solid ${r.done ? "var(--c-brand)" : "var(--c-accent)"}`,
            }}/>
            <span style={{ color: "var(--c-mute)", fontFamily: "var(--mono)", fontSize: 11.5 }}>{r.age}</span>
            <span style={{ fontSize: 13.5, fontWeight: r.done ? 400 : 600 }}>{r.v}</span>
            <span style={{
              fontSize: 11, fontFamily: "var(--mono)",
              color: r.done ? "var(--c-mute)" : "var(--c-accent)",
            }}>{r.done ? "✓ done" : `due ${r.due}`}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function VisitArtifact() {
  return (
    <div style={cardSx}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
        <div style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 15 }}>Search · "what did Dr. Mehta say"</div>
        <span className="pill" style={{ fontSize: 11 }}>3 results</span>
      </div>
      <input readOnly value="Dr. Mehta cardiology last march"
        style={{
          width: "100%", padding: "10px 14px",
          borderRadius: 10,
          border: "1px solid var(--c-line)",
          background: "var(--c-bg-2)",
          fontFamily: "var(--sans)",
          fontSize: 13.5,
          marginBottom: 14,
          outline: "none",
        }}/>
      <div style={{
        padding: 14,
        background: "color-mix(in oklab, var(--c-brand) 8%, transparent)",
        borderRadius: 12,
        borderLeft: "3px solid var(--c-brand)",
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
          <span style={{ fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--c-brand-deep)", letterSpacing: ".1em" }}>
            14 MAR · DR. ARJUN MEHTA · CARDIOLOGY
          </span>
        </div>
        <div style={{ fontSize: 14, lineHeight: 1.55, color: "var(--c-ink)" }}>
          "BP under control on Telmisartan 40mg. Continue. <strong>Recheck lipid profile in 3 months.</strong> Walk 30 min daily. Reduce salt."
        </div>
      </div>
      <div style={{ display: "flex", gap: 6, marginTop: 10, flexWrap: "wrap" }}>
        <span className="pill" style={{ fontSize: 11 }}>+ 2 older visits</span>
        <span className="pill" style={{ fontSize: 11 }}>1 follow-up due</span>
      </div>
    </div>
  );
}

function LabArtifact() {
  const pts = [180, 192, 205, 198, 218, 234];
  const max = 250, min = 150;
  const norm = pts.map(v => ((v - min) / (max - min)));
  const w = 280, h = 100;
  const path = norm.map((v, i) => `${i === 0 ? "M" : "L"} ${(i / (pts.length-1)) * w} ${h - v * h}`).join(" ");
  return (
    <div style={cardSx}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
        <div style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 15 }}>Appa · total cholesterol</div>
        <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--c-accent)" }}>↑ +30% over 5 yrs</span>
      </div>
      <svg viewBox={`0 0 ${w} ${h + 20}`} width="100%" height="110" style={{ display: "block" }}>
        <line x1="0" y1={h - ((200 - min) / (max - min)) * h} x2={w} y2={h - ((200 - min) / (max - min)) * h}
          stroke="var(--c-line)" strokeDasharray="3 4"/>
        <text x={w-2} y={h - ((200 - min) / (max - min)) * h - 4} fontSize="9" fill="var(--c-mute)" textAnchor="end" fontFamily="JetBrains Mono">desirable &lt; 200</text>
        <path d={path} fill="none" stroke="var(--c-accent)" strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round"/>
        {norm.map((v, i) => (
          <circle key={i} cx={(i / (pts.length-1)) * w} cy={h - v * h} r="4"
            fill="var(--c-card)" stroke="var(--c-accent)" strokeWidth="2"/>
        ))}
        {["2021","2022","2023","2024","2025","2026"].map((yr, i) => (
          <text key={yr} x={(i / 5) * w} y={h + 14} fontSize="10" fill="var(--c-mute)" textAnchor={i === 0 ? "start" : i === 5 ? "end" : "middle"} fontFamily="JetBrains Mono">{yr}</text>
        ))}
      </svg>
      <div style={{
        marginTop: 8, padding: 12,
        background: "color-mix(in oklab, var(--c-accent) 10%, transparent)",
        borderRadius: 10,
        fontSize: 12.5, color: "var(--c-ink)",
        borderLeft: "3px solid var(--c-accent)"
      }}>
        Worth flagging to Dr. Mehta next month — trend is steadily up.
      </div>
    </div>
  );
}

function TraditionalArtifact() {
  const lanes = [
    { system: "Allopathy",  color: "var(--c-brand)",  events: [{ x: 10, l: "Cardio" }, { x: 50, l: "Lipid panel" }, { x: 88, l: "Refill" }] },
    { system: "Ayurveda",   color: "var(--c-accent)", events: [{ x: 22, l: "Vaidya" },  { x: 70, l: "Panchakarma" }] },
    { system: "Homeopathy", color: "#9b8cc9",         events: [{ x: 35, l: "Consult" }, { x: 80, l: "Refill" }] },
    { system: "Yoga",       color: "var(--c-slate)",  events: [{ x: 5, l: "Daily" }, { x: 30, l: "" }, { x: 55, l: "" }, { x: 78, l: "" }] },
  ];
  return (
    <div style={cardSx}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
        <div style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 15 }}>Appa · all systems · last 6 months</div>
        <span className="pill" style={{ fontSize: 11 }}>4 systems</span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {lanes.map((lane, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "94px 1fr", alignItems: "center", gap: 10 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: lane.color }}/>
              <span style={{ fontSize: 12.5, fontWeight: 500 }}>{lane.system}</span>
            </div>
            <div style={{
              position: "relative", height: 22,
              background: "color-mix(in oklab, var(--c-bg-2) 60%, transparent)",
              borderRadius: 8,
            }}>
              {lane.events.map((e, j) => (
                <span key={j} title={e.l} style={{
                  position: "absolute",
                  left: `${e.x}%`, top: "50%",
                  transform: "translate(-50%, -50%)",
                  width: e.l ? 14 : 8, height: e.l ? 14 : 8,
                  borderRadius: "50%",
                  background: lane.color,
                  boxShadow: e.l ? `0 0 0 3px color-mix(in oklab, ${lane.color} 20%, transparent)` : "none",
                }}/>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8, fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--c-mute)" }}>
        <span>Jan</span><span>Mar</span><span>May</span><span>Jul</span>
      </div>
    </div>
  );
}

function SymptomsArtifact() {
  const entries = [
    { d: "Last winter", t: "Dry cough · 3 weeks",   note: "Tulsi-ginger kadha · helped" },
    { d: "Mar 14",      t: "Acidity · evenings",     note: "Cut down coffee · noted" },
    { d: "Apr 02",      t: "Headache · 2 days",      note: "Crocin · resolved" },
    { d: "Last week",   t: "Cough · same as last yr",note: "Pattern flagged → see GP?" },
  ];
  return (
    <div style={cardSx}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
        <div style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 15 }}>Your symptom journal</div>
        <span className="pill" style={{ fontSize: 11, color: "var(--c-accent)", background: "color-mix(in oklab, var(--c-accent) 12%, transparent)", border: "1px solid color-mix(in oklab, var(--c-accent) 30%, var(--c-line))" }}>recurring pattern</span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {entries.map((e, i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "84px 1fr", gap: 12,
            padding: "10px 0",
            borderBottom: i < entries.length-1 ? "1px solid var(--c-line)" : "none",
          }}>
            <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--c-mute)" }}>{e.d}</span>
            <div>
              <div style={{ fontSize: 13.5, fontWeight: 500 }}>{e.t}</div>
              <div style={{ fontSize: 12.5, color: "var(--c-ink-2)", marginTop: 2 }}>{e.note}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function EmergencyArtifact() {
  return (
    <div style={{
      ...cardSx,
      background: "linear-gradient(140deg, var(--c-ink) 0%, var(--c-slate) 100%)",
      color: "var(--c-bg)",
      border: "1px solid var(--c-ink)",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
        <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: ".14em", color: "color-mix(in oklab, var(--c-brand) 50%, white)" }}>EMERGENCY CARD · AMMA</div>
        <span style={{
          fontSize: 10.5, fontFamily: "var(--mono)",
          padding: "4px 10px", borderRadius: 999,
          background: "color-mix(in oklab, var(--c-accent) 50%, transparent)",
          color: "var(--c-bg)",
        }}>SHARE LINK · 24H</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <Stat k="Blood group" v="B+" />
        <Stat k="Age" v="64" />
        <Stat k="Allergies" v="Penicillin, Sulfa" />
        <Stat k="Conditions" v="HTN, Type 2 DM" />
        <Stat k="Current meds" v="Telmisartan 40, Metformin 500" full />
        <Stat k="Last hospital" v="Apollo · 22 Aug 2026 · Cardiology" full />
      </div>
      <div style={{
        marginTop: 14, paddingTop: 14,
        borderTop: "1px solid color-mix(in oklab, var(--c-bg) 18%, transparent)",
        fontSize: 12.5,
        color: "color-mix(in oklab, var(--c-bg) 70%, var(--c-mute))",
      }}>
        Tap to share with the ER doctor, your sibling, or a neighbour. Link auto-expires.
      </div>
    </div>
  );
}

function Stat({ k, v, full }) {
  return (
    <div style={{ gridColumn: full ? "1 / -1" : "auto" }}>
      <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".12em", textTransform: "uppercase", color: "color-mix(in oklab, var(--c-bg) 60%, var(--c-mute))" }}>{k}</div>
      <div style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 15, marginTop: 3 }}>{v}</div>
    </div>
  );
}

window.AroScenes = { CinematicUseCases, _artifacts: { CycleMini, MedsMini, VaccineMini, VisitMini, LabMini, TradMini, SymptomsMini, EmergencyMini } };

/* ============================================================
   Mini artifacts — denser, lighter versions of the full mocks
   for use in CompactUseCases. ~150-180px tall, no headers.
============================================================ */

const miniSx = {
  background: "color-mix(in oklab, var(--c-bg-2) 50%, transparent)",
  border: "1px solid var(--c-line)",
  borderRadius: 12,
  padding: 12,
  fontSize: 12,
};

function CycleMini() {
  return (
    <div style={miniSx}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <svg viewBox="0 0 60 60" width="56" height="56" aria-hidden>
          <circle cx="30" cy="30" r="22" fill="none" stroke="var(--c-bg-2)" strokeWidth="7"/>
          <circle cx="30" cy="30" r="22" fill="none" stroke="var(--c-brand)" strokeWidth="7"
            strokeDasharray="138" strokeDashoffset="62" strokeLinecap="round" transform="rotate(-90 30 30)"/>
          <text x="30" y="34" textAnchor="middle" fontFamily="Manrope" fontWeight="600" fontSize="13" fill="var(--c-ink)">14</text>
        </svg>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12.5, fontWeight: 600 }}>Day 14 of 28</div>
          <div style={{ color: "var(--c-mute)", fontSize: 11 }}>fertile window · regular</div>
          <div style={{ display: "flex", gap: 3, marginTop: 6 }}>
            {[0.3,0.6,0.6,1,0.6,0.3,0.5].map((v, i) => (
              <span key={i} style={{
                flex: 1, height: 8, borderRadius: 2,
                background: `color-mix(in oklab, var(--c-accent) ${v * 80}%, transparent)`,
              }}/>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function MedsMini() {
  const meds = [
    { n: "Telmisartan", t: "AM",   c: "var(--c-brand)" },
    { n: "Metformin",   t: "AM/PM",c: "var(--c-slate)" },
    { n: "Atorvastatin",t: "PM",   c: "var(--c-accent)" },
  ];
  return (
    <div style={miniSx}>
      {meds.map((m, i) => (
        <div key={i} style={{
          display: "grid", gridTemplateColumns: "auto 1fr auto",
          alignItems: "center", gap: 8, padding: "5px 0",
          borderBottom: i < meds.length-1 ? "1px solid var(--c-line)" : "none",
        }}>
          <span style={{ width: 6, height: 16, borderRadius: 2, background: m.c }}/>
          <span style={{ fontWeight: 500 }}>{m.n}</span>
          <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--c-mute)" }}>{m.t}</span>
        </div>
      ))}
      <div style={{ marginTop: 6, fontSize: 11, color: "var(--c-brand-deep)" }}>↻ Refill in 5 days</div>
    </div>
  );
}

function VaccineMini() {
  const rows = [
    { v: "MMR",            done: true },
    { v: "DTwP booster",   done: true },
    { v: "Tdap booster",   done: false, due: "Sep 14" },
  ];
  return (
    <div style={miniSx}>
      {rows.map((r, i) => (
        <div key={i} style={{
          display: "flex", alignItems: "center", gap: 10,
          padding: "5px 0",
          borderBottom: i < rows.length-1 ? "1px solid var(--c-line)" : "none",
        }}>
          <span style={{
            width: 10, height: 10, borderRadius: "50%",
            background: r.done ? "var(--c-brand)" : "var(--c-card)",
            border: `2px solid ${r.done ? "var(--c-brand)" : "var(--c-accent)"}`,
          }}/>
          <span style={{ flex: 1, fontWeight: r.done ? 400 : 600 }}>{r.v}</span>
          <span style={{
            fontFamily: "var(--mono)", fontSize: 10,
            color: r.done ? "var(--c-mute)" : "var(--c-accent)",
          }}>{r.done ? "✓" : `due ${r.due}`}</span>
        </div>
      ))}
    </div>
  );
}

function VisitMini() {
  return (
    <div style={{ ...miniSx, borderLeft: "3px solid var(--c-brand)", padding: "10px 12px" }}>
      <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".1em", color: "var(--c-brand-deep)" }}>
        14 MAR · DR. MEHTA · CARDIO
      </div>
      <div style={{ fontSize: 12.5, lineHeight: 1.45, marginTop: 4, color: "var(--c-ink)" }}>
        "BP under control. <strong>Recheck lipids in 3 months.</strong> Walk 30 min daily."
      </div>
    </div>
  );
}

function LabMini() {
  const pts = [180, 192, 205, 198, 218, 234];
  const max = 250, min = 150, w = 200, h = 60;
  const norm = pts.map(v => ((v - min) / (max - min)));
  const path = norm.map((v, i) => `${i === 0 ? "M" : "L"} ${(i / (pts.length-1)) * w} ${h - v * h}`).join(" ");
  return (
    <div style={miniSx}>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
        <span style={{ fontWeight: 500 }}>Cholesterol · 5 yrs</span>
        <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--c-accent)" }}>↑ +30%</span>
      </div>
      <svg viewBox={`0 0 ${w} ${h + 12}`} width="100%" height="62">
        <line x1="0" y1={h - ((200 - min) / (max - min)) * h} x2={w} y2={h - ((200 - min) / (max - min)) * h}
          stroke="var(--c-line)" strokeDasharray="2 3"/>
        <path d={path} fill="none" stroke="var(--c-accent)" strokeWidth="2"/>
        {norm.map((v, i) => (
          <circle key={i} cx={(i / (pts.length-1)) * w} cy={h - v * h} r="2.5"
            fill="var(--c-card)" stroke="var(--c-accent)" strokeWidth="1.5"/>
        ))}
        <text x="0" y={h + 10} fontSize="9" fill="var(--c-mute)" fontFamily="JetBrains Mono">2021</text>
        <text x={w} y={h + 10} fontSize="9" fill="var(--c-mute)" textAnchor="end" fontFamily="JetBrains Mono">2026</text>
      </svg>
    </div>
  );
}

function TradMini() {
  const lanes = [
    { s: "Allopathy",  c: "var(--c-brand)",  d: [12, 45, 80] },
    { s: "Ayurveda",   c: "var(--c-accent)", d: [25, 70] },
    { s: "Homeopathy", c: "#9b8cc9",         d: [35, 75] },
  ];
  return (
    <div style={miniSx}>
      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
        {lanes.map((l, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "76px 1fr", alignItems: "center", gap: 8 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: l.c }}/>
              <span style={{ fontSize: 11, fontWeight: 500 }}>{l.s}</span>
            </div>
            <div style={{
              position: "relative", height: 12,
              background: "color-mix(in oklab, var(--c-bg-2) 70%, transparent)",
              borderRadius: 6,
            }}>
              {l.d.map((x, j) => (
                <span key={j} style={{
                  position: "absolute", left: `${x}%`, top: "50%",
                  transform: "translate(-50%, -50%)",
                  width: 8, height: 8, borderRadius: "50%",
                  background: l.c,
                }}/>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function SymptomsMini() {
  return (
    <div style={miniSx}>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
        <span style={{ fontWeight: 500 }}>Cough · this week</span>
        <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--c-accent)" }}>recurring</span>
      </div>
      <div style={{ fontSize: 11.5, color: "var(--c-ink-2)", lineHeight: 1.5 }}>
        Same pattern as last winter. Arogya flagged it — maybe time to see Dr. Rao.
      </div>
      <div style={{ display: "flex", gap: 4, marginTop: 8 }}>
        {[0.2,0.4,0.8,0.6,0.3,0.5,0.7].map((v, i) => (
          <span key={i} style={{
            flex: 1, height: 12, borderRadius: 2,
            background: `color-mix(in oklab, var(--c-accent) ${v * 70}%, transparent)`,
          }}/>
        ))}
      </div>
    </div>
  );
}

function EmergencyMini() {
  return (
    <div style={{
      ...miniSx,
      background: "linear-gradient(135deg, var(--c-ink) 0%, var(--c-slate) 100%)",
      color: "var(--c-bg)", border: "1px solid var(--c-ink)",
    }}>
      <div style={{ fontFamily: "var(--mono)", fontSize: 9.5, letterSpacing: ".12em", color: "color-mix(in oklab, var(--c-brand) 50%, white)", marginBottom: 6 }}>
        EMERGENCY · AMMA · B+
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 4, fontSize: 11 }}>
        <div><span style={{ color: "color-mix(in oklab, var(--c-bg) 55%, var(--c-mute))" }}>Allergies</span><br/>Penicillin, Sulfa</div>
        <div><span style={{ color: "color-mix(in oklab, var(--c-bg) 55%, var(--c-mute))" }}>Conditions</span><br/>HTN, T2 DM</div>
      </div>
    </div>
  );
}