import Link from 'next/link';

import { ArrowRight, ChevronDown } from 'lucide-react';
import { getTranslations } from 'next-intl/server';

import { Button } from '@kit/ui/button';
import { Trans } from '@kit/ui/trans';

import { SitePageHeader } from '~/(marketing)/_components/site-page-header';

export const generateMetadata = async () => {
  const t = await getTranslations('marketing');

  return {
    title: t('faq'),
  };
};

async function FAQPage() {
  const t = await getTranslations('marketing');

  const faqItems = [
    {
      question: 'Was ist MYeasyCMS?',
      answer:
        'MYeasyCMS ist eine webbasierte Vereins- und Verbandsverwaltung. Sie verwalten Mitglieder, Beiträge, Kurse, Veranstaltungen, Finanzen und mehr — alles über den Browser, ohne Software-Installation.',
    },
    {
      question: 'Für welche Vereine ist MYeasyCMS geeignet?',
      answer:
        'MYeasyCMS eignet sich für alle Arten von Vereinen: Sportvereine, Fischereivereine, Kulturvereine, Bildungseinrichtungen, Verbände und kommunale Organisationen. Über 90 Vereine in Bayern arbeiten bereits mit der Plattform.',
    },
    {
      question: 'Gibt es einen kostenlosen Testzugang?',
      answer:
        'Ja, wir richten Ihnen einen kostenlosen Testzugang ein und führen Sie persönlich durch die Plattform. Rufen Sie uns an unter 09451 9499-09 oder nutzen Sie das Kontaktformular.',
    },
    {
      question: 'Muss ich Software installieren?',
      answer:
        'Nein. MYeasyCMS ist vollständig webbasiert und läuft in jedem modernen Browser (Chrome, Firefox, Safari, Edge). Es gibt keinen Download, keine Installation und keine manuellen Updates.',
    },
    {
      question: 'Wie viele Benutzer kann ich anlegen?',
      answer:
        'Es gibt keine Begrenzung der Benutzeranzahl. Alle Tarife enthalten unbegrenzte Zugänge für Vorstandsmitglieder, Kassenwarte, Kursleiter und andere Mitarbeiter.',
    },
    {
      question: 'Ist MYeasyCMS DSGVO-konform?',
      answer:
        'Ja. Alle Daten liegen auf Servern in Deutschland. Rollenbasierte Zugriffsrechte, verschlüsselte Datenübertragung und Funktionen für Auskunfts- und Löschungsanfragen sind integriert. Ein Auftragsverarbeitungsvertrag (AVV) wird bereitgestellt.',
    },
    {
      question: 'Kann ich bestehende Mitgliederlisten importieren?',
      answer:
        'Ja. Der Import-Assistent unterstützt Excel- und CSV-Dateien. Sie laden Ihre bestehende Mitgliederliste hoch, ordnen die Spalten zu und importieren die Daten. Bei Bedarf unterstützt Sie das Com.BISS-Team persönlich.',
    },
    {
      question: 'Wie funktioniert der SEPA-Beitragseinzug?',
      answer:
        'MYeasyCMS erzeugt SEPA-XML-Dateien (pain.008) aus den hinterlegten Mandaten und offenen Beiträgen. Sie laden die Datei herunter und reichen sie im Online-Banking Ihrer Bank ein. Mandatsverwaltung und IBAN-Prüfung sind integriert.',
    },
    {
      question: 'Wie erreiche ich den Support?',
      answer:
        'Direkt und persönlich — kein anonymes Ticketsystem. Telefon: 09451 9499-09, E-Mail: info@combiss.de. Sie sprechen mit den Menschen, die Ihre Software entwickeln.',
    },
    {
      question: 'Was kostet MYeasyCMS?',
      answer:
        'Die Preise richten sich nach der Vereinsgröße (Mitgliederzahl). Alle Module und Funktionen sind in jedem Tarif enthalten. Für ein individuelles Angebot kontaktieren Sie uns — wir beraten Sie gerne.',
    },
  ];

  const structuredData = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: faqItems.map((item) => {
      return {
        '@type': 'Question',
        name: item.question,
        acceptedAnswer: {
          '@type': 'Answer',
          text: item.answer,
        },
      };
    }),
  };

  return (
    <>
      <script
        key={'ld:json'}
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
      />

      <div className={'flex flex-col space-y-4 xl:space-y-8'}>
        <SitePageHeader title={t('faq')} subtitle={t('faqSubtitle')} />

        <div className={'container flex flex-col items-center space-y-8 pb-16'}>
          <div className="divide-border flex w-full max-w-xl flex-col divide-y divide-dashed rounded-md border">
            {faqItems.map((item, index) => {
              return <FaqItem key={index} item={item} />;
            })}
          </div>

          <div>
            <Button
              nativeButton={false}
              render={<Link href={'/contact'} />}
              variant={'link'}
            >
              <span>
                <Trans i18nKey={'marketing.contactFaq'} />
              </span>

              <ArrowRight className={'ml-2 w-4'} />
            </Button>
          </div>
        </div>
      </div>
    </>
  );
}

export default FAQPage;

function FaqItem({
  item,
}: React.PropsWithChildren<{
  item: {
    question: string;
    answer: string;
  };
}>) {
  return (
    <details
      className={
        'hover:bg-muted/70 [&:open]:bg-muted/70 [&:open]:hover:bg-muted transition-all'
      }
    >
      <summary
        className={'flex items-center justify-between p-4 hover:cursor-pointer'}
      >
        <h2 className={'cursor-pointer font-sans text-base'}>
          <Trans i18nKey={item.question} defaults={item.question} />
        </h2>

        <div>
          <ChevronDown
            className={'h-5 transition duration-300 group-open:-rotate-180'}
          />
        </div>
      </summary>

      <div className={'text-muted-foreground flex flex-col gap-y-2 px-4 pb-2'}>
        <Trans i18nKey={item.answer} defaults={item.answer} />
      </div>
    </details>
  );
}