// ─────────────────────────────────────────────────────────────
// Corda · Tasks access — "A Tuesday with Jazmyn"
// Cover + journey map. Wide artboards (not phone-shaped).
// Persona: Jazmyn Chen, 29 — granddaughter & primary coordinator
// for Nana (78) and Papa (82). Works full-time, phone-first.
// Threads the two places her tasks are born:
//   · quick mental notes on the go
//   · things said during / after a doctor visit
// ─────────────────────────────────────────────────────────────

// Task-origin color key — reused across the journey + access sections
const TJ_ORIGINS = {
  capture: { label: 'Mental note on the go', dot: 'var(--sage-deep)', soft: 'var(--sage-tint)', ink: 'var(--sage-ink)' },
  visit:   { label: 'From a visit',           dot: 'oklch(0.52 0.085 320)', soft: 'var(--plum-soft)', ink: 'oklch(0.36 0.07 320)' },
  system:  { label: 'Corda reminded her',     dot: 'oklch(0.66 0.10 75)', soft: 'var(--amber-soft)', ink: 'oklch(0.40 0.08 65)' },
};

// Small reusable label
const TJEyebrow = ({ children, color = 'var(--ink-3)', style }) => (
  <div style={{
    fontSize: 12, fontWeight: 600, color, textTransform: 'uppercase',
    letterSpacing: 1, whiteSpace: 'nowrap', ...style,
  }}>{children}</div>
);

// Patient chip (self-contained so the journey doesn't depend on screen scope)
const TJChip = ({ id, size = 22 }) => {
  const p = CAL_PATIENTS[id];
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%', background: p.grad, flexShrink: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: size * 0.36, fontWeight: 600, color: p.deep, letterSpacing: '-0.02em',
    }}>{p.initials}</div>
  );
};

const TJOriginTag = ({ kind }) => {
  const o = TJ_ORIGINS[kind];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px 4px 8px', borderRadius: 999,
      background: o.soft, fontSize: 11.5, fontWeight: 600, color: o.ink, letterSpacing: 0.1,
    }}>
      <span style={{ width: 7, height: 7, borderRadius: '50%', background: o.dot }} />
      {o.label}
    </span>
  );
};

// ─────────────────────────────────────────────────────────────
// COVER
// ─────────────────────────────────────────────────────────────
function TJCover() {
  return (
    <div className="w-app" style={{
      width: 940, height: 720, background: 'var(--bg)', boxSizing: 'border-box',
      padding: '56px 60px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      fontFamily: 'var(--font-sans)',
    }}>
      <div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
            <Logomark size={38} />
            <span style={{ fontWeight: 600, fontSize: 30, letterSpacing: '-0.04em', color: 'var(--ink)' }}>corda</span>
          </div>
          <TJEyebrow color="var(--sage-deep)">Product · Tasks access</TJEyebrow>
        </div>

        <div style={{
          marginTop: 56, fontFamily: 'var(--font-serif)', fontStyle: 'italic',
          fontSize: 76, lineHeight: 0.98, letterSpacing: '-0.03em', color: 'var(--ink)',
        }}>
          How does a<br/>caregiver reach<br/>their tasks?
        </div>

        <div style={{ marginTop: 26, fontSize: 18, color: 'var(--ink-2)', maxWidth: 600, lineHeight: 1.6 }}>
          Before we put Tasks in the navigation, we follow one person through one day — to learn
          <em style={{ fontFamily: 'var(--font-serif)' }}> when </em>
          tasks appear, <em style={{ fontFamily: 'var(--font-serif)' }}>where</em> she is when they do, and
          what kind of moment each one really is.
        </div>
      </div>

      {/* persona strip */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 22, padding: '22px 24px',
        background: 'var(--surface)', borderRadius: 22, border: '0.5px solid var(--hairline)',
        boxShadow: 'var(--sh-1)',
      }}>
        <div style={{
          width: 64, height: 64, borderRadius: '50%', flexShrink: 0,
          background: 'linear-gradient(135deg, oklch(0.80 0.07 30), oklch(0.66 0.10 28))',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em',
        }}>JC</div>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
            <span style={{ fontSize: 21, fontWeight: 600, color: 'var(--ink)', letterSpacing: '-0.01em' }}>Jazmyn Chen</span>
            <span style={{ fontSize: 14, color: 'var(--ink-3)' }}>· 29 · brand designer</span>
          </div>
          <div style={{ fontSize: 14.5, color: 'var(--ink-2)', marginTop: 4, lineHeight: 1.5, maxWidth: 560 }}>
            Granddaughter and primary coordinator for Nana &amp; Papa. Parents overseas, so she's the one who shows up.
            Runs her whole life from her phone between meetings.
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '6px 12px 6px 6px', borderRadius: 999, background: 'var(--sage-tint)' }}>
            <TJChip id="nana" size={26} />
            <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--sage-deep)' }}>Nana · 78</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '6px 12px 6px 6px', borderRadius: 999, background: 'var(--amber-soft)' }}>
            <TJChip id="papa" size={26} />
            <span style={{ fontSize: 12.5, fontWeight: 600, color: 'oklch(0.42 0.10 65)' }}>Papa · 82</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// JOURNEY MAP — five moments across one day
// ─────────────────────────────────────────────────────────────
const TJ_MOMENTS = [
  {
    time: '7:10 AM', place: 'Kitchen, before work', icon: 'sun', load: 1,
    title: 'Morning triage',
    thought: 'What\u2019s today — and did Papa\u2019s BP log ever go out?',
    job: 'See the whole day at a glance, both grandparents, and catch anything overdue before she leaves.',
    origin: null,
    where: 'Glance', whereNote: 'A compact "needs you today" read on the home screen.',
    pat: ['nana', 'papa'],
  },
  {
    time: '10:18 AM', place: 'Waiting room → exam, with Nana', icon: 'stethoscope', load: 3,
    title: 'During the visit',
    thought: 'Dr. Patel just said move the MRI referral and re-eval in September. Don\u2019t lose that.',
    job: 'Capture follow-ups the instant they\u2019re said — without leaving the visit she\u2019s taking notes in.',
    origin: 'visit',
    where: 'Capture · in context', whereNote: 'An "+ add task" right inside the visit, pre-linked to Nana & Dr. Patel.',
    pat: ['nana'],
  },
  {
    time: '3:25 PM', place: 'Walking back to her desk', icon: 'phone', load: 2,
    title: 'After a call',
    thought: 'Pharmacy says the refill isn\u2019t ready till Friday. Call back then.',
    job: 'A five-second, one-handed "don\u2019t forget" — then straight back to work.',
    origin: 'capture',
    where: 'Capture · from anywhere', whereNote: 'A global quick-add she can reach without hunting for a screen.',
    pat: ['nana'],
  },
  {
    time: '2:02 PM', place: 'Mid-meeting, phone face-up', icon: 'bell', load: 2,
    title: 'A reactive ping',
    thought: 'Papa\u2019s labs are ready for pickup. Not now — tonight.',
    job: 'Glance, act or snooze in one tap, and get back to the meeting.',
    origin: 'system',
    where: 'Glance · notification', whereNote: 'Actionable from the lock screen; lands in the same task list.',
    pat: ['papa'],
  },
  {
    time: '8:50 PM', place: 'On the couch, winding down', icon: 'moon', load: 1,
    title: 'Evening planning',
    thought: 'What got done, what\u2019s still open, what does tomorrow look like?',
    job: 'Deliberate triage across both grandparents — tick things off, reschedule, set up tomorrow.',
    origin: null,
    where: 'Triage · the home', whereNote: 'A real place that holds everything open, sliceable by person.',
    pat: ['nana', 'papa'],
  },
];

// little stress meter (1–3)
const TJLoad = ({ n }) => (
  <div style={{ display: 'flex', alignItems: 'flex-end', gap: 3, height: 14 }} title="Cognitive load">
    {[1, 2, 3].map(i => (
      <div key={i} style={{
        width: 4, height: 5 + i * 3, borderRadius: 1,
        background: i <= n ? (n >= 3 ? 'oklch(0.60 0.115 40)' : 'var(--sage)') : 'var(--hairline)',
      }} />
    ))}
  </div>
);

function TJMomentCard({ m, idx }) {
  return (
    <div style={{
      width: 300, flexShrink: 0, background: 'var(--surface)', borderRadius: 20,
      border: '0.5px solid var(--hairline)', boxShadow: 'var(--sh-1)',
      padding: '22px 22px 24px', display: 'flex', flexDirection: 'column',
      minHeight: 560,
    }}>
      {/* head */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{
          width: 40, height: 40, borderRadius: 12, background: 'var(--sage-tint)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name={m.icon} size={20} color="var(--sage-deep)" />
        </div>
        <TJLoad n={m.load} />
      </div>

      <div style={{ marginTop: 16, fontSize: 13, fontWeight: 600, color: 'var(--sage-deep)', letterSpacing: 0.2, fontVariantNumeric: 'tabular-nums' }}>
        {m.time}
      </div>
      <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 27, letterSpacing: '-0.02em', color: 'var(--ink)', lineHeight: 1.05, marginTop: 3 }}>
        {m.title}
      </div>
      <div style={{ fontSize: 12.5, color: 'var(--ink-3)', marginTop: 6, display: 'flex', alignItems: 'center', gap: 6 }}>
        <Icon name="pin" size={12} color="var(--ink-4)" />{m.place}
      </div>

      {/* thought */}
      <div style={{
        marginTop: 18, padding: '14px 16px', background: 'var(--surface-2)', borderRadius: 14,
        borderLeft: '2px solid var(--sage)',
      }}>
        <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 17, lineHeight: 1.45, color: 'var(--ink)' }}>
          &ldquo;{m.thought}&rdquo;
        </div>
        <div style={{ display: 'flex', gap: 4, marginTop: 10 }}>
          {m.pat.map(id => <TJChip key={id} id={id} size={18} />)}
        </div>
      </div>

      {/* job */}
      <div style={{ marginTop: 18 }}>
        <TJEyebrow style={{ fontSize: 10.5, marginBottom: 7 }}>The task job</TJEyebrow>
        <div style={{ fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>{m.job}</div>
      </div>

      {m.origin && (
        <div style={{ marginTop: 14 }}>
          <TJOriginTag kind={m.origin} />
        </div>
      )}

      {/* spacer pushes the "where" footer to the bottom */}
      <div style={{ flex: 1, minHeight: 14 }} />

      {/* where it should live */}
      <div style={{ paddingTop: 16, borderTop: '0.5px solid var(--hairline-soft)' }}>
        <TJEyebrow style={{ fontSize: 10.5, marginBottom: 7, color: 'var(--ink-4)' }}>Wants to live in</TJEyebrow>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Icon name="arrow" size={15} color="var(--sage-deep)" />
          <span style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--ink)' }}>{m.where}</span>
        </div>
        <div style={{ fontSize: 12.5, color: 'var(--ink-3)', marginTop: 6, lineHeight: 1.45 }}>{m.whereNote}</div>
      </div>
    </div>
  );
}

function TJJourney() {
  return (
    <div className="w-app" style={{
      width: 1788, height: 1040, background: 'var(--bg)', boxSizing: 'border-box',
      padding: '52px 56px', fontFamily: 'var(--font-sans)',
      display: 'flex', flexDirection: 'column',
    }}>
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 8 }}>
        <div>
          <TJEyebrow color="var(--sage-deep)">The user journey · one day</TJEyebrow>
          <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 52, letterSpacing: '-0.025em', color: 'var(--ink)', marginTop: 8, lineHeight: 1 }}>
            A Tuesday with Jazmyn
          </div>
          <div style={{ fontSize: 16, color: 'var(--ink-2)', marginTop: 12, maxWidth: 720, lineHeight: 1.55 }}>
            Five moments where a task is born or acted on. Notice each one is a different
            <em style={{ fontFamily: 'var(--font-serif)' }}> kind</em> of moment — that's what the access pattern has to serve.
          </div>
        </div>
        {/* origin key */}
        <div style={{ flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 8, padding: '14px 18px', background: 'var(--surface)', borderRadius: 16, border: '0.5px solid var(--hairline)' }}>
          <TJEyebrow style={{ fontSize: 10.5 }}>Where tasks come from</TJEyebrow>
          {Object.entries(TJ_ORIGINS).map(([k, o]) => (
            <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--ink-2)', whiteSpace: 'nowrap' }}>
              <span style={{ width: 9, height: 9, borderRadius: '50%', background: o.dot }} />{o.label}
            </div>
          ))}
        </div>
      </div>

      {/* moment columns */}
      <div style={{ display: 'flex', gap: 24, marginTop: 26 }}>
        {TJ_MOMENTS.map((m, i) => <TJMomentCard key={i} m={m} idx={i} />)}
      </div>

      {/* synthesis strip */}
      <div style={{ flex: 1 }} />
      <div style={{
        marginTop: 28, padding: '26px 30px', background: 'var(--ink)', borderRadius: 22,
        display: 'flex', alignItems: 'stretch', gap: 30,
      }}>
        <div style={{ width: 230, flexShrink: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <TJEyebrow color="rgba(244,241,234,0.55)">What the day tells us</TJEyebrow>
          <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 28, color: 'var(--bg)', lineHeight: 1.08, marginTop: 8 }}>
            Tasks have two jobs.
          </div>
        </div>
        {[
          { n: '01', t: 'Capture is everywhere & instant', d: 'Three of five moments are capture — mid-visit, on a call, reacting to a ping. They happen wherever she is. Capture can\u2019t require navigating to a screen.', tag: 'capture' },
          { n: '02', t: 'Triage is deliberate & whole', d: 'Morning and evening she wants one place that holds everything open across both grandparents — to tick off, reschedule, plan. That\u2019s a destination, not a pop-up.', tag: null },
          { n: '03', t: 'No single door fits both', d: 'A tab serves triage but is a poor capture path. An inline strip gives a glance but neither. The answer is layered — a home plus capture that travels with her.', tag: null },
        ].map(c => (
          <div key={c.n} style={{ flex: 1, borderLeft: '0.5px solid rgba(244,241,234,0.16)', paddingLeft: 24, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--sage)', letterSpacing: 1 }}>{c.n}</div>
            <div style={{ fontSize: 17, fontWeight: 600, color: 'var(--bg)', marginTop: 8, letterSpacing: '-0.01em' }}>{c.t}</div>
            <div style={{ fontSize: 13.5, color: 'rgba(244,241,234,0.72)', marginTop: 7, lineHeight: 1.55 }}>{c.d}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  TJ_ORIGINS, TJEyebrow, TJChip, TJOriginTag, TJCover, TJJourney,
});