/* global React */
const { useState } = React;
/* ============================================================
   Compact Use Cases — dense moment cards
   - Photo reduced to a thin banner (~120px) on each card
   - Headline + 1-line copy + miniature artifact below
   - 4-col grid on wide, 2-col tablet, 1-col mobile
   - Reuses artifact components from arogya-scenes.jsx
============================================================ */

function CompactUseCases() {
  const A = window.AroScenes._artifacts;
  const cards = [
    { id: "cycles",       eyebrow: "For her",            head: "Her cycle, on her terms.",           photo: { id: "compact-cycles",      placeholder: "Drop — young woman, soft light" },         Artifact: A.CycleMini },
    { id: "meds",         eyebrow: "For Amma & Appa",    head: "Every pill. Every dose.",            photo: { id: "compact-meds",        placeholder: "Drop — medicines on a wooden table" },     Artifact: A.MedsMini },
    { id: "vaccines",     eyebrow: "For the kids",       head: "Never miss a booster.",              photo: { id: "compact-vaccines",    placeholder: "Drop — child at clinic, warm light" },     Artifact: A.VaccineMini },
    { id: "visit",        eyebrow: "Memory you search",  head: "What did the cardiologist say?",     photo: { id: "compact-visit",       placeholder: "Drop — doctor with stethoscope" },         Artifact: A.VisitMini },
    { id: "labs",         eyebrow: "Trends, not paper",  head: "5 years of bloodwork in one chart.", photo: { id: "compact-labs",        placeholder: "Drop — elderly father reading" },          Artifact: A.LabMini },
    { id: "traditional",  eyebrow: "One memory",         head: "Vaidya, homeopath, GP — together.",  photo: { id: "compact-trad",        placeholder: "Drop — Ayurvedic herbs, mortar" },         Artifact: A.TradMini },
    { id: "symptoms",     eyebrow: "The invisible 80%",  head: "That recurring cough since winter.", photo: { id: "compact-symptoms",    placeholder: "Drop — woman pouring tea" },               Artifact: A.SymptomsMini },
    { id: "emergency",    eyebrow: "When seconds count", head: "Everything an ER needs. One tap.",   photo: { id: "compact-emergency",   placeholder: "Drop — family hands together" },           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>Each moment, the artifact Arogya actually shows you when you need it.</p>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
          gap: 16,
        }}>
          {cards.map(c => (
            <MomentCard key={c.id} {...c} />
          ))}
        </div>
      </div>
    </section>
  );
}

function MomentCard({ eyebrow, head, photo, Artifact }) {
  return (
    <div style={{
      background: "var(--c-card)",
      border: "1px solid var(--c-line)",
      borderRadius: 18,
      overflow: "hidden",
      display: "flex",
      flexDirection: "column",
      transition: "transform .25s, box-shadow .25s, border-color .25s",
    }}
    onMouseEnter={e => {
      e.currentTarget.style.transform = "translateY(-3px)";
      e.currentTarget.style.boxShadow = "var(--shadow-md)";
      e.currentTarget.style.borderColor = "color-mix(in oklab, var(--c-brand) 30%, var(--c-line))";
    }}
    onMouseLeave={e => {
      e.currentTarget.style.transform = "";
      e.currentTarget.style.boxShadow = "";
      e.currentTarget.style.borderColor = "";
    }}>
      {/* photo banner — small */}
      <div style={{
        height: 120,
        background: "var(--c-bg-2)",
        position: "relative",
      }}>
        <image-slot
          id={photo.id}
          shape="rect"
          placeholder={photo.placeholder}
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
        ></image-slot>
      </div>

      <div style={{ padding: "16px 18px 18px", display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
        <div>
          <span style={{
            fontFamily: "var(--mono)", fontSize: 10.5,
            letterSpacing: ".12em", textTransform: "uppercase",
            color: "var(--c-brand-deep)",
          }}>{eyebrow}</span>
          <h3 style={{
            fontFamily: "var(--serif)", fontWeight: 600,
            fontSize: 18, lineHeight: 1.2,
            letterSpacing: "-0.015em",
            marginTop: 6,
          }}>{head}</h3>
        </div>
        <div style={{ marginTop: "auto" }}>
          <Artifact />
        </div>
      </div>
    </div>
  );
}

window.AroCompact = { CompactUseCases };