storfwirt-reutte-2026-02-23-v1/website/src/app/restaurant/page.tsx

import type { Metadata } from "next";
import {
  ArrowRight,
  Users,
  Maximize2,
  MapPin,
  Wifi,
  Car,
  Music,
  Building2,
} from "lucide-react";
import Link from "next/link";
import { AnimatedSection } from "@/components/AnimatedSection";
import { Section } from "@/components/Section";
import { ContactCTA } from "@/components/ContactCTA";
import { PlaceholderImage } from "@/components/PlaceholderImage";

export const metadata: Metadata = {
  title: "Restaurant & Eventlocation",
  description:
    "Eventlocation in Reutte – flexibel einrichtbare Räume für Firmenfeiern, Hochzeiten und private Veranstaltungen. Zentral gelegen im Herzen von Reutte.",
};

const features = [
  {
    icon: Users,
    title: "Bis zu 120 Gäste",
    description: "Genug Platz für große Feiern, gemütlich genug für kleine Runden.",
  },
  {
    icon: Maximize2,
    title: "Flexible Raumgestaltung",
    description: "Bestuhlung, Tischanordnung und Deko – wir richten den Raum nach Ihren Wünschen ein.",
  },
  {
    icon: MapPin,
    title: "Zentrale Lage",
    description: "Mitten in Reutte, gut erreichbar aus dem gesamten Außerfern und dem Allgäu.",
  },
  {
    icon: Car,
    title: "Parkplätze vorhanden",
    description: "Ihre Gäste finden direkt vor dem Haus genügend Parkmöglichkeiten.",
  },
  {
    icon: Wifi,
    title: "Moderne Ausstattung",
    description: "WLAN, Beamer und Tonanlage – für Präsentationen und Feiern gleichermaßen.",
  },
  {
    icon: Music,
    title: "Musik & Unterhaltung",
    description: "Eigene Musikanlage vorhanden. Live-Musik oder DJ? Organisieren wir gerne.",
  },
];

export default function RestaurantPage() {
  return (
    <>
      {/* Hero */}
      <section className="bg-gradient-to-br from-primary-dark to-primary pt-32 pb-20 sm:pt-40 sm:pb-28">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <AnimatedSection>
            <p className="text-accent-light font-medium mb-3">
              Eventlocation in Reutte
            </p>
            <h1 className="font-heading text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight tracking-tight max-w-3xl">
              Räume, die zu Ihrem Event passen
            </h1>
            <p className="mt-6 text-lg text-white/80 max-w-2xl leading-relaxed">
              Nicht jeder Raum passt zu jedem Anlass. Unsere Location lässt sich
              so einrichten, wie Sie es brauchen – ob Seminar, Hochzeit oder
              Vereinsabend.
            </p>
            <Link
              href="/kontakt"
              className="inline-flex items-center gap-2 mt-8 rounded-lg bg-white px-6 py-3.5 text-base font-semibold text-primary hover:bg-sand transition-colors focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-dark"
            >
              Location anfragen
              <ArrowRight className="h-4 w-4" />
            </Link>
          </AnimatedSection>
        </div>
      </section>

      {/* Features */}
      <Section className="bg-cream">
        <AnimatedSection>
          <h2 className="font-heading text-3xl sm:text-4xl font-bold text-bark mb-4 text-center">
            Was unsere Location bietet
          </h2>
          <p className="text-bark-light text-lg max-w-2xl mx-auto text-center mb-12">
            Alles unter einem Dach: Raum, Küche, Service.
          </p>
        </AnimatedSection>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {features.map((feature, index) => (
            <AnimatedSection key={feature.title} delay={index * 0.08}>
              <div className="rounded-xl border border-driftwood bg-cream p-6 h-full">
                <feature.icon className="h-7 w-7 text-primary mb-3" />
                <h3 className="font-heading text-lg font-semibold text-bark mb-1.5">
                  {feature.title}
                </h3>
                <p className="text-bark-light text-sm leading-relaxed">
                  {feature.description}
                </p>
              </div>
            </AnimatedSection>
          ))}
        </div>
      </Section>

      {/* Atmosphere */}
      <Section className="bg-sand">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <AnimatedSection>
            <h2 className="font-heading text-3xl font-bold text-bark mb-6">
              Einladend, nicht steif
            </h2>
            <div className="space-y-4 text-bark-light leading-relaxed">
              <p>
                Unsere Räume sind warm und einladend eingerichtet. Hier fühlen
                sich Ihre Gäste willkommen – ohne dass es nach Konferenzraum
                aussieht.
              </p>
              <p>
                Die Kombination aus gutem Essen direkt aus unserer Küche und einer
                Location, die sich anpassen lässt, macht den Unterschied. Sie
                müssen keinen externen Caterer organisieren – bei uns kommt alles
                aus einer Hand.
              </p>
              <p>
                Und wenn Sie nach dem Event noch zusammensitzen wollen? Der
                Storfwirt schließt nicht, solange Sie feiern.
              </p>
            </div>
          </AnimatedSection>
          <AnimatedSection delay={0.1}>
            <PlaceholderImage
              icon={Building2}
              label="Bild: Innenansicht der Eventlocation"
            />
          </AnimatedSection>
        </div>
      </Section>

      {/* Gallery placeholder */}
      <Section className="bg-cream">
        <AnimatedSection>
          <h2 className="font-heading text-3xl font-bold text-bark mb-8 text-center">
            Eindrücke
          </h2>
        </AnimatedSection>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {[
            "Saal mit Tischgedeck",
            "Stehempfang",
            "Buffet-Aufbau",
            "Festliche Dekoration",
            "Außenbereich",
            "Bar & Getränke",
          ].map((label, index) => (
            <AnimatedSection key={label} delay={index * 0.08}>
              <PlaceholderImage
                icon={Building2}
                label={`Bild: ${label}`}
                aspectRatio="aspect-square"
              />
            </AnimatedSection>
          ))}
        </div>
      </Section>

      {/* CTA */}
      <ContactCTA
        headline="Ihre Feier, unsere Räume"
        text="Beschreiben Sie uns Ihr Event – wir prüfen die Verfügbarkeit und melden uns."
      />
    </>
  );
}