/* global React */
/* ============================================================
   Medium Use Cases — 2 rows per screen
   Each row is one use case, full-width, ~50vh tall:
   [ photo | headline+copy | artifact ]  (3 columns on desktop)
   Stacks to single column on mobile.
============================================================ */

function MediumUseCases() {
  const A = window.AroScenes._artifacts;
  const rows = [
    { id: "cycles",      n: "01", eyebrow: "For her",            head: "Her cycle, on her terms.",            sub: "Track periods and symptoms privately — linked to the rest of her health.", photo: { id: "med-cycles",   placeholder: "Indian woman in her 20s/30s, soft natural light at home" }, Artifact: A.CycleMini },
    { id: "meds",        n: "02", eyebrow: "For Amma & Appa",    head: "Every pill. Every dose.",             sub: "Forward a prescription. Snap a strip. Arogya files it for the right person.", photo: { id: "med-meds",    placeholder: "Hands of an Indian senior holding daily medicines / pill organizer" }, Artifact: A.MedsMini },
    { id: "vaccines",    n: "03", eyebrow: "For the kids",       head: "Never miss a booster again.",         sub: "Schedule, boosters, travel shots — tracked and gently reminded.",         photo: { id: "med-vaccines", placeholder: "Indian toddler at pediatric clinic, parent comforting during a shot" }, Artifact: A.VaccineMini },
    { id: "visit",       n: "04", eyebrow: "Memory you search",  head: "What did the cardiologist say?",      sub: "Every visit captured — who, when, advised what, follow up by when.",      photo: { id: "med-visit",    placeholder: "Indian cardiologist with stethoscope, ECG strip / patient consult" }, Artifact: A.VisitMini },
    { id: "labs",        n: "05", eyebrow: "Trends, not paper",  head: "Five years of bloodwork. One chart.", sub: "Arogya reads every PDF and plots the line that matters.",                 photo: { id: "med-labs",     placeholder: "Indian father (60s) at home reading lab report / blood sample background" }, Artifact: A.LabMini },
    { id: "traditional", n: "06", eyebrow: "One memory",         head: "Vaidya, homeopath, GP — together.",   sub: "Families don't follow one system of medicine. Arogya remembers all.",     photo: { id: "med-trad",     placeholder: "Ayurvedic vaidya in white kurta examining nadi, herbs in foreground" }, Artifact: A.TradMini },
    { id: "symptoms",    n: "07", eyebrow: "The invisible 80%",  head: "That recurring cough since winter.",  sub: "Symptoms, home remedies, supplements — between-visit life, finally captured.", photo: { id: "med-symptoms", placeholder: "Indian woman at home with a mug of kadha / tulsi tea by a window" }, Artifact: A.SymptomsMini },
    { id: "emergency",   n: "08", eyebrow: "When seconds matter",head: "Everything an ER needs. One tap.",    sub: "Blood group, allergies, current meds, last hospital — share with anyone you trust.", photo: { id: "med-emergency", placeholder: "Adult child holding parent's hand in hospital corridor / family caregiver moment" }, Artifact: A.EmergencyMini },
  ];
  return (
    <section style={{ padding: "96px 0" }}>
      <div className="wrap">
        <div className="sec-head">
          <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>A person, the problem, and the artifact Arogya actually shows you.</p>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
          {rows.map(r => <MediumRow key={r.id} {...r} />)}
        </div>
      </div>
    </section>
  );
}

function MediumRow({ n, eyebrow, head, sub, photo, Artifact }) {
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "minmax(160px, 0.7fr) minmax(0, 1fr) minmax(0, 1.1fr)",
        gap: 24,
        alignItems: "stretch",
        background: "var(--c-card)",
        border: "1px solid var(--c-line)",
        borderRadius: 20,
        overflow: "hidden",
        minHeight: 240,
        transition: "transform .25s, box-shadow .25s, border-color .25s",
      }}
      onMouseEnter={e => {
        e.currentTarget.style.transform = "translateY(-2px)";
        e.currentTarget.style.boxShadow = "var(--shadow-md)";
        e.currentTarget.style.borderColor = "color-mix(in oklab, var(--c-brand) 28%, var(--c-line))";
      }}
      onMouseLeave={e => {
        e.currentTarget.style.transform = "";
        e.currentTarget.style.boxShadow = "";
        e.currentTarget.style.borderColor = "";
      }}
      className="medium-row"
    >
      {/* Photo — drop a real photo here */}
      <div style={{ position: "relative", background: "var(--c-bg-2)", minHeight: 240, overflow: "hidden" }}>
        <img
          src={`/static/landing/images/${photo.id}.png`}
          alt={photo.placeholder || ""}
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
        />
      </div>

      {/* Copy */}
      <div style={{ padding: "22px 8px 22px 4px", display: "flex", flexDirection: "column", justifyContent: "center", gap: 10 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{
            fontFamily: "var(--mono)", fontSize: 11,
            color: "var(--c-mute)", letterSpacing: ".14em",
          }}>{n}</span>
          <span style={{
            fontFamily: "var(--mono)", fontSize: 10.5,
            letterSpacing: ".12em", textTransform: "uppercase",
            color: "var(--c-brand-deep)",
          }}>{eyebrow}</span>
        </div>
        <h3 style={{
          fontFamily: "var(--serif)", fontWeight: 600,
          fontSize: "clamp(22px, 2.2vw, 28px)", lineHeight: 1.1,
          letterSpacing: "-0.02em",
        }}>{head}</h3>
        <p style={{ color: "var(--c-ink-2)", fontSize: 14.5, lineHeight: 1.55 }}>{sub}</p>
      </div>

      {/* Artifact */}
      <div style={{ padding: "22px 24px 22px 0", display: "flex", alignItems: "center" }}>
        <div style={{ width: "100%" }}>
          <Artifact />
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .medium-row {
            grid-template-columns: 1fr !important;
          }
          .medium-row > div:first-child {
            min-height: 180px !important;
          }
        }
      `}</style>
    </div>
  );
}

window.AroMedium = { MediumUseCases };