import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const faqs = [
  {
    question: "Wie lange dauert es bis meine Website fertig ist?",
    answer:
      "In der Regel ist Ihre Website innerhalb von zwei Wochen fertig — vom ersten Gespräch bis zum Go-Live. Nach der Entwicklung bekommen Sie einen Vorschau-Link, damit Sie alles in Ruhe prüfen können. Erst wenn Sie zufrieden sind, geht die Seite online.",
  },
  {
    question: "Was passiert wenn ich das Hosting kündige?",
    answer:
      "Ihre Website und Ihre Domain gehören Ihnen — immer. Wenn Sie das Hosting kündigen, übertrage ich Ihnen alles ohne Wenn und Aber. Keine versteckten Abhängigkeiten, das ist vertraglich festgehalten.",
  },
  {
    question: "Ich habe schon eine Domain — was passiert damit?",
    answer:
      "Kein Problem. Wir zeigen Ihre bestehende Domain einfach auf die neue Website um. Falls Sie möchten, kann ich die Domain auch zu mir umziehen — das macht die Verwaltung einfacher, ist aber kein Muss.",
  },
  {
    question: "Brauche ich technisches Wissen?",
    answer:
      "Keins. Sie kümmern Sie um Ihr Geschäft, ich um alles Technische. Von der Domain über die E-Mails bis zu Updates — das liegt bei mir.",
  },
  {
    question: "Kümmern Sie sich auch um Impressum und Datenschutz?",
    answer:
      "Ja, jede Website die ich baue kommt mit einem rechtssicheren Impressum und einer DSGVO-konformen Datenschutzerklärung — inklusive übersichtlichem Cookie-Hinweis, wo nötig, statt Chaos und unnötigen Tracking-Dialogen.",
  },
];

interface Faq7Props {
  className?: string;
}

const Faq7 = ({ className }: Faq7Props) => {
  return (
    <section className={cn("px-4 py-20 sm:px-6 lg:px-8 lg:py-28", className)}>
      <div className="mx-auto max-w-6xl">
        <div className="grid gap-10 border-t border-border/80 pt-10 md:grid-cols-[minmax(0,0.85fr)_minmax(0,1.15fr)] lg:gap-16">
          <div className="flex max-w-md flex-col gap-6">
            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">
              Häufige Fragen
            </p>
            <h2 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
              Vor dem Start soll nichts schwammig bleiben.
            </h2>
            <p className="text-base leading-7 text-muted-foreground">
              Falls noch etwas offen ist, schreiben Sie mir gern über das
              <a
                href="#kontakt"
                className="mx-1 whitespace-nowrap underline underline-offset-4 transition-colors hover:text-foreground"
              >
                Kontaktformular
              </a>
              .
            </p>
            <Button asChild size="lg" variant="outline" className="w-fit rounded-md">
              <a href="#kontakt">Frage stellen</a>
            </Button>
          </div>
          <Accordion type="multiple" className="rounded-lg border border-border bg-card px-4">
            {faqs.map((faq, index) => (
              <AccordionItem key={index} value={`item-${index}`}>
                <AccordionTrigger className="text-left text-base font-semibold">
                  {faq.question}
                </AccordionTrigger>
                <AccordionContent className="text-muted-foreground">
                  {faq.answer}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </div>
    </section>
  );
};

export { Faq7 };