import { Container } from "@/components/ui/Container";
import { Button } from "@/components/ui/Button";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { Card } from "@/components/ui/Card";
import { FadeIn } from "@/components/ui/FadeIn";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Über Uns",
  description:
    "Erfahren Sie mehr über unsere Philosophie, unser Team und unsere Community bei Sportbox Reutte.",
  openGraph: {
    title: "Über Uns | Sportbox Reutte",
    description:
      "Erfahren Sie mehr über unsere Philosophie, unser Team und unsere Community bei Sportbox Reutte.",
    url: "https://sportbox-reutte.at/über-uns",
  },
};

const TEAM_MEMBERS = [
  {
    name: "Max Mustermann",
    role: "Gründer & Head Coach",
    description:
      "Zertifizierter Personal Trainer mit über 10 Jahren Erfahrung in der Fitnessbranche.",
  },
  {
    name: "Anna Berger",
    role: "Yoga & Mobility Coach",
    description:
      "Spezialisiert auf Yoga, Stretching und ganzheitliche Bewegungskonzepte.",
  },
  {
    name: "Thomas Huber",
    role: "Kraft- & Konditionstrainer",
    description:
      "Experte für Krafttraining, Athletiktraining und Wettkampfvorbereitung.",
  },
  {
    name: "Lisa Mayer",
    role: "Ernährungsberaterin",
    description:
      "Diplomierte Ernährungsberaterin mit Fokus auf sportgerechte Ernährung.",
  },
] as const;

const VALUES = [
  {
    title: "Individualität",
    description:
      "Jeder Mensch ist einzigartig. Unsere Trainingspläne werden individuell auf Sie abgestimmt.",
  },
  {
    title: "Gemeinschaft",
    description:
      "Gemeinsam erreichen wir mehr. Unsere Community motiviert und unterstützt sich gegenseitig.",
  },
  {
    title: "Qualität",
    description:
      "Von der Ausbildung unserer Trainer bis zur Auswahl der Geräte – wir setzen auf höchste Qualität.",
  },
] as const;

export default function UeberUnsPage() {
  return (
    <main>
      {/* Hero */}
      <section className="pt-32 pb-[var(--spacing-section)] md:pt-40 md:pb-[var(--spacing-4xl)] bg-primary text-secondary">
        <Container>
          <FadeIn>
            <p className="text-sm uppercase tracking-[0.2em] text-secondary/60 mb-4">
              Über uns
            </p>
          </FadeIn>
          <FadeIn delay={0.1}>
            <h1
              className="font-bold max-w-2xl"
              style={{
                fontSize: "clamp(var(--text-3xl), 4vw, var(--text-5xl))",
                lineHeight: "1.1",
                letterSpacing: "var(--text-5xl-letter-spacing)",
              }}
            >
              Wir glauben an die Kraft der Bewegung.
            </h1>
          </FadeIn>
          <FadeIn delay={0.2}>
            <p className="mt-6 max-w-xl text-secondary/70" style={{ fontSize: "var(--text-lg)" }}>
              Seit der Gründung von Sportbox Reutte verfolgen wir eine klare
              Mission: Fitness für jeden zugänglich und persönlich zu gestalten.
            </p>
          </FadeIn>
        </Container>
      </section>

      {/* Philosophy */}
      <section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)]">
        <Container>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <FadeIn>
              <div>
                <p className="text-sm uppercase tracking-[0.2em] text-muted mb-4">
                  Unsere Philosophie
                </p>
                <h2
                  className="font-bold mb-6"
                  style={{
                    fontSize: "var(--text-3xl)",
                    lineHeight: "var(--text-3xl-line-height)",
                    letterSpacing: "var(--text-3xl-letter-spacing)",
                  }}
                >
                  Fitness ist kein Ziel – es ist ein Weg.
                </h2>
                <p className="text-muted leading-relaxed mb-4">
                  Bei Sportbox Reutte geht es nicht um kurzfristige Ergebnisse.
                  Wir begleiten Sie auf einem nachhaltigen Weg zu mehr
                  Wohlbefinden, Kraft und Lebensqualität.
                </p>
                <p className="text-muted leading-relaxed">
                  Unser ganzheitlicher Ansatz verbindet körperliches Training,
                  mentale Gesundheit und ausgewogene Ernährung. Denn wahre
                  Fitness entsteht, wenn Körper und Geist im Einklang sind.
                </p>
              </div>
            </FadeIn>
            <FadeIn delay={0.15}>
              <div
                className="aspect-[4/3] bg-neutral flex items-center justify-center"
                style={{ borderRadius: "var(--radius-md)" }}
              >
                <p className="text-muted text-sm">PLACEHOLDER: Team-Bild</p>
              </div>
            </FadeIn>
          </div>
        </Container>
      </section>

      {/* Values */}
      <section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)] bg-neutral">
        <Container>
          <FadeIn>
            <SectionHeading
              title="Unsere Werte"
              subtitle="Was uns antreibt und was Sie von uns erwarten können."
            />
          </FadeIn>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {VALUES.map((value, index) => (
              <FadeIn key={value.title} delay={index * 0.1}>
                <Card className="h-full bg-background">
                  <h3 className="text-lg font-bold mb-3">{value.title}</h3>
                  <p className="text-sm text-muted">{value.description}</p>
                </Card>
              </FadeIn>
            ))}
          </div>
        </Container>
      </section>

      {/* Team */}
      <section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)]">
        <Container>
          <FadeIn>
            <SectionHeading
              title="Unser Team"
              subtitle="Lernen Sie die Menschen kennen, die Sportbox Reutte ausmachen."
            />
          </FadeIn>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {TEAM_MEMBERS.map((member, index) => (
              <FadeIn key={member.name} delay={index * 0.1}>
                <div className="text-center">
                  <div
                    className="w-full aspect-square bg-neutral mb-4 flex items-center justify-center"
                    style={{ borderRadius: "var(--radius-md)" }}
                  >
                    <p className="text-muted text-xs">PLACEHOLDER: Foto</p>
                  </div>
                  <h3 className="text-base font-bold">{member.name}</h3>
                  <p className="text-sm text-muted mt-1">{member.role}</p>
                  <p className="text-sm text-muted mt-2">
                    {member.description}
                  </p>
                </div>
              </FadeIn>
            ))}
          </div>
        </Container>
      </section>

      {/* CTA */}
      <section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)] bg-primary text-secondary">
        <Container className="text-center">
          <FadeIn>
            <h2
              className="font-bold mb-4"
              style={{
                fontSize: "var(--text-3xl)",
                lineHeight: "var(--text-3xl-line-height)",
              }}
            >
              Werden Sie Teil unserer Community.
            </h2>
            <p className="text-secondary/70 mb-8 max-w-lg mx-auto">
              Kommen Sie vorbei und überzeugen Sie sich selbst von der
              Sportbox-Atmosphäre.
            </p>
            <div className="flex flex-col sm:flex-row justify-center gap-4">
              <Button
                href="/leistungen#kontakt"
                variant="secondary"
                className="border-secondary text-secondary hover:bg-secondary hover:text-primary"
              >
                Jetzt Termin buchen
              </Button>
              <Button
                href="/studio"
                variant="ghost"
                className="text-secondary/80 hover:text-secondary"
              >
                Unser Studio entdecken
              </Button>
            </div>
          </FadeIn>
        </Container>
      </section>
    </main>
  );
}