"use client";

import type { ReactNode } from 'react';
import { ArrowRight, Check, X } from 'lucide-react';
import ScrollReveal from './ScrollReveal';
import { useLocale } from '@/components/blocks/localeContext';

const BEST_VALUE_LABEL: Record<string, string> = {
  fr: 'Le choix rentable',
  en: 'The cost-effective choice',
  es: 'La opción rentable',
};

interface PriceVSSectionProps {
  badge?: string;
  titre?: ReactNode;
  intro?: string;
  labelPrix?: string;
  labelDuree?: string;
  labelCout?: string;
  leftTitle?: string;
  leftSub?: string;
  leftPrix?: string;
  leftDuree?: string;
  leftCout?: string;
  leftPoints?: string[];
  rightTitle?: string;
  rightSub?: string;
  rightPrix?: string;
  rightDuree?: string;
  rightCout?: string;
  rightPoints?: string[];
  conclusion?: string;
  ctaLabel?: string;
  ctaHref?: string;
}

const PriceVSSection = ({
  badge = 'Concurrence',
  titre,
  intro = "Le vrai prix d'un cool roof se mesure dans la durée. Avec Covalba, rafraîchissez votre bâtiment avec les peintures réflectives les plus rentables sur 10 ans.",
  labelPrix = 'Prix au m²',
  labelDuree = 'Durée de vie',
  labelCout = 'Coût réel sur 10 ans',
  leftTitle = 'Résine acrylique standard',
  leftSub = 'Résine utilisée par 90% des concurrents',
  leftPrix = '~10 €',
  leftDuree = '3-5 ans',
  leftCout = '25-30 €',
  leftPoints = ['Jaunit en 2-3 ans', 'Perd 30-50% de réflectivité', 'Ré-application nécessaire'],
  rightTitle = 'Résine polyuréthane Covalba',
  rightSub = 'Résine protectrice réfléchissante durable',
  rightPrix = '18-20 €',
  rightDuree = '8-10 ans',
  rightCout = '18-20 €',
  rightPoints = ['Maintient ses performances dans le temps', 'Vernis anti-UV 20 ans (CovaTherm 20)', 'SRI 118 après vieillissement, record européen'],
  conclusion = 'Le prix au m² ne veut rien dire sans la durée de vie.',
  ctaLabel = 'Estimer mon budget',
  ctaHref = '/estimation',
}: PriceVSSectionProps = {}) => {
  const locale = useLocale();
  return (
  <section className="bg-[#F6FAFB] py-16 lg:py-32">
    <div className="container mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="text-center mb-14 lg:mb-20 max-w-2xl mx-auto">
          <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/50 font-body mb-6">
            {badge}
          </p>
          <h2
            className="font-satoshi text-3xl sm:text-4xl lg:text-[3rem] font-black text-foreground/30 !leading-[1.05] mb-5"
            style={{ letterSpacing: '-0.03em' }}
          >
            {titre ?? (<>La solution <span className="text-foreground">la plus économique</span> sur 10 ans.</>)}
          </h2>
          <p className="text-foreground/60 text-base lg:text-lg font-body leading-relaxed">
            {intro}
          </p>
        </div>
      </ScrollReveal>

      {/* VS Cards */}
      <ScrollReveal>
        <div className="relative flex flex-col lg:flex-row max-w-5xl mx-auto items-center mt-6 lg:mt-0 lg:py-10">

          {/* Left : Acrylique */}
          <div className="relative flex-1 w-full bg-white rounded-2xl py-10 lg:py-14 px-8 lg:px-12 lg:scale-[0.96] lg:origin-right lg:opacity-90 shadow-[0_4px_20px_rgba(26,42,58,0.06)]">
            <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(ellipse_60%_50%_at_30%_30%,_rgba(210,90,30,0.04)_0%,_transparent_70%)] pointer-events-none rounded-2xl" />
            <div className="relative">
              <h3 className="font-satoshi text-2xl lg:text-3xl font-black text-foreground mb-2" style={{ letterSpacing: '-0.02em' }}>
                {leftTitle}
              </h3>
              <p className="text-foreground/50 text-sm font-body mb-10">{leftSub}</p>

              <div className="space-y-6 mb-8">
                <div>
                  <p className="text-foreground/40 text-xs uppercase tracking-widest font-body mb-1">{labelPrix}</p>
                  <p className="font-satoshi font-black text-foreground leading-none" style={{ fontSize: 'clamp(2rem, 3.5vw, 2.75rem)', letterSpacing: '-0.04em' }}>{leftPrix}</p>
                </div>
                <div>
                  <p className="text-foreground/40 text-[10px] uppercase tracking-widest font-body mb-1">{labelDuree}</p>
                  <p className="font-satoshi font-black text-foreground/50 leading-none" style={{ fontSize: 'clamp(2rem, 3.5vw, 2.75rem)', letterSpacing: '-0.04em' }}>{leftDuree}</p>
                </div>
              </div>
              <div className="border-t border-foreground/10 pt-8 mb-10">
                <p className="text-foreground/40 text-xs uppercase tracking-widest font-body mb-1">{labelCout}</p>
                <p className="font-satoshi font-black text-terracotta leading-none" style={{ fontSize: 'clamp(2.5rem, 5vw, 3.5rem)', letterSpacing: '-0.04em' }}>{leftCout}<span className="text-xl text-terracotta/50">/m²</span></p>
              </div>

              <div className="space-y-3">
                {leftPoints.map((d) => (
                  <div key={d} className="flex items-start gap-2.5">
                    <X className="w-4 h-4 text-terracotta/60 flex-shrink-0 mt-0.5" strokeWidth={1.5} />
                    <p className="text-foreground/60 text-sm font-body">{d}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Right : Polyuréthane Covalba */}
          <div className="relative flex-1 w-full bg-foreground rounded-2xl lg:-ml-6 py-14 lg:py-20 px-8 lg:px-12 mt-8 lg:mt-0 shadow-[-15px_0px_40px_rgba(26,42,58,0.12),_0_20px_60px_rgba(26,42,58,0.18)] z-10">
            {/* Label "Le choix rentable" */}
            <div className="absolute -top-4 left-1/2 -translate-x-1/2">
              <span className="inline-flex items-center gap-1.5 bg-teal-vivid text-white text-[11px] font-bold font-body uppercase tracking-[0.15em] px-4 py-2 rounded-full whitespace-nowrap">
                {BEST_VALUE_LABEL[locale]}
              </span>
            </div>
            <div className="absolute top-0 right-0 w-full h-full bg-[radial-gradient(ellipse_60%_50%_at_70%_30%,_rgba(32,150,140,0.08)_0%,_transparent_70%)] pointer-events-none rounded-2xl" />
            <div className="relative">
              <div className="flex items-center gap-3 mb-2">
              </div>
              <h3 className="font-satoshi text-2xl lg:text-3xl font-black text-white mb-2" style={{ letterSpacing: '-0.02em' }}>
                {rightTitle}
              </h3>
              <p className="text-white/50 text-sm font-body mb-10">{rightSub}</p>

              <div className="space-y-6 mb-8">
                <div>
                  <p className="text-white/50 text-xs uppercase tracking-widest font-body mb-1">{labelPrix}</p>
                  <p className="font-satoshi font-black text-white leading-none" style={{ fontSize: 'clamp(2rem, 3.5vw, 2.75rem)', letterSpacing: '-0.04em' }}>{rightPrix}</p>
                </div>
                <div>
                  <p className="text-white/35 text-[10px] uppercase tracking-widest font-body mb-1">{labelDuree}</p>
                  <p className="font-satoshi font-black text-white/60 leading-none" style={{ fontSize: 'clamp(2rem, 3.5vw, 2.75rem)', letterSpacing: '-0.04em' }}>{rightDuree}</p>
                </div>
              </div>
              <div className="border-t border-white/10 pt-8 mb-10">
                <p className="text-white/50 text-xs uppercase tracking-widest font-body mb-1">{labelCout}</p>
                <p className="font-satoshi font-black text-teal-vivid leading-none" style={{ fontSize: 'clamp(2.5rem, 5vw, 3.5rem)', letterSpacing: '-0.04em' }}>{rightCout}<span className="text-xl text-teal-vivid/50">/m²</span></p>
              </div>

              <div className="space-y-3">
                {rightPoints.map((d) => (
                  <div key={d} className="flex items-start gap-2.5">
                    <Check className="w-4 h-4 text-primary flex-shrink-0 mt-0.5" strokeWidth={2} />
                    <p className="text-white/70 text-sm font-body">{d}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>

        </div>
      </ScrollReveal>

      {/* Conclusion */}
      <ScrollReveal>
        <div className="max-w-5xl mx-auto mt-8 flex flex-col sm:flex-row items-center justify-between gap-6">
          <p className="text-foreground/40 text-[15px] font-body italic text-center sm:text-left">
            {conclusion}
          </p>
          <a
            href={ctaHref}
            className="group relative inline-flex items-center gap-3 border-2 border-[#991437] text-[#991437] rounded-full font-semibold pl-6 pr-2 py-2 hover:bg-[#991437]/5"
          >
            <span className="text-[15px]">{ctaLabel}</span>
            <span className="flex items-center justify-center w-8 h-8 rounded-full bg-[#991437]/15 transition-transform duration-700 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:translate-x-0.5 group-hover:scale-105">
              <ArrowRight className="w-4 h-4" />
            </span>
          </a>
        </div>
      </ScrollReveal>
    </div>
  </section>
  );
};

export default PriceVSSection;