'use client';

/**
 * Hero Visual & Wingman Cards Component
 *
 * Exact replication of the reference mockup layout:
 * - Dominant luxury manicure vertical card with rounded-[36px]
 * - Top floating glass pill with 3 avatars + "⭐ 4.9/5 from 10k+ clients"
 * - Left stacked wingman cards with top discount badge & PriceDisplay (new UAE Dirham symbol):
 *    1. "Facials & Treatments" + top "-25% OFF" + 240 AED (PriceDisplay)
 *    2. "Florile Skincents" + top "-25% OFF" + 180 AED (PriceDisplay)
 * - Bottom row of 2 dynamic pill badges:
 *    1. Pulsing green live indicator with randomized 19-25 available pros
 *    2. High-converting fast ETA badge: "Fastest ETA: Arriving in ~24 mins"
 */

import React, { useState } from 'react';
import { Star, CheckCircle2, Zap } from 'lucide-react';
import { PriceDisplay } from '../PriceDisplay';
import { ImageWithFallback } from '@/components/ui/ImageWithFallback';

/* ─── Images matching mockup with reliable local fallback ───────── */
// Dominant Hero Image: Luxury manicure with tortoiseshell / black nails
const HERO_IMAGE = 'https://images.unsplash.com/photo-1604654894610-df63bc536371?w=1000&auto=format&fit=crop&q=85';

// Wingman Card 1: Facial treatment mask with brush & headband
const FACIAL_IMAGE_1 = 'https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?w=600&auto=format&fit=crop&q=85';

// Wingman Card 2: Skincare facial application & massage (Florile Skincents)
const FACIAL_IMAGE_2 = 'https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=600&auto=format&fit=crop&q=85';

// 3 Avatars for Social Proof Pill
const AVATARS = [
  'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=120&auto=format&fit=crop&q=80',
  'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=120&auto=format&fit=crop&q=80',
  'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=120&auto=format&fit=crop&q=80',
];

export function MasonryImageGrid() {
  // Available pros count
  const [proCount] = useState(24);

  return (
    <div className="relative w-full max-w-[500px] mx-auto lg:ml-auto lg:mr-0 pt-6 pb-2">
      {/* ════════════ MAIN HERO CARD CONTAINER ════════════ */}
      <div className="relative">

        {/* ── 1. DOMINANT HERO VERTICAL IMAGE ── */}
        <div className="relative w-full h-[460px] sm:h-[500px] md:h-[530px] rounded-[36px] overflow-hidden border border-zinc-200/80 shadow-2xl bg-zinc-100 group">
          <ImageWithFallback
            src={HERO_IMAGE}
            fallbackSrc="/images/fallback-placeholder.svg"
            alt="Premium doorstep beauty service"
            fill
            priority
            className="object-cover object-center group-hover:scale-105 transition-transform duration-700 ease-out"
            sizes="(max-width: 768px) 100vw, 480px"
            unoptimized
          />
          {/* Subtle bottom vignette */}
          <div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent pointer-events-none" />
        </div>

        {/* ── 2. TOP FLOATING SOCIAL PROOF PILL ── */}
        <div className="absolute -top-4 right-8 sm:right-12 z-30">
          <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white/95 backdrop-blur-xl border border-white shadow-xl text-zinc-900 select-none">
            {/* 3 Overlapping Avatars */}
            <div className="flex -space-x-1.5 shrink-0">
              {AVATARS.map((src, i) => (
                <div
                  key={i}
                  className="relative w-5 h-5 rounded-full overflow-hidden border-2 border-white shadow-2xs"
                >
                  <ImageWithFallback
                    src={src}
                    fallbackSrc="/images/fallback-placeholder.svg"
                    alt="Client avatar"
                    fill
                    className="object-cover"
                    sizes="20px"
                    unoptimized
                  />
                </div>
              ))}
            </div>

            {/* Rating & Review Count */}
            <div className="flex items-center gap-1 text-xs font-bold text-zinc-900 whitespace-nowrap">
              <Star className="w-3.5 h-3.5 fill-amber-400 text-amber-500 shrink-0" />
              <span>4.9/5</span>
              <span className="text-zinc-400 font-normal text-[11px]">from 10k+ clients</span>
            </div>
          </div>
        </div>

        {/* ── 3. LEFT STACKED WINGMAN CARDS (Hanging off the LEFT border with Prices) ── */}
        <div className="absolute top-8 sm:top-10 -left-6 sm:-left-12 md:-left-16 z-20 flex flex-col gap-3.5 w-52 sm:w-60">
          
          {/* Card 1: Facials & Treatments */}
          <div className="p-2.5 sm:p-3 rounded-3xl bg-white/95 backdrop-blur-xl border border-white shadow-2xl text-start select-none transition-transform hover:scale-105 duration-300 group/w1">
            <div className="relative w-full h-24 sm:h-28 rounded-2xl overflow-hidden border border-zinc-100 shadow-2xs mb-2 bg-zinc-100">
              <ImageWithFallback
                src={FACIAL_IMAGE_1}
                fallbackSrc="/images/fallback-placeholder.svg"
                alt="Facials & Treatments"
                fill
                className="object-cover group-hover/w1:scale-105 transition-transform duration-500"
                sizes="240px"
                unoptimized
              />
              {/* Discount badge in the top */}
              <span className="absolute top-2 right-2 z-10 bg-brand-500 text-white text-[10px] font-black px-2 py-0.5 rounded-full shadow-md tracking-tight">
                -25% OFF
              </span>
            </div>
            <div className="flex items-center justify-between gap-1 px-1 py-0.5">
              <div className="flex items-center gap-1.5 min-w-0">
                <CheckCircle2 className="w-3.5 h-3.5 text-emerald-500 shrink-0" />
                <span className="text-xs font-bold text-zinc-900 truncate">
                  Facials &amp; Treatments
                </span>
              </div>
              <div className="flex items-baseline gap-1.5 shrink-0">
                <PriceDisplay
                  amount={320}
                  className="line-through text-[10px] text-zinc-400 font-medium"
                  iconClassName="w-[0.8em] h-[0.8em] mr-0.5 opacity-60 inline-block align-baseline"
                />
                <PriceDisplay
                  amount={240}
                  className="text-xs font-black text-brand-500"
                  iconClassName="w-[0.85em] h-[0.85em] mr-0.5 inline-block align-baseline"
                />
              </div>
            </div>
          </div>

          {/* Card 2: Florile Skincents */}
          <div className="p-2.5 sm:p-3 rounded-3xl bg-white/95 backdrop-blur-xl border border-white shadow-2xl text-start select-none transition-transform hover:scale-105 duration-300 group/w2">
            <div className="relative w-full h-24 sm:h-28 rounded-2xl overflow-hidden border border-zinc-100 shadow-2xs mb-2 bg-zinc-100">
              <ImageWithFallback
                src={FACIAL_IMAGE_2}
                fallbackSrc="/images/fallback-placeholder.svg"
                alt="Florile Skincents"
                fill
                className="object-cover group-hover/w2:scale-105 transition-transform duration-500"
                sizes="240px"
                unoptimized
              />
              {/* Discount badge in the top */}
              <span className="absolute top-2 right-2 z-10 bg-brand-500 text-white text-[10px] font-black px-2 py-0.5 rounded-full shadow-md tracking-tight">
                -25% OFF
              </span>
            </div>
            <div className="flex items-center justify-between gap-1 px-1 py-0.5">
              <div className="flex items-center gap-1.5 min-w-0">
                <CheckCircle2 className="w-3.5 h-3.5 text-emerald-500 shrink-0" />
                <span className="text-xs font-bold text-zinc-900 truncate">
                  Florile Skincents
                </span>
              </div>
              <div className="flex items-baseline gap-1.5 shrink-0">
                <PriceDisplay
                  amount={240}
                  className="line-through text-[10px] text-zinc-400 font-medium"
                  iconClassName="w-[0.8em] h-[0.8em] mr-0.5 opacity-60 inline-block align-baseline"
                />
                <PriceDisplay
                  amount={180}
                  className="text-xs font-black text-brand-500"
                  iconClassName="w-[0.85em] h-[0.85em] mr-0.5 inline-block align-baseline"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* ── 4. BOTTOM ROW OF 2 DYNAMIC PILLS ── */}
      <div className="mt-5 flex flex-wrap items-center justify-end gap-2.5 z-30 relative">
        {/* Pill 1: Live Pulse with Random 19-25 Pros Available */}
        <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white/95 backdrop-blur-md border border-zinc-200/90 shadow-md text-zinc-900 text-xs font-semibold select-none hover:shadow-lg transition-shadow">
          <span className="relative flex h-2 w-2 shrink-0">
            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
            <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500" />
          </span>
          <span>{proCount} Professionals available near you</span>
        </div>

        {/* Pill 2: Engaging Fast ETA Badge */}
        <div className="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full bg-white/95 backdrop-blur-md border border-zinc-200/90 shadow-md text-zinc-900 text-xs font-semibold select-none hover:shadow-lg transition-shadow">
          <Zap className="w-3.5 h-3.5 text-amber-500 fill-amber-400 shrink-0" />
          <span>Fastest ETA: Arriving in ~24 mins</span>
        </div>
      </div>
    </div>
  );
}