import React from 'react'
import { ArrowRight, FileText, Mail, ShieldCheck } from 'lucide-react'
import PublicLayout from './PublicLayout'

const pageContent = {
  '/datenschutz': {
    tag: 'Datenschutz',
    title: 'Datenschutzhinweise für PAT Manager',
    intro:
      'Diese Seite ist als saubere öffentliche Datenschutzansicht angelegt. Inhaltlich solltest du sie vor dem Livegang noch mit deinen finalen Verantwortlichen, Kontaktdaten und juristisch geprüften Angaben vervollständigen.',
    cards: [
      {
        title: 'Verantwortliche Stelle',
        body:
          'Trage hier den Vereinsnamen, die verantwortliche Person oder das Unternehmen ein, das PAT Manager betreibt. Ergänze außerdem Anschrift und eine echte Kontaktmöglichkeit.'
      },
      {
        title: 'Welche Daten verarbeitet werden',
        body:
          'Je nach Nutzung können Anmeldedaten, Bewertungsdaten, Freigaben, PDF-Exporte und technische Zugriffsdaten verarbeitet werden. Bei geteilten Bewertungen sehen anonyme Nutzer nur die explizit freigegebene Ansicht.'
      },
      {
        title: 'Zweck der Verarbeitung',
        body:
          'Die Verarbeitung dient der Durchführung von PAT-Bewertungen, der Auswertung von Leistungsdaten, der Teamorganisation sowie dem sicheren Speichern und Teilen einzelner Testergebnisse.'
      },
      {
        title: 'Speicherung und Dienstleister',
        body:
          'Die Anwendung nutzt Supabase als technische Datenbasis. Prüfe vor dem produktiven Einsatz die Auftragsverarbeitung, Speicherregion und die tatsächlich eingesetzten Zusatzdienste.'
      },
      {
        title: 'Rechte der betroffenen Personen',
        items: [
          'Auskunft über gespeicherte Daten',
          'Berichtigung unrichtiger Daten',
          'Löschung oder Einschränkung der Verarbeitung',
          'Widerspruch gegen einzelne Verarbeitungen',
          'Beschwerde bei der zuständigen Aufsichtsbehörde'
        ]
      },
      {
        title: 'Wichtiger Hinweis',
        wide: true,
        notice:
          'Diese Datenschutzseite ist eine strukturierte Vorlage. Vor der Veröffentlichung müssen echte Kontaktdaten, Rechtsgrundlagen, Speicherfristen und Dienstleisterangaben ergänzt und geprüft werden.'
      }
    ]
  },
  '/impressum': {
    tag: 'Impressum',
    title: 'Impressum für PAT Manager',
    intro:
      'Die Seite ist technisch fertig eingebunden, damit deine Footer- und Navigationslinks nicht mehr ins Leere laufen. Die konkreten Pflichtangaben musst du jetzt noch mit deinen echten Daten ergänzen.',
    cards: [
      {
        title: 'Angaben gemäß § 5 TMG',
        body:
          'Ergänze hier Betreibername, Rechtsform, vertretungsberechtigte Person sowie die vollständige ladungsfähige Anschrift.'
      },
      {
        title: 'Kontakt',
        body:
          'Trage hier eine echte E-Mail-Adresse, optional Telefonnummer und weitere Kommunikationswege ein, unter denen Nutzer dich rechtssicher erreichen können.'
      },
      {
        title: 'Verantwortlich für den Inhalt',
        body:
          'Wenn erforderlich, ergänze die verantwortliche Person nach § 18 Abs. 2 MStV mit Name und Anschrift.'
      },
      {
        title: 'Haftungs- und Linkhinweise',
        body:
          'Wenn du externe Dienste, Inhalte oder Verlinkungen nutzt, prüfe bitte deine endgültigen Texte zu Haftung, Urheberrecht und externen Verweisen.'
      },
      {
        title: 'Wichtiger Hinweis',
        wide: true,
        notice:
          'Dieses Impressum enthält absichtlich keine erfundenen Unternehmensdaten. Bitte ersetze die Platzhalter vor Veröffentlichung durch deine echten Pflichtangaben.'
      }
    ]
  },
  '/kontakt': {
    tag: 'Kontakt',
    title: 'Kontakt und Rückfragen',
    intro:
      'Hier ist eine öffentliche Kontaktseite im Stil der neuen Startseite eingebunden. Wenn du reale Ansprechpartner und Kanäle ergänzt, kannst du sie direkt produktiv nutzen.',
    cards: [
      {
        title: 'Produkt & Demo',
        body:
          'Nutze diesen Bereich für Anfragen zu PAT Manager, Demos, Vereinsnutzung oder Einführung im Trainingsalltag.'
      },
      {
        title: 'Technischer Support',
        body:
          'Hier kannst du später Support-Zeiten, E-Mail-Adresse, Reaktionszeiten oder einen Helpdesk-Link ergänzen.'
      },
      {
        title: 'Kooperationen',
        body:
          'Platz für Kontakte zu Vereinen, Trainern, Leistungszentren oder Partnern, die das System einsetzen oder testen möchten.'
      },
      {
        title: 'Empfohlene nächste Ergänzungen',
        items: [
          'Echte Support-E-Mail oder Kontaktformular verknüpfen',
          'Antwortzeiten und Zuständigkeiten ergänzen',
          'Optional Telefonnummer oder Vereinsanschrift angeben'
        ]
      },
      {
        title: 'Schnellzugriff',
        wide: true,
        action: true,
        body:
          'Wenn du direkt in die Anwendung wechseln willst, kannst du von hier aus sofort den Login öffnen und weiterarbeiten.'
      }
    ]
  }
}

export default function PublicInfoPage({ path, onGetStarted, onNavigate, themeToggle }) {
  const content = pageContent[path] || pageContent['/kontakt']

  return (
    <PublicLayout
      themeToggle={themeToggle}
      onGetStarted={onGetStarted}
      onNavigate={onNavigate}
      currentPath={path}
      navLinks={[
        { label: 'Startseite', onClick: () => onNavigate('/') },
        { label: 'Datenschutz', onClick: () => onNavigate('/datenschutz'), active: path === '/datenschutz' },
        { label: 'Impressum', onClick: () => onNavigate('/impressum'), active: path === '/impressum' },
        { label: 'Kontakt', onClick: () => onNavigate('/kontakt'), active: path === '/kontakt' }
      ]}
    >
      <section className="public-page">
        <div className="public-page__hero">
          <span className="public-section__tag">
            {path === '/kontakt' ? <Mail className="h-4 w-4" aria-hidden="true" /> : <FileText className="h-4 w-4" aria-hidden="true" />}
            {content.tag}
          </span>
          <h1 className="public-page__title">{content.title}</h1>
          <p className="public-page__copy">{content.intro}</p>
        </div>

        <div className="public-page__grid">
          {content.cards.map((card) => (
            <article
              key={card.title}
              className={`public-page__card${card.wide ? ' public-page__card--wide' : ''}`}
            >
              <h2 className="public-page__card-title">{card.title}</h2>

              {card.body && <p className="public-page__card-copy">{card.body}</p>}

              {card.items && (
                <ul className="public-page__list">
                  {card.items.map((item) => (
                    <li key={item}>{item}</li>
                  ))}
                </ul>
              )}

              {card.notice && <div className="public-page__notice">{card.notice}</div>}

              {card.action && (
                <div className="public-hero__actions">
                  <button type="button" className="public-site__button" onClick={onGetStarted}>
                    Login öffnen
                    <ArrowRight className="h-4 w-4" aria-hidden="true" />
                  </button>
                  <button type="button" className="public-site__button--secondary" onClick={() => onNavigate('/')}>
                    Zur Startseite
                  </button>
                </div>
              )}
            </article>
          ))}
        </div>

        <section className="public-section">
          <div className="public-cta-panel">
            <div>
              <span className="public-section__tag">
                <ShieldCheck className="h-4 w-4" aria-hidden="true" />
                Öffentliche Seiten fertig
              </span>
              <h2 className="public-cta-panel__title">Die verlinkten Info-Seiten sind jetzt Bestandteil der App.</h2>
              <p className="public-cta-panel__copy">
                Ergänze jetzt noch deine echten Vereins-, Kontakt- und Rechtstexte. Danach laufen Navigation und Footer
                sauber ohne Platzhalterlinks.
              </p>
            </div>
            <div className="public-cta-panel__actions">
              <button type="button" className="public-site__button" onClick={() => onNavigate('/')}>
                Zur Startseite
              </button>
              <button type="button" className="public-site__button--secondary" onClick={onGetStarted}>
                App öffnen
              </button>
            </div>
          </div>
        </section>
      </section>
    </PublicLayout>
  )
}
