import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
import CountUp from "@/components/CountUp";

const DifferentiationSection = () => {
  return (
    <section className="py-24 md:py-32 bg-secondary/20 relative">
      <div className="container mx-auto px-6">
        <div className="max-w-4xl mx-auto text-center">
          <div className="label-tag mb-4">Der Unterschied</div>
          
          <h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-12">
            Warum Unternehmen zu uns wechseln.
          </h2>
          
          <div className="grid md:grid-cols-3 gap-8 mb-12">
            <div className="p-6 border border-border rounded-lg bg-background">
              <div className="text-4xl font-display font-medium text-foreground mb-2">
                <CountUp from={0} to={1} duration={1} padMinLength={2} startWhen={true} />
              </div>
              <h3 className="text-lg font-display font-medium text-foreground uppercase tracking-tight mb-2">
                Alles aus einer Hand
              </h3>
              <p className="text-muted-foreground text-sm">
                Website, Automation und Schnittstellen aus einer Hand – ein Ansprechpartner statt fünf Agenturen.
              </p>
            </div>
            
            <div className="p-6 border border-border rounded-lg bg-background">
              <div className="text-4xl font-display font-medium text-foreground mb-2">
                <CountUp from={0} to={2} duration={1} padMinLength={2} startWhen={true} />
              </div>
              <h3 className="text-lg font-display font-medium text-foreground uppercase tracking-tight mb-2">
                Systeme statt Inseln
              </h3>
              <p className="text-muted-foreground text-sm">
                CRM, Formulare und Website tauschen Daten – ohne manuelles Nachpflegen.
              </p>
            </div>
            
            <div className="p-6 border border-border rounded-lg bg-background">
              <div className="text-4xl font-display font-medium text-foreground mb-2">
                <CountUp from={0} to={3} duration={1} padMinLength={2} startWhen={true} />
              </div>
              <h3 className="text-lg font-display font-medium text-foreground uppercase tracking-tight mb-2">
                Langfristige Partnerschaft
              </h3>
              <p className="text-muted-foreground text-sm">
                Nach dem Go-live bleiben wir dran: Optimierung, wenn Ihr Team und Umsatz wachsen.
              </p>
            </div>
          </div>
          
          <Link
            to="/kontakt"
            data-analytics-cta="Potenzialanalyse starten"
            data-analytics-location="differentiation_section"
          >
            <Button
              size="lg"
              className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
            >
              Potenzialanalyse starten
              <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
            </Button>
          </Link>
        </div>
      </div>
    </section>
  );
};

export default DifferentiationSection;