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

export default function Store() {
  const [q, setQ] = useState("");

  const filtered = useMemo(() => {
    const term = q.trim().toLowerCase();
    if (!term) return products;
    return products.filter((p) =>
      [p.name, p.category, p.tagline].some((x) => x.toLowerCase().includes(term))
    );
  }, [q]);

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
        <div>
          <h2 className="text-3xl font-semibold tracking-tight">Store</h2>
          <p className="text-neutral-600">Browse products (demo data).</p>
        </div>
        <div className="w-full md:w-80">
          <label className="text-xs font-semibold uppercase tracking-wider text-neutral-500">Search</label>
          <input
            value={q}
            onChange={(e) => setQ(e.target.value)}
            placeholder="Search products..."
            className="mt-2 w-full rounded-xl border border-neutral-300 bg-white px-4 py-2.5 text-sm outline-none focus:border-neutral-900"
          />
        </div>
      </div>

      <div className="grid gap-4 md:grid-cols-3">
        {filtered.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>
        ))}
      </div>

      {filtered.length === 0 ? (
        <div className="rounded-2xl border border-neutral-200 bg-neutral-50 p-6 text-neutral-700">
          No results. Try a different search term.
        </div>
      ) : null}
    </div>
  );
}