"use client"

import * as React from "react"
import { Globe, Check, X, Microscope } from "lucide-react"

interface ComparisonSide {
  title: string
  items: string[]
}

interface ComparisonStripData {
  left: ComparisonSide
  right: ComparisonSide
}

export function IQComparisonStrip({ data }: { data: ComparisonStripData }) {
  return (
    <section className="bg-[#0A0D14] py-11">
      <div className="max-w-[1280px] mx-auto px-7">
        <div
          className="grid gap-px bg-white/8 border border-white/8 rounded-[10px] overflow-hidden"
          style={{ gridTemplateColumns: "1fr 1fr" }}
        >
          {/* Left — Aggregators (dark #0A0D14) */}
          <div className="bg-[#0A0D14] p-[26px_28px]">
            <div className="text-[11px] font-bold tracking-[.1em] uppercase text-white/35 mb-[14px] flex items-center gap-2">
              <Globe className="size-4" />
              {data.left.title}
            </div>
            <div className="flex flex-col gap-[11px]">
              {data.left.items.map((item, i) => (
                <div key={i} className="flex gap-2.5 text-[13.5px] text-white/55 leading-[1.5]">
                  <X className="size-4 text-[#C0564A] mt-0.5 shrink-0" />
                  {item}
                </div>
              ))}
            </div>
          </div>

          {/* Right — Meticulous DataOne (navy #0D2B55 with dot pattern) */}
          <div className="bg-[#0D2B55] p-[26px_28px] relative overflow-hidden">
            {/* Dot pattern */}
            <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(255,255,255,.05)_1px,transparent_1px)] bg-[size:20px_20px]" />
            <div className="relative">
              <div className="text-[11px] font-bold tracking-[.1em] uppercase text-accent-gold mb-[14px] flex items-center gap-2">
                <Microscope className="size-4" />
                {data.right.title}
              </div>
              <div className="flex flex-col gap-[11px]">
                {data.right.items.map((item, i) => (
                  <div key={i} className="flex gap-2.5 text-[13.5px] text-white leading-[1.5]">
                    <Check className="size-4 text-[#7FD0A3] mt-0.5 shrink-0" />
                    {item}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}