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: "Studio",
  description:
    "Entdecken Sie unsere modernen Räumlichkeiten und hochwertigen Fitnessgeräte bei Sportbox Reutte.",
  openGraph: {
    title: "Studio | Sportbox Reutte",
    description:
      "Moderne Räumlichkeiten und hochwertige Fitnessgeräte bei Sportbox Reutte in Reutte, Tirol.",
    url: "https://sportbox-reutte.at/studio",
  },
};

const AREAS = [
  {
    title: "Kraftbereich",
    description:
      "Freie Gewichte, Kabelzüge und Kraftgeräte der neuesten Generation für effektives Krafttraining.",
  },
  {
    title: "Cardio-Zone",
    description:
      "Laufbänder, Ergometer und Rudergeräte für Ihr Ausdauertraining in angenehmer Atmosphäre.",
  },
  {
    title: "Functional Area",
    description:
      "Offener Trainingsbereich mit Rig, Kettlebells, Medizinbällen und TRX für funktionelles Training.",
  },
  {
    title: "Kursraum",
    description:
      "Großer, heller Kursraum für Yoga, Pilates, HIIT und weitere Gruppenkurse.",
  },
  {
    title: "Umkleiden & Duschen",
    description:
      "Moderne Umkleidebereiche mit Schließfächern, Duschen und allem, was Sie brauchen.",
  },
  {
    title: "Lounge",
    description:
      "Gemütlicher Aufenthaltsbereich zum Ankommen, Austauschen und Entspannen nach dem Training.",
  },
] as const;

const GALLERY_ITEMS = [
  "Trainingsbereich",
  "Cardio-Zone",
  "Kursraum",
  "Eingangsbereich",
  "Functional Area",
  "Lounge",
] as const;

export default function StudioPage() {
  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">
              Unser Studio
            </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)",
              }}
            >
              Ihr Trainingsraum in Reutte.
            </h1>
          </FadeIn>
          <FadeIn delay={0.2}>
            <p className="mt-6 max-w-xl text-secondary/70" style={{ fontSize: "var(--text-lg)" }}>
              Moderne Geräte, durchdachte Räumlichkeiten und eine Atmosphäre,
              die zum Training motiviert.
            </p>
          </FadeIn>
        </Container>
      </section>

      {/* Studio Overview */}
      <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">
                  Räumlichkeiten
                </p>
                <h2
                  className="font-bold mb-6"
                  style={{
                    fontSize: "var(--text-3xl)",
                    lineHeight: "var(--text-3xl-line-height)",
                    letterSpacing: "var(--text-3xl-letter-spacing)",
                  }}
                >
                  Trainieren mit Blick auf das Wesentliche.
                </h2>
                <p className="text-muted leading-relaxed mb-4">
                  Unser Studio verbindet Funktionalität mit Atmosphäre. Auf
                  großzügiger Fläche finden Sie alles, was Sie für ein
                  effektives Training brauchen – ohne Ablenkung, aber mit Stil.
                </p>
                <p className="text-muted leading-relaxed">
                  Hochwertige Geräte namhafter Hersteller, durchdachte
                  Trainingszonen und eine klare Raumaufteilung sorgen dafür,
                  dass Sie sich auf das konzentrieren können, was zählt: Ihr
                  Training.
                </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: Studio-Übersicht</p>
              </div>
            </FadeIn>
          </div>
        </Container>
      </section>

      {/* Areas */}
      <section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)] bg-neutral">
        <Container>
          <FadeIn>
            <SectionHeading
              title="Unsere Bereiche"
              subtitle="Jeder Bereich ist darauf ausgelegt, Ihnen das bestmögliche Trainingserlebnis zu bieten."
            />
          </FadeIn>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {AREAS.map((area, index) => (
              <FadeIn key={area.title} delay={index * 0.08}>
                <Card className="h-full bg-background">
                  <h3 className="text-base font-bold mb-2">{area.title}</h3>
                  <p className="text-sm text-muted">{area.description}</p>
                </Card>
              </FadeIn>
            ))}
          </div>
        </Container>
      </section>

      {/* Gallery */}
      <section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)]">
        <Container>
          <FadeIn>
            <SectionHeading
              title="Einblicke"
              subtitle="Werfen Sie einen Blick in unsere Räumlichkeiten."
            />
          </FadeIn>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {GALLERY_ITEMS.map((item, index) => (
              <FadeIn key={item} delay={index * 0.05}>
                <div
                  className="aspect-[4/3] bg-neutral flex items-center justify-center"
                  style={{ borderRadius: "var(--radius-md)" }}
                >
                  <p className="text-muted text-sm">PLACEHOLDER: {item}</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)",
              }}
            >
              Überzeugen Sie sich selbst.
            </h2>
            <p className="text-secondary/70 mb-8 max-w-lg mx-auto">
              Vereinbaren Sie einen Termin für ein unverbindliches Probetraining
              in unserem Studio.
            </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="/leistungen"
                variant="ghost"
                className="text-secondary/80 hover:text-secondary"
              >
                Unsere Leistungen
              </Button>
            </div>
          </FadeIn>
        </Container>
      </section>
    </main>
  );
}