// Mobile-first page; the same markup maps to React Native via NativeWind (View/Text/Pressable).
import { Check } from "lucide-react";
import { cn } from "@/lib/utils";

const slides = [
  { title: "Every sale, stock and udhaar in one book", body: "Record sales, send payment links and see who owes you — even offline." },
  { title: "Get paid faster", body: "Share a UPI link with every bill. We remind customers so you don’t have to." },
  { title: "Know what to reorder", body: "Low-stock alerts tell you what’s running out before the weekend rush." },
];
const bars = [38, 52, 44, 60, 48, 70, 92];

export default function WelcomeScreen({ step = 0 }: { step?: number }) {
  const slide = slides[step];
  return (
    <main className="mx-auto flex min-h-dvh max-w-md flex-col bg-bg px-4 pb-6 font-sans text-fg">
      <header className="flex h-14 items-center justify-between">
        <span className="flex items-center gap-2 text-[15px] font-semibold">
          <span className="grid size-7 place-items-center rounded-sm bg-primary text-[13px] font-bold text-primary-fg">B</span>
          Bahi
        </span>
        <button type="button" className="-mr-2.5 h-11 rounded px-3 text-sm font-medium text-fg-muted hover:bg-surface-2">Skip</button>
      </header>

      {/* Illustration: a sales card and a payment chip on a brand wash */}
      <div aria-hidden className="relative min-h-52 flex-1 overflow-hidden rounded-xl bg-primary-soft">
        <div className="absolute left-4 top-4 w-44 rounded-lg bg-bg p-3 shadow-lg">
          <p className="text-xs text-fg-muted">Today’s sales</p>
          <p className="mt-0.5 text-[22px] font-semibold tracking-tight tabular-nums">₹18,450</p>
          <p className="text-[11.5px] font-medium text-success-fg">↑ 12% vs Wednesday</p>
          <div className="mt-2.5 flex h-7 items-end gap-1">
            {bars.map((h, i) => (
              <span key={i} className={cn("flex-1 rounded-[3px]", i === bars.length - 1 ? "bg-primary" : "bg-primary opacity-25")} style={{ height: h + "%" }} />
            ))}
          </div>
        </div>
        <div className="absolute bottom-3.5 right-3 flex items-center gap-2 rounded-full bg-bg py-2 pl-2 pr-3 text-[11.5px] shadow-lg">
          <span className="grid size-7 place-items-center rounded-full bg-success text-bg"><Check className="size-3.5" /></span>
          <span className="leading-tight"><b className="block text-[12.5px] font-semibold tabular-nums">₹640 received</b><span className="text-fg-muted">UPI · Ravi General Store</span></span>
        </div>
      </div>

      <h1 className="mt-5 text-[22px] font-semibold leading-7 tracking-tight">{slide.title}</h1>
      <p className="mt-2 text-sm text-fg-muted">{slide.body}</p>

      <div className="my-4 flex gap-1.5" role="img" aria-label={"Step " + (step + 1) + " of " + slides.length}>
        {slides.map((s, i) => (
          <i key={s.title} className={cn("h-1.5 rounded-full transition-all", i === step ? "w-5 bg-primary" : "w-1.5 bg-border-strong")} />
        ))}
      </div>

      <button type="button" className="h-12 w-full rounded bg-primary text-[15px] font-semibold text-primary-fg hover:bg-primary-hover">
        Get started
      </button>
      <button type="button" className="mt-1 h-11 w-full rounded text-sm font-medium hover:bg-surface-2">
        I already have an account
      </button>
      <p className="mt-1 text-center text-[11px] text-fg-subtle">By continuing you agree to our Terms.</p>
    </main>
  );
}