import { Container } from "@/components/ui/Container";
import { Button } from "@/components/ui/Button";
import { Card } from "@/components/ui/Card";
import { FadeIn } from "@/components/ui/FadeIn";
import { Calendar, ArrowRight } from "lucide-react";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Aktuelles",
  description:
    "Bleiben Sie auf dem Laufenden über Neuigkeiten, Events und Angebote bei Sportbox Reutte.",
  openGraph: {
    title: "Aktuelles | Sportbox Reutte",
    description:
      "Neuigkeiten, Events und Angebote bei Sportbox Reutte – Ihrem Fitnessstudio in Reutte, Tirol.",
    url: "https://sportbox-reutte.at/aktuelles",
  },
};

const BLOG_POSTS = [
  {
    title: "5 Tipps für den perfekten Trainingsstart",
    excerpt:
      "Sie möchten mit dem Training beginnen, wissen aber nicht wo? Unsere Experten teilen ihre besten Tipps für Einsteiger.",
    date: "2026-01-15",
    category: "Tipps",
  },
  {
    title: "Neue Gruppenkurse ab Februar",
    excerpt:
      "Ab Februar erweitern wir unser Kursangebot: HIIT, Functional Training und Pilates neu im Programm.",
    date: "2026-01-10",
    category: "Neuigkeiten",
  },
  {
    title: "Ernährung und Training: Was wirklich zählt",
    excerpt:
      "Unsere Ernährungsberaterin Lisa Mayer erklärt, wie Sie Ihre Ernährung optimal auf Ihr Training abstimmen.",
    date: "2026-01-05",
    category: "Ernährung",
  },
  {
    title: "Rückblick: Community Workout im Dezember",
    excerpt:
      "Über 40 Teilnehmer beim letzten Community Workout – ein Rückblick auf einen großartigen Abend.",
    date: "2025-12-20",
    category: "Events",
  },
  {
    title: "Krafttraining für Anfänger: Der richtige Einstieg",
    excerpt:
      "Thomas Huber zeigt die wichtigsten Grundübungen und erklärt, worauf Anfänger achten sollten.",
    date: "2025-12-15",
    category: "Training",
  },
  {
    title: "Yoga und Fitness: Die perfekte Kombination",
    excerpt:
      "Warum Yoga die ideale Ergänzung zu Ihrem Krafttraining ist und wie Sie beide Disziplinen verbinden können.",
    date: "2025-12-10",
    category: "Yoga",
  },
] as const;

const EVENTS = [
  {
    title: "Community Workout – Open Air",
    date: "15. März 2026",
    time: "10:00 – 12:00 Uhr",
    description: "Gemeinsames Training im Freien für alle Fitnesslevel.",
  },
  {
    title: "Ernährungs-Workshop",
    date: "22. März 2026",
    time: "14:00 – 16:00 Uhr",
    description:
      "Lernen Sie, wie Sie Ihre Mahlzeiten optimal für Ihre Ziele planen.",
  },
  {
    title: "Fitness-Challenge: 30 Tage",
    date: "1. April 2026",
    time: "Start: jederzeit",
    description:
      "30 Tage, 30 Challenges – machen Sie mit und erreichen Sie neue Bestleistungen.",
  },
] as const;

function formatDate(dateString: string): string {
  return new Date(dateString).toLocaleDateString("de-AT", {
    day: "numeric",
    month: "long",
    year: "numeric",
  });
}

export default function AktuellesPage() {
  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">
              Aktuelles
            </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)",
              }}
            >
              Neuigkeiten & Events
            </h1>
          </FadeIn>
          <FadeIn delay={0.2}>
            <p className="mt-6 max-w-xl text-secondary/70" style={{ fontSize: "var(--text-lg)" }}>
              Bleiben Sie auf dem Laufenden über Neuigkeiten, Events und
              Angebote in unserem Fitnessstudio.
            </p>
          </FadeIn>
        </Container>
      </section>

      {/* Blog Posts */}
      <section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)]">
        <Container>
          <FadeIn>
            <h2
              className="font-bold mb-2"
              style={{
                fontSize: "var(--text-2xl)",
                lineHeight: "var(--text-2xl-line-height)",
              }}
            >
              Beiträge
            </h2>
            <p className="text-muted mb-10">
              Tipps, Neuigkeiten und Wissenswertes rund um Fitness und Gesundheit.
            </p>
          </FadeIn>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {BLOG_POSTS.map((post, index) => (
              <FadeIn key={post.title} delay={index * 0.05}>
                <article>
                  <Card className="h-full flex flex-col">
                    <div className="flex items-center gap-3 mb-4">
                      <span className="text-xs uppercase tracking-widest text-muted font-medium">
                        {post.category}
                      </span>
                      <span className="text-xs text-muted">
                        {formatDate(post.date)}
                      </span>
                    </div>
                    <h3 className="text-base font-bold mb-2">{post.title}</h3>
                    <p className="text-sm text-muted flex-1">{post.excerpt}</p>
                    <div className="mt-4 flex items-center gap-1 text-sm font-medium text-primary">
                      <span>Weiterlesen</span>
                      <ArrowRight size={14} aria-hidden="true" />
                    </div>
                  </Card>
                </article>
              </FadeIn>
            ))}
          </div>
        </Container>
      </section>

      {/* Events */}
      <section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)] bg-neutral">
        <Container>
          <FadeIn>
            <h2
              className="font-bold mb-2"
              style={{
                fontSize: "var(--text-2xl)",
                lineHeight: "var(--text-2xl-line-height)",
              }}
            >
              Kommende Events
            </h2>
            <p className="text-muted mb-10">
              Workshops, Community-Events und mehr – seien Sie dabei.
            </p>
          </FadeIn>
          <div className="space-y-4">
            {EVENTS.map((event, index) => (
              <FadeIn key={event.title} delay={index * 0.1}>
                <Card className="bg-background">
                  <div className="flex flex-col md:flex-row md:items-center gap-4 md:gap-8">
                    <div className="flex items-center gap-3 md:min-w-48">
                      <Calendar size={18} className="text-muted" aria-hidden="true" />
                      <div>
                        <p className="text-sm font-bold">{event.date}</p>
                        <p className="text-xs text-muted">{event.time}</p>
                      </div>
                    </div>
                    <div className="flex-1">
                      <h3 className="text-base font-bold">{event.title}</h3>
                      <p className="text-sm text-muted mt-1">{event.description}</p>
                    </div>
                  </div>
                </Card>
              </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)",
              }}
            >
              Nichts verpassen
            </h2>
            <p className="text-secondary/70 mb-8 max-w-lg mx-auto">
              Kontaktieren Sie uns für aktuelle Informationen zu Events und
              Angeboten.
            </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>
    </main>
  );
}