import CountUp from "@/components/CountUp";

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="py-24 md:py-32 bg-secondary/20 relative">
      <div className="container mx-auto px-6">
        {/* Section Header */}
        <div className="mb-16 md:mb-24">
          <div className="label-tag mb-4">So arbeiten wir</div>
          <h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase">
            Ablauf
          </h2>
        </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;
