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: 'High-reflectivity acrylic resin' },
  {
    label: 'Substrates',
    value: 'Dome skylights, skylights,\nbarrel-vault rooflights\nin polycarbonate or polyester',
  },
  { label: 'UV rejection', value: 'Up to 98% of UV filtered' },
  { label: 'Solar energy rejected', value: '75%' },
  { label: 'Natural light preserved', value: 'Up to 65%' },
  { label: 'Coating system', value: '200 g/m²\n(1 to 2 coats)' },
  { label: 'Maintenance coat to plan within', value: '5 to 8 years\non a sound substrate' },
  { label: 'Enhanced protection against soiling', value: true },
];

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 CovaThermLightSpecsEN = () => (
  <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 specifications
          </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 specifications
            <br />
            <span className="text-foreground/45">of CovaTherm Light.</span>
          </h2>
          <p className="text-foreground/70 text-base font-body leading-relaxed mt-5 max-w-2xl">
            High solar-reflectivity acrylic resin, applied by roller or airless sprayer,
            preserving the translucency of the substrate. CovaTherm Light is designed
            specifically for translucent roof surfaces, where an opaque cool roof coating
            cannot be applied.
          </p>
        </div>
      </ScrollReveal>

      <ScrollReveal>
        <div className="hidden sm:block">
          <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">
                CovaTherm Light
              </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">
                Solar-control coating
              </span>
            </div>
          </div>

          {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>
          ))}

          <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>

        <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">
                CovaTherm Light
              </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">
                Solar-control coating
              </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">
          Performance measured on a polycarbonate substrate · Manufacturer warranty · Covalba R&D data
        </p>
      </ScrollReveal>
    </div>
  </section>
);

export default CovaThermLightSpecsEN;