"use client";

import { useInView } from "@/hooks/use-in-view";
import { Droplets, FlaskConical, Zap } from "lucide-react";

const steps = [
  {
    icon: Droplets,
    number: "01",
    title: "Collect",
    subtitle: "Festival-goers do their thing",
    description:
      "Our premium porta potties collect organic waste at festivals. Each unit is equipped with smart sensors and pre-processing systems that prepare waste for bioreaction.",
  },
  {
    icon: FlaskConical,
    number: "02",
    title: "Digest",
    subtitle: "Microbes get to work",
    description:
      "Anaerobic digesters break down organic matter into biogas (methane + CO2). Our proprietary bioreactor tech accelerates this process from weeks to hours.",
  },
  {
    icon: Zap,
    number: "03",
    title: "Power",
    subtitle: "Clean energy flows",
    description:
      "Biogas fuels micro-generators that produce clean electricity on-site. Power stages, food vendors, lighting — all from what festival-goers flush.",
  },
];

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

  return (
    <section id="how-it-works" className="py-24 px-4" 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"
            }`}
          >
            How <span className="text-neon">It Works</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" }}
          >
            Three simple steps from flush to festival power
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 relative">
          {/* Connection lines (desktop only) */}
          <div className="hidden md:block absolute top-20 left-[calc(33.33%-1rem)] right-[calc(33.33%-1rem)] h-0.5">
            <div className="w-full h-full bg-gradient-to-r from-neon/50 via-neon to-neon/50 rounded-full" />
          </div>

          {steps.map((step, index) => (
            <div
              key={step.number}
              className={`relative text-center ${
                isInView ? "animate-fade-in-up" : "opacity-0"
              }`}
              style={{ animationDelay: `${0.2 + index * 0.15}s` }}
            >
              {/* Icon circle */}
              <div className="relative mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-bg-card border-2 border-neon/40 neon-border">
                <step.icon className="h-8 w-8 text-neon" />
                <span className="absolute -top-2 -right-2 flex h-8 w-8 items-center justify-center rounded-full bg-neon text-bg-primary text-xs font-bold">
                  {step.number}
                </span>
              </div>

              <h3 className="text-2xl font-bold text-cream mb-1">
                {step.title}
              </h3>
              <p className="text-neon text-sm font-medium mb-3">
                {step.subtitle}
              </p>
              <p className="text-cream-dim leading-relaxed">
                {step.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}