import CountUp from "@/components/CountUp";
import { TextHoverEffect } from "@/components/ui/text-hover-effect";
import PixelBlast from "@/components/PixelBlast";

const Process = () => {
  const steps = [
    {
      number: 1,
      title: "Erstgespräch",
      description: "Wir lernen Ihr Unternehmen und Ihre Ziele kennen. In einem unverbindlichen Gespräch besprechen wir Ihre Wünsche.",
    },
    {
      number: 2,
      title: "Konzept & Design",
      description: "Basierend auf unserer Analyse erstellen wir ein individuelles Konzept und Design für Ihre Website.",
    },
    {
      number: 3,
      title: "Entwicklung",
      description: "Unsere Entwickler setzen Ihre Website mit modernsten Technologien um. Sie bleiben informiert.",
    },
    {
      number: 4,
      title: "Launch & Support",
      description: "Nach gründlichen Tests geht Ihre Website live. Wir stehen Ihnen auch danach mit Support zur Seite.",
    },
  ];

  return (
    <section id="process" className="pt-8 pb-24 md:pt-12 md:pb-32 bg-secondary/20 relative">
      {/* PixelBlast animated background */}
      <div className="absolute inset-0 z-0 w-full h-full">
        <PixelBlast
          variant="circle"
          pixelSize={3}
          color="#5b5b5b"
          patternScale={7.75}
          patternDensity={0.7}
          pixelSizeJitter={2}
          enableRipples={false}
          rippleSpeed={0.4}
          rippleThickness={0.12}
          rippleIntensityScale={1.5}
          liquid={false}
          liquidStrength={0.12}
          liquidRadius={1.2}
          liquidWobbleSpeed={5}
          speed={0.3}
          edgeFade={0.5}
          transparent
        />
      </div>
      {/* TextHoverEffect */}
      <div className="h-[14rem] flex items-center justify-center -mb-4 relative z-10">
        <TextHoverEffect text="Ablauf" />
      </div>
      <div className="container mx-auto px-6 relative z-10">
        {/* Section Header */}
        <div className="mb-4">
          <div className="label-tag mb-4">So arbeiten wir</div>
        </div>

        <div className="max-w-4xl">
          {steps.map((step, index) => (
            <div
              key={step.number}
              className="group flex gap-8 md:gap-12 pb-16 last:pb-0 border-l border-border pl-8 md:pl-12 relative"
            >
              {/* Line dot */}
              <div className="absolute -left-[5px] top-0 w-[10px] h-[10px] rounded-full bg-background border-2 border-border group-hover:border-foreground transition-colors" />
              
              {/* Number */}
              <div className="hidden md:block">
                <span className="stat-number text-6xl text-border group-hover:text-muted-foreground/30 transition-colors">
                  <CountUp
                    from={0}
                    to={step.number}
                    direction="up"
                    duration={1}
                    padMinLength={2}
                    startWhen={true}
                  />
                </span>
              </div>

              {/* Content */}
              <div className="flex-1">
                <span className="md:hidden label-tag mb-2 block">
                  <CountUp from={0} to={step.number} duration={1} padMinLength={2} startWhen={true} />
                </span>
                <h3 className="text-2xl md:text-3xl font-display font-medium text-foreground mb-4 uppercase tracking-tight">
                  {step.title}
                </h3>
                <p className="text-muted-foreground leading-relaxed max-w-lg">
                  {step.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Process;