"use client";

import { useInView } from "@/hooks/use-in-view";
import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
import { Check, Star } from "lucide-react";

const packages = [
  {
    name: "The Outhouse",
    subtitle: "For intimate gatherings",
    price: "From $5K",
    capacity: "Up to 1,000 attendees",
    featured: false,
    features: [
      "10-20 premium porta potties",
      "Basic bioreactor unit",
      "Up to 50 kWh generation",
      "Standard maintenance",
      "Setup & teardown included",
      "Basic power distribution",
    ],
  },
  {
    name: "The Throne Room",
    subtitle: "Most popular for mid-size festivals",
    price: "From $25K",
    capacity: "Up to 10,000 attendees",
    featured: true,
    features: [
      "50-100 premium porta potties",
      "Multi-reactor array",
      "Up to 500 kWh generation",
      "24/7 dedicated maintenance",
      "Full power infrastructure",
      "Real-time monitoring dashboard",
      "VIP luxury units available",
      "Carbon offset certificate",
    ],
  },
  {
    name: "The Royal Flush",
    subtitle: "For major festivals & events",
    price: "Custom",
    capacity: "10,000+ attendees",
    featured: false,
    features: [
      "100+ premium porta potties",
      "Industrial bioreactor farm",
      "Megawatt-scale generation",
      "Dedicated on-site team",
      "Full grid integration",
      "Real-time public dashboard",
      "VIP & ADA luxury suites",
      "PR & sustainability report",
    ],
  },
];

export function PackagesSection() {
  const { ref, isInView } = useInView(0.1);

  return (
    <section id="packages" className="py-24 px-4 bg-brown-dark/30" ref={ref}>
      <div className="mx-auto max-w-6xl">
        <div className="text-center mb-16">
          <h2
            className={`text-3xl sm:text-4xl md:text-5xl font-bold mb-4 ${
              isInView ? "animate-fade-in-up" : "opacity-0"
            }`}
          >
            Pick Your <span className="text-neon">Package</span>
          </h2>
          <p
            className={`text-cream-dim text-lg max-w-2xl mx-auto ${
              isInView ? "animate-fade-in-up" : "opacity-0"
            }`}
            style={{ animationDelay: "0.1s" }}
          >
            From cozy campouts to massive music festivals, we&apos;ve got you covered
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 items-stretch">
          {packages.map((pkg, index) => (
            <Card
              key={pkg.name}
              className={`relative flex flex-col card-hover ${
                pkg.featured
                  ? "border-neon/50 neon-border md:scale-105"
                  : ""
              } ${isInView ? "animate-fade-in-up" : "opacity-0"}`}
              style={{ animationDelay: `${0.2 + index * 0.1}s` }}
            >
              {pkg.featured && (
                <div className="absolute -top-3 left-1/2 -translate-x-1/2 flex items-center gap-1 rounded-full bg-neon px-4 py-1 text-xs font-bold text-bg-primary">
                  <Star className="h-3 w-3" />
                  Most Popular
                </div>
              )}
              <CardHeader className="text-center">
                <CardTitle className="text-2xl">{pkg.name}</CardTitle>
                <CardDescription>{pkg.subtitle}</CardDescription>
                <div className="mt-4">
                  <span className="text-4xl font-bold text-neon">
                    {pkg.price}
                  </span>
                </div>
                <p className="text-xs text-cream-dim mt-1">{pkg.capacity}</p>
              </CardHeader>
              <CardContent className="flex-1">
                <ul className="space-y-3">
                  {pkg.features.map((feature) => (
                    <li
                      key={feature}
                      className="flex items-start gap-2 text-sm text-cream-dim"
                    >
                      <Check className="h-4 w-4 text-neon shrink-0 mt-0.5" />
                      {feature}
                    </li>
                  ))}
                </ul>
              </CardContent>
              <CardFooter className="mt-auto">
                <a href="#contact" className="w-full">
                  <Button
                    variant={pkg.featured ? "default" : "outline"}
                    className="w-full"
                  >
                    Get Started
                  </Button>
                </a>
              </CardFooter>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}