import React from "react";
import { Link } from "react-router-dom";
import { products } from "../data/products.js";

export default function Home() {
  const featured = products[0];

  return (
    <div className="space-y-12">
      <section className="overflow-hidden rounded-3xl border border-neutral-200 bg-gradient-to-b from-neutral-50 to-white">
        <div className="grid items-center gap-10 p-8 md:grid-cols-2 md:p-12">
          <div className="space-y-4">
            <p className="text-xs font-semibold uppercase tracking-wider text-neutral-500">New</p>
            <h1 className="text-4xl font-semibold tracking-tight md:text-5xl">
              {featured.name}
            </h1>
            <p className="text-lg text-neutral-600">{featured.tagline}</p>
            <div className="flex flex-wrap gap-3 pt-2">
              <Link
                to={`/product/${featured.slug}`}
                className="rounded-full bg-neutral-900 px-5 py-2.5 text-sm font-semibold text-white hover:bg-neutral-800"
              >
                Learn more
              </Link>
              <Link
                to="/store"
                className="rounded-full border border-neutral-300 bg-white px-5 py-2.5 text-sm font-semibold text-neutral-900 hover:bg-neutral-50"
              >
                Shop all
              </Link>
            </div>
            <p className="text-xs text-neutral-500 pt-2">
              Tip: Replace placeholder images/specs with your own licensed assets & data.
            </p>
          </div>

          <div className="relative">
            <img
              src={featured.heroImage}
              alt={featured.name}
              className="w-full rounded-2xl border border-neutral-200 object-cover"
              loading="lazy"
            />
          </div>
        </div>
      </section>

      <section className="grid gap-4 md:grid-cols-3">
        {products.map((p) => (
          <Link
            key={p.slug}
            to={`/product/${p.slug}`}
            className="group rounded-3xl border border-neutral-200 bg-white p-5 hover:shadow-sm"
          >
            <div className="overflow-hidden rounded-2xl border border-neutral-200">
              <img
                src={p.heroImage}
                alt={p.name}
                className="h-44 w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
                loading="lazy"
              />
            </div>
            <div className="pt-4">
              <p className="text-xs font-semibold uppercase tracking-wider text-neutral-500">{p.category}</p>
              <h3 className="pt-1 text-lg font-semibold tracking-tight">{p.name}</h3>
              <p className="pt-1 text-sm text-neutral-600">{p.tagline}</p>
              <p className="pt-3 text-sm font-semibold text-neutral-900">From ${p.priceFrom}</p>
            </div>
          </Link>
        ))}
      </section>
    </div>
  );
}