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 { Dumbbell, Users, Clock, Heart } from "lucide-react";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Sportbox Reutte – Dein Fitnessstudio in Reutte",
  description:
    "Willkommen bei Sportbox Reutte – Ihr Fitnessstudio für individuelle Trainingspläne und persönliche Betreuung in Reutte, Tirol.",
  openGraph: {
    title: "Sportbox Reutte – Dein Fitnessstudio in Reutte",
    description:
      "Ihr Fitnessstudio für individuelle Trainingspläne und persönliche Betreuung in Reutte, Tirol.",
    url: "https://sportbox-reutte.at",
  },
};

const FEATURES = [
  {
    icon: Dumbbell,
    title: "Individuelle Betreuung",
    description:
      "Persönliche Trainingspläne, abgestimmt auf Ihre Ziele und Ihr Fitnesslevel.",
  },
  {
    icon: Users,
    title: "Starke Community",
    description:
      "Trainieren Sie in einer motivierenden Gemeinschaft, die Sie unterstützt und inspiriert.",
  },
  {
    icon: Clock,
    title: "Flexible Zeiten",
    description:
      "Großzügige Öffnungszeiten, damit Fitness in Ihren Alltag passt.",
  },
  {
    icon: Heart,
    title: "Ganzheitlicher Ansatz",
    description:
      "Körperliche Fitness, mentale Gesundheit und Ernährung – alles unter einem Dach.",
  },
] as const;

const SERVICES_PREVIEW = [
  {
    title: "Personal Training",
    description:
      "Eins-zu-Eins Betreuung durch zertifizierte Trainer für maximale Ergebnisse.",
  },
  {
    title: "Gruppenkurse",
    description:
      "Von Yoga bis Krafttraining – vielfältige Kurse für jedes Fitnesslevel.",
  },
  {
    title: "Ernährungsberatung",
    description:
      "Professionelle Beratung für eine Ernährung, die Ihre Trainingsziele unterstützt.",
  },
] as const;

export default function HomePage() {
  return (
    <main>
      {/* Hero Section */}
      <section className="relative flex items-center min-h-screen bg-primary text-secondary">
        <Container className="py-32 md:py-40">
          <FadeIn>
            <p className="text-sm uppercase tracking-[0.2em] text-secondary/60 mb-6">
              Fitnessstudio in Reutte, Tirol
            </p>
          </FadeIn>
          <FadeIn delay={0.1}>
            <h1
              className="font-bold max-w-3xl"
              style={{
                fontSize: "clamp(var(--text-4xl), 5vw, var(--text-6xl))",
                lineHeight: "1.1",
                letterSpacing: "var(--text-5xl-letter-spacing)",
              }}
            >
              Dein Weg zu mehr
              <br />
              Fitness beginnt hier.
            </h1>
          </FadeIn>
          <FadeIn delay={0.2}>
            <p className="mt-6 max-w-xl text-secondary/70" style={{ fontSize: "var(--text-lg)" }}>
              Individuelle Trainingspläne, persönliche Betreuung und eine
              motivierende Community. Willkommen bei Sportbox Reutte.
            </p>
          </FadeIn>
          <FadeIn delay={0.3}>
            <div className="mt-10 flex flex-col sm:flex-row 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="/über-uns" variant="ghost" className="text-secondary/80 hover:text-secondary">
                Mehr über uns erfahren
              </Button>
            </div>
          </FadeIn>
        </Container>
      </section>

      {/* Features Section */}
      <section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)]">
        <Container>
          <FadeIn>
            <SectionHeading
              title="Warum Sportbox Reutte?"
              subtitle="Wir bieten mehr als nur ein Fitnessstudio – wir sind Ihr Partner auf dem Weg zu einem gesünderen Leben."
            />
          </FadeIn>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {FEATURES.map((feature, index) => (
              <FadeIn key={feature.title} delay={index * 0.1}>
                <Card className="text-center h-full">
                  <feature.icon
                    size={32}
                    className="mx-auto mb-4 text-primary"
                    aria-hidden="true"
                  />
                  <h3 className="text-base font-bold mb-2">{feature.title}</h3>
                  <p className="text-sm text-muted">{feature.description}</p>
                </Card>
              </FadeIn>
            ))}
          </div>
        </Container>
      </section>

      {/* About Teaser Section */}
      <section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)] bg-neutral">
        <Container>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <FadeIn>
              <div
                className="aspect-[4/3] bg-accent/40 flex items-center justify-center"
                style={{ borderRadius: "var(--radius-md)" }}
              >
                <p className="text-muted text-sm">PLACEHOLDER: Studio-Bild</p>
              </div>
            </FadeIn>
            <FadeIn delay={0.15}>
              <div>
                <p className="text-sm uppercase tracking-[0.2em] text-muted mb-4">
                  Über uns
                </p>
                <h2
                  className="font-bold mb-6"
                  style={{
                    fontSize: "var(--text-3xl)",
                    lineHeight: "var(--text-3xl-line-height)",
                    letterSpacing: "var(--text-3xl-letter-spacing)",
                  }}
                >
                  Mehr als nur Training – eine Gemeinschaft.
                </h2>
                <p className="text-muted mb-6 leading-relaxed">
                  Bei Sportbox Reutte stehen Sie im Mittelpunkt. Unser erfahrenes
                  Team begleitet Sie auf Ihrem individuellen Weg – ob Einsteiger
                  oder Fortgeschrittener. Gemeinsam erreichen wir Ihre Ziele.
                </p>
                <Button href="/über-uns" variant="secondary">
                  Mehr über uns erfahren
                </Button>
              </div>
            </FadeIn>
          </div>
        </Container>
      </section>

      {/* Services Preview Section */}
      <section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)]">
        <Container>
          <FadeIn>
            <SectionHeading
              title="Unsere Leistungen"
              subtitle="Entdecken Sie unser vielfältiges Angebot für Ihre persönlichen Fitnessziele."
            />
          </FadeIn>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {SERVICES_PREVIEW.map((service, index) => (
              <FadeIn key={service.title} delay={index * 0.1}>
                <Card className="h-full">
                  <h3 className="text-lg font-bold mb-3">{service.title}</h3>
                  <p className="text-sm text-muted mb-4">{service.description}</p>
                  <Button href="/leistungen" variant="ghost" className="text-sm">
                    Mehr erfahren
                  </Button>
                </Card>
              </FadeIn>
            ))}
          </div>
        </Container>
      </section>

      {/* CTA Section */}
      <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)",
              }}
            >
              Bereit für den ersten Schritt?
            </h2>
            <p className="text-secondary/70 mb-8 max-w-lg mx-auto">
              Vereinbaren Sie jetzt einen unverbindlichen Termin und lernen Sie
              Sportbox Reutte kennen.
            </p>
            <Button
              href="/leistungen#kontakt"
              variant="secondary"
              className="border-secondary text-secondary hover:bg-secondary hover:text-primary"
            >
              Jetzt Termin buchen
            </Button>
          </FadeIn>
        </Container>
      </section>

      {/* JSON-LD Structured Data */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "LocalBusiness",
            name: "Sportbox Reutte",
            description:
              "Fitnessstudio für individuelle Trainingspläne und persönliche Betreuung in Reutte, Tirol.",
            url: "https://sportbox-reutte.at",
            telephone: "+43123456789",
            email: "kontakt@sportbox-reutte.at",
            address: {
              "@type": "PostalAddress",
              addressLocality: "Reutte",
              addressRegion: "Tirol",
              addressCountry: "AT",
            },
            sameAs: [],
          }),
        }}
      />
    </main>
  );
}