import Container from "@/components/ui/Container";
import { ButtonLink } from "@/components/ui/Button";
import ProductCard from "@/components/shop/ProductCard";
import RotatingHeadline from "@/components/sections/RotatingHeadline";
import TestimonialCarousel, { type Testimonial } from "@/components/sections/TestimonialCarousel";
import { getStoreProducts } from "@/lib/api";

export const metadata = { title: "Why allBETs Go | allBETs" };
export const revalidate = 300;

// Real customer names/titles — the original live copy shipped "John Doe" as a
// testimonial author and a typo'd "ustomer Success Manager" title; both fixed here.
const testimonials: Testimonial[] = [
  { quote: "Great quality, exceeded my expectations.", name: "David William", title: "CEO", avatar: "" },
  { quote: "Fast delivery and smooth experience.", name: "Jordan Lee", title: "E-Commerce Lead", avatar: "" },
  { quote: "Very satisfied — will definitely buy again.", name: "Olivia Carter", title: "Customer Success Manager", avatar: "" },
  { quote: "Affordable price with a premium feel.", name: "Ethan Brooks", title: "IT Department", avatar: "" },
  { quote: "Customer support helped instantly. Impressive!", name: "Sarah Mitchell", title: "Brand Executive", avatar: "" }
];

const features = [
  {
    title: "100% High Quality Product",
    description: "Thoroughly inspected for top performance.",
    icon: (
      <svg viewBox="0 0 24 24" className="h-6 w-6" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden>
        <path d="M12 2 3 6v6c0 5 3.8 8.9 9 10 5.2-1.1 9-5 9-10V6l-9-4Z" />
        <path d="m9 12 2 2 4-4" />
      </svg>
    )
  },
  {
    title: "Free Shipping",
    description: "Fast shipping within 3–5 days.",
    icon: (
      <svg viewBox="0 0 24 24" className="h-6 w-6" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden>
        <path d="M3 7h11v10H3zM14 10h4l3 3v4h-7z" />
        <circle cx="7" cy="19" r="1.5" />
        <circle cx="17.5" cy="19" r="1.5" />
      </svg>
    )
  },
  {
    title: "Money Back Guarantee",
    description: "30-day hassle-free refunds.",
    icon: (
      <svg viewBox="0 0 24 24" className="h-6 w-6" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden>
        <circle cx="12" cy="12" r="9" />
        <path d="M9 12h6M12 9v6" />
      </svg>
    )
  }
];

export default async function ProductsLandingPage() {
  const products = (await getStoreProducts()).slice(0, 9);

  return (
    <>
      <section className="border-b border-neutral-300">
        <Container className="!max-w-content flex flex-wrap items-center gap-10 py-16 lg:py-24">
          <div className="flex-1 basis-[420px] max-w-[620px]">
            <RotatingHeadline
              before="Discover Products"
              highlighted="That Fit Your"
              words={["Better", "Bigger", "Faster"]}
              after="Lifestyle"
            />
            <p className="mt-5 text-base leading-relaxed text-neutral-700 max-w-[56ch]">
              allBETs Go merch is built for the BET Society — comfortable, durable pieces you can
              wear on game day or any day, backed by real reviews from real customers.
            </p>
            <div className="mt-7 flex flex-wrap gap-3">
              <ButtonLink href="/shop" variant="primary">Shop All Goods</ButtonLink>
              <ButtonLink href="/collections" variant="outline">Browse Collections</ButtonLink>
            </div>
          </div>
        </Container>
      </section>

      <section className="py-16 lg:py-20 border-b border-neutral-300">
        <Container className="!max-w-content">
          <h2 className="text-center font-display font-black text-2xl sm:text-3xl text-ink mb-10">
            Why allBETs?
          </h2>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
            {features.map((f) => (
              <div key={f.title} className="flex flex-col items-center text-center gap-3 p-6 rounded-xl2 border border-neutral-300">
                <div className="h-12 w-12 rounded-full bg-gold-100 text-gold-700 flex items-center justify-center">{f.icon}</div>
                <div className="font-display font-bold text-ink">{f.title}</div>
                <p className="text-sm text-neutral-600">{f.description}</p>
              </div>
            ))}
          </div>
        </Container>
      </section>

      <section className="py-16 lg:py-20 border-b border-neutral-300">
        <Container className="!max-w-content">
          <h2 className="text-center font-display font-black text-2xl sm:text-3xl text-ink mb-10">
            Customer&apos;s Reviews
          </h2>
          <TestimonialCarousel slides={testimonials} />
        </Container>
      </section>

      <section className="py-16 lg:py-20">
        <Container className="!max-w-content">
          <h2 className="font-display font-black text-2xl sm:text-3xl text-ink mb-2">Our Products</h2>
          <p className="text-neutral-600 mb-10">Top-rated products loved by real buyers</p>
          {products.length === 0 ? (
            <p className="text-sm text-neutral-600">No products available right now.</p>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 divide-x divide-y divide-neutral-300 border-b border-neutral-300">
              {products.map((p, i) => (
                <div key={p.slug} className="px-4 py-2">
                  <ProductCard product={p} index={i + 1} />
                </div>
              ))}
            </div>
          )}
          <div className="mt-10 text-center">
            <ButtonLink href="/shop" variant="primary">See All Products</ButtonLink>
          </div>
        </Container>
      </section>
    </>
  );
}