import {
  BatteryCharging,
  CheckCircle2,
  Gauge,
  ShieldCheck,
  TimerReset,
  Zap,
} from "lucide-react";
import type { Scooter } from "@/lib/mock-data";

type ScooterSpecsProps = {
  scooter: Scooter;
};

const featureHighlights = [
  "Smart digital instrument cluster",
  "Keyless start with remote lock",
  "Reverse assist",
  "USB charging port",
  "LED headlamp and DRLs",
  "Comfortable footboard",
  "Low battery alert",
  "Regenerative braking support",
];

export function ScooterSpecs({ scooter }: ScooterSpecsProps) {
  const specs = [
    { label: "Battery Type", value: scooter.battery, icon: BatteryCharging },
    { label: "Motor Power", value: scooter.motorPower, icon: Zap },
    { label: "Range", value: `${scooter.rangeKm} km`, icon: Gauge },
    { label: "Top Speed", value: `${scooter.topSpeedKmph} km/h`, icon: Gauge },
    { label: "Charging Time", value: scooter.chargingTime, icon: TimerReset },
    { label: "Warranty", value: scooter.warranty, icon: ShieldCheck },
  ];

  return (
    <section id="product-information" className="bg-white py-6">
      <div className="container-custom">
        <div className="grid gap-5 lg:grid-cols-3">
          <article className="overflow-hidden rounded-3xl border border-primary/15 bg-gradient-to-br from-white via-white to-primary/[0.04] p-6 shadow-[0_12px_28px_rgba(10,45,88,0.12)]">
            <div className="h-1 w-24 rounded-full bg-gradient-to-r from-primary to-ev" />
            <h2 className="text-xl font-bold text-primary">Specifications</h2>
            <dl className="mt-5 grid gap-3">
              {specs.map((spec) => (
                <div
                  className="flex items-start justify-between gap-3 rounded-xl border border-primary/10 bg-white px-3 py-2.5"
                  key={spec.label}
                >
                  <dt className="flex items-center gap-2 text-sm font-semibold text-navy-muted">
                    <span className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-primary-soft text-primary">
                      <spec.icon className="h-4 w-4" />
                    </span>
                    {spec.label}
                  </dt>
                  <dd className="max-w-[56%] text-right text-sm font-extrabold text-navy-deep">{spec.value}</dd>
                </div>
              ))}
            </dl>
          </article>

          <article className="overflow-hidden rounded-3xl border border-ev/20 bg-gradient-to-br from-white via-white to-ev/[0.05] p-6 shadow-[0_12px_28px_rgba(10,45,88,0.12)]">
            <div className="h-1 w-24 rounded-full bg-gradient-to-r from-ev to-primary" />
            <h2 className="text-xl font-bold text-primary">Feature Highlights</h2>
            <ul className="mt-5 grid gap-2.5">
              {featureHighlights.map((feature, index) => (
                <li
                  className="flex items-start gap-3 rounded-xl border border-ev/10 bg-white px-3 py-2.5 text-sm text-navy-muted"
                  key={feature}
                >
                  <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-ev-soft text-ev-deep">
                    <CheckCircle2 className="h-4 w-4" />
                  </span>
                  <span className="font-medium">{feature}</span>
                </li>
              ))}
            </ul>
          </article>

          <article className="overflow-hidden rounded-3xl border border-primary/15 bg-gradient-to-br from-white via-white to-primary/[0.04] p-6 shadow-[0_12px_28px_rgba(10,45,88,0.12)]">
            <div className="h-1 w-24 rounded-full bg-gradient-to-r from-primary to-ev" />
            <h2 className="text-xl font-bold text-primary">Color Options</h2>
            <div className="mt-5 grid grid-cols-2 gap-4">
              {scooter.colors.map((color, index) => (
                <div className="text-center" key={color}>
                  <span
                    className="mx-auto block h-12 w-12 rounded-full border-4 border-white shadow-card ring-1 ring-border"
                    style={{
                      background:
                        index % 4 === 0
                          ? "#e5eef7"
                          : index % 4 === 1
                            ? "#273142"
                            : index % 4 === 2
                              ? "#0f62fe"
                              : "#111827",
                    }}
                  />
                  <p className="mt-2 text-xs font-semibold text-navy-muted">{color}</p>
                </div>
              ))}
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}