import Link from "next/link";
import { Container } from "@/components/layout/Container";
import { Section } from "@/components/layout/Section";

export default function Home() {
  return (
    <main>
      {/* Hero Section */}
      <Section variant="hero" className="bg-[var(--color-muted)] text-center">
        <Container>
          <h1 className="mb-[var(--spacing-md)]">
            Ihr Partner für Telekom & IT <br />
            <span className="text-[color:var(--color-primary)]">in Reutte & Umgebung</span>
          </h1>
          <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
            Highspeed-Internet, brillantes Fernsehen und professionelle IT-Lösungen aus einer Hand.
            Regional, persönlich und zuverlässig seit 1976.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
            <Link href="#kontakt" className="btn btn-primary btn-lg">
              Jetzt beraten lassen
            </Link>
            <Link href="/internet" className="btn btn-outline btn-lg">
              Internet-Tarife prüfen
            </Link>
          </div>
        </Container>
      </Section>

      {/* Services Section */}
      <Section>
        <Container>
          <div className="text-center mb-[var(--spacing-2xl)]">
            <h2 className="mb-[var(--spacing-sm)]">Rundum versorgt</h2>
            <p className="text-[color:var(--color-muted-foreground)]">
              Alles, was Sie für digitale Kommunikation benötigen.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-[var(--spacing-xl)]">
            {/* Internet */}
            <div className="card text-center transition-transform hover:-translate-y-1">
              <div className="mb-[var(--spacing-md)] text-4xl">🚀</div>
              <h3 className="heading-4 mb-[var(--spacing-sm)]">Highspeed Internet</h3>
              <p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
                Egal ob Kabel oder Glasfaser – surfen Sie mit bis zu 500 Mbit/s. Stabil und unlimitiert.
              </p>
              <Link href="/internet" className="btn btn-secondary w-full">
                Zu den Tarifen
              </Link>
            </div>

            {/* Fernsehen */}
            <div className="card text-center transition-transform hover:-translate-y-1">
              <div className="mb-[var(--spacing-md)] text-4xl">📺</div>
              <h3 className="heading-4 mb-[var(--spacing-sm)]">Kabelfernsehen</h3>
              <p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
                Über 200 Programme, davon 40 in HD. Beste Bildqualität direkt aus der Region.
              </p>
              <Link href="/fernsehen" className="btn btn-secondary w-full">
                Sender entdecken
              </Link>
            </div>

            {/* Telefonie */}
            <div className="card text-center transition-transform hover:-translate-y-1">
              <div className="mb-[var(--spacing-md)] text-4xl">📞</div>
              <h3 className="heading-4 mb-[var(--spacing-sm)]">Telefonie</h3>
              <p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
                Günstig telefonieren über Ihren Kabelanschluss. Keine Grundgebühr bei Internet-Kombi.
              </p>
              <Link href="/telefonie" className="btn btn-secondary w-full">
                Mehr erfahren
              </Link>
            </div>
          </div>
        </Container>
      </Section>

      {/* IT Services Teaser */}
      <Section className="bg-[var(--color-muted)]">
        <Container>
          <div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center">
            <div>
              <h2 className="mb-[var(--spacing-md)]">
                Professionelle IT-Lösungen <br /> für Unternehmen & Privat
              </h2>
              <p className="mb-[var(--spacing-lg)]">
                Computer-Probleme? Netzwerk-Einrichtung? Wir sind Ihre IT-Experten vor Ort.
                Von der Reparatur Ihres Laptops bis zur Planung komplexer Firmennetzwerke.
              </p>
              <ul className="mb-[var(--spacing-xl)] space-y-[var(--spacing-sm)]">
                <li className="flex items-center gap-[var(--spacing-sm)]">
                  ✅ <span>Schnelle Fernwartung und Vor-Ort-Service</span>
                </li>
                <li className="flex items-center gap-[var(--spacing-sm)]">
                  ✅ <span>Netzwerk- und Serverplanung</span>
                </li>
                <li className="flex items-center gap-[var(--spacing-sm)]">
                  ✅ <span>Verkauf & Reparatur von Hardware</span>
                </li>
              </ul>
              <Link href="/leistungen" className="btn btn-primary">
                Zu den IT-Services
              </Link>
            </div>
            <div className="bg-white p-[var(--spacing-md)] rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)] rotate-1 hover:rotate-0 transition-transform duration-500">
              {/* Placeholder styled as a media frame */}
              <div className="aspect-video bg-[var(--color-muted)] rounded-[var(--radius-md)] flex flex-col items-center justify-center text-[color:var(--color-muted-foreground)] border-2 border-dashed border-[var(--color-border)]">
                <span className="text-4xl mb-2">📸</span>
                <span className="font-medium">IT-Service vor Ort</span>
              </div>
              <p className="text-xs text-[color:var(--color-muted-foreground)] text-center mt-[var(--spacing-sm)]">
                Symbolbild: Unser Team bei der Netzwerk-Installation
              </p>
            </div>
          </div>
        </Container>
      </Section>

      {/* USPs / Trust Section */}
      <Section>
        <Container>
          <h2 className="text-center mb-[var(--spacing-2xl)]">Warum TeleNetSystems?</h2>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
            <div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
              <div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">1976</div>
              <p className="font-semibold text-[color:var(--color-foreground)]">Gründung</p>
              <p className="text-sm text-[color:var(--color-muted-foreground)]">Erfahrung seit 50 Jahren</p>
            </div>
            <div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
              <div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">100%</div>
              <p className="font-semibold text-[color:var(--color-foreground)]">Tirol</p>
              <p className="text-sm text-[color:var(--color-muted-foreground)]">Regional aus Reutte</p>
            </div>
            <div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
              <div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">24h</div>
              <p className="font-semibold text-[color:var(--color-foreground)]">Support</p>
              <p className="text-sm text-[color:var(--color-muted-foreground)]">Störungsdienst</p>
            </div>
            <div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
              <div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">Top</div>
              <p className="font-semibold text-[color:var(--color-foreground)]">Service</p>
              <p className="text-sm text-[color:var(--color-muted-foreground)]">Persönlicher Ansprechpartner</p>
            </div>
          </div>
        </Container>
      </Section>

      {/* Contact CTA */}
      <Section id="kontakt" className="bg-[var(--color-primary)] text-[color:var(--color-background)]">
        <Container className="text-center">
          <h2 className="text-[color:var(--color-background)] mb-[var(--spacing-md)]">
            Noch Fragen? Wir sind für Sie da.
          </h2>
          <p className="text-xl mb-[var(--spacing-xl)] opacity-90">
            Rufen Sie uns an oder schreiben Sie uns. Wir beraten Sie gerne persönlich.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
            <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
              📞 Anrufen
            </a>
            <a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
              ✉️ E-Mail schreiben
            </a>
          </div>
        </Container>
      </Section>
    </main>
  );
}