import { MapPin, ArrowRight } from 'lucide-react';
import ScrollReveal from './ScrollReveal';
import type { ZoneData } from '@/data/zones';
import { zoneInPhrase, zoneInterventionPhrase } from '@/lib/zoneGeo';

interface ZoneInterventionSectionProps {
  zoneData: ZoneData;
  ville?: string;
  departement: string;
  region: string;
  villesProches: string[];
  villesCount: number;
  isDepartementPage: boolean;
}

const ZoneInterventionSection = ({
  zoneData,
  ville,
  departement,
  region,
  villesProches,
  villesCount,
  isDepartementPage,
}: ZoneInterventionSectionProps) => {
  const isRegion = zoneData.pageType === 'region';
  const interventionPhrase = zoneInterventionPhrase(zoneData);
  const inPhrase = zoneInPhrase(zoneData);

  return (
    <section className="relative bg-foreground py-16 lg:py-20 overflow-hidden">
      {/* Ambient blob */}
      <div className="absolute top-0 right-0 w-[60%] h-full bg-[radial-gradient(ellipse_80%_60%_at_85%_30%,_rgba(32,150,140,0.12)_0%,_transparent_65%)] pointer-events-none" />

      <div className="relative container mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">

            {/* Left — headline */}
            <div className="lg:max-w-xl">
              <div className="flex items-center gap-2.5 mb-5">
                <span className="relative flex h-2.5 w-2.5">
                  <span className="absolute inline-flex h-full w-full animate-pulse rounded-full bg-green-400 opacity-75" />
                  <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-green-400" />
                </span>
                <span className="text-white/60 text-xs font-body font-semibold uppercase tracking-wider">
                  Disponible
                </span>
              </div>

              <h2
                className="font-satoshi text-2xl sm:text-3xl lg:text-4xl font-black text-white !leading-[1.1]"
                style={{ letterSpacing: '-0.03em' }}
              >
                Covalba intervient
                <span className="text-white/40">
                  {` ${interventionPhrase}.`}
                </span>
              </h2>

              <div className="flex flex-wrap items-center gap-x-3 gap-y-1 mt-4">
                <div className="flex items-center gap-1.5 text-white/50 text-sm font-body">
                  <MapPin className="w-3.5 h-3.5 shrink-0" />
                  <span>{isRegion ? region : `${departement} · ${region}`}</span>
                </div>
                {isDepartementPage ? (
                  <span className="text-white/35 text-sm font-body">
                    · {villesCount} villes couvertes
                  </span>
                ) : (
                  villesProches.length > 0 && (
                    <span className="text-white/35 text-sm font-body">
                      · {villesProches.join(' · ')}
                    </span>
                  )
                )}
              </div>
            </div>

            {/* Right — CTA */}
            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3">
              <a
                href="/diagnostic"
                className="group inline-flex items-center gap-2 cta-gradient text-white font-semibold pl-6 pr-2 py-2 rounded-full"
              >
                <span className="text-sm">Estimer mon projet {inPhrase}</span>
                <span className="flex items-center justify-center w-8 h-8 rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5 group-hover:scale-105">
                  <ArrowRight className="w-3.5 h-3.5" />
                </span>
              </a>
              <a
                href="/estimation"
                className="text-white/50 hover:text-white/80 text-sm font-body font-semibold transition-colors"
              >
                Parler à un expert →
              </a>
            </div>

          </div>
        </ScrollReveal>
      </div>
    </section>
  );
};

export default ZoneInterventionSection;