import { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import { Section } from "@/components/layout/Section";
import { Container } from "@/components/layout/Container";
import {
  Tv,
  Wifi,
  Phone,
  MapPin,
  Clock,
  Users,
  Shield,
  Award,
  ArrowRight
} from "lucide-react";

export const metadata: Metadata = {
  title: "TeleNetSystems | Telekom & IT aus Tirol",
  description:
    "Ihr regionaler Telekom- und IT-Partner in Reutte, Tirol. Fernsehen, Internet, Telefonie und IT-Services – zuverlässig, persönlich, seit 1976.",
};

const services = [
  {
    title: "Fernsehen",
    description:
      "Über 200 Programme inkl. 40 HDTV-Sender – für Privat- und Geschäftskunden.",
    icon: Tv,
    href: "/fernsehen",
    price: "ab € 16,47/Monat",
  },
  {
    title: "Internet",
    description:
      "Highspeed-Internet über Kabel oder Glasfaser. Schnell, stabil, unlimitiert.",
    icon: Wifi,
    href: "/internet",
    price: "ab € 14,50/Monat",
  },
  {
    title: "Telefonie",
    description:
      "Flexible Telefonie-Tarife für Festnetz. Mit oder ohne Internet nutzbar.",
    icon: Phone,
    href: "/telefonie",
    price: "ab € 0,00/Monat",
  },
];

const usps = [
  {
    icon: MapPin,
    title: "Regional & Persönlich",
    description:
      "Wir sind vor Ort in Reutte. Bei Fragen oder Problemen erreichen Sie echte Ansprechpartner aus der Region.",
  },
  {
    icon: Clock,
    title: "Schnelle Hilfe",
    description:
      "Bei Störungen reagieren wir schnell. Unser Support ist für Sie da – ohne lange Warteschleifen.",
  },
  {
    icon: Users,
    title: "Seit 1976",
    description:
      "Fast 50 Jahre Erfahrung in Telekommunikation und IT. Wir kennen die Technik – und die Region.",
  },
  {
    icon: Shield,
    title: "Zuverlässig",
    description:
      "Stabile Netze, bewährte Technik, dauerhafte Lösungen. Darauf können Sie sich verlassen.",
  },
];

const trustElements = [
  { icon: Award, text: "Zertifizierter Partner" },
  { icon: Users, text: "Über 5.000 zufriedene Kunden" },
  { icon: Clock, text: "Fast 50 Jahre Erfahrung" },
];

export default function HomePage() {
  return (
    <main>
      {/* Hero Section */}
      <Section variant="hero" className="bg-[var(--color-muted)]">
        <Container>
          <div className="max-w-3xl">
            <p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-md)]">
              Ihr Telekom- und IT-Partner in Tirol
            </p>
            <h1 className="mb-[var(--spacing-lg)]">
              Zuverlässige Technik.
              <br />
              <span className="text-[var(--color-primary)]">Persönlicher Service.</span>
            </h1>
            <p className="lead mb-[var(--spacing-2xl)] max-w-2xl">
              Fernsehen, Internet und Telefonie aus einer Hand –
              direkt aus Reutte für den Bezirk und die Region.
              Mit persönlicher Beratung und schnellem Support.
            </p>
            <div className="flex flex-col sm:flex-row gap-[var(--spacing-md)]">
              <Link href="/kontakt" className="btn btn-primary btn-lg">
                Jetzt beraten lassen
              </Link>
              <Link href="/leistungen" className="btn btn-outline btn-lg">
                Unsere Leistungen
                <ArrowRight size={18} />
              </Link>
            </div>
          </div>
        </Container>
      </Section>

      {/* Services Section */}
      <Section id="leistungen">
        <Container>
          <div className="text-center mb-[var(--spacing-3xl)]">
            <h2 className="mb-[var(--spacing-md)]">Unsere Leistungen</h2>
            <p className="lead max-w-2xl mx-auto">
              Von Fernsehen über Internet bis zur Telefonie –
              wir bieten Ihnen alles aus einer Hand.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]">
            {services.map((service) => (
              <article key={service.title} className="card group">
                <div className="w-12 h-12 rounded-[var(--radius-md)] bg-[var(--color-primary)]/10 flex items-center justify-center mb-[var(--spacing-lg)]">
                  <service.icon size={24} className="text-[var(--color-primary)]" />
                </div>
                <h3 className="heading-4 mb-[var(--spacing-sm)]">{service.title}</h3>
                <p className="text-muted mb-[var(--spacing-md)]">
                  {service.description}
                </p>
                <p className="font-semibold text-[var(--color-primary)] mb-[var(--spacing-lg)]">
                  {service.price}
                </p>
                <Link
                  href={service.href}
                  className="btn btn-ghost justify-start p-0 hover:text-[var(--color-primary)]"
                >
                  Mehr erfahren
                  <ArrowRight size={16} />
                </Link>
              </article>
            ))}
          </div>
        </Container>
      </Section>

      {/* USP Section */}
      <Section className="bg-[var(--color-muted)]">
        <Container>
          <div className="text-center mb-[var(--spacing-3xl)]">
            <h2 className="mb-[var(--spacing-md)]">Warum TeleNetSystems?</h2>
            <p className="lead max-w-2xl mx-auto">
              Wir sind kein anonymer Großkonzern – sondern Ihr Partner vor Ort.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
            {usps.map((usp) => (
              <div key={usp.title} className="text-center">
                <div className="w-14 h-14 rounded-full bg-[var(--color-primary)] flex items-center justify-center mx-auto mb-[var(--spacing-md)]">
                  <usp.icon size={24} className="text-[var(--color-background)]" />
                </div>
                <h3 className="heading-5 mb-[var(--spacing-sm)]">{usp.title}</h3>
                <p className="text-sm text-muted">{usp.description}</p>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* Trust Section */}
      <Section variant="sm">
        <Container>
          <div className="flex flex-wrap justify-center gap-[var(--spacing-2xl)] items-center">
            {trustElements.map((item) => (
              <div
                key={item.text}
                className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-muted-foreground)]"
              >
                <item.icon size={20} className="text-[var(--color-primary)]" />
                <span className="text-sm font-medium">{item.text}</span>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* CTA Section */}
      <Section className="bg-[var(--color-primary)]">
        <Container>
          <div className="text-center text-[var(--color-background)]">
            <h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
              Bereit für zuverlässige Technik?
            </h2>
            <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
              Kontaktieren Sie uns für eine unverbindliche Beratung.
              Wir finden die passende Lösung für Sie.
            </p>
            <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
              <Link
                href="/kontakt"
                className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
              >
                Jetzt beraten lassen
              </Link>
              <a
                href="tel:+43567612345"
                className="btn border-2 border-[var(--color-background)] text-[var(--color-background)] hover:bg-[var(--color-background)]/10"
              >
                <Phone size={18} />
                PLACEHOLDER: Telefon
              </a>
            </div>
          </div>
        </Container>
      </Section>
    </main>
  );
}