import { Header } from "@/components/Header";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Users, Target, Award, TrendingUp, Globe, Heart } from "lucide-react";

const stats = [
  { label: "Veröffentlichte Meldungen", value: "250.000+" },
  { label: "Registrierte Unternehmen", value: "15.000+" },
  { label: "Monatliche Leser", value: "2,5 Mio." },
  { label: "Länder", value: "40+" },
];

const values = [
  {
    icon: Target,
    title: "Qualität vor Quantität",
    description: "Wir setzen auf redaktionelle Qualität und kuratieren Inhalte sorgfältig, um höchste Standards zu gewährleisten.",
  },
  {
    icon: Globe,
    title: "DACH-Expertise",
    description: "Spezialisiert auf den deutschsprachigen Raum mit tiefem Verständnis für regionale Besonderheiten.",
  },
  {
    icon: Heart,
    title: "Kundenfokus",
    description: "Ihre Zufriedenheit steht im Mittelpunkt. Wir bieten persönlichen Support und maßgeschneiderte Lösungen.",
  },
  {
    icon: TrendingUp,
    title: "Innovation & Technologie",
    description: "Kontinuierliche Weiterentwicklung unserer Plattform mit modernsten Technologien und Features.",
  },
];

const team = [
  {
    name: "Dr. Michael Weber",
    role: "Gründer & CEO",
    bio: "15+ Jahre Erfahrung in PR und Unternehmenskommunikation",
  },
  {
    name: "Sarah Hoffmann",
    role: "Chief Technology Officer",
    bio: "Expertin für digitale Plattformen und Skalierung",
  },
  {
    name: "Thomas Schneider",
    role: "Head of Customer Success",
    bio: "Spezialist für Kundenzufriedenheit und Account Management",
  },
  {
    name: "Lisa Müller",
    role: "Head of Content & Quality",
    bio: "Journalistin mit Schwerpunkt digitale Medien",
  },
];

const UeberUns = () => {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
      
      <main className="flex-1">
        {/* Hero Section */}
        <section className="bg-gradient-to-r from-primary via-primary/95 to-secondary text-white py-20">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl mx-auto text-center">
              <h1 className="text-4xl md:text-5xl font-bold mb-6">
                Über Business Portal
              </h1>
              <p className="text-xl text-white/90 leading-relaxed">
                Seit 2010 verbinden wir Unternehmen mit Medien, Journalisten und Multiplikatoren im deutschsprachigen Raum. Wir sind die führende Plattform für Unternehmenskommunikation und Pressearbeit im DACH-Raum.
              </p>
            </div>
          </div>
        </section>

        {/* Stats Section */}
        <section className="py-16 bg-background">
          <div className="container mx-auto px-4">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
              {stats.map((stat) => (
                <div key={stat.label} className="text-center">
                  <div className="text-4xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent mb-2">
                    {stat.value}
                  </div>
                  <div className="text-sm text-muted-foreground">{stat.label}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Mission Section */}
        <section className="py-16 bg-muted/30">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <div className="text-center mb-12">
                <h2 className="text-3xl font-bold text-foreground mb-4">
                  Unsere Mission
                </h2>
                <p className="text-lg text-muted-foreground">
                  Professionelle Unternehmenskommunikation für alle zugänglich machen
                </p>
              </div>

              <Card className="p-8 md:p-12">
                <p className="text-lg text-foreground leading-relaxed mb-6">
                  Wir glauben daran, dass jedes Unternehmen – unabhängig von Größe oder Budget – die Möglichkeit haben sollte, seine Geschichte zu erzählen und mit relevanten Zielgruppen zu kommunizieren.
                </p>
                <p className="text-lg text-foreground leading-relaxed">
                  Business Portal demokratisiert professionelle PR-Arbeit durch innovative Technologie, faire Preismodelle und exzellenten Service. Wir schaffen Sichtbarkeit für wichtige Unternehmensnachrichten und verbinden Organisationen mit den Menschen, die ihre Botschaften lesen und teilen möchten.
                </p>
              </Card>
            </div>
          </div>
        </section>

        {/* Values Section */}
        <section className="py-16 bg-background">
          <div className="container mx-auto px-4">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold text-foreground mb-4">
                Unsere Werte
              </h2>
              <p className="text-muted-foreground max-w-2xl mx-auto">
                Diese Prinzipien leiten uns in allem, was wir tun
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
              {values.map((value) => (
                <Card key={value.title} className="p-6 text-center hover:shadow-card-hover transition-all">
                  <div className="w-16 h-16 bg-gradient-to-br from-primary/10 to-secondary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                    <value.icon className="h-8 w-8 text-primary" />
                  </div>
                  <h3 className="font-semibold text-foreground mb-3">
                    {value.title}
                  </h3>
                  <p className="text-sm text-muted-foreground">
                    {value.description}
                  </p>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* Team Section */}
        <section className="py-16 bg-muted/30">
          <div className="container mx-auto px-4">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold text-foreground mb-4">
                Unser Team
              </h2>
              <p className="text-muted-foreground max-w-2xl mx-auto">
                Erfahrene Experten aus PR, Technologie und Medien
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
              {team.map((member) => (
                <Card key={member.name} className="p-6 text-center hover:shadow-card-hover transition-all">
                  <div className="w-24 h-24 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-full flex items-center justify-center mx-auto mb-4">
                    <Users className="h-12 w-12 text-primary" />
                  </div>
                  <h3 className="font-semibold text-foreground mb-1">
                    {member.name}
                  </h3>
                  <p className="text-sm text-primary mb-3">{member.role}</p>
                  <p className="text-sm text-muted-foreground">{member.bio}</p>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* Timeline Section */}
        <section className="py-16 bg-background">
          <div className="container mx-auto px-4 max-w-4xl">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold text-foreground mb-4">
                Unsere Geschichte
              </h2>
            </div>

            <div className="space-y-8">
              {[
                { year: "2010", title: "Gründung", text: "Start als kleines Start-up mit der Vision, PR zu demokratisieren" },
                { year: "2013", title: "Expansion", text: "Erreichen von 1.000 registrierten Unternehmen" },
                { year: "2016", title: "Wachstum", text: "Launch der Premium-Features und Enterprise-Lösungen" },
                { year: "2019", title: "Innovation", text: "Einführung KI-gestützter Reichweiten-Analytics" },
                { year: "2022", title: "Marktführer", text: "Über 10.000 aktive Unternehmenskunden im DACH-Raum" },
                { year: "2025", title: "Zukunft", text: "Internationalisierung und neue AI-Features" },
              ].map((milestone, index) => (
                <div key={milestone.year} className="flex gap-6">
                  <div className="flex flex-col items-center">
                    <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white font-bold flex-shrink-0">
                      {milestone.year.slice(-2)}
                    </div>
                    {index < 5 && (
                      <div className="w-0.5 h-16 bg-gradient-to-b from-primary to-secondary mt-2"></div>
                    )}
                  </div>
                  <div className="pb-8">
                    <h3 className="font-semibold text-foreground mb-2">
                      {milestone.title}
                    </h3>
                    <p className="text-sm text-muted-foreground">
                      {milestone.text}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-16 bg-gradient-to-r from-primary to-secondary text-white">
          <div className="container mx-auto px-4 text-center">
            <Award className="h-16 w-16 mx-auto mb-6" />
            <h2 className="text-3xl font-bold mb-4">
              Werden Sie Teil unserer Success Story
            </h2>
            <p className="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
              Über 15.000 Unternehmen vertrauen bereits auf Business Portal
            </p>
            <Button size="lg" variant="secondary">
              Jetzt kostenlos starten
            </Button>
          </div>
        </section>
      </main>
    </div>
  );
};

export default UeberUns;