/* Luma case study — numbered content sections 01-09 */

/* ---- Shared helpers ---- */

function LumaReveal({ children, delay }) {
  const ref = useReveal()
  return (
    <div
      className="reveal"
      ref={ref}
      style={delay ? { transitionDelay: delay + "ms" } : {}}
    >
      {children}
    </div>
  )
}

function LumaSection({ id, children, tone }) {
  const bg = tone === "card" ? "var(--page-card)" : "var(--page-bg)"
  const border =
    tone === "card"
      ? {
          borderTop: "1px solid var(--page-line)",
          borderBottom: "1px solid var(--page-line)",
        }
      : {}
  return (
    <section id={id} style={{ background: bg, ...border }}>
      <div className="wrap">{children}</div>
    </section>
  )
}

function LumaBody({ children }) {
  return (
    <div className="section-head" style={{ marginBottom: 0, marginTop: 8 }}>
      <div />
      <div style={{ maxWidth: "72ch" }}>{children}</div>
    </div>
  )
}

function LP({ children, style }) {
  return (
    <p
      style={{
        fontSize: 17,
        lineHeight: 1.7,
        color: "#4a4a4a",
        maxWidth: "68ch",
        margin: "0 0 20px",
        ...style,
      }}
    >
      {children}
    </p>
  )
}

/* Real image with caption */
function LumaLightbox({ src, alt, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose()
    }
    document.addEventListener("keydown", onKey)
    document.body.style.overflow = "hidden"
    return () => {
      document.removeEventListener("keydown", onKey)
      document.body.style.overflow = ""
    }
  }, [onClose])

  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed",
        inset: 0,
        zIndex: 9999,
        background: "rgba(10,10,10,0.92)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: 24,
        cursor: "zoom-out",
      }}
    >
      <button
        onClick={onClose}
        style={{
          position: "fixed",
          top: 20,
          right: 24,
          background: "rgba(244,239,223,0.12)",
          border: "1px solid rgba(244,239,223,0.2)",
          color: "#F4EFDF",
          borderRadius: "50%",
          width: 40,
          height: 40,
          cursor: "pointer",
          fontSize: 20,
          lineHeight: 1,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
        aria-label="Close"
      >
        &times;
      </button>
      <img
        src={src}
        alt={alt}
        onClick={(e) => e.stopPropagation()}
        style={{
          maxWidth: "min(1400px, 96vw)",
          maxHeight: "90vh",
          width: "auto",
          height: "auto",
          borderRadius: 8,
          boxShadow: "0 24px 80px rgba(0,0,0,0.6)",
          cursor: "default",
        }}
      />
    </div>
  )
}

function LumaImg({ src, alt, caption, style, zoomable }) {
  const ref = useReveal()
  const [open, setOpen] = React.useState(false)
  return (
    <>
      <figure
        className="reveal"
        ref={ref}
        style={{ margin: "8px 0 0", ...style }}
      >
        <div style={{ position: "relative" }}>
          <img
            src={src}
            alt={alt}
            onClick={zoomable ? () => setOpen(true) : undefined}
            style={{
              width: "100%",
              height: "auto",
              borderRadius: 12,
              display: "block",
              border: "1px solid var(--page-line)",
              cursor: zoomable ? "zoom-in" : "default",
            }}
          />
          {zoomable && (
            <button
              onClick={() => setOpen(true)}
              title="View full size"
              style={{
                position: "absolute",
                bottom: 10,
                right: 10,
                background: "rgba(10,10,10,0.55)",
                backdropFilter: "blur(6px)",
                border: "1px solid rgba(255,255,255,0.18)",
                borderRadius: 6,
                color: "#fff",
                padding: "5px 10px",
                cursor: "pointer",
                fontFamily: "var(--font-mono)",
                fontSize: 10,
                letterSpacing: "0.06em",
                textTransform: "uppercase",
                display: "flex",
                alignItems: "center",
                gap: 5,
              }}
            >
              <svg
                width="11"
                height="11"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2.5"
                strokeLinecap="round"
              >
                <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" />
              </svg>
              Expand
            </button>
          )}
        </div>
        {caption && (
          <figcaption
            style={{
              marginTop: 14,
              fontSize: 13.5,
              lineHeight: 1.5,
              color: "var(--page-muted)",
              fontStyle: "italic",
              fontFamily: "var(--font-display)",
              letterSpacing: "0.01em",
            }}
          >
            {caption}
          </figcaption>
        )}
      </figure>
      {open && (
        <LumaLightbox src={src} alt={alt} onClose={() => setOpen(false)} />
      )}
    </>
  )
}

/* Responsive YouTube embed */
function LumaVideo({ src, caption, style }) {
  const ref = useReveal()
  return (
    <figure
      className="reveal"
      ref={ref}
      style={{ margin: "8px 0 0", ...style }}
    >
      <div
        style={{
          position: "relative",
          width: "100%",
          paddingBottom: "56.25%",
          borderRadius: 12,
          overflow: "hidden",
          border: "1px solid var(--page-line)",
        }}
      >
        <iframe
          src={src}
          title="YouTube video player"
          frameBorder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          referrerPolicy="strict-origin-when-cross-origin"
          allowFullScreen
          style={{
            position: "absolute",
            inset: 0,
            width: "100%",
            height: "100%",
          }}
        />
      </div>
      {caption && (
        <figcaption
          style={{
            marginTop: 14,
            fontSize: 13.5,
            lineHeight: 1.5,
            color: "var(--page-muted)",
            fontStyle: "italic",
            fontFamily: "var(--font-display)",
            letterSpacing: "0.01em",
          }}
        >
          {caption}
        </figcaption>
      )}
    </figure>
  )
}

function LumaStat({ value, suffix, label, source }) {
  const ref = React.useRef(null)
  const [seen, setSeen] = React.useState(false)
  const n = useCountUp(value, seen)

  React.useEffect(() => {
    const io = new IntersectionObserver(
      (es) =>
        es.forEach((e) => {
          if (e.isIntersecting) {
            setSeen(true)
            io.disconnect()
          }
        }),
      { threshold: 0.18 },
    )
    if (ref.current) io.observe(ref.current)
    return () => io.disconnect()
  }, [])

  const isFloat = value % 1 !== 0
  return (
    <div
      ref={ref}
      className="card"
      style={{ display: "flex", flexDirection: "column", gap: 6 }}
    >
      <div
        style={{
          fontFamily: "var(--font-display)",
          fontStyle: "italic",
          fontSize: "clamp(40px,5vw,60px)",
          lineHeight: 1,
          color: "var(--page-accent)",
        }}
      >
        {isFloat ? n.toFixed(0) : Math.round(n)}
        <span style={{ fontSize: "0.5em" }}>{suffix}</span>
      </div>
      <div
        style={{
          fontSize: 15,
          lineHeight: 1.5,
          color: "#4a4a4a",
          marginTop: 8,
          maxWidth: "32ch",
        }}
      >
        {label}
      </div>
      {source && (
        <div
          style={{
            fontFamily: "var(--font-mono)",
            fontSize: 11,
            fontWeight: "bolder",
            letterSpacing: "0.06em",
            textTransform: "uppercase",
            color: "var(--page-muted)",
            marginTop: 4,
          }}
        >
          {source}
        </div>
      )}
    </div>
  )
}

function SplitCard({ k, t, delay }) {
  const ref = useReveal()
  return (
    <div
      className="card reveal"
      ref={ref}
      style={{ transitionDelay: delay + "ms" }}
    >
      <div
        style={{
          fontFamily: "var(--font-mono)",
          fontSize: 11,
          fontWeight: "bolder",
          letterSpacing: "0.06em",
          textTransform: "uppercase",
          color: "var(--page-accent)",
          marginBottom: 14,
        }}
      >
        {k}
      </div>
      <p
        style={{ fontSize: 16, lineHeight: 1.65, color: "#4a4a4a", margin: 0 }}
      >
        {t}
      </p>
    </div>
  )
}

function LumaSplitCards({ items }) {
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit,minmax(280px,1fr))",
        gap: 16,
        marginTop: 8,
      }}
    >
      {items.map((it, i) => (
        <SplitCard key={it.k} k={it.k} t={it.t} delay={i * 90} />
      ))}
    </div>
  )
}

function BriefCard({ k, t, delay }) {
  const ref = useReveal()
  return (
    <div
      className="card reveal"
      ref={ref}
      style={{ transitionDelay: delay + "ms" }}
    >
      <div
        style={{
          fontFamily: "var(--font-mono)",
          fontSize: 11,
          fontWeight: "bolder",
          letterSpacing: "0.06em",
          textTransform: "uppercase",
          color: "var(--page-accent)",
          marginBottom: 14,
        }}
      >
        {k}
      </div>
      <p
        style={{
          fontFamily: "var(--font-display)",
          fontStyle: "italic",
          fontSize: "clamp(20px,2vw,25px)",
          lineHeight: 1.3,
          color: "var(--page-fg)",
          margin: 0,
        }}
      >
        {t}
      </p>
    </div>
  )
}

function LumaIntro() {
  const cards = [
    {
      k: "What I designed",
      t: "Smart Call: a mobile AI feature that turns phone calls into a calm, usable memory for elderly people and early stage Alzheimer's patients.",
    },
    {
      k: "The hard part",
      t: "Helping them remember without making them feel ashamed or controlled.",
    },
    {
      k: "Why it's different",
      t: "It doesn't just store calls. It extracts what matters: tasks, meetings, decisions. Delivered back through a calm, emotion aware voice, whenever necessary.",
    },
  ]
  return (
    <LumaSection id="brief">
      <LumaReveal>
        <div
          className="h-eyebrow"
          style={{ color: "var(--page-accent)", marginBottom: 28 }}
        >
          The brief, in three lines
        </div>
      </LumaReveal>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit,minmax(260px,1fr))",
          gap: 20,
        }}
      >
        {cards.map((c, i) => (
          <BriefCard key={c.k} k={c.k} t={c.t} delay={i * 90} />
        ))}
      </div>
    </LumaSection>
  )
}

/* ---------- 01 — Overview ---------- */
function OverviewSection() {
  return (
    <LumaSection id="overview" tone="card">
      <SectionHead
        num="01 — Overview"
        eyebrow="The anchor"
        title="42 calls in a single day."
      >
        <p className="lede" style={{ color: "#4a4a4a", margin: 0 }}>
          Imagine receiving 42 phone calls in a single day from your father.
          Sometimes he asks what time dinner is. Ten minutes later, he calls to
          ask where his keys are. An hour later, he calls just to check if you
          are still coming over.
        </p>
      </SectionHead>
      <LumaBody>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))",
            gap: 16,
            marginBottom: 32,
            border: "1px solid #d9d3c2",
            borderRadius: 16,
          }}
        >
          <LumaStat
            value={42}
            suffix=""
            label="phone calls in a single day, documented from one patient seeking constant reassurance."
            source="The design anchor"
          />
          <LumaStat
            value={55}
            suffix="M"
            label="people live with dementia. The struggle with anxiety begins long before the disease is visible."
            source="Global figure"
          />
        </div>
        <LP>
          We documented this specific case in a patient with more advanced
          memory loss. But the root cause, a paralysing loop of anxiety, begins
          much earlier.
        </LP>
        <LP>
          For the 55 million people living with dementia, the struggle with
          anxiety begins long before the disease is visible. For their
          caregivers, the resulting need for constant reassurance becomes a
          source of profound exhaustion.
        </LP>
        <LP>
          This single metric, the "42 calls", became the design anchor for my
          work on Luma. It exposed not a memory problem, but a reassurance
          problem.
        </LP>
        <LP style={{ marginBottom: 0 }}>
          That insight directly led me to design{" "}
          <strong style={{ color: "var(--page-fg)" }}>Smart Call</strong>, an AI
          powered system that allows people in early stage Alzheimer's to
          "remember" conversations without having to repeatedly ask for them.
        </LP>
        <LP>
          In the early and mid stages of Alzheimer's, patients often retain a
          strong desire to manage their own lives. They don't want to be
          "managed"; they want to feel capable. Our goal was to create a
          supportive layer that helps them maintain that autonomy, rather than
          just a surveillance tool for their caregivers. This distinction shaped
          every design decision I made. If the product felt like monitoring,
          users would reject it. If it felt like support, they would trust it.
        </LP>
      </LumaBody>
    </LumaSection>
  )
}

// /* ---------- 02 — Context ---------- */
// function ContextSection() {
//   return (
//     <LumaSection id="context" tone="card">
//       <SectionHead
//         num="02 — Context"
//         eyebrow="Autonomy over surveillance"
//         title="Support, not a tracking device."
//       />
//       <LumaBody>
//         <LP>
//           In the early and mid stages of Alzheimer's, patients often retain a
//           strong desire to manage their own lives. They don't want to be
//           "managed", instead they want to feel capable.
//         </LP>
//         <LP style={{ marginBottom: 0 }}>
//           Our goal was to create a supportive layer that helps them maintain
//           that autonomy, rather than just a surveillance tool for their
//           caregivers. This distinction shaped every design decision I made. If
//           the product felt like monitoring, users would reject it. If it felt
//           like support, they would trust it.
//         </LP>
//       </LumaBody>
//     </LumaSection>
//   )
// }

/* ---------- 03 — Role ---------- */
function RoleSection() {
  return (
    <LumaSection id="role">
      <SectionHead
        num="02 — Role"
        eyebrow="The project and my role"
        title="One feature inside a multimodal ecosystem."
      >
        <p className="lede" style={{ color: "#4a4a4a", margin: 0 }}>
          Luma is a multimodal AI ecosystem we designed to support this goal.
        </p>
      </SectionHead>
      <LumaBody>
        <LumaSplitCards
          items={[
            {
              k: "The Team",
              t: "As a team of four, we focused on different critical features for the target group, such as emergency response system, location tracking, reminders and more.",
            },
            {
              k: "My Role",
              t: "I was responsible for the Smart Call feature, from defining the problem to designing how it works and how it speaks to users. My focus was on solving the friction of repetitive communication without eroding their sense of self worth.",
            },
          ]}
        />
      </LumaBody>
    </LumaSection>
  )
}

/* ---------- 04 — Process ---------- */
function ProcessSection() {
  return (
    <LumaSection id="process" tone="card">
      <SectionHead
        num="03 — Process"
        eyebrow="A journey of discovery"
        title="Three sprints, grounded in ISO 9241-210."
      >
        <p className="lede" style={{ color: "#4a4a4a", margin: 0 }}>
          We grounded our work in the ISO 9241-210 human centered design
          framework, moving through three distinct sprints which involved
          various steps, starting from desk research to testing the final high
          fidelity prototype.
        </p>
      </SectionHead>
      <LumaBody>
        <LumaImg
          src="/luma-hcd-framework.webp"
          alt="ISO 9241-210 Human Centered Design process diagram"
          caption="Human Centered Design Process as per DIN EN ISO 9241-210"
          style={{ marginBottom: 24 }}
        />
        <LumaImg
          src="/luma-sprint-steps.webp"
          alt="Sprint breakdown showing steps taken in each of the three sprints"
          caption="Steps taken each sprint, from desk research to high fidelity prototype testing"
        />
      </LumaBody>
    </LumaSection>
  )
}

/* ---------- 05 — Sprint 1 ---------- */
function Sprint1Section() {
  return (
    <LumaSection id="sprint1">
      <SectionHead
        num="04 — Sprint 1"
        eyebrow="Uncovering the pattern"
        title="A gap where emotional intelligence should be."
      />
      <LumaBody>
        <LP>
          We started with a wide lens. Before talking to users, we conducted
          desk research to map the competitive landscape and see what solutions
          already existed.
        </LP>
        <LP>
          Our early analysis revealed a gap. Most existing tools were either
          expensive hardware or purely functional trackers. They lacked the
          emotional intelligence required for a disease where confusion drives
          anxiety. We validated this through interviews with family members.
          That's where we found our metric: the "42 calls" case study. We
          learned that the patient wasn't just repeating one question, he was
          cycling through a variety of anxieties related to food, documents,
          appointments, seeking constant reassurance.
        </LP>
        <div
          style={{
            borderLeft: "2px solid var(--page-accent)",
            paddingLeft: 24,
            margin: "0 0 32px",
          }}
        >
          <div
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              fontWeight: "bolder",
              letterSpacing: "0.06em",
              textTransform: "uppercase",
              color: "var(--page-muted)",
              marginBottom: 12,
            }}
          >
            The design opportunity
          </div>
          <p
            style={{
              fontFamily: "var(--font-display)",
              fontStyle: "italic",
              fontSize: "clamp(20px,2.2vw,26px)",
              lineHeight: 1.35,
              color: "var(--page-fg)",
              margin: 0,
            }}
          >
            If we could provide this reassurance automatically to someone in the
            early stages, we could prevent this anxiety from spiralling into the
            exhaustion we saw in later stages.
          </p>
        </div>
        <LumaImg
          src="/luma-interviews.webp"
          alt="Interview notes and affinity mapping from three user research sessions"
          caption="Interviews conducted with patients in early and mid stage, caregivers and family members"
          zoomable
        />
      </LumaBody>
    </LumaSection>
  )
}

/* ---------- 06 — Sprint 2 ---------- */
function Sprint2Section() {
  return (
    <LumaSection id="sprint2" tone="card">
      <SectionHead
        num="05 — Sprint 2"
        eyebrow="The pivot to mobile"
        title="Designing for Robert."
      >
        <p className="lede" style={{ color: "#4a4a4a", margin: 0 }}>
          To address this anxiety effectively, we needed to look closely who we
          were designing for. We synthesized our research into a primary
          persona: Robert.
        </p>
      </SectionHead>
      <LumaBody>
        <LumaImg
          src="/luma-persona-robert.webp"
          alt="Persona board for Robert, 58, semi-retired accountant with early stage Alzheimer's"
          caption="The Persona"
          style={{ marginBottom: 32 }}
        />
        <LP>
          Robert is 58. He plays chess and mentors young professionals. He isn't
          "lost". He's embarrassed. He hides his memory lapses because he fears
          the stigma of the diagnosis.
        </LP>
        <div
          style={{
            fontFamily: "var(--font-mono)",
            fontSize: 11,
            fontWeight: "bolder",
            letterSpacing: "0.06em",
            textTransform: "uppercase",
            color: "var(--page-accent)",
            margin: "32px 0 14px",
          }}
        >
          The pivot: why we ditched hardware
        </div>
        <LP>
          We initially thought a dedicated smart home device was the answer. But
          talking to our target group and our research into the psychology of
          the disease revealed that stigma and denial are massive barriers.
        </LP>
        <LP>
          We found that many early stage patients are either unaware of their
          condition or too embarrassed to admit it. Introducing a strange, new
          medical device into Robert's home would only amplify his anxiety.
        </LP>
        <LP style={{ marginBottom: 12 }}>
          Hence, we decided that a mobile app was the most viable entry point.
          Robert already trusts his phone. It's his lifeline to the world. By
          integrating our solution into a device he already uses, we could offer
          help without making him feel like a patient.
        </LP>
        <LumaImg
          src="/luma-wireframes.webp"
          alt="Hand-drawn wireframe sketches for Smart Call feature"
          caption="Initial wireframe sketches illustrating the Smart Call flow"
        />
      </LumaBody>
    </LumaSection>
  )
}

/* ---------- 07 — Sprint 3 ---------- */
function Sprint3Section() {
  return (
    <LumaSection id="sprint3">
      <SectionHead
        num="06 — Sprint 3"
        eyebrow="Logic meets empathy"
        title="A transcript isn't enough."
      >
        <p className="lede" style={{ color: "#4a4a4a", margin: 0 }}>
          The above findings led to the Smart Call feature. The concept was
          simple: allow Robert to "remember" a conversation without having to
          ask for it again.
        </p>
      </SectionHead>
      <LumaBody>
        <LP>
          But a simple transcript isn't enough. I designed the system to use
          Emotion AI to analyse the context of the call.
        </LP>
        <LumaSplitCards
          items={[
            {
              k: "The Logic",
              t: "The system automatically identifies and pulls out tasks (Pick up dry cleaning) and appointments (Dinner at 6 PM).",
            },
            {
              k: "The Empathy",
              t: "The AI learns from tone. If it detects that Robert had a stressful call, it adapts its voice to be calmer and more supportive when referencing that info later.",
            },
          ]}
        />
        <LumaImg
          src="/luma-smartcall-flowchart.webp"
          alt="Smart Call system flowchart showing call routing, AI analysis, and summary delivery"
          caption="Smart Call feature logic, from call detection to categorised summary delivery"
          style={{ marginTop: 32 }}
        />
        <div
          style={{
            marginTop: 28,
          }}
        >
          It was built with a privacy first mindset. Robert can disable the
          feature for any call with a single tap. He is in control, not the AI.
        </div>
      </LumaBody>
    </LumaSection>
  )
}

/* ---------- 08 — Testing / Validation ---------- */
function TestingSection() {
  return (
    <LumaSection id="testing" tone="card">
      <SectionHead
        num="07 — Validation"
        eyebrow="Does it work?"
        title="Tested with caregivers and clinicians."
      />
      <LumaBody>
        <LP>
          As part of Sprint 3, we showed the high fidelity prototype for Smart
          Calls to primary caregivers and healthcare professionals to see if the
          logic held up.
        </LP>
        <LP>
          The feedback was very positive. Participants confirmed that simply
          being able to see what was discussed gave them a sense of security.
          One user noted that the friendly, nonjudgmental nature of the
          assistant reduced their fear of making mistakes. Most importantly, a
          dementia specialist told us that reducing this specific type of stress
          helps "normalise" the disease.
        </LP>
        <blockquote
          style={{
            margin: "0 0 32px",
            padding: "0 0 0 28px",
            borderLeft: "2px solid var(--page-accent)",
          }}
        >
          <p
            style={{
              fontFamily: "var(--font-display)",
              fontStyle: "italic",
              fontSize: "clamp(22px,2.6vw,32px)",
              lineHeight: 1.3,
              color: "var(--page-fg)",
              margin: 0,
            }}
          >
            It transforms Alzheimer's from a clinical prison into a manageable
            lifestyle challenge.
          </p>
          <div
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              fontWeight: "bolder",
              letterSpacing: "0.06em",
              textTransform: "uppercase",
              color: "var(--page-muted)",
              marginTop: 16,
            }}
          >
            A dementia specialist
          </div>
        </blockquote>
        <LumaVideo
          src="https://www.youtube.com/embed/PoDWC_Lj1ls?si=iUeQSaB09XOrOVWI"
          caption="High fidelity Smart Call prototype walkthrough"
        />
        <LumaImg
          src="/luma-smartcall-screens.webp"
          alt="Four iPhone screens showing the Smart Call feature: incoming call notification, live call transcription, lock screen summary, and Call Summary view"
          caption="Screens illustrating the Smart Call feature"
          style={{ marginTop: 24 }}
          zoomable
        />
      </LumaBody>
    </LumaSection>
  )
}

/* ---------- 09 — Reflections ---------- */
function ReflectionsSection() {
  return (
    <LumaSection id="reflections">
      <SectionHead
        num="08 — Reflections"
        eyebrow="Final reflections"
        title="The best technology sits quietly in the background."
      />
      <LumaBody>
        <LP>
          Designing for healthcare often feels like a race to add more sensors
          and more tracking. But this project highlighted for us that the best
          technology is often the kind that sits quietly in the background. By
          pivoting away from complex hardware and focusing on the emotional
          friction of communication, we built something that didn't just solve a
          problem, it protected the dignity of the people using it. And for
          users like Robert, that dignity is everything.
        </LP>
      </LumaBody>
    </LumaSection>
  )
}

Object.assign(window, {
  LumaIntro,
  OverviewSection,
  // ContextSection,
  RoleSection,
  ProcessSection,
  Sprint1Section,
  Sprint2Section,
  Sprint3Section,
  TestingSection,
  ReflectionsSection,
})