import { ArrowRight, Check, Minus } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';

type CellValue = string | boolean | null;

interface SpecRow {
  label: string;
  value: CellValue;
}

const specs: SpecRow[] = [
  { label: 'Technology', value: 'Elastomeric acrylic resin\n+ anti-UV Top Coat finish' },
  { label: 'Substrates', value: 'Galvanized, painted or bare steel deck\n+ corrugated sheeting, zinc' },
  { label: 'Reflectivity index — SRI (as new)', value: '107' },
  { label: 'Coating system', value: 'Base Coat 400 to 800 g/m²\n+ Top Coat finish' },
  { label: 'Maintenance recoat due after', value: '20 years' },
  { label: 'Reinforced protection against soiling', value: true },
  { label: 'Reinforced waterproofing', value: true },
  { label: '3-in-1 cool roof effect', value: 'Included' },
];

const Cell = ({ value }: { value: CellValue }) => {
  if (value === true) {
    return (
      <div className="w-6 h-6 rounded-full flex items-center justify-center bg-white/15">
        <Check className="w-3.5 h-3.5 text-white" strokeWidth={2.5} />
      </div>
    );
  }
  if (value === false || value === null) {
    return <Minus className="w-4 h-4 text-white/25" strokeWidth={1.5} />;
  }
  return (
    <span className="text-sm leading-snug whitespace-pre-line font-body text-white">
      {value}
    </span>
  );
};

const CovaMetalSpecsEN = () => (
  <section className="py-16 lg:py-24 bg-white" id="specs">
    <div className="container mx-auto px-4 lg:px-8 max-w-3xl">
      <ScrollReveal>
        <div className="mb-8">
          <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/65 font-body mb-3">
            Technical characteristics
          </p>
          <h2
            className="font-satoshi text-3xl sm:text-4xl lg:text-5xl font-black text-foreground !leading-[1.05]"
            style={{ letterSpacing: '-0.03em' }}
          >
            The characteristics
            <br />
            <span className="text-foreground/45">of CovaMetal 20.</span>
          </h2>
          <p className="text-foreground/70 text-base font-body leading-relaxed mt-5 max-w-2xl">
            Anti-corrosion, reinforced waterproofing at critical points, cool roof
            reflectivity over two decades. CovaMetal 20 is designed for industrial and
            commercial steel deck roofs that owners want to keep rather than fully
            replace.
          </p>
        </div>
      </ScrollReveal>

      <ScrollReveal>
        {/* ─── Desktop : colonne CovaMetal 20 en élévation ─── */}
        <div className="hidden sm:block">
          {/* Header */}
          <div className="grid grid-cols-[3fr_2fr]">
            <div />
            <div className="bg-foreground rounded-t-2xl px-3 pt-5 pb-5 text-center relative z-10 shadow-[0_-6px_20px_rgba(0,0,0,0.06)]">
              <p className="text-[11px] font-semibold text-white/70 font-body uppercase tracking-[0.15em] mb-2">
                CovaMetal 20
              </p>
              <span className="inline-flex items-center bg-teal-vivid/20 text-teal-vivid text-[9px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full">
                3-in-1
              </span>
            </div>
          </div>

          {/* Rows */}
          {specs.map((s, i) => (
            <div
              key={i}
              className={`grid grid-cols-[3fr_2fr] items-stretch ${i % 2 === 0 ? 'bg-muted/40' : ''}`}
            >
              <div className="px-5 py-4 flex items-center">
                <span className="text-sm text-foreground/80 font-body font-medium">{s.label}</span>
              </div>
              <div className="px-4 py-4 flex items-center justify-center text-center bg-foreground relative z-10">
                <Cell value={s.value} />
              </div>
            </div>
          ))}

          {/* Footer CTA */}
          <div className="grid grid-cols-[3fr_2fr]">
            <div />
            <div className="bg-foreground rounded-b-2xl px-3 py-5 relative z-10 shadow-[0_6px_20px_rgba(0,0,0,0.06)] flex justify-center">
              <a
                href="/en"
                className="group inline-flex items-center gap-2 cta-gradient text-white rounded-full font-semibold pl-4 pr-1.5 py-1.5 text-[12px]"
              >
                Request a quote
                <span className="flex items-center justify-center w-7 h-7 rounded-full bg-white/20 transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:translate-x-0.5 group-hover:scale-105">
                  <ArrowRight className="w-3 h-3" />
                </span>
              </a>
            </div>
          </div>
        </div>

        {/* ─── Mobile : carte navy ─── */}
        <div className="sm:hidden">
          <div className="rounded-2xl bg-foreground overflow-hidden shadow-[0_20px_60px_-15px_rgba(26,42,58,0.3)]">
            <div className="px-5 py-4 text-center border-b border-white/10">
              <p className="text-[11px] font-semibold text-white/70 font-body uppercase tracking-[0.15em] mb-2">
                CovaMetal 20
              </p>
              <span className="inline-flex items-center bg-teal-vivid/20 text-teal-vivid text-[9px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full">
                3-in-1
              </span>
            </div>
            <div className="divide-y divide-white/10">
              {specs.map((s, i) => (
                <div key={i} className="px-5 py-3 flex items-start justify-between gap-4">
                  <span className="text-xs text-white/60 font-body font-medium flex-1 leading-snug">{s.label}</span>
                  <div className="text-right max-w-[55%]">
                    <Cell value={s.value} />
                  </div>
                </div>
              ))}
            </div>
            <div className="px-5 py-4 border-t border-white/10 flex justify-center">
              <a
                href="/en"
                className="group inline-flex items-center gap-2 cta-gradient text-white rounded-full font-semibold pl-4 pr-1.5 py-1.5 text-[12px]"
              >
                Request a quote
                <span className="flex items-center justify-center w-7 h-7 rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5">
                  <ArrowRight className="w-3 h-3" />
                </span>
              </a>
            </div>
          </div>
        </div>

        <p className="text-foreground/50 text-xs font-body mt-8 text-center sm:text-left">
          SRI measured per ASTM 1980 standard · 20-year manufacturer warranty · Covalba R&D data
        </p>
      </ScrollReveal>
    </div>
  </section>
);

export default CovaMetalSpecsEN;