"use client";

import { useInView } from "@/hooks/use-in-view";
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
import { Toilet, FlaskConical, Trash2, Cable } from "lucide-react";

const services = [
  {
    icon: Toilet,
    title: "Premium Porta Potties",
    description:
      "Not your grandpa's porta john. Our units feature hands-free flush, LED lighting, ventilation, and phone charging ports. They're practically luxury.",
    features: ["Hands-free flush", "LED ambient lighting", "USB charging", "Ventilation fans"],
  },
  {
    icon: FlaskConical,
    title: "Bioreactor Power",
    description:
      "On-site anaerobic digesters convert waste to biogas in hours, not weeks. Our micro-generators produce clean, reliable electricity for your event.",
    features: ["Rapid biogas conversion", "Micro-generator arrays", "Real-time monitoring", "Scalable output"],
  },
  {
    icon: Trash2,
    title: "Waste Management",
    description:
      "Full-service waste handling from setup to teardown. We manage collection, processing, and disposal so you can focus on the festival vibes.",
    features: ["Setup & teardown", "24/7 maintenance", "Eco-friendly processing", "Zero landfill goal"],
  },
  {
    icon: Cable,
    title: "Power Infrastructure",
    description:
      "Complete power distribution for stages, vendors, and facilities. Our grid integrates bio-power with backup systems for uninterrupted festival energy.",
    features: ["Distribution panels", "Load balancing", "Backup integration", "Smart monitoring"],
  },
];

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

  return (
    <section id="services" 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"
            }`}
          >
            Our <span className="text-neon">Services</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" }}
          >
            Everything you need to power your festival sustainably
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {services.map((service, index) => (
            <Card
              key={service.title}
              className={`card-hover ${
                isInView ? "animate-fade-in-up" : "opacity-0"
              }`}
              style={{ animationDelay: `${0.2 + index * 0.1}s` }}
            >
              <CardHeader>
                <div className="flex items-center gap-4">
                  <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-neon/10 border border-neon/30">
                    <service.icon className="h-6 w-6 text-neon" />
                  </div>
                  <div>
                    <CardTitle>{service.title}</CardTitle>
                  </div>
                </div>
                <CardDescription className="mt-2">
                  {service.description}
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="grid grid-cols-2 gap-2">
                  {service.features.map((feature) => (
                    <li
                      key={feature}
                      className="flex items-center gap-2 text-sm text-cream-dim"
                    >
                      <span className="h-1.5 w-1.5 rounded-full bg-neon shrink-0" />
                      {feature}
                    </li>
                  ))}
                </ul>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}