import { Brain, HardHat, Stethoscope } from "lucide-react";

const audiences = [
    {
        icon: HardHat,
        title: "Handwerksbetriebe",
        text: "Anfragen aus der Region, ohne dass Sie ständig Marketing machen müssen. Referenzen, Leistungen und Kontaktdaten stehen dort, wo Kunden sie suchen.",
    },
    {
        icon: Stethoscope,
        title: "Praxen & Ärzte",
        text: "Neue Patienten und weniger Rückfragen am Telefon. Sprechzeiten, Leistungsspektrum und Anfahrt sofort auf einen Blick - auch am Smartphone.",
    },
    {
        icon: Brain,
        title: "Therapeuten & Berater",
        text: "Ein Auftritt, der Vertrauen weckt - bevor der Erstkontakt zustande kommt. Persönlich, ruhig, ohne Marketing-Lärm.",
    },
];

export const Services = () => {
    return (
        <section
            id="zielgruppen"
            className="mx-auto max-w-6xl px-4 py-16 md:px-6 md:py-24"
        >
            <div className="mx-auto max-w-2xl text-center">
                <span className="island-kicker">Für wen ist das?</span>
                <h2 className="mt-3 font-heading text-3xl font-bold leading-tight tracking-tight text-(--sea-ink) sm:text-4xl">
                    Finden Sie sich wieder?
                </h2>
                <p className="mt-4 text-(--sea-ink-soft) sm:text-lg">
                    Unsere Kunden verbindet eines: Sie sind Meister ihres Fachs -
                    und wollen sich nicht mit ihrer Webseite herumärgern.
                </p>
            </div>

            <ul className="mt-12 grid gap-5 md:grid-cols-3">
                {audiences.map(({ icon: Icon, title, text }) => (
                    <li
                        key={title}
                        className="feature-card rounded-2xl border border-(--line) p-6"
                    >
                        <span className="mb-4 inline-flex h-11 w-11 items-center justify-center rounded-xl bg-(--lagoon)/15 text-(--lagoon-deep)">
                            <Icon className="h-5 w-5" aria-hidden />
                        </span>
                        <h3 className="font-heading text-lg font-semibold text-(--sea-ink)">
                            {title}
                        </h3>
                        <p className="mt-2 text-sm text-(--sea-ink-soft)">{text}</p>
                    </li>
                ))}
            </ul>
        </section>
    );
};