'use client';

/**
 * Hero Section — ShineCode
 *
 * Matches the reference mockup with full dark mode support:
 * - Left column: Pill badge -> Bold headline with brand-accent "on-demand." -> subheadline -> booking pill -> trust badges
 * - Right column: Dominant luxury vertical image + 2 stacked wingman cards + top rating pill + bottom info pills
 * - Fully unclipped z-50 stacking context for seamless dropdown overlay
 */

import React from 'react';
import { Sparkles, ShieldCheck, Home, Tag } from 'lucide-react';
import { PremiumBookingBar } from './PremiumBookingBar';
import { MasonryImageGrid } from './MasonryImageGrid';
import { HeroFluidBackground } from './HeroFluidBackground';
import type { Category, Service } from '@shinecode/api-client/types';

interface HeroProps {
  locale?: string;
  categories?: Category[];
  trendingServices?: Service[];
  allServices?: Service[];
}

const TRUST_BADGES = [
  {
    text: '100% Vetted Pros',
    icon: ShieldCheck,
  },
  {
    text: 'Ultimate Convenience',
    icon: Home,
  },
  {
    text: 'No Hidden Fees',
    icon: Tag,
  },
];

export function Hero({
  locale = 'en',
  categories = [],
  trendingServices = [],
  allServices = [],
}: HeroProps) {
  const isAr = locale === 'ar';

  return (
    <section className="relative min-h-[calc(100vh-4.5rem)] lg:min-h-[calc(100vh-5rem)] flex items-center bg-white dark:bg-zinc-950 border-b border-zinc-100 dark:border-zinc-900 py-10 lg:py-0 transition-colors duration-200 z-30 overflow-hidden">
      {/* ── Interactive Cursor-Reactive Fluid Brand Glow (-z-10 Layer) ── */}
      <HeroFluidBackground />

      {/* Background subtle grid texture */}
      <div className="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(to_right,#f8fafc_1px,transparent_1px),linear-gradient(to_bottom,#f8fafc_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#18181b_1px,transparent_1px),linear-gradient(to_bottom,#18181b_1px,transparent_1px)] bg-[size:56px_56px] [mask-image:radial-gradient(ellipse_80%_60%_at_20%_0%,#000_60%,transparent_100%)] overflow-hidden" />

      <div className="container mx-auto px-4 lg:px-8 relative z-40 w-full">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-6 items-center">
          {/* ════════════ LEFT COLUMN: Copy & Booking Engine (6 cols) ════════════ */}
          <div className="lg:col-span-6 xl:col-span-6 text-start relative z-50">
            {/* Top Pill */}
            <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full border border-zinc-200/80 dark:border-zinc-800 bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm text-zinc-700 dark:text-zinc-300 text-xs font-semibold tracking-wide mb-6 shadow-2xs">
              <Sparkles className="w-3.5 h-3.5 text-brand-500 shrink-0" />
              <span>
                {isAr
                  ? 'نخبة الخبراء المعتمدين في كافة أنحاء الإمارات'
                  : 'Top-rated professionals across the UAE'}
              </span>
            </div>

            {/* Headline */}
            <h1 className="text-4xl sm:text-5xl lg:text-6xl xl:text-[4.25rem] font-black text-zinc-950 dark:text-white tracking-tighter leading-[1.05] mb-6">
              {isAr ? (
                <>
                  خدمات التجميل<br />
                  والعناية الفاخرة، <span className="text-brand-500">حتى</span><br />
                  <span className="text-brand-500">باب منزلك.</span>
                </>
              ) : (
                <>
                  Premium beauty<br />
                  and wellness, <span className="text-brand-500">on-</span><br />
                  <span className="text-brand-500">demand.</span>
                </>
              )}
            </h1>

            {/* Subheadline */}
            <p className="text-base md:text-lg text-zinc-500 dark:text-zinc-400 font-normal leading-relaxed mb-8 max-w-lg">
              {isAr ? (
                <>
                  خبراء تجميل محترفون يصلون إلى باب منزلك في دقائق.<br className="hidden sm:inline" />
                  حجز فوري وأسعار شفافة بدون أي رسوم خفية.
                </>
              ) : (
                <>
                  Top-rated professionals delivered to your doorstep in minutes.<br className="hidden sm:inline" />
                  Real-time matching, transparent pricing.
                </>
              )}
            </p>

            {/* Booking Bar (Parent wrapper has z-50 to avoid any cutoff) */}
            <div className="mb-7 relative z-50 w-full max-w-xl lg:max-w-2xl">
              <PremiumBookingBar
                locale={locale}
                initialCity="Dubai"
                initialCategories={categories}
                initialTrendingServices={trendingServices}
                allServices={allServices}
              />
            </div>

            {/* Trust Badges */}
            <div className="flex flex-wrap items-center gap-x-6 gap-y-2 pt-4 border-t border-zinc-100 dark:border-zinc-800 max-w-xl">
              {TRUST_BADGES.map((badge) => {
                const Icon = badge.icon;
                return (
                  <div
                    key={badge.text}
                    className="flex items-center gap-1.5 text-xs font-bold text-zinc-700 dark:text-zinc-300"
                  >
                    <Icon className="w-4 h-4 text-emerald-500 shrink-0" />
                    <span>{badge.text}</span>
                  </div>
                );
              })}
            </div>
          </div>

          {/* ════════════ RIGHT COLUMN: Hero Image & Wingman Cards (6 cols) ════════════ */}
          <div className="lg:col-span-6 xl:col-span-6 relative lg:pl-6 z-20">
            <MasonryImageGrid />
          </div>
        </div>
      </div>
    </section>
  );
}

export default Hero;