"use client";

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

// En-têtes de colonnes concurrentes abrégés (mobile), jamais fournis par WP.
const MOBILE_COLS: Record<string, string[]> = {
  fr: ['Clim', 'Membrane', 'Réfection'],
  en: ['AC', 'Membrane', 'Re-roof'],
  es: ['Clima', 'Membrana', 'Rehacer'],
};

const defaultFeatures = [
  { label: 'Réduit la température intérieure', covalba: true, clim: true, membrane: true, refection: true },
  { label: 'Réduit la facture énergétique', covalba: true, clim: false, membrane: true, refection: true },
  { label: "Sans interruption d'activité", covalba: true, clim: false, membrane: false, refection: false },
  { label: "Protège l'étanchéité existante", covalba: true, clim: false, membrane: false, refection: false },
  { label: 'Sans charges récurrentes', covalba: true, clim: false, membrane: true, refection: true },
  { label: 'Rentabilisé en moins de 2 ans', covalba: true, clim: false, membrane: false, refection: false },
  { label: 'Compatible bâtiments anciens', covalba: true, clim: false, membrane: true, refection: true },
  { label: 'Aucune machine sur le toit', covalba: true, clim: false, membrane: false, refection: false },
  { label: 'Éligible primes CEE', covalba: true, clim: false, membrane: false, refection: false },
];

const defaultPrix = ['18-25 €/m²', '80-150 €/m²', '80-100 €/m²', '150 €/m²'];

const CheckIcon = () => (
  <div className="w-6 h-6 rounded-full bg-primary/15 flex items-center justify-center">
    <Check className="w-3.5 h-3.5 text-primary" strokeWidth={2.5} />
  </div>
);

const XIcon = () => (
  <div className="w-6 h-6 rounded-full bg-terracotta/10 flex items-center justify-center">
    <X className="w-3.5 h-3.5 text-terracotta/60" strokeWidth={2} />
  </div>
);

interface PriceComparisonSectionProps {
  badge?: string;
  titre?: ReactNode;
  intro?: string;
  features?: { label: string; covalba: boolean; clim: boolean; membrane: boolean; refection: boolean }[];
  prix?: string[];
  colonnes?: string[];
  encartTitre?: string;
  encartTexte?: string;
  ctaLabel?: string;
  ctaHref?: string;
}

const PriceComparisonSection = ({
  badge = 'Investissement',
  titre,
  intro = "Refaire votre toiture, installer une clim industrielle : c'est possible, mais c'est long, lourd et cher. Le cool roof résout le problème maintenant.",
  features = defaultFeatures,
  prix = defaultPrix,
  colonnes = ['Climatisation', 'Membrane neuve', 'Réfection'],
  encartTitre = 'Et en plus, ça protège votre toiture.',
  encartTexte = "Le cool roof n'est pas qu'un bouclier thermique. En réfléchissant les UV et en réduisant les chocs thermiques, il allonge la durée de vie de votre étanchéité de 10 ans. Vous réglez la surchauffe aujourd'hui ET vous décalez la réfection de votre toiture. Deux problèmes réglés, un seul investissement.",
  ctaLabel = 'Estimer',
  ctaHref = '/estimation',
}: PriceComparisonSectionProps = {}) => {
  const locale = useLocale();
  return (
    <section id="prix" className="bg-white py-16 lg:py-40">
      <div className="container mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <div className="text-center mb-14 lg:mb-20 max-w-3xl 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 !leading-[1.05] mb-5"
              style={{ letterSpacing: '-0.03em' }}
            >
              {titre ?? (<>Rentabilisé en 24 mois.<span className="text-foreground/30"> Performant pendant 10 ans.</span></>)}
            </h2>
            <p className="text-foreground/60 text-base lg:text-lg font-body leading-relaxed max-w-2xl mx-auto">
              {intro}
            </p>
          </div>
        </ScrollReveal>

        {/* Desktop table */}
        <ScrollReveal>
          <div className="hidden lg:block max-w-5xl mx-auto">
            {/* Column headers */}
            <div className="grid grid-cols-[1fr_140px_140px_140px_140px] gap-0 mb-0">
              <div />
              {/* Covalba header : elevated */}
              <div className="bg-foreground rounded-t-2xl px-4 pt-6 pb-4 text-center -mx-1 relative z-10 shadow-[0_-4px_20px_rgba(0,0,0,0.08)]">
                <img src="/logo-covalba.svg" alt="Covalba" className="h-4 mx-auto brightness-0 invert mb-2" />
                <p className="font-satoshi text-xl font-black text-teal-vivid leading-none">{prix[0]}</p>
              </div>
              {colonnes.map((name, i) => (
                <div key={name} className="px-3 pt-6 pb-4 text-center">
                  <p className="text-foreground/40 text-[11px] font-body font-medium mb-2">{name}</p>
                  <p className="font-satoshi text-sm font-bold text-terracotta">{prix[i + 1]}</p>
                </div>
              ))}
            </div>

            {/* Feature rows */}
            {features.map((f, i) => {
              const vals = [f.covalba, f.clim, f.membrane, f.refection];
              return (
                <div
                  key={f.label}
                  className={`grid grid-cols-[1fr_140px_140px_140px_140px] gap-0 ${
                    i % 2 === 0 ? 'bg-muted/30' : ''
                  }`}
                >
                  <div className="px-5 py-4 flex items-center">
                    <p className="text-foreground/80 text-sm font-body font-medium">{f.label}</p>
                  </div>
                  {vals.map((v, j) => (
                    <div
                      key={j}
                      className={`px-4 py-4 flex items-center justify-center ${
                        j === 0 ? 'bg-foreground -mx-1 relative z-10' : ''
                      }`}
                    >
                      {v ? (
                        j === 0 ? (
                          <div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center">
                            <Check className="w-3.5 h-3.5 text-white" strokeWidth={2.5} />
                          </div>
                        ) : (
                          <CheckIcon />
                        )
                      ) : (
                        j === 0 ? (
                          <X className="w-4 h-4 text-white/20" strokeWidth={1.5} />
                        ) : (
                          <XIcon />
                        )
                      )}
                    </div>
                  ))}
                </div>
              );
            })}

            {/* CTA row */}
            <div className="grid grid-cols-[1fr_140px_140px_140px_140px] gap-0">
              <div />
              <div className="bg-foreground rounded-b-2xl px-4 py-5 -mx-1 relative z-10 shadow-[0_4px_20px_rgba(0,0,0,0.08)] flex justify-center">
                <a
                  href={ctaHref}
                  className="group inline-flex items-center gap-2 cta-gradient text-white rounded-full font-semibold pl-6 pr-2 py-2 text-[13px]"
                >
                  {ctaLabel}
                  <span className="flex items-center justify-center w-8 h-8 rounded-full bg-white/20 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-3.5 h-3.5" />
                  </span>
                </a>
              </div>
              <div className="col-span-3" />
            </div>
          </div>
        </ScrollReveal>

        {/* Mobile : table scrollable */}
        <ScrollReveal>
          <div className="lg:hidden overflow-x-auto -mx-4 px-4">
            <div className="min-w-[560px]">
              {/* Headers */}
              <div className="grid grid-cols-[1fr_100px_100px_100px_100px] mb-0">
                <div />
                <div className="bg-foreground rounded-t-xl px-2 pt-4 pb-3 text-center -mx-0.5 relative z-10">
                  <img src="/logo-covalba.svg" alt="Covalba" className="h-3 mx-auto brightness-0 invert mb-1.5" />
                  <p className="font-satoshi text-sm font-black text-teal-vivid leading-none">{prix[0]}</p>
                </div>
                {MOBILE_COLS[locale].map((name, i) => (
                  <div key={name} className="px-2 pt-4 pb-3 text-center">
                    <p className="text-foreground/40 text-[10px] font-body font-medium mb-1">{name}</p>
                    <p className="font-satoshi text-xs font-bold text-terracotta">{prix[i + 1]}</p>
                  </div>
                ))}
              </div>
              {/* Rows */}
              {features.map((f, i) => {
                const vals = [f.covalba, f.clim, f.membrane, f.refection];
                return (
                  <div key={f.label} className={`grid grid-cols-[1fr_100px_100px_100px_100px] ${i % 2 === 0 ? 'bg-muted/30' : ''}`}>
                    <div className="px-3 py-3 flex items-center">
                      <p className="text-foreground/80 text-xs font-body font-medium">{f.label}</p>
                    </div>
                    {vals.map((v, j) => (
                      <div key={j} className={`px-2 py-3 flex items-center justify-center ${j === 0 ? 'bg-foreground -mx-0.5 relative z-10' : ''}`}>
                        {v ? (
                          j === 0 ? (
                            <div className="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center">
                              <Check className="w-3 h-3 text-white" strokeWidth={2.5} />
                            </div>
                          ) : <CheckIcon />
                        ) : (
                          j === 0 ? <X className="w-3.5 h-3.5 text-white/20" strokeWidth={1.5} /> : <XIcon />
                        )}
                      </div>
                    ))}
                  </div>
                );
              })}
              {/* CTA row */}
              <div className="grid grid-cols-[1fr_100px_100px_100px_100px]">
                <div />
                <div className="bg-foreground rounded-b-xl px-2 py-4 -mx-0.5 relative z-10 flex justify-center">
                  <a href={ctaHref} className="group inline-flex items-center gap-1.5 cta-gradient text-white rounded-full font-semibold pl-3 pr-1 py-1.5 text-[11px]">
                    {ctaLabel}
                    <span className="flex items-center justify-center w-5 h-5 rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5">
                      <ArrowRight className="w-2.5 h-2.5" />
                    </span>
                  </a>
                </div>
                <div className="col-span-3" />
              </div>
            </div>
          </div>
        </ScrollReveal>

        {/* Encart : protection toiture */}
        <ScrollReveal>
          <div className="mt-14 lg:mt-20 max-w-5xl mx-auto">
            <div className="relative rounded-2xl bg-[#F0F9F8] border border-primary/10 p-8 lg:p-10">
              <div className="flex flex-col lg:flex-row gap-6 lg:gap-10 items-start">
                <div className="w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center flex-shrink-0">
                  <Shield className="w-6 h-6 text-primary" strokeWidth={1.5} />
                </div>
                <div>
                  <h3 className="font-satoshi text-xl lg:text-2xl font-bold text-foreground mb-3">
                    {encartTitre}
                  </h3>
                  <p className="text-foreground/60 text-sm lg:text-base font-body leading-relaxed max-w-2xl">
                    {encartTexte}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
};

export default PriceComparisonSection;