import { site } from "@/content/site";
import type { PublicCampFacts } from "@/lib/camp";
import type { PublicPricing } from "@/lib/public-page";
import { BookButton } from "../booking/BookingProvider";

type Faq = { q: string; a: React.ReactNode };

function faqs(facts: PublicCampFacts, pricing: PublicPricing): Faq[] {
  return [
    {
      q: "Wie läuft die Buchung ab?",
      a: "Du gibst deine Daten ein, wählst die Zahlungsweise und prüfst alles in einer Übersicht. Bezahlt wird auf einer sicheren Zahlungsseite unseres Zahlungsdienstleisters Stripe. Verbindlich bestätigt ist deine Buchung, sobald die Zahlung bei uns eingegangen ist. Dann bekommst du eine E-Mail.",
    },
    {
      q: "Wie lange gilt der angezeigte Preis?",
      a: `Es gilt der Preis zum Zeitpunkt, an dem du die Buchung startest. Er bleibt ${pricing.reservationMinutes} Minuten für dich reserviert. Schließt du die Zahlung in dieser Zeit nicht ab, verfällt die Reservierung, und ein neuer Buchungsversuch wird zum dann gültigen Preis berechnet. Der Early-Bird-Preis endet am 31. Dezember 2026 um 24 Uhr und wird nicht verlängert.`,
    },
    {
      q: "Kann ich in Raten zahlen?",
      a: pricing.installmentsAllowed
        ? "Ja, in zwei oder drei Raten. Die erste Rate zahlst du bei der Buchung, die weiteren werden zu festen Terminen über deine hinterlegte Zahlungsmethode eingezogen, die letzte spätestens 30 Tage vor Anreise. Alle Beträge und Termine siehst du vor der Zahlung. Nach der letzten Rate finden keine weiteren Abbuchungen statt."
        : "Ob eine Ratenzahlung möglich ist, geben wir bekannt, sobald der Camp-Termin feststeht.",
    },
    {
      q: "Welche Zahlungsarten gibt es?",
      a: "Die verfügbaren Zahlungsarten siehst du auf der Zahlungsseite von Stripe. Kartendaten gibst du nur dort ein; wir speichern sie nicht.",
    },
    {
      q: "Wie bin ich untergebracht?",
      a: facts.accommodationText
        ? `Du buchst einen Platz pro Person mit geteilter Unterbringung. ${facts.accommodationText}`
        : "Du buchst einen Platz pro Person mit geteilter Unterbringung. Die genaue Zimmer- und Bettaufteilung veröffentlichen wir, sobald sie verbindlich feststeht, in jedem Fall bevor du buchst.",
    },
    {
      q: "Wie reise ich an?",
      a: `Du reist selbst nach Florenz an. Am Anreisetag fährt um 15:30 Uhr ein Bus vom Bahnhof Firenze Santa Maria Novella zur Villa. Kommst du mit dem Auto, fährst du direkt zur Unterkunft und bist zwischen 17:30 und 18:00 Uhr da. Am Abreisetag bringt dich der Bus zwischen 09:00 und 12:00 Uhr zurück nach Florenz. Die Anreise nach Italien und zurück ist nicht im Preis enthalten.${facts.location ? ` Das Camp findet in der ${facts.location} statt.` : ""}`,
    },
    {
      q: "Habe ich ein Widerrufsrecht?",
      a: facts.withdrawalText ? (
        <>
          Alle Hinweise zu deinem Widerrufsrecht findest du in unserer{" "}
          <a href="/widerruf" className="underline">
            Widerrufsbelehrung
          </a>
          .
        </>
      ) : (
        "Die Belehrung zu deinem Widerrufsrecht veröffentlichen wir vor dem Verkaufsstart unter „Widerrufsrecht“ im Fußbereich der Seite."
      ),
    },
    {
      q: "Was ist nicht im Preis enthalten?",
      a: `${site.services.excluded.join(", ")}.`,
    },
    {
      q: "Was gilt, wenn ich nicht teilnehmen kann?",
      a: facts.termsUrl ? (
        <>
          Das regeln unsere{" "}
          <a href={facts.termsUrl} className="underline">
            Buchungs-, Storno- und Zahlungsbedingungen
          </a>
          . Eine Reiserücktrittsversicherung ist nicht enthalten.
        </>
      ) : (
        "Die Buchungs-, Storno- und Zahlungsbedingungen veröffentlichen wir vor dem Verkaufsstart. Eine Reiserücktrittsversicherung ist nicht enthalten."
      ),
    },
    {
      q: "Ich habe einen Gutscheincode. Wo gebe ich ihn ein?",
      a: "Im zweiten Schritt der Buchung. Pro Buchung lässt sich ein Gutschein einlösen.",
    },
  ];
}

export function FaqSection({ facts, pricing }: { facts: PublicCampFacts; pricing: PublicPricing }) {
  return (
    <section id="fragen" aria-labelledby="fragen-title" className="py-24 md:py-36">
      <div className="container-edge grid gap-10 md:grid-cols-12">
        <h2 id="fragen-title" className="section-title md:col-span-4">{site.faq.title}</h2>
        <div className="md:col-span-8">
          {faqs(facts, pricing).map((item) => (
            <details key={item.q} className="group border-b border-line py-1 first:border-t">
              <summary className="flex cursor-pointer list-none items-center justify-between gap-6 py-5 text-lg font-semibold transition-colors hover:text-rosso [&::-webkit-details-marker]:hidden">
                {item.q}
                <span aria-hidden className="relative h-4 w-4 shrink-0 text-rosso transition-transform duration-300 ease-[var(--ease-editorial)] group-open:rotate-45">
                  <span className="absolute inset-x-0 top-1/2 h-[1.5px] -translate-y-1/2 bg-current" />
                  <span className="absolute inset-y-0 left-1/2 w-[1.5px] -translate-x-1/2 bg-current" />
                </span>
              </summary>
              <div className="max-w-2xl pb-5 text-ink/85">{item.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

export function ClosingSection({ pricing }: { pricing: PublicPricing }) {
  return (
    <section aria-labelledby="schluss-title" className="on-dark bg-ink py-24 text-paper md:py-36">
      <div className="container-edge">
        <h2 id="schluss-title" className="display max-w-4xl text-[clamp(2.75rem,7vw,6rem)] leading-[0.98]">
          Wir freuen uns auf dich in der Toskana.
        </h2>
        <div className="mt-10 flex flex-wrap gap-3">
          {pricing.checkoutOpen ? (
            <BookButton className="btn bg-paper px-8 text-lg text-ink hover:bg-plaster">Jetzt Platz sichern</BookButton>
          ) : (
            <a href="#preis" className="btn bg-paper px-8 text-lg text-ink hover:bg-plaster">
              Jetzt Platz sichern
            </a>
          )}
          <a href="#fragen" className="btn btn-quiet text-paper">
            Fragen ansehen
          </a>
        </div>
      </div>
    </section>
  );
}