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

type CellValue = string | boolean | null;

interface SpecRow {
  label: string;
  v8: CellValue;
  v20: CellValue;
}

const specs: SpecRow[] = [
  { label: 'Technology',                               v8: 'Polyurethane elastomer resin',        v20: 'Polyurethane elastomer resin\n+ Top Coat finish' },
  { label: 'SRI reflectivity index (when new)',        v8: '115',                                v20: '119' },
  { label: 'SRI after aging',                          v8: null,                                  v20: '118, among the best-performing' },
  { label: 'Coating system',                           v8: 'Primer\n+ Reflective base',           v20: 'Primer\n+ Base Coat\n+ Top Coat finish' },
  { label: 'Warranty',                                 v8: '8 years',                             v20: '20 years' },
  { label: 'Maintenance coat needed within',           v8: '8 to 10 years',                       v20: 'Up to 20 years' },
  { label: 'Anti-soiling protection',                  v8: false,                                 v20: true },
];

const Cell = ({ value, dark = false }: { value: CellValue; dark?: boolean }) => {
  if (value === true) {
    return (
      <div className={`w-6 h-6 rounded-full flex items-center justify-center ${dark ? 'bg-white/15' : 'bg-primary/15'}`}>
        <Check className={`w-3.5 h-3.5 ${dark ? 'text-white' : 'text-primary'}`} strokeWidth={2.5} />
      </div>
    );
  }
  if (value === false || value === null) {
    return <Minus className={`w-4 h-4 ${dark ? 'text-white/25' : 'text-foreground/30'}`} strokeWidth={1.5} />;
  }
  const isRecord = value.includes('among the best-performing');
  return (
    <span className={`text-sm leading-snug whitespace-pre-line font-body inline-flex items-start justify-center gap-1.5 ${dark ? 'text-white' : 'text-foreground/80'}`}>
      {isRecord && <Trophy className={`w-3.5 h-3.5 mt-0.5 shrink-0 ${dark ? 'text-teal-vivid' : 'text-primary'}`} strokeWidth={2} />}
      <span>{value}</span>
    </span>
  );
};

const TechnicalSpecsEN = () => (
  <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-12">
          <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' }}
          >
            CovaTherm 8 or 20?
            <br />
            <span className="text-foreground/45">The specifications</span>
          </h2>
          <p className="text-foreground/75 text-base lg:text-lg font-body leading-relaxed mt-6 max-w-2xl">
            Identical thermal performance at application. The difference is in longevity:{' '}
            <strong className="text-foreground">CovaTherm 8</strong> lasts 8 to 10 years,{' '}
            <strong className="text-foreground">CovaTherm 20</strong> stretches to 20 years thanks to its anti-UV Top Coat finish. Far ahead of the acrylic cool roof paints on the market, which last 2 to 5 years.
          </p>
        </div>
      </ScrollReveal>

      <ScrollReveal>
        {/* ─── Desktop: CovaTherm 20 column elevated ─── */}
        <div className="hidden sm:block">
          {/* Headers */}
          <div className="grid grid-cols-[2fr_1fr_1.1fr]">
            <div />
            <div className="px-3 pt-5 pb-4 text-center">
              <p className="text-[11px] font-semibold text-foreground/55 font-body uppercase tracking-[0.15em]">
                CovaTherm 8
              </p>
            </div>
            {/* CovaTherm 20 — elevated navy card */}
            <div className="bg-foreground rounded-t-2xl px-3 pt-5 pb-5 text-center -mx-1.5 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 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">
                Recommended
              </span>
            </div>
          </div>

          {/* Rows */}
          {specs.map((s, i) => (
            <div
              key={i}
              className={`grid grid-cols-[2fr_1fr_1.1fr] 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-3 py-4 flex items-center justify-center text-center">
                <Cell value={s.v8} />
              </div>
              <div className="px-3 py-4 flex items-center justify-center text-center bg-foreground -mx-1.5 relative z-10">
                <Cell value={s.v20} dark />
              </div>
            </div>
          ))}

          {/* Footer — close the elevated column with a CTA */}
          <div className="grid grid-cols-[2fr_1fr_1.1fr]">
            <div className="col-span-2" />
            <div className="bg-foreground rounded-b-2xl px-3 py-5 -mx-1.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: simplified layout, 2 stacked cards ─── */}
        <div className="sm:hidden space-y-6">
          {/* CovaTherm 8 card */}
          <div className="rounded-2xl border border-border bg-white overflow-hidden">
            <div className="bg-muted/40 px-5 py-3 text-center border-b border-border">
              <p className="text-[11px] font-semibold text-foreground/55 font-body uppercase tracking-[0.15em]">
                CovaTherm 8
              </p>
            </div>
            <div className="divide-y divide-border">
              {specs.map((s, i) => (
                <div key={i} className="px-5 py-3 flex items-start justify-between gap-4">
                  <span className="text-xs text-foreground/70 font-body font-medium flex-1 leading-snug">{s.label}</span>
                  <div className="text-right max-w-[55%]">
                    <Cell value={s.v8} />
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* CovaTherm 20 card — elevated navy */}
          <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 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">
                Recommended
              </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/70 font-body font-medium flex-1 leading-snug">{s.label}</span>
                  <div className="text-right max-w-[55%]">
                    <Cell value={s.v20} dark />
                  </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 · Accelerated QUV aging 4,000 h · Covalba R&D data
        </p>
      </ScrollReveal>
    </div>
  </section>
);

export default TechnicalSpecsEN;