import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { ArrowLeft, ArrowRight } from "lucide-react";
import CountUp from "@/components/CountUp";
import BorderGlow from "@/components/BorderGlow";
import { usePageMeta } from "@/hooks/use-page-meta";

const About = () => {
  usePageMeta(
    "Über uns",
    "WEBklar hilft KMU beim digitalen Wachstum: Systeme statt Chaos, ein Partner für Website, Prozesse und Automatisierung."
  );

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="fixed top-0 left-0 right-0 z-50 glass-nav py-4">
        <div className="container mx-auto px-6">
          <div className="flex items-center justify-between">
            <Link to="/" className="flex items-center gap-2 group">
              <span className="text-xl font-display font-medium text-foreground tracking-tight">
                Webklar
              </span>
            </Link>
            <Link to="/">
              <Button
                variant="ghost"
                className="text-muted-foreground hover:text-foreground"
              >
                <ArrowLeft className="w-4 h-4 mr-2" />
                Zurück
              </Button>
            </Link>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="pt-32 pb-24">
        <div className="container mx-auto px-6">
          <div className="max-w-4xl mx-auto text-center">
            <div className="label-tag mb-4">Über WEBklar</div>

            <h1 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-12">
              Digitalisierung, die im Alltag spürbar wird.
            </h1>

            <div className="space-y-8 text-lg md:text-xl text-muted-foreground leading-relaxed">
              <p>
                WEBklar ist die Webagentur für Unternehmen, die wachsen wollen – ohne
                dass Geschäftsführung und Team unter Tool-Chaos und manuellen Abläufen leiden.
              </p>

              <p>
                Wir verbinden{" "}
                <span className="text-foreground font-medium">
                  Website, Prozesse und Automatisierung
                </span>{" "}
                zu einem System. Kein isoliertes Redesign, kein weiteres Plugin – sondern
                eine Lösung, die Anfragen, Daten und Abläufe zusammenführt.
              </p>

              <div className="pt-8 border-t border-border">
                <p className="text-2xl md:text-3xl text-foreground font-display font-medium uppercase tracking-tight">
                  Unser Anspruch: weniger Reibung.
                </p>
                <p className="text-2xl md:text-3xl text-muted-foreground font-display font-medium uppercase tracking-tight mt-2">
                  Mehr planbares Wachstum.
                </p>
              </div>

              <p className="text-foreground font-medium pt-4">
                Starten Sie mit einer kostenlosen Potenzialanalyse – wir zeigen Ihnen die nächsten Schritte.
              </p>
            </div>

            {/* Back / Contact */}
            <div className="mt-16 pt-12 border-t border-border flex flex-wrap justify-center gap-4">
              <Link to="/">
                <Button variant="outline" className="rounded-full">
                  Zur Startseite
                </Button>
              </Link>
              <Link to="/kontakt">
                <Button className="btn-minimal rounded-full">
                  Potenzialanalyse starten
                </Button>
              </Link>
            </div>
          </div>
        </div>

        {/* Der Unterschied */}
        <div className="mt-24 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">
                <BorderGlow
                  edgeSensitivity={30}
                  glowColor="40 80 80"
                  backgroundColor="hsl(0 0% 4%)"
                  borderRadius={8}
                  glowRadius={30}
                  glowIntensity={0.8}
                  coneSpread={25}
                  colors={['#c084fc', '#f472b6', '#38bdf8']}
                >
                  <div className="p-6">
                    <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>
                </BorderGlow>

                <BorderGlow
                  edgeSensitivity={30}
                  glowColor="40 80 80"
                  backgroundColor="hsl(0 0% 4%)"
                  borderRadius={8}
                  glowRadius={30}
                  glowIntensity={0.8}
                  coneSpread={25}
                  colors={['#c084fc', '#f472b6', '#38bdf8']}
                >
                  <div className="p-6">
                    <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>
                </BorderGlow>

                <BorderGlow
                  edgeSensitivity={30}
                  glowColor="40 80 80"
                  backgroundColor="hsl(0 0% 4%)"
                  borderRadius={8}
                  glowRadius={30}
                  glowIntensity={0.8}
                  coneSpread={25}
                  colors={['#c084fc', '#f472b6', '#38bdf8']}
                >
                  <div className="p-6">
                    <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>
                </BorderGlow>
              </div>

              <Link to="/kontakt">
                <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>
        </div>
      </main>
    </div>
  );
};

export default About;