import type { ReactNode } from 'react';
import { Check, X } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';

export type DistributionDurabilityOption = {
  title: string;
  subtitle: string;
  price: string;
  life: string;
  realCost: string;
  tone: string;
  points: string[];
};

export const defaultOptions: DistributionDurabilityOption[] = [
  {
    title: 'Revêtement acrylique standard',
    subtitle: 'Prix bas à la pose',
    price: '~10 €',
    life: '2-5 ans',
    realCost: '25-30 €',
    tone: 'muted',
    points: ['Réflectivité qui baisse vite', 'Farinage et jaunissement', 'Réapplication plus fréquente'],
  },
  {
    title: 'Système polyuréthane Covalba',
    subtitle: 'Performance pensée dans la durée',
    price: '18-20 €',
    life: '8-10 ans',
    realCost: '18-20 €',
    tone: 'covalba',
    points: ['Résine polyuréthane durable', 'Vernis de finition anti-UV', 'Réflectivité conservée plus longtemps'],
  },
];

const defaultTitre = (
  <>
    Le moins cher <span className="text-foreground">coûte plus cher</span> sur une grande toiture.
  </>
);

type DistributionValueDurabilityProps = {
  badge?: string;
  titre?: ReactNode;
  intro?: string;
  options?: DistributionDurabilityOption[];
  note?: string;
};

const DistributionValueDurability = ({
  badge = 'Durabilité',
  titre = defaultTitre,
  intro = 'Le prix au m² ne suffit pas. Sur un magasin, il faut compter la durée de vie, la réflectivité conservée et le risque de repasser trop tôt.',
  options = defaultOptions,
  note = "Covalba compare les technologies, pas les marques : une résine polyuréthane bien protégée tient mieux sa performance qu'un revêtement acrylique d'entrée de gamme.",
}: DistributionValueDurabilityProps = {}) => (
  <section className="relative overflow-hidden bg-[#F6FAFB] py-16 lg:py-28">
    <div className="container mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="mx-auto mb-12 max-w-2xl text-center lg:mb-16">
          <p className="mb-5 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/55">
            {badge}
          </p>
          <h2
            className="mb-5 font-satoshi font-bold text-foreground/35 !leading-[1.05]"
            style={{ fontSize: 'clamp(2rem, 3.2vw, 2.85rem)', letterSpacing: '-0.03em' }}
          >
            {titre}
          </h2>
          <p className="font-body text-base leading-relaxed text-foreground/62 lg:text-[17px]">
            {intro}
          </p>
        </div>
      </ScrollReveal>

      <ScrollReveal>
        <div className="mx-auto grid max-w-5xl grid-cols-1 items-stretch gap-5 lg:grid-cols-2 lg:gap-0">
          {options.map((option) => {
            const isCovalba = option.tone === 'covalba';
            return (
              <article
                key={option.title}
                className={`relative rounded-2xl px-7 py-9 shadow-[0_20px_60px_rgba(26,42,58,0.08)] lg:px-10 lg:py-12 ${
                  isCovalba
                    ? 'z-10 bg-foreground text-white lg:-ml-5 lg:scale-[1.03]'
                    : 'bg-white text-foreground lg:scale-[0.97] lg:opacity-90'
                }`}
              >
                {isCovalba && (
                  <span className="absolute -top-4 left-1/2 inline-flex -translate-x-1/2 items-center rounded-full bg-teal-vivid px-4 py-2 font-body text-[11px] font-bold uppercase tracking-[0.15em] text-white">
                    Le choix durable
                  </span>
                )}
                <h3 className="mb-2 font-satoshi text-2xl font-bold leading-tight lg:text-[1.7rem]">
                  {option.title}
                </h3>
                <p className={`mb-8 font-body text-sm ${isCovalba ? 'text-white/52' : 'text-foreground/50'}`}>
                  {option.subtitle}
                </p>

                <div className="mb-8 grid grid-cols-3 gap-4">
                  <div>
                    <p className={`mb-1 font-body text-[10px] uppercase tracking-widest ${isCovalba ? 'text-white/42' : 'text-foreground/38'}`}>
                      Prix au m²
                    </p>
                    <p className="font-satoshi text-2xl font-bold leading-none lg:text-3xl">{option.price}</p>
                  </div>
                  <div>
                    <p className={`mb-1 font-body text-[10px] uppercase tracking-widest ${isCovalba ? 'text-white/42' : 'text-foreground/38'}`}>
                      Tenue
                    </p>
                    <p className={`font-satoshi text-2xl font-bold leading-none lg:text-3xl ${isCovalba ? 'text-white/72' : 'text-foreground/50'}`}>
                      {option.life}
                    </p>
                  </div>
                  <div>
                    <p className={`mb-1 font-body text-[10px] uppercase tracking-widest ${isCovalba ? 'text-white/42' : 'text-foreground/38'}`}>
                      10 ans
                    </p>
                    <p className={`font-satoshi text-2xl font-bold leading-none lg:text-3xl ${isCovalba ? 'text-teal-vivid' : 'text-terracotta'}`}>
                      {option.realCost}
                    </p>
                  </div>
                </div>

                <ul className="space-y-3 border-t border-current/10 pt-7">
                  {option.points.map((point) => {
                    const Icon = isCovalba ? Check : X;
                    return (
                      <li key={point} className="flex items-start gap-2.5">
                        <Icon
                          className={`mt-0.5 h-4 w-4 shrink-0 ${isCovalba ? 'text-teal-vivid' : 'text-terracotta/70'}`}
                          strokeWidth={isCovalba ? 2 : 1.6}
                        />
                        <span className={`font-body text-sm leading-relaxed ${isCovalba ? 'text-white/70' : 'text-foreground/60'}`}>
                          {point}
                        </span>
                      </li>
                    );
                  })}
                </ul>
              </article>
            );
          })}
        </div>
      </ScrollReveal>

      <ScrollReveal>
        <p className="mx-auto mt-10 max-w-3xl text-center font-body text-sm leading-relaxed text-foreground/55 lg:text-[15px]">
          {note}
        </p>
      </ScrollReveal>
    </div>
  </section>
);

export default DistributionValueDurability;