/* mocks.jsx — in-product UI mockups used in place of real screenshots:
   AppHome (Inbox/Home dashboard) for the demo phone, and three small
   step graphics for the How-it-works section. All brand-matched. */

/* ── Demo phone: Home / Inbox dashboard ──────────────────────────────── */
function AppHome() {
  const chats = [
    { initials: "AO", name: "Adunni O.", msg: "Perfect, please reserve it 🙏", time: "now", ai: true, unread: false },
    { initials: "KE", name: "Kelechi E.", msg: "How much for the size 42 sneakers?", time: "2m", ai: true, unread: false },
    { initials: "FB", name: "Funmi B.", msg: "Do you deliver to Ikeja today?", time: "8m", ai: true, unread: false },
    { initials: "TZ", name: "Tunde Z.", msg: "Wholesale order — needs your eye 👀", time: "14m", ai: false, unread: true },
    { initials: "NW", name: "Ngozi W.", msg: "Receipt received, thank you!", time: "26m", ai: true, unread: false },
  ];
  return (
    <div className="flex h-full flex-col bg-cream">
      {/* status bar */}
      <div className="flex items-center justify-between px-5 pt-3 text-[11px] font-semibold text-white/90">
        <span className="pt-1">9:41</span>
        <span className="flex items-center gap-1 pt-1">
          <svg width="16" height="11" viewBox="0 0 16 11" fill="currentColor" aria-hidden="true"><rect x="0" y="6" width="2.5" height="5" rx="1"/><rect x="4" y="4" width="2.5" height="7" rx="1"/><rect x="8" y="2" width="2.5" height="9" rx="1"/><rect x="12" y="0" width="2.5" height="11" rx="1"/></svg>
          <svg width="14" height="11" viewBox="0 0 14 11" fill="currentColor" aria-hidden="true"><path d="M7 2.2c2 0 3.8.8 5.1 2L11 5.6A5.6 5.6 0 0 0 7 4 5.6 5.6 0 0 0 3 5.6L1.9 4.2A7.3 7.3 0 0 1 7 2.2Z"/><path d="M7 6c1 0 1.9.4 2.6 1L7 9.6 4.4 7A3.7 3.7 0 0 1 7 6Z"/></svg>
          <svg width="22" height="11" viewBox="0 0 22 11" fill="none" aria-hidden="true"><rect x="0.5" y="0.5" width="18" height="10" rx="2.5" stroke="currentColor" opacity="0.5"/><rect x="2" y="2" width="14" height="7" rx="1.2" fill="currentColor"/><rect x="20" y="3.5" width="1.5" height="4" rx="0.75" fill="currentColor" opacity="0.5"/></svg>
        </span>
      </div>

      {/* emerald header with greeting + revenue */}
      <div className="relative overflow-hidden bg-brand-700 px-5 pb-6 pt-3 text-white">
        <div className="pointer-events-none absolute -right-16 -top-14 h-44 w-44 rounded-full border border-white/10" aria-hidden="true" />
        <div className="pointer-events-none absolute -right-6 -top-4 h-28 w-28 rounded-full border border-white/10" aria-hidden="true" />
        <div className="relative flex items-center justify-between">
          <div>
            <div className="text-[12px] text-white/70">Good morning,</div>
            <div className="font-display text-[19px] font-extrabold leading-tight">Bisi 👋</div>
          </div>
          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-500 font-display text-[14px] font-bold text-brand-900">BL</div>
        </div>

        {/* revenue card */}
        <div className="relative mt-4 rounded-3xl bg-white/10 p-4 ring-1 ring-white/15 backdrop-blur">
          <div className="flex items-center justify-between">
            <span className="text-[12px] font-medium text-white/75">Revenue today</span>
            <span className="flex items-center gap-1 rounded-full bg-amber-500/90 px-2 py-0.5 text-[10px] font-bold text-brand-900">▲ 18%</span>
          </div>
          <div className="mt-1 font-display text-[30px] font-extrabold leading-none">₦47,200</div>
          <div className="mt-3 flex items-end gap-1.5" aria-hidden="true">
            {[40, 55, 35, 70, 48, 88, 62].map((h, i) => (
              <div key={i} className="flex-1 rounded-t bg-gradient-to-t from-amber-500/40 to-amber-400" style={{ height: h * 0.42 + "px" }} />
            ))}
          </div>
        </div>

        {/* mini stats */}
        <div className="relative mt-3 grid grid-cols-2 gap-3">
          <div className="rounded-2xl bg-white/10 px-3 py-2.5 ring-1 ring-white/10">
            <div className="font-display text-[17px] font-extrabold">128</div>
            <div className="text-[10.5px] text-white/65">messages handled</div>
          </div>
          <div className="rounded-2xl bg-white/10 px-3 py-2.5 ring-1 ring-white/10">
            <div className="font-display text-[17px] font-extrabold text-amber-400">98%</div>
            <div className="text-[10.5px] text-white/65">handled by My PA</div>
          </div>
        </div>
      </div>

      {/* inbox list */}
      <div className="flex items-center justify-between px-5 pb-1 pt-3.5">
        <span className="font-display text-[14px] font-bold text-brand-900">Inbox</span>
        <span className="text-[11px] font-semibold text-brand-600">See all</span>
      </div>
      <div className="relative flex-1 overflow-hidden px-2.5">
        {chats.slice(0, 3).map((c, i) => (
          <div key={i} className="flex items-center gap-3 rounded-2xl px-2.5 py-2.5">
            <div className="relative flex-none">
              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-brand-100 font-display text-[13px] font-bold text-brand-700">{c.initials}</div>
              {c.unread && <span className="absolute -right-0.5 -top-0.5 h-3 w-3 rounded-full border-2 border-cream bg-amber-500" />}
            </div>
            <div className="min-w-0 flex-1">
              <div className="flex items-center justify-between gap-2">
                <span className="truncate text-[13.5px] font-semibold text-brand-900">{c.name}</span>
                <span className="flex-none text-[10.5px] text-brand-950/40">{c.time}</span>
              </div>
              <div className="flex items-center gap-1.5">
                <span className="truncate text-[12px] text-brand-950/55">{c.msg}</span>
              </div>
            </div>
            {c.ai
              ? <span className="flex flex-none items-center gap-1 whitespace-nowrap rounded-full bg-brand-50 px-2 py-0.5 text-[9.5px] font-bold uppercase tracking-wide text-brand-600">✓ AI</span>
              : <span className="flex-none whitespace-nowrap rounded-full bg-amber-500/15 px-2 py-0.5 text-[9.5px] font-bold uppercase tracking-wide text-amber-600">You</span>}
          </div>
        ))}
        {/* compose FAB — floats above the nav, clear of labels.
            (Was h-13/w-13 which aren't real Tailwind classes; the inline
            style was carrying it, plus shadow-amber doesn't exist.) */}
        <div
          className="absolute bottom-3 right-3 flex items-center justify-center rounded-full bg-amber-500 text-brand-900 ring-4 ring-cream"
          style={{ height: "48px", width: "48px", boxShadow: "0 14px 30px -8px rgba(245,158,11,0.55)" }}
        >
          <Icons.Pencil size={20} />
        </div>
      </div>

      {/* tab bar */}
      <div className="flex items-center justify-around border-t border-brand-700/8 bg-white px-2 pb-5 pt-2.5">
        {[[Icons.BarChart, "Home", true], [Icons.MessageCircle, "Inbox", false], [Icons.Users, "Customers", false]].map(([Ic, lbl, active], i) => (
          <div key={i} className={"flex flex-col items-center gap-0.5 text-[10px] font-semibold " + (active ? "text-brand-700" : "text-brand-950/35")}>
            <Ic size={20} />
            {lbl}
          </div>
        ))}
      </div>
    </div>
  );
}

/* ── How-it-works step graphics ──────────────────────────────────────── */
function StepConnect() {
  return (
    <div className="flex h-full flex-col justify-center gap-2.5 p-4">
      <div className="flex items-center gap-2.5 rounded-2xl bg-white/95 px-3.5 py-3 shadow-soft">
        <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-whatsapp/15 text-whatsapp"><Icons.MessageCircle size={18} /></span>
        <div className="flex-1">
          <div className="text-[10px] font-medium text-brand-950/45">WhatsApp Business number</div>
          <div className="font-display text-[14px] font-bold text-brand-900">+234 803 •• •• 21</div>
        </div>
      </div>
      <div className="flex items-center justify-between rounded-2xl bg-brand-600 px-3.5 py-2.5 text-white">
        <span className="flex items-center gap-2 whitespace-nowrap text-[12.5px] font-semibold"><Icons.BadgeCheck size={16} className="text-amber-400" /> Number verified</span>
        <span className="whitespace-nowrap rounded-full bg-white/15 px-2 py-0.5 text-[10px] font-bold">in 48s</span>
      </div>
    </div>
  );
}

function StepUpload() {
  return (
    <div className="flex h-full flex-col justify-center gap-2.5 p-4">
      <div className="flex flex-col items-center justify-center gap-1 rounded-2xl border-2 border-dashed border-white/25 bg-white/5 py-3.5 text-center">
        <Icons.Upload size={20} className="text-amber-400" />
        <span className="text-[11px] font-semibold text-white/80">Drag & drop your files</span>
      </div>
      <div className="flex gap-2">
        {[["menu.pdf", "PDF"], ["price-list.pdf", "PDF"]].map(([n, t], i) => (
          <div key={i} className="flex flex-1 items-center gap-2 rounded-xl bg-white/95 px-2.5 py-2 shadow-soft">
            <span className="flex h-7 w-7 items-center justify-center rounded-md bg-amber-500/15 text-[8px] font-extrabold text-amber-600">{t}</span>
            <span className="truncate text-[11px] font-semibold text-brand-900">{n}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function StepAssistant() {
  return (
    <div className="flex h-full flex-col justify-center gap-2 p-4">
      <div className="self-start rounded-2xl rounded-bl-md bg-white/95 px-3 py-2 text-[11.5px] text-brand-900 shadow-soft">
        How much be the gown? 👗
      </div>
      <div className="max-w-[88%] self-end rounded-2xl rounded-br-md bg-brand-600 px-3 py-2 text-[11.5px] text-white shadow-soft">
        <span className="mb-0.5 flex items-center gap-1 text-[9px] font-bold uppercase tracking-wide text-amber-400"><Icons.Sparkles size={10} /> My PA</span>
        Na ₦18,500 ma 🌿 E dey for stock. Make I reserve am?
      </div>
      <div className="flex items-center gap-1.5 self-end rounded-full bg-amber-500/90 px-2.5 py-1 text-[10px] font-bold text-brand-900">
        <Icons.Receipt size={12} /> Receipt sent
      </div>
    </div>
  );
}

Object.assign(window, { AppHome, StepConnect, StepUpload, StepAssistant });