import React from 'react'
import {
  ArrowRight,
  CheckCircle2,
  FileDown,
  ShieldCheck,
  Smartphone,
  Sparkles,
  TrendingUp,
  Users
} from 'lucide-react'
import PublicLayout from './public/PublicLayout'

const features = [
  {
    title: 'Smarte Auswertungen',
    body: 'Automatische Berechnungen für jede PAT-Kategorie mit klaren Kennzahlen, Trends und Fortschrittsbildern.',
    icon: Sparkles
  },
  {
    title: 'Sichere Speicherung',
    body: 'Nutzergebundene Datenhaltung, finale Abschlüsse und kontrollierte Freigaben für Trainer, Verein und Staff.',
    icon: ShieldCheck
  },
  {
    title: 'Team-ready',
    body: 'Bewertungen erfassen, öffnen, teilen und wieder sperren, ohne Excel-Chaos oder doppelte Listen.',
    icon: Users
  },
  {
    title: 'Performance-Insights',
    body: 'Schwächen erkennen, Entwicklung verfolgen und Training gezielt auf die kritischen Übungen ausrichten.',
    icon: TrendingUp
  },
  {
    title: 'Mobile Erfassung',
    body: 'Direkte Eingabe am Tisch mit klaren Grenzen pro Übung und sofortiger Berechnung der Punkte.',
    icon: Smartphone
  },
  {
    title: 'Export & Reports',
    body: 'Saubere PDF-Ausgabe, öffentliche Freigabelinks und strukturierte Ergebnisansichten für Athleten und Staff.',
    icon: FileDown
  }
]

const steps = [
  {
    title: 'Vorlage wählen',
    body: 'PAT Start, PAT 1, PAT 2 oder PAT 3 auswählen und die Bewertung sofort anlegen.'
  },
  {
    title: 'Werte erfassen',
    body: 'Einzelwerte direkt eingeben, automatisch begrenzen lassen und live berechnen.'
  },
  {
    title: 'Abschließen & teilen',
    body: 'Bewertung final abschließen, als PDF exportieren oder per Link freigeben.'
  }
]

const stats = [
  { value: '100%', label: 'Digitaler Ablauf' },
  { value: '0€', label: 'Kostenlos starten' },
  { value: 'SSL', label: 'Verschlüsselte Übertragung' },
  { value: '24/7', label: 'Jederzeit verfügbar' }
]

const scrollToSection = (sectionId) => {
  if (typeof document === 'undefined') return
  const section = document.getElementById(sectionId)
  if (!section) return
  section.scrollIntoView({ behavior: 'smooth', block: 'start' })
}

export default function Landing({ onGetStarted, onNavigate, themeToggle }) {
  return (
    <PublicLayout
      themeToggle={themeToggle}
      onGetStarted={onGetStarted}
      onNavigate={onNavigate}
      currentPath="/"
      navLinks={[
        { label: 'Features', onClick: () => scrollToSection('features') },
        { label: 'So funktioniert es', onClick: () => scrollToSection('how-it-works') },
        { label: 'Statistiken', onClick: () => scrollToSection('stats') }
      ]}
    >
      <section className="public-hero">
        <div>
          <span className="public-hero__badge">
            <Sparkles className="h-4 w-4" aria-hidden="true" />
            Jetzt live verfügbar
          </span>

          <h1 className="public-hero__title">
            Professionelle
            <span className="public-hero__title-accent"> PAT-Test Verwaltung</span>
          </h1>

          <p className="public-hero__copy">
            Erfasse, analysiere und verfolge Pool Ability Tests digital. Von der Eingabe bis zum Report läuft alles in
            einer klaren Oberfläche für Trainer, Vereine und Spieler.
          </p>

          <div className="public-hero__actions">
            <button type="button" className="public-site__button" onClick={onGetStarted}>
              Kostenlos testen
              <ArrowRight className="h-4 w-4" aria-hidden="true" />
            </button>
            <button
              type="button"
              className="public-site__button--secondary"
              onClick={() => scrollToSection('features')}
            >
              Mehr erfahren
            </button>
          </div>

          <div className="public-hero__meta">
            <span className="public-chip">
              <CheckCircle2 className="h-4 w-4 text-blue-300" aria-hidden="true" />
              PAT Start bis PAT 3
            </span>
            <span className="public-chip">
              <CheckCircle2 className="h-4 w-4 text-blue-300" aria-hidden="true" />
              Teilen, PDF und Finalisierung
            </span>
          </div>
        </div>

        <div className="public-preview__panel">
          <div className="public-preview__head">
            <strong>Live Übersicht</strong>
            <span className="public-preview__status">Online</span>
          </div>

          <div className="public-preview__grid">
            <div className="public-preview__card">
              <div className="public-preview__label">PAT 1 · Übung 1</div>
              <div className="public-preview__value public-preview__value--accent">4 / 4</div>
              <div className="public-progress">
                <span style={{ width: '100%' }} />
              </div>
            </div>
            <div className="public-preview__card">
              <div className="public-preview__label">Gesamtpunktzahl</div>
              <div className="public-preview__value public-preview__value--success">87%</div>
              <div className="public-progress">
                <span style={{ width: '87%' }} />
              </div>
            </div>
          </div>

          <div className="public-preview__meta">
            <div className="public-preview__meta-card">
              <div className="public-preview__label">Aktive Bewertung</div>
              <strong>Stefan · PAT 1</strong>
            </div>
            <div className="public-preview__meta-card">
              <div className="public-preview__label">Status</div>
              <strong>Freigabe aktiv</strong>
            </div>
            <div className="public-preview__meta-card">
              <div className="public-preview__label">Workflow</div>
              <strong>Erfassen · Finalisieren</strong>
            </div>
            <div className="public-preview__meta-card">
              <div className="public-preview__label">Auswertung</div>
              <strong>PDF & Analyse</strong>
            </div>
          </div>
        </div>
      </section>

      <section className="public-section" id="features">
        <div className="public-section__header">
          <span className="public-section__tag">Funktionen</span>
          <h2 className="public-section__title">Alles, was du für PAT-Tests brauchst</h2>
          <p className="public-section__copy">
            Von der digitalen Erfassung bis zur teamweiten Auswertung. Die neue Startseite orientiert sich an deiner
            Vorlage, sitzt aber sauber im bestehenden Produktstil.
          </p>
        </div>

        <div className="public-features">
          {features.map(({ title, body, icon: Icon }) => (
            <article key={title} className="public-card">
              <span className="public-card__icon">
                <Icon className="h-5 w-5" aria-hidden="true" />
              </span>
              <h3 className="public-card__title">{title}</h3>
              <p className="public-card__copy">{body}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="public-section" id="how-it-works">
        <div className="public-section__header">
          <span className="public-section__tag">Prozess</span>
          <h2 className="public-section__title">So läuft PAT mit uns</h2>
          <p className="public-section__copy">Von der Testvorlage bis zum Report bleibt der Ablauf kurz, klar und sicher.</p>
        </div>

        <div className="public-steps">
          {steps.map((step, index) => (
            <article key={step.title} className="public-card public-step">
              <span className="public-step__number">{index + 1}</span>
              <h3 className="public-step__title">{step.title}</h3>
              <p className="public-step__copy">{step.body}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="public-section" id="stats">
        <div className="public-section__header">
          <span className="public-section__tag">Statistiken</span>
          <h2 className="public-section__title">Klare Vorteile für den Alltag am Tisch</h2>
          <p className="public-section__copy">
            Weniger Listenpflege, weniger Medienbrüche und deutlich schneller von der Eingabe zur Auswertung.
          </p>
        </div>

        <div className="public-stats">
          {stats.map((item) => (
            <article key={item.label} className="public-stats__card">
              <div className="public-stats__value">{item.value}</div>
              <div className="public-stats__label">{item.label}</div>
            </article>
          ))}
        </div>
      </section>

      <section className="public-section">
        <div className="public-cta-panel">
          <div>
            <span className="public-section__tag">Bereit?</span>
            <h2 className="public-cta-panel__title">Starte deine nächste PAT-Bewertung ohne Tabellenchaos.</h2>
            <p className="public-cta-panel__copy">
              Login öffnen, Bewertung anlegen, Werte eintragen und Ergebnisse direkt sauber speichern oder teilen.
            </p>
          </div>

          <div className="public-cta-panel__actions">
            <button type="button" className="public-site__button" onClick={onGetStarted}>
              Jetzt kostenlos ausprobieren
              <ArrowRight className="h-4 w-4" aria-hidden="true" />
            </button>
            <button type="button" className="public-site__button--secondary" onClick={() => onNavigate('/kontakt')}>
              Kontakt öffnen
            </button>
          </div>
        </div>
      </section>
    </PublicLayout>
  )
}
