/* Loops — phone mockup components.
   Hand-drawn "Loops app" preview screens. Calm, low-detail, premium feel. */

const PhoneShell = ({ children, className = "", w = 300, h = 620 }) => (
  <div
    className={`device-shell relative rounded-[44px] p-2.5 ${className}`}
    style={{ width: w, height: h }}
  >
    {/* Inner screen */}
    <div className="relative h-full w-full overflow-hidden rounded-[34px] bg-base">
      {/* Notch */}
      <div className="absolute left-1/2 top-2 z-30 h-[22px] w-[88px] -translate-x-1/2 rounded-pill bg-ink/95"></div>
      {/* Status bar */}
      <div className="relative z-20 flex h-9 items-end justify-between px-6 pb-1 text-[11px] font-semibold text-ink/90 tnum">
        <span>9:41</span>
        <span className="flex items-center gap-1.5">
          <svg width="16" height="10" viewBox="0 0 16 10" aria-hidden="true"><path d="M1 8h2v1H1zM5 6h2v3H5zM9 4h2v5H9zM13 2h2v7h-2z" fill="currentColor"/></svg>
          <svg width="14" height="10" viewBox="0 0 14 10" aria-hidden="true"><path d="M7 9C3.5 9 1 6.5 1 4c2-2 4-3 6-3s4 1 6 3c0 2.5-2.5 5-6 5Zm0-2a1.7 1.7 0 1 0 0-3.4 1.7 1.7 0 0 0 0 3.4Z" fill="currentColor"/></svg>
          <span className="relative inline-block h-[10px] w-[22px] rounded-[3px] border border-ink/80">
            <span className="absolute inset-[1.5px] right-[5px] rounded-[1.5px] bg-ink/90"></span>
            <span className="absolute right-[-3px] top-[3px] h-[4px] w-[2px] rounded-[1px] bg-ink/80"></span>
          </span>
        </span>
      </div>
      <div className="relative z-10 h-[calc(100%-2.25rem)] overflow-hidden">{children}</div>
    </div>
  </div>
);

/* Reusable mini UI bits inside the phone */
const ScreenHeader = ({ title, subtitle }) => (
  <div className="px-5 pt-1 pb-3">
    <div className="text-[11px] font-semibold uppercase tracking-[0.12em] text-ink-2/80">{subtitle}</div>
    <div className="mt-1 text-[22px] font-semibold tracking-tight2 text-ink">{title}</div>
  </div>
);

const PillNav = ({ items, active = 0 }) => (
  <div className="mx-5 mb-4 flex gap-1 rounded-pill bg-soft p-1 border border-line">
    {items.map((it, i) => (
      <div key={i} className={`flex-1 rounded-pill px-3 py-1.5 text-center text-[11.5px] font-semibold ${i === active ? "bg-white text-ink shadow-soft" : "text-ink-2"}`}>{it}</div>
    ))}
  </div>
);

/* Screen 1 — Today (Daily commit) */
const ScreenToday = () => (
  <div className="flex h-full flex-col bg-gradient-to-b from-base to-soft">
    <ScreenHeader subtitle="Today · Tue 19" title="Good morning, Sam." />
    {/* Streak card */}
    <div className="mx-5 mb-4 flex items-center gap-3 rounded-card border border-line bg-white px-4 py-3 shadow-soft">
      <div className="flex h-9 w-9 items-center justify-center rounded-pill bg-brand-soft">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <path d="M12 3c2 4 5 5 5 9a5 5 0 1 1-10 0c0-2 1-3 2-4 1 2 2 2 3 1-1-2 0-4 0-6Z" fill="#4c52dd"/>
        </svg>
      </div>
      <div className="flex-1">
        <div className="text-[13px] font-semibold text-ink">14 day streak</div>
        <div className="text-[11.5px] text-ink-2">Building momentum</div>
      </div>
      <div className="text-[11px] font-semibold text-brand">+1</div>
    </div>

    {/* Daily commit card */}
    <div className="mx-5 mb-3 rounded-card border border-line bg-white p-4 shadow-card">
      <div className="mb-1.5 flex items-center justify-between">
        <span className="text-[10.5px] font-semibold uppercase tracking-[0.1em] text-brand-deep">Daily commit</span>
        <span className="text-[10.5px] text-ink-2">2 min</span>
      </div>
      <div className="text-[15px] font-semibold leading-snug text-ink tracking-tight2">
        Send the draft to Maya before lunch.
      </div>
      <div className="mt-2 flex items-center gap-1.5">
        <span className="rounded-pill bg-soft px-2 py-0.5 text-[10.5px] font-semibold text-ink-2">Career</span>
        <span className="rounded-pill bg-amber-soft px-2 py-0.5 text-[10.5px] font-semibold text-[#b96e10]">Promotion loop</span>
      </div>
      <div className="mt-3 flex gap-2">
        <button className="h-9 flex-1 rounded-pill bg-brand text-[12.5px] font-semibold text-white">I'll do it</button>
        <button className="h-9 rounded-pill border border-line bg-white px-3 text-[12.5px] font-semibold text-ink-2">Skip</button>
      </div>
    </div>

    {/* Loops mini list */}
    <div className="mx-5 mt-1">
      <div className="mb-2 flex items-center justify-between">
        <div className="text-[11px] font-semibold uppercase tracking-[0.1em] text-ink-2/80">Your loops</div>
        <div className="text-[11px] text-ink-3">4</div>
      </div>
      <div className="space-y-2">
        {[
          { dot: "#4c52dd", name: "Promotion", meta: "Day 14 of season" },
          { dot: "#fb9526", name: "Half-marathon", meta: "Day 22" },
          { dot: "#f53864", name: "Sleep before midnight", meta: "Day 9" },
        ].map((l, i) => (
          <div key={i} className="flex items-center gap-3 rounded-tile border border-line bg-white px-3 py-2.5">
            <span className="h-2 w-2 rounded-full" style={{ background: l.dot }}></span>
            <div className="flex-1">
              <div className="text-[12.5px] font-semibold text-ink">{l.name}</div>
              <div className="text-[10.5px] text-ink-2">{l.meta}</div>
            </div>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M9 6l6 6-6 6" stroke="#615678" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
        ))}
      </div>
    </div>

    {/* Bottom tab bar */}
    <div className="mt-auto px-3 pb-4 pt-3">
      <div className="flex items-center justify-around rounded-pill border border-line bg-white/90 px-2 py-2 shadow-soft backdrop-blur">
        {[
          { l: "Today", a: true, p: "M4 12l8-8 8 8M6 10v10h12V10" },
          { l: "Loops", p: "M6 12a6 6 0 1 1 12 0 6 6 0 0 1-12 0Z M4 12c0-2 2-4 4-4M20 12c0 2-2 4-4 4" },
          { l: "Coach", p: "M4 6h16v10H8l-4 4V6Z" },
          { l: "You", p: "M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 8a7 7 0 0 1 14 0" },
        ].map((t, i) => (
          <div key={i} className={`flex flex-col items-center gap-0.5 px-3 py-0.5 ${t.a ? "text-brand" : "text-ink-3"}`}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d={t.p} stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/></svg>
            <span className="text-[9.5px] font-semibold">{t.l}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
);

/* Screen 2 — Coach conversation */
const ScreenCoach = () => (
  <div className="flex h-full flex-col bg-base">
    <ScreenHeader subtitle="Coach" title="Let's check in." />
    <PillNav items={["Chat", "Notes", "Plan"]} active={0} />
    <div className="flex-1 space-y-3 overflow-hidden px-4">
      <div className="flex items-start gap-2.5">
        <div className="mt-0.5 flex h-7 w-7 items-center justify-center rounded-pill bg-brand text-white text-[11px] font-bold">L</div>
        <div className="max-w-[78%] rounded-[16px] rounded-tl-[6px] bg-white border border-line px-3.5 py-2.5 shadow-soft">
          <p className="text-[12.5px] leading-[1.5] text-ink">
            You've sent three drafts to Maya this month. The promotion loop is on track. How's the conversation with your manager feeling?
          </p>
        </div>
      </div>
      <div className="flex justify-end">
        <div className="max-w-[78%] rounded-[16px] rounded-tr-[6px] bg-brand px-3.5 py-2.5 text-white">
          <p className="text-[12.5px] leading-[1.5]">Honestly, anxious. I keep putting it off.</p>
        </div>
      </div>
      <div className="flex items-start gap-2.5">
        <div className="mt-0.5 flex h-7 w-7 items-center justify-center rounded-pill bg-brand text-white text-[11px] font-bold">L</div>
        <div className="max-w-[80%] rounded-[16px] rounded-tl-[6px] bg-white border border-line px-3.5 py-2.5 shadow-soft">
          <p className="text-[12.5px] leading-[1.5] text-ink">
            Noted. Last time you avoided a big conversation, what helped was scripting the first sentence. Want to draft it together — three minutes, then move on?
          </p>
        </div>
      </div>
      <div className="flex items-center gap-2">
        <button className="rounded-pill bg-soft border border-line px-3 py-1.5 text-[11.5px] font-semibold text-ink-2">Yes, let's draft</button>
        <button className="rounded-pill bg-soft border border-line px-3 py-1.5 text-[11.5px] font-semibold text-ink-2">Tomorrow</button>
      </div>
    </div>
    {/* Composer */}
    <div className="px-4 pb-5 pt-3">
      <div className="flex items-center gap-2 rounded-pill border border-line bg-white px-3 py-2 shadow-soft">
        <span className="text-[12.5px] text-ink-3 flex-1">Message your coach…</span>
        <span className="flex h-7 w-7 items-center justify-center rounded-pill bg-brand text-white">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12l14-7-7 14-2-5-5-2Z" fill="currentColor"/></svg>
        </span>
      </div>
    </div>
  </div>
);

/* Screen 3 — Artefacts (a working document) */
const ScreenArtefacts = () => (
  <div className="flex h-full flex-col bg-base">
    <ScreenHeader subtitle="Artefacts" title="Working document" />
    <div className="mx-5 mb-4 flex items-center gap-2">
      <span className="rounded-pill bg-brand-soft px-2.5 py-1 text-[10.5px] font-semibold text-brand-deep">Promotion · Season 2</span>
      <span className="text-[10.5px] text-ink-3">updated today</span>
    </div>
    <div className="mx-5 flex-1 rounded-card border border-line bg-white p-4 shadow-soft overflow-hidden">
      <div className="text-[11px] font-semibold uppercase tracking-[0.1em] text-ink-2/80">Goal</div>
      <div className="mt-1.5 text-[13px] font-medium leading-snug text-ink">Be ready for the staff engineer interview by end of Q3.</div>
      <div className="my-4 h-px w-full bg-line"></div>
      <div className="text-[11px] font-semibold uppercase tracking-[0.1em] text-ink-2/80">Daily action</div>
      <div className="mt-1.5 text-[12.5px] leading-snug text-ink-2">One deep work block before noon. Ship something small. Tell Maya.</div>
      <div className="my-4 h-px w-full bg-line"></div>
      <div className="text-[11px] font-semibold uppercase tracking-[0.1em] text-ink-2/80">Accountability</div>
      <div className="mt-2 flex items-center gap-2">
        <div className="flex h-7 w-7 items-center justify-center rounded-pill bg-amber text-white text-[10.5px] font-bold">M</div>
        <div className="text-[12px] text-ink">Maya · partner</div>
      </div>
      <div className="my-4 h-px w-full bg-line"></div>
      <div className="text-[11px] font-semibold uppercase tracking-[0.1em] text-ink-2/80">Recent wins</div>
      <ul className="mt-2 space-y-1.5">
        {["Shipped the draft RFC", "Asked for the project lead", "Talked to Priya about scope"].map((w, i) => (
          <li key={i} className="flex items-start gap-2 text-[12px] text-ink-2">
            <span className="mt-1.5 h-1.5 w-1.5 rounded-full bg-brand"></span>{w}
          </li>
        ))}
      </ul>
    </div>
    <div className="px-5 py-4 text-[10.5px] text-ink-3">Your coach reads this every day.</div>
  </div>
);

Object.assign(window, { PhoneShell, ScreenToday, ScreenCoach, ScreenArtefacts });