import * as React from "react";
import { MapPin, Navigation, Star } from "lucide-react";

import { Typography } from "@/components/ui/typography";
import { cn } from "@/lib/utils";

/**
 * Stylised WASHY app screen inside a device frame — pure decoration (no real
 * asset, no localized copy beyond the brand wordmark + numeric figures, which
 * are illustrative). Used by the App Features and Download sections.
 */
export function PhoneMockup({ className }: { className?: string }) {
  return (
    <div
      className={cn(
        "relative w-[280px] max-w-full rounded-[42px] bg-main-text p-3 shadow-2xl ring-1 ring-white/10",
        className,
      )}
    >
      {/* side buttons */}
      <span className="absolute -end-1 top-24 h-14 w-1 rounded-full bg-main-text/80" />
      <span className="absolute -start-1 top-20 h-8 w-1 rounded-full bg-main-text/80" />
      <span className="absolute -start-1 top-32 h-8 w-1 rounded-full bg-main-text/80" />

      <div className="relative overflow-hidden rounded-[32px] bg-background">
        {/* notch */}
        <span className="absolute start-1/2 top-2 z-10 h-5 w-24 -translate-x-1/2 rounded-full bg-main-text rtl:translate-x-1/2" />

        {/* app top bar */}
        <div className="flex items-center justify-between px-4 pt-7 pb-3">
          <Typography
            as="span"
            variant="button"
            className="font-bold text-primary-blue"
          >
            WASHY
          </Typography>
          <span className="flex items-center gap-1.5">
            <span className="size-2 rounded-full bg-primary-sky-blue" />
            <span className="size-2 rounded-full bg-border" />
          </span>
        </div>

        {/* map area */}
        <div className="relative h-52 bg-gradient-to-br from-primary-sky-blue/25 to-primary-blue/15">
          <svg
            viewBox="0 0 260 208"
            className="absolute inset-0 h-full w-full"
            aria-hidden
          >
            <path
              d="M20 30h70v52h64v46h84"
              fill="none"
              className="stroke-white"
              strokeWidth="10"
              opacity="0.6"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              d="M40 176c40 0 40-70 90-70s60 40 90 40"
              fill="none"
              className="stroke-primary-blue"
              strokeWidth="4"
              strokeDasharray="2 10"
              strokeLinecap="round"
            />
          </svg>
          {/* pins */}
          <span className="absolute start-8 top-28 flex size-8 items-center justify-center rounded-full bg-primary-blue text-white shadow-lg">
            <MapPin className="size-4" />
          </span>
          <span className="absolute end-10 top-10 flex size-8 items-center justify-center rounded-full bg-primary-amber text-main-text shadow-lg">
            <Navigation className="size-4" />
          </span>
        </div>

        {/* booking card */}
        <div className="-mt-6 rounded-t-[24px] bg-card px-4 pt-4 pb-6 shadow-[0_-8px_24px_rgba(16,42,67,0.08)]">
          <span className="mx-auto mb-3 block h-1 w-10 rounded-full bg-border" />
          <div className="flex items-center gap-3">
            <span className="flex size-11 shrink-0 items-center justify-center rounded-full bg-accent">
              <span className="size-5 rounded-full bg-primary-blue" />
            </span>
            <div className="flex min-w-0 flex-1 flex-col gap-1.5">
              <span className="h-2.5 w-24 rounded-full bg-main-text/80" />
              <span className="h-2 w-16 rounded-full bg-border" />
            </div>
            <span className="flex items-center gap-1 rounded-full bg-accent px-2 py-1 text-primary-blue">
              <Star className="size-3 fill-primary-amber stroke-primary-amber" />
              <Typography
                as="span"
                variant="number"
                className="text-[11px] text-primary-blue"
              >
                4.9
              </Typography>
            </span>
          </div>

          <div className="mt-4 flex items-center gap-2">
            <span className="h-2 flex-1 rounded-full bg-background" />
            <span className="h-2 w-10 rounded-full bg-background" />
          </div>

          <div className="mt-4 flex h-11 items-center justify-center gap-2 rounded-[14px] bg-primary-blue text-white">
            <Navigation className="size-4" />
            <span className="h-2 w-20 rounded-full bg-white/70" />
          </div>
        </div>
      </div>
    </div>
  );
}