import { User, Building2 } from "lucide-react";
import Container from "@/components/ui/Container";
import SectionHeading from "@/components/ui/SectionHeading";
import Button from "@/components/ui/Button";

export default function CustomerSegments() {
  return (
    <section className="bg-neutral-50 py-20 lg:py-24" aria-labelledby="segments-heading">
      <Container>
        <SectionHeading
          title="Für wen wir da sind"
          subtitle="Ob Privathaushalt oder Unternehmen — wir kennen die Anforderungen und finden die passende Lösung."
        />
        <div className="grid grid-cols-1 gap-8 lg:grid-cols-2" id="segments-heading">
          {/* Privatkunden */}
          <div className="overflow-hidden rounded-card bg-white shadow-sm border border-neutral-200">
            <div className="aspect-video overflow-hidden">
              <img
                src="/images/gallery/privatkunden.jpg"
                alt="Privatkunden von TeleNetSystems"
                className="h-full w-full object-cover"
                loading="lazy"
                width={600}
                height={338}
              />
            </div>
            <div className="p-8">
              <div className="flex items-center gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100">
                  <User className="h-5 w-5 text-blue-700" aria-hidden="true" />
                </div>
                <h3 className="text-xl font-semibold text-neutral-900">Privatkunden</h3>
              </div>
              <ul className="mt-5 space-y-2 text-neutral-600">
                <li className="flex items-start gap-2">
                  <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-primary-500" aria-hidden="true" />
                  Stabile Internet-Verbindung für den Alltag
                </li>
                <li className="flex items-start gap-2">
                  <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-primary-500" aria-hidden="true" />
                  TV-Pakete, die zu Ihrem Sehverhalten passen
                </li>
                <li className="flex items-start gap-2">
                  <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-primary-500" aria-hidden="true" />
                  Telefonie ohne Kleingedrucktes
                </li>
                <li className="flex items-start gap-2">
                  <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-primary-500" aria-hidden="true" />
                  Persönlicher Ansprechpartner in Reutte
                </li>
              </ul>
              <Button href="/internet" variant="outline" size="sm" className="mt-6">
                Privatangebote ansehen
              </Button>
            </div>
          </div>

          {/* Geschäftskunden */}
          <div className="overflow-hidden rounded-card bg-white shadow-sm border border-neutral-200">
            <div className="aspect-video overflow-hidden">
              <img
                src="/images/gallery/firmenkunden.jpg"
                alt="Geschäftskunden von TeleNetSystems"
                className="h-full w-full object-cover"
                loading="lazy"
                width={600}
                height={338}
              />
            </div>
            <div className="p-8">
              <div className="flex items-center gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-amber-100">
                  <Building2 className="h-5 w-5 text-amber-700" aria-hidden="true" />
                </div>
                <h3 className="text-xl font-semibold text-neutral-900">Geschäftskunden</h3>
              </div>
              <ul className="mt-5 space-y-2 text-neutral-600">
                <li className="flex items-start gap-2">
                  <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-primary-500" aria-hidden="true" />
                  Individuelle Internet- und IT-Lösungen
                </li>
                <li className="flex items-start gap-2">
                  <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-primary-500" aria-hidden="true" />
                  TV für Hotels, Gastro und Büros
                </li>
                <li className="flex items-start gap-2">
                  <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-primary-500" aria-hidden="true" />
                  Schneller technischer Support vor Ort
                </li>
                <li className="flex items-start gap-2">
                  <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-primary-500" aria-hidden="true" />
                  Beratung, die Ihre Abläufe versteht
                </li>
              </ul>
              <Button href="/#kontakt" variant="outline" size="sm" className="mt-6">
                Beratung anfragen
              </Button>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}
