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 { Section } from "@/components/layout/Section";
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="flex items-center min-h-[90vh] bg-primary text-secondary">
        <Container className="py-20 md:py-32">
          <FadeIn>
            <p className="text-sm uppercase tracking-[0.2em] opacity-80 mb-6">
              Fitnessstudio in Reutte, Tirol
            </p>
          </FadeIn>
          <FadeIn delay={0.1}>
            <h1 className="font-bold max-w-4xl text-5xl md:text-6xl lg:text-[5rem] leading-[1.1] tracking-tight mb-6">
              Dein Weg zu mehr
              <br />
              Fitness beginnt hier.
            </h1>
          </FadeIn>
          <FadeIn delay={0.2}>
            <p className="mt-6 max-w-xl text-lg md:text-xl text-secondary/80 leading-relaxed">
              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="outline-white">
                Jetzt Termin buchen
              </Button>
              <Button href="/über-uns" variant="ghost-white">
                Mehr über uns erfahren
              </Button>
            </div>
          </FadeIn>
        </Container>
      </Section>

      {/* Features Section */}
      <Section>
        <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-8">
            {FEATURES.map((feature, index) => (
              <FadeIn key={feature.title} delay={index * 0.1}>
                {/* Simplified Card usage since it might be just a div in this specialized case or reuse Card */}
                <Card className="text-center h-full p-6 bg-background border border-border shadow-sm">
                  <feature.icon
                    size={32}
                    className="mx-auto mb-4 text-primary"
                    aria-hidden="true"
                  />
                  <h3 className="text-lg font-bold mb-2">{feature.title}</h3>
                  <p className="text-sm text-muted leading-relaxed">{feature.description}</p>
                </Card>
              </FadeIn>
            ))}
          </div>
        </Container>
      </Section>

      {/* About Teaser Section */}
      <Section className="bg-neutral">
        <Container>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
            <FadeIn>
              <div
                className="aspect-[4/3] bg-accent/40 flex items-center justify-center rounded-2xl overflow-hidden shadow-lg"
              >
                <div className="text-muted text-sm font-medium">PLACEHOLDER: Studio-Bild</div>
              </div>
            </FadeIn>
            <FadeIn delay={0.15}>
              <div>
                <p className="text-sm uppercase tracking-[0.2em] text-muted mb-4 font-semibold">
                  Über uns
                </p>
                <h2 className="text-3xl md:text-4xl font-bold mb-6 tracking-tight">
                  Mehr als nur Training – eine Gemeinschaft.
                </h2>
                <p className="text-muted mb-8 leading-relaxed text-lg">
                  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>
        <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-8">
            {SERVICES_PREVIEW.map((service, index) => (
              <FadeIn key={service.title} delay={index * 0.1}>
                <Card className="h-full flex flex-col p-8 bg-background border border-border shadow-sm hover:shadow-md transition-shadow">
                  <h3 className="text-xl font-bold mb-3">{service.title}</h3>
                  <p className="text-sm text-muted mb-6 flex-grow leading-relaxed">{service.description}</p>
                  <div className="mt-auto">
                    <Button href="/leistungen" variant="ghost" className="px-0 hover:bg-transparent">
                      Mehr erfahren →
                    </Button>
                  </div>
                </Card>
              </FadeIn>
            ))}
          </div>
        </Container>
      </Section>

      {/* CTA Section */}
      <Section className="bg-primary text-secondary text-center">
        <Container>
          <FadeIn>
            <h2 className="text-3xl md:text-4xl font-bold mb-6 tracking-tight">
              Bereit für den ersten Schritt?
            </h2>
            <p className="text-secondary/80 mb-10 max-w-xl mx-auto text-lg">
              Vereinbaren Sie jetzt einen unverbindlichen Termin und lernen Sie
              Sportbox Reutte kennen.
            </p>
            <Button
              href="/leistungen#kontakt"
              variant="outline-white"
              className="px-8 py-4 text-base"
            >
              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>
  );
}
