import { Phone, MessageCircle } from "lucide-react";
import { Reveal } from "./Reveal";

export function LiveTracking() {
  return (
    <section className="py-24 lg:py-32">
      <div className="container-airfis">
        <div className="grid lg:grid-cols-12 gap-10 items-center">
          <Reveal className="lg:col-span-5">
            <p className="eyebrow">Live updates</p>
            <h2 className="h-section mt-4 text-ink">Watch your service arrive, block by block.</h2>
            <p className="mt-5 text-ink-2 text-lg">
              Real-time update on every technician. Know exactly when your ride, tow, or mechanic is
              turning into your street.
            </p>

            <div className="mt-10 surface-card p-6">
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-full bg-primary/10 text-primary font-semibold flex items-center justify-center">
                  RK
                </div>
                <div className="flex-1">
                  <div className="font-medium text-ink">Rajesh K.</div>
                  <div className="text-sm text-ink-2">Senior Technician · 4.9 ★</div>
                </div>
                <button className="w-10 h-10 rounded-full bg-[#f3f3f3] text-[#0a0a12] flex items-center justify-center hover:bg-[#e4e4e7] transition-colors">
                  <Phone className="w-4 h-4" />
                </button>
                <button className="w-10 h-10 rounded-full bg-[#f3f3f3] text-[#0a0a12] flex items-center justify-center hover:bg-[#e4e4e7] transition-colors">
                  <MessageCircle className="w-4 h-4" />
                </button>
              </div>
              <div className="mt-6 grid grid-cols-3 gap-3">
                <Stat label="ETA" value="8 min" accent />
                <Stat label="Distance" value="1.2 km" />
                <Stat label="Status" value="En route" />
              </div>

              <div className="mt-6">
                <div className="h-1.5 bg-surface-2 rounded-full overflow-hidden">
                  <div className="h-full w-2/3 bg-primary rounded-full" />
                </div>
                <div className="mt-2 flex justify-between text-[11px] uppercase tracking-widest text-ink-2">
                  <span>Assigned</span>
                  <span>En route</span>
                  <span>Arrived</span>
                </div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={120} className="lg:col-span-7">
            <MapAnimation />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Stat({ label, value, accent }: { label: string; value: string; accent?: boolean }) {
  return (
    <div className="rounded-xl border border-hairline p-3">
      <div className="text-[10px] uppercase tracking-widest text-ink-2">{label}</div>
      <div className={`text-lg font-semibold mt-1 ${accent ? "text-primary" : "text-ink"}`}>
        {value}
      </div>
    </div>
  );
}

function MapAnimation() {
  return (
    <div className="relative aspect-[4/3] w-full rounded-[32px] border border-hairline bg-white overflow-hidden shadow-[0_40px_120px_-60px_rgba(0,0,0,0.35)]">
      <svg viewBox="0 0 800 600" className="w-full h-full">
        <defs>
          <linearGradient id="mapbg" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#fafafa" />
            <stop offset="100%" stopColor="#f2f2f4" />
          </linearGradient>
          <path
            id="route"
            d="M 60 500 Q 200 460 240 380 T 380 300 Q 460 260 500 180 T 700 100"
            fill="none"
          />
        </defs>

        <rect width="800" height="600" fill="url(#mapbg)" />

        {/* Grid roads */}
        <g stroke="#e7e7ea" strokeWidth="24" fill="none" strokeLinecap="round">
          <path d="M 40 120 L 780 100" />
          <path d="M 20 260 L 780 240" />
          <path d="M 40 400 L 780 380" />
          <path d="M 60 540 L 780 520" />
          <path d="M 140 40 L 160 580" />
          <path d="M 340 20 L 360 580" />
          <path d="M 560 40 L 580 580" />
        </g>
        <g stroke="#f6f6f8" strokeWidth="14" fill="none" strokeLinecap="round">
          <path d="M 40 120 L 780 100" />
          <path d="M 20 260 L 780 240" />
          <path d="M 40 400 L 780 380" />
          <path d="M 60 540 L 780 520" />
          <path d="M 140 40 L 160 580" />
          <path d="M 340 20 L 360 580" />
          <path d="M 560 40 L 580 580" />
        </g>

        {/* Buildings */}
        <g fill="#eeeef1">
          <rect x="200" y="150" width="70" height="70" rx="8" />
          <rect x="420" y="320" width="90" height="90" rx="8" />
          <rect x="620" y="180" width="80" height="60" rx="8" />
          <rect x="90" y="330" width="70" height="80" rx="8" />
        </g>

        {/* Route highlight */}
        <use
          href="#route"
          stroke="#FF4308"
          strokeWidth="4"
          strokeLinecap="round"
          strokeDasharray="10 8"
          style={{ animation: "route-dash 3s linear infinite" }}
        />

        {/* Destination pin */}
        <g transform="translate(700,100)">
          <circle r="18" fill="#FF4308" opacity="0.2">
            <animate attributeName="r" values="14;28;14" dur="2s" repeatCount="indefinite" />
            <animate
              attributeName="opacity"
              values="0.35;0;0.35"
              dur="2s"
              repeatCount="indefinite"
            />
          </circle>
          <circle r="8" fill="#FF4308" />
          <circle r="3" fill="white" />
        </g>

        {/* Moving car */}
        <g
          style={{
            offsetPath: "path('M 60 500 Q 200 460 240 380 T 380 300 Q 460 260 500 180 T 700 100')",
            offsetRotate: "auto",
            animation: "car-move 10s linear infinite",
          }}
        >
          <g transform="translate(-16,-10)">
            <rect x="0" y="0" width="32" height="20" rx="6" fill="#FF4308" />
            <rect x="6" y="4" width="20" height="6" rx="2" fill="#ffb59f" />
            <circle cx="8" cy="20" r="3" fill="#111" />
            <circle cx="24" cy="20" r="3" fill="#111" />
          </g>
        </g>
      </svg>

      <div className="absolute top-6 left-6 glass-card px-4 py-3">
        <div className="text-[10px] uppercase tracking-widest text-ink-2">Live Updates</div>
        <div className="text-sm font-semibold">Technician approaching</div>
      </div>
      <div className="absolute bottom-6 right-6 glass-card px-4 py-3">
        <div className="text-[10px] uppercase tracking-widest text-ink-2">Arriving</div>
        <div className="text-lg font-semibold text-primary">8 min</div>
      </div>
    </div>
  );
}