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 { ContactForm } from "@/components/ui/ContactForm";
import { FaqSection } from "@/components/sections/FaqSection";
import { Dumbbell, Users, Apple, Flower2, Zap, HeartPulse } from "lucide-react";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Leistungen",
  description:
    "Informieren Sie sich über unser vielfältiges Kursangebot und individuelle Trainingsmöglichkeiten bei Sportbox Reutte.",
  openGraph: {
    title: "Leistungen | Sportbox Reutte",
    description:
      "Vielfältiges Kursangebot und individuelle Trainingsmöglichkeiten bei Sportbox Reutte in Reutte, Tirol.",
    url: "https://sportbox-reutte.at/leistungen",
  },
};

const SERVICES = [
  {
    icon: Dumbbell,
    title: "Personal Training",
    description:
      "Individuell abgestimmte Trainingspläne mit persönlicher Betreuung durch zertifizierte Trainer. Ideal für gezielte Ziele wie Muskelaufbau, Gewichtsreduktion oder Rehabilitation.",
    features: [
      "1:1 Betreuung",
      "Individueller Trainingsplan",
      "Regelmäßige Fortschrittskontrolle",
    ],
  },
  {
    icon: Users,
    title: "Gruppenkurse",
    description:
      "Vielfältige Kurse für jedes Fitnesslevel – von HIIT über Functional Training bis Pilates. Gemeinsam trainieren motiviert und macht Spaß.",
    features: [
      "Verschiedene Kursformate",
      "Für alle Levels",
      "Motivierende Gruppenatmosphäre",
    ],
  },
  {
    icon: Apple,
    title: "Ernährungsberatung",
    description:
      "Professionelle Beratung durch unsere diplomierte Ernährungsberaterin. Wir helfen Ihnen, Ihre Ernährung optimal auf Ihre Trainingsziele abzustimmen.",
    features: [
      "Persönlicher Ernährungsplan",
      "Sportgerechte Ernährung",
      "Nachhaltige Umstellung",
    ],
  },
  {
    icon: Flower2,
    title: "Yoga & Mobility",
    description:
      "Finden Sie Balance zwischen Kraft und Flexibilität. Unsere Yoga- und Mobility-Kurse verbessern Ihre Beweglichkeit und reduzieren Stress.",
    features: [
      "Verschiedene Yoga-Stile",
      "Stretching & Mobility",
      "Atemtechniken",
    ],
  },
  {
    icon: Zap,
    title: "Krafttraining",
    description:
      "Strukturiertes Krafttraining an modernen Geräten und mit freien Gewichten. Von Grundlagen bis Wettkampfvorbereitung.",
    features: [
      "Moderne Geräte",
      "Freie Gewichte",
      "Technikschulung",
    ],
  },
  {
    icon: HeartPulse,
    title: "Gesundheitstraining",
    description:
      "Präventives und rehabilitatives Training für mehr Wohlbefinden im Alltag. Ideal für Rückengesundheit, Haltungsverbesserung und allgemeine Fitness.",
    features: [
      "Rückentraining",
      "Haltungsanalyse",
      "Präventives Training",
    ],
  },
] as const;

export default function LeistungenPage() {
  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">
              Leistungen
            </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)",
              }}
            >
              Was wir für Sie tun können.
            </h1>
          </FadeIn>
          <FadeIn delay={0.2}>
            <p className="mt-6 max-w-xl text-secondary/70" style={{ fontSize: "var(--text-lg)" }}>
              Vielfältige Angebote für Ihre individuellen Fitnessziele –
              professionell, persönlich und auf Sie abgestimmt.
            </p>
          </FadeIn>
        </Container>
      </section>

      {/* Services */}
      <section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)]">
        <Container>
          <FadeIn>
            <SectionHeading
              title="Unser Angebot"
              subtitle="Von Personal Training bis Ernährungsberatung – wir haben für jeden das Richtige."
            />
          </FadeIn>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {SERVICES.map((service, index) => (
              <FadeIn key={service.title} delay={index * 0.08}>
                <Card className="h-full flex flex-col">
                  <service.icon
                    size={28}
                    className="mb-4 text-primary"
                    aria-hidden="true"
                  />
                  <h3 className="text-lg font-bold mb-2">{service.title}</h3>
                  <p className="text-sm text-muted mb-4 flex-1">
                    {service.description}
                  </p>
                  <ul className="space-y-1.5">
                    {service.features.map((feature) => (
                      <li
                        key={feature}
                        className="text-sm text-foreground flex items-start gap-2"
                      >
                        <span className="mt-1.5 w-1 h-1 bg-primary rounded-full shrink-0" aria-hidden="true" />
                        {feature}
                      </li>
                    ))}
                  </ul>
                </Card>
              </FadeIn>
            ))}
          </div>
        </Container>
      </section>

      {/* FAQ */}
      <section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)] bg-neutral">
        <Container>
          <FadeIn>
            <SectionHeading
              title="Häufige Fragen"
              subtitle="Antworten auf die häufigsten Fragen rund um Sportbox Reutte."
            />
          </FadeIn>
          <FadeIn delay={0.1}>
            <FaqSection />
          </FadeIn>
        </Container>
      </section>

      {/* Contact Form */}
      <section id="kontakt" className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)]">
        <Container>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <FadeIn>
              <div>
                <p className="text-sm uppercase tracking-[0.2em] text-muted mb-4">
                  Kontakt
                </p>
                <h2
                  className="font-bold mb-6"
                  style={{
                    fontSize: "var(--text-3xl)",
                    lineHeight: "var(--text-3xl-line-height)",
                    letterSpacing: "var(--text-3xl-letter-spacing)",
                  }}
                >
                  Jetzt Termin vereinbaren.
                </h2>
                <p className="text-muted leading-relaxed mb-6">
                  Haben Sie Fragen oder möchten Sie ein Probetraining
                  vereinbaren? Schreiben Sie uns – wir melden uns schnellstmöglich
                  bei Ihnen.
                </p>
                <div className="space-y-3 text-sm text-muted">
                  <p>
                    <span className="font-medium text-foreground">E-Mail:</span>{" "}
                    kontakt@sportbox-reutte.at
                  </p>
                  <p>
                    <span className="font-medium text-foreground">Telefon:</span>{" "}
                    +43 123 456 789
                  </p>
                  <p>
                    <span className="font-medium text-foreground">Adresse:</span>{" "}
                    Reutte, Tirol, Österreich
                  </p>
                </div>
              </div>
            </FadeIn>
            <FadeIn delay={0.15}>
              <ContactForm />
            </FadeIn>
          </div>
        </Container>
      </section>
    </main>
  );
}