"use client";

import { useState, useEffect } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { Syne } from 'next/font/google'
import { ArrowRight, ArrowUpRight, Sun, Moon, Menu, X } from 'lucide-react'

const syne = Syne({ subsets: ['latin'], weight: ['400', '500', '600', '700', '800'] })

const FEATURES = [
  {
    num: '01',
    title: 'Mitgliederverwaltung',
    desc: 'Digitales CRM für alle Mitgliedsdaten. Kontakte, Statushistorie und Dokumentenablage — sicher in der Cloud, immer aktuell.',
    tags: ['Cloud CRM', 'Aktenführung', 'Einladungsmanagement'],
  },
  {
    num: '02',
    title: 'Push-News & Kommunikation',
    desc: 'Statt ungeöffneter E-Mails: direkte Push-Benachrichtigungen mit hoher Erreichbarkeit. Sofort, zuverlässig und datenschutzorientiert konfigurierbar.',
    tags: ['Push-Notifications', 'News-Feed', 'Direktkommunikation'],
  },
  {
    num: '03',
    title: 'Event- und Terminmanagement',
    desc: 'Veranstaltungen anlegen, kommunizieren und RSVPs digital einsammeln. Keine manuellen Listen, kein Nachfragen — alles läuft automatisch.',
    tags: ['Terminübersicht', '1-Klick RSVP', 'Kalender-Export'],
  },
  {
    num: '04',
    title: 'Lehrlingsbörse & Stellenmarkt',
    desc: 'Nachwuchs finden, bevor andere ihn sehen. Integrierter Marktplatz für Ausbildungsstellen und Fachkräfte direkt in der App.',
    tags: ['Lehrlingsbörse', 'Stellenmarkt', 'Lokale Reichweite'],
  },
]

const STATS = [
  { num: 'Bis zu 10 Std.', label: 'Zeitersparnis je nach Prozess' },
  { num: 'Echtzeit', label: 'Kommunikation' },
  { num: 'Cloud', label: 'Sicher konzipiert & ueberall nutzbar' },
  { num: 'AVV', label: 'Art.-28-Vertrag vor Go-Live' },
]

const CONTACT_EMAIL = 'johannestils@aol.com'
const CONTACT_SUBJECT = 'Anfrage InnungsApp PRO'
const CONTACT_WEBMAIL_HREF = `https://mail.google.com/mail/?view=cm&fs=1&to=${encodeURIComponent(CONTACT_EMAIL)}&su=${encodeURIComponent(CONTACT_SUBJECT)}`
const COOKIE_CONSENT_KEY = 'innungsapp_cookie_consent'
const COOKIE_CONSENT_EVENT = 'innungsapp:cookie-consent-granted'
const COOKIE_CONSENT_TIMESTAMP_KEY = 'innungsapp_cookie_consent_timestamp'
const COOKIE_CONSENT_SOURCE_KEY = 'innungsapp_cookie_consent_source'
type CookieConsentState = 'loading' | 'pending' | 'accepted' | 'declined'

export default function RootPage() {
  const [theme, setTheme] = useState('theme-light');
  const [mounted, setMounted] = useState(false);
  const [openFaq, setOpenFaq] = useState<number | null>(null);
  const [cookieConsent, setCookieConsent] = useState<CookieConsentState>('loading')
  const [showMailFallback, setShowMailFallback] = useState(false)
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

  useEffect(() => {
    setMounted(true);
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
    const savedConsent = window.localStorage.getItem(COOKIE_CONSENT_KEY)
    if (savedConsent === 'accepted' || savedConsent === 'declined') {
      setCookieConsent(savedConsent)
    } else {
      setCookieConsent('pending')
    }
  }, []);

  useEffect(() => {
    if (cookieConsent === 'accepted') {
      window.posthog?.opt_in_capturing?.()
      const sendPageView = () => {
        window.posthog?.capture?.('landing_page_viewed', {
          path: window.location.pathname,
        })
      }
      if (window.posthog?.capture) {
        sendPageView()
      } else {
        window.dispatchEvent(new Event(COOKIE_CONSENT_EVENT))
        window.setTimeout(sendPageView, 150)
      }
    }
    if (cookieConsent === 'declined') {
      window.posthog?.opt_out_capturing?.()
    }
  }, [cookieConsent])

  const setCookieChoice = (choice: Exclude<CookieConsentState, 'pending' | 'loading'>) => {
    window.localStorage.setItem(COOKIE_CONSENT_KEY, choice)
    window.localStorage.setItem(COOKIE_CONSENT_TIMESTAMP_KEY, new Date().toISOString())
    window.localStorage.setItem(COOKIE_CONSENT_SOURCE_KEY, 'landing_banner')
    setCookieConsent(choice)
    if (choice === 'accepted') {
      window.dispatchEvent(new Event(COOKIE_CONSENT_EVENT))
    }
  }

  const openCookieSettings = () => {
    window.localStorage.removeItem(COOKIE_CONSENT_KEY)
    setCookieConsent('pending')
  }

  const trackLandingCta = (placement: string) => {
    if (cookieConsent !== 'accepted') return
    const sendCta = () => {
      window.posthog?.capture?.('landing_cta_clicked', {
        placement,
        target: 'contact_email',
      })
    }
    if (window.posthog?.capture) {
      sendCta()
    } else {
      window.dispatchEvent(new Event(COOKIE_CONSENT_EVENT))
      window.setTimeout(sendCta, 150)
    }
  }

  const handleContactCtaClick = (placement: string) => {
    trackLandingCta(placement)
    setShowMailFallback(true)
  }

  const toggleTheme = () => {
    const newTheme = theme === 'theme-dark' ? 'theme-light' : 'theme-dark';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };

  const toggleFaq = (index: number) => {
    setOpenFaq(openFaq === index ? null : index);
  }

  const schemaOrg = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "SoftwareApplication",
        "name": "InnungsApp PRO",
        "applicationCategory": "BusinessApplication",
        "operatingSystem": "Web, iOS, Android",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "EUR"
        },
        "description": "Cloudbasierte Verwaltungssoftware für Handwerksinnungen mit Mitgliederverwaltung, Kommunikation und Terminmanagement."
      },
      {
        "@type": "FAQPage",
        "mainEntity": [
          {
            "@type": "Question",
            "name": "Wie lange dauert der Wechsel zur InnungsApp PRO?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Unser Onboarding-Team unterstützt Sie beim gesamten Prozess und richtet Ihre Umgebung schnellstmöglich ein. Sie können zeitnah starten."
            }
          },
          {
            "@type": "Question",
            "name": "Ist die Plattform DSGVO-konform?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Wir arbeiten mit DSGVO-orientierten Prozessen. Vor Go-Live wird ein AV-Vertrag geschlossen; bei Datenverarbeitung in den USA nutzen wir SCC, dokumentieren TIA und setzen zusaetzliche Schutzmassnahmen ein. Die konkrete Compliance haengt von Konfiguration und Vertraegen ab."
            }
          },
          {
            "@type": "Question",
            "name": "Brauchen meine Mitglieder eine Schulung?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Nein, die App ist so intuitiv wie WhatsApp – Ihre Mitglieder können sie ohne Einarbeitung direkt nutzen."
            }
          }
        ]
      }
    ]
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaOrg) }}
      />
      <style>{`
        .theme-light {
          --bg: #FAFAFA;
          --nav-bg: rgba(250, 250, 250, 0.85);
          --ink: #111111;
          --ink-muted: rgba(17, 17, 17, 0.6);
          --ink-faint: rgba(17, 17, 17, 0.1);
          --gold: #C9973A;
          --gold-light: #B8862D;
          --gold-faint: rgba(201, 151, 58, 0.08); /* Subtle gold background for badges/blobs */
          --card-bg: rgba(255, 255, 255, 0.6);
          --glass-border: rgba(17, 17, 17, 0.05);
        }

        .theme-dark {
          --bg: #0C0B09;
          --nav-bg: rgba(12, 11, 9, 0.85);
          --ink: #EAE6DA;
          --ink-muted: rgba(234,230,218,0.45);
          --ink-faint: rgba(234,230,218,0.12);
          --gold: #C9973A;
          --gold-light: #DFB25C;
          --gold-faint: rgba(201, 151, 58, 0.15);
          --card-bg: rgba(20, 19, 17, 0.4);
          --glass-border: rgba(234,230,218,0.05);
        }

        body { background: var(--bg); }

        .page { 
          background: var(--bg); color: var(--ink); min-height: 100vh; 
          background-image: 
            radial-gradient(circle at 15% 50%, var(--gold-faint), transparent 25%), 
            radial-gradient(circle at 85% 30%, var(--gold-faint), transparent 25%);
          transition: background 0.3s, color 0.3s;
        }

        /* Nav */
        .nav {
          position: fixed; top: 0; left: 0; right: 0; z-index: 50;
          background: var(--nav-bg);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          border-bottom: 1px solid var(--ink-faint);
          height: 64px;
          display: flex; align-items: center;
        }
        .nav-inner {
          max-width: 1280px; margin: 0 auto; padding: 0 32px;
          display: flex; align-items: center; justify-content: space-between;
          width: 100%;
        }
        .logo { font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em; display: flex; align-items: center; }
        .logo-accent { color: var(--gold); }
        .logo-pro {
          font-size: 0.65rem;
          background: var(--gold-faint);
          color: var(--gold);
          padding: 3px 6px;
          border-radius: 4px;
          margin-left: 8px;
          letter-spacing: 0.05em;
          text-transform: uppercase;
        }
        .nav-links { display: flex; align-items: center; gap: 32px; }
        .nav-link {
          font-size: 0.875rem; color: var(--ink-muted);
          text-decoration: none; transition: color 0.15s;
          font-weight: 400;
        }
        .nav-link:hover { color: var(--ink); }
        .btn-primary {
          background: var(--gold); color: var(--bg);
          font-weight: 600; font-size: 0.875rem;
          padding: 10px 22px;
          display: inline-flex; align-items: center; gap: 6px;
          text-decoration: none;
          transition: background 0.15s, transform 0.1s;
          letter-spacing: -0.01em;
        }
        .btn-primary:hover { background: var(--gold-light); }

        /* Hero */
        .hero {
          max-width: 1280px; margin: 0 auto; padding: 160px 32px 96px;
        }
        .eyebrow {
          font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
          color: var(--gold); margin-bottom: 32px; font-weight: 500;
        }
        .hero-h1 {
          font-weight: 800; font-size: clamp(3.25rem, 8vw, 7.5rem);
          line-height: 0.92; letter-spacing: -0.04em;
          margin: 0 0 48px; color: var(--ink);
        }
        .hero-h1 em { color: var(--gold); font-style: normal; }

        .hero-body {
          display: flex; flex-direction: column; gap: 40px;
        }
        @media (min-width: 640px) {
          .hero-body { flex-direction: row; align-items: flex-start; gap: 64px; }
        }
        .hero-desc {
          max-width: 440px; color: var(--ink-muted);
          font-size: 1.0625rem; line-height: 1.7;
          font-family: 'Georgia', serif;
        }
        .hero-image-wrapper {
          flex: 1;
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 24px;
          overflow: hidden;
          box-shadow: 0 24px 80px rgba(0,0,0,0.15);
          border: 1px solid var(--glass-border);
          aspect-ratio: 16/10;
          background: var(--card-bg);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
        }
        .hero-image-wrapper img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
        .hero-cta { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; flex-shrink: 0; }
        .btn-ghost {
          border: 1px solid var(--ink-faint); color: var(--ink);
          padding: 10px 22px; font-size: 0.875rem; font-weight: 500;
          display: inline-flex; align-items: center; gap: 6px;
          text-decoration: none; transition: border-color 0.15s, background 0.15s;
          letter-spacing: -0.01em;
        }
        .btn-ghost:hover {
          border-color: var(--ink-muted);
          background: var(--ink-faint);
        }

        /* Stats */
        .stats {
          margin-top: 80px;
          border-top: 1px solid var(--ink-faint);
          display: grid; grid-template-columns: repeat(2, 1fr);
          justify-items: center;
        }
        @media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
        .stat {
          padding: 28px 24px;
          border-right: 1px solid var(--ink-faint);
          text-align: center;
          width: 100%;
        }
        .stat:last-child { border-right: none; }
        .stat-num {
          font-weight: 800; font-size: 2.25rem;
          color: var(--gold); letter-spacing: -0.03em; line-height: 1;
          margin-bottom: 6px;
        }
        .stat-label { font-size: 0.8125rem; color: var(--ink-muted); font-family: 'Georgia', serif; }

        /* Features */
        .features { border-top: 1px solid var(--ink-faint); padding: 96px 0; }
        .features-inner {
          max-width: 1280px; margin: 0 auto; padding: 0 32px;
          display: grid; grid-template-columns: 1fr;
          gap: 64px;
        }
        @media (min-width: 1024px) {
          .features-inner { grid-template-columns: 5fr 7fr; gap: 96px; }
        }
        .features-sticky { }
        @media (min-width: 1024px) {
          .features-sticky { position: sticky; top: 88px; }
        }
        .features-h2 {
          font-weight: 800; font-size: clamp(2.5rem, 5vw, 4rem);
          letter-spacing: -0.04em; line-height: 1.0;
          margin: 24px 0 28px; color: var(--ink);
        }
        .features-sub { color: var(--ink-muted); font-family: 'Georgia', serif; line-height: 1.65; font-size: 0.9375rem; }

        .feature-list { display: flex; flex-direction: column; }
        .feature-item {
          padding: 36px 32px;
          border: 1px solid var(--glass-border);
          background: var(--card-bg);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          border-radius: 24px;
          display: flex; gap: 28px; align-items: flex-start;
          cursor: default;
          margin-bottom: 24px;
          transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
        }
        .feature-item:hover {
          transform: translateY(-4px);
          border-color: var(--ink-faint);
          box-shadow: 0 12px 40px rgba(0,0,0,0.05);
        }
        .feature-num {
          font-weight: 800; font-size: 3.5rem; line-height: 1;
          color: var(--ink-faint); letter-spacing: -0.04em;
          flex-shrink: 0; padding-top: 2px;
          transition: color 0.2s, transform 0.2s;
          user-select: none;
          min-width: 72px;
        }
        .feature-item:hover .feature-num { color: var(--gold); transform: translateX(-4px); }
        .feature-title {
          font-weight: 700; font-size: 1.25rem;
          letter-spacing: -0.02em; margin-bottom: 10px; color: var(--ink);
        }
        .feature-desc { color: var(--ink-muted); font-family: 'Georgia', serif; line-height: 1.65; font-size: 0.9375rem; margin-bottom: 16px; }
        .feature-tags { display: flex; flex-wrap: wrap; gap: 8px; }
        .feature-tag {
          font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
          border: 1px solid var(--ink-faint);
          color: var(--ink-muted);
          padding: 4px 10px;
          font-weight: 500;
        }

        /* Challenges */
        .challenges-section { padding: 96px 0; border-top: 1px solid var(--ink-faint); }
        .challenges-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
        .challenges-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 48px; }
        @media (min-width: 768px) { .challenges-grid { grid-template-columns: repeat(3, 1fr); } }
        .challenge-card {
           padding: 32px;
           background: var(--card-bg);
           border: 1px solid rgba(255, 100, 100, 0.15); /* Subtly negative */
           border-radius: 24px;
        }
        .challenge-title { font-weight: 700; font-size: 1.125rem; margin-bottom: 12px; color: var(--ink); }
        .challenge-desc { color: var(--ink-muted); font-size: 0.9375rem; line-height: 1.6; }

        /* Trust & Social Proof */
        .trust-banner {
          padding: 64px 32px;
          text-align: center;
          background: var(--ink-faint);
        }
        .trust-text { font-size: 1.125rem; color: var(--ink); font-style: italic; max-width: 600px; margin: 0 auto 24px; font-family: 'Georgia', serif;}
        .trust-author { font-size: 0.875rem; color: var(--ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

        /* Comparison */
        .comparison-section { padding: 96px 0; border-top: 1px solid var(--ink-faint); }
        .comparison-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
        .comparison-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 48px; }
        @media (min-width: 768px) { .comparison-grid { grid-template-columns: 1fr 1fr; } }
        .comp-card { padding: 40px; border-radius: 24px; }
        .comp-old { background: rgba(220, 50, 50, 0.03); border: 1px solid rgba(220, 50, 50, 0.1); }
        .comp-new { background: var(--gold-faint); border: 1px solid var(--gold); }
        .comp-title { font-weight: 800; font-size: 1.5rem; margin-bottom: 24px; }
        .comp-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
        .comp-item { display: flex; gap: 12px; font-size: 0.9375rem; color: var(--ink); }
        .comp-icon-red { color: #dc3232; font-weight: bold; }
        .comp-icon-green { color: var(--gold); font-weight: bold; }

        /* AEO / SEO Block */
        .aeo-section { padding: 96px 0; border-top: 1px solid var(--ink-faint); }
        .aeo-inner { max-width: 800px; margin: 0 auto; padding: 0 32px; }
        .aeo-text { color: var(--ink-muted); font-size: 1rem; line-height: 1.8; font-family: 'Georgia', serif; }
        .aeo-text p { margin-bottom: 24px; }
        .aeo-text strong { color: var(--ink); font-weight: 600; }

        /* FAQ */
        .faq-section { padding: 96px 0; border-top: 1px solid var(--ink-faint); }
        .faq-inner { max-width: 800px; margin: 0 auto; padding: 0 32px; }
        .faq-item { border-bottom: 1px solid var(--ink-faint); }
        .faq-question {
          width: 100%; text-align: left; padding: 24px 0;
          background: none; border: none; color: var(--ink);
          font-weight: 700; font-size: 1.125rem;
          display: flex; justify-content: space-between; align-items: center;
          cursor: pointer; font-family: inherit;
        }
        .faq-icon {
          flex-shrink: 0; width: 24px; height: 24px;
          border: 1px solid var(--ink-faint); border-radius: 50%;
          display: flex; align-items: center; justify-content: center;
          font-size: 1rem; font-weight: 400; color: var(--gold);
          transition: background 0.15s;
        }
        .faq-answer {
          padding-bottom: 24px; color: var(--ink-muted);
          font-size: 0.9375rem; line-height: 1.6;
          overflow: hidden;
          transition: max-height 0.3s ease;
        }


        /* CTA */
        .cta-section { border-top: 1px solid var(--ink-faint); padding: 96px 0 120px; }
        .cta-inner {
          max-width: 1280px; margin: 0 auto; padding: 0 32px;
          display: flex; flex-direction: column; gap: 48px;
          align-items: flex-start;
        }
        @media (min-width: 768px) {
          .cta-inner { flex-direction: row; align-items: flex-end; justify-content: space-between; }
        }
        .cta-h2 {
          font-weight: 800; font-size: clamp(2.25rem, 5vw, 4.5rem);
          letter-spacing: -0.04em; line-height: 1.0; color: var(--ink);
        }
        .cta-h2 em { color: var(--gold); font-style: normal; }
        .cta-right { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
        .cta-note { font-size: 0.75rem; color: var(--ink-muted); text-align: center; font-family: 'Georgia', serif; }

        .btn-primary-lg {
          background: var(--gold); color: var(--bg);
          font-weight: 700; font-size: 1rem;
          padding: 14px 28px;
          display: inline-flex; align-items: center; gap: 8px;
          text-decoration: none;
          transition: background 0.15s;
          letter-spacing: -0.02em;
          white-space: nowrap;
        }
        .btn-primary-lg:hover { background: var(--gold-light); }

        /* Footer */
        .footer {
          border-top: 1px solid var(--ink-faint);
          padding: 36px 0;
        }
        .footer-inner {
          max-width: 1280px; margin: 0 auto; padding: 0 32px;
          display: flex; flex-direction: column; align-items: center; gap: 20px;
        }
        @media (min-width: 768px) {
          .footer-inner { flex-direction: row; justify-content: space-between; }
        }
        .footer-logo { font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.02em; }
        .footer-copy { font-size: 0.75rem; color: var(--ink-muted); font-family: 'Georgia', serif; }
        .footer-links { display: flex; gap: 24px; }
        .footer-link {
          font-size: 0.8125rem; color: var(--ink-muted);
          text-decoration: none; transition: color 0.15s;
          background: none;
          border: none;
          padding: 0;
          cursor: pointer;
          font-family: inherit;
        }
        .footer-link:hover { color: var(--ink); }

        .mail-fallback {
          font-size: 0.75rem;
          color: var(--ink-muted);
          text-align: center;
          font-family: 'Georgia', serif;
        }
        .mail-fallback-link {
          color: var(--gold);
          text-decoration: none;
          border-bottom: 1px solid var(--gold);
        }
        .mail-fallback-row {
          display: inline-flex;
          gap: 10px;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          margin-top: 8px;
        }

        .cookie-banner {
          position: fixed;
          left: 16px;
          right: 16px;
          bottom: 16px;
          z-index: 60;
          border: 1px solid var(--ink-faint);
          background: var(--nav-bg);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          border-radius: 18px;
          padding: 16px;
          box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
        }
        .cookie-banner-inner {
          max-width: 1100px;
          margin: 0 auto;
          display: flex;
          gap: 16px;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
        }
        .cookie-banner-text {
          color: var(--ink-muted);
          font-size: 0.875rem;
          line-height: 1.55;
          max-width: 760px;
          font-family: 'Georgia', serif;
        }
        .cookie-banner-link {
          color: var(--gold);
          text-decoration: none;
          border-bottom: 1px solid var(--gold);
        }
        .cookie-banner-actions {
          display: flex;
          gap: 10px;
          flex-wrap: wrap;
        }
        .cookie-btn {
          border-radius: 10px;
          padding: 10px 14px;
          font-size: 0.8125rem;
          cursor: pointer;
          border: 1px solid var(--ink-faint);
          background: transparent;
          color: var(--ink);
        }
        .cookie-btn-primary {
          background: var(--gold);
          color: var(--bg);
          border-color: var(--gold);
          font-weight: 700;
        }

        /* Horizontal rule decoration */
        .section-marker {
          font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
          color: var(--gold); font-weight: 500; margin-bottom: 20px;
        }

        /* Mobile Navigation */
        .nav-mobile-toggle { display: none; }
        @media (max-width: 767px) {
          .nav-mobile-toggle { display: flex; align-items: center; cursor: pointer; }
          .nav-menu-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--ink);
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .nav-links {
            display: none;
            position: fixed;
            top: 64px;
            left: 0;
            right: 0;
            background: var(--bg);
            border-bottom: 1px solid var(--ink-faint);
            padding: 24px 32px;
            flex-direction: column;
            gap: 12px;
            z-index: 40;
          }
          .nav-links-mobile-open { display: flex !important; }
          .nav-link { display: block; }
        }

        /* Improved Mobile Responsiveness */
        @media (max-width: 639px) {
          .nav-inner { padding: 0 16px; }
          .hero { padding: 120px 16px 60px; }
          .hero-h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
          .hero-body { gap: 24px; }
          .hero-image-wrapper { aspect-ratio: 1; }
          .stats { grid-template-columns: repeat(2, 1fr); margin-top: 60px; }
          .stat { padding: 20px 16px; border-right: none; border-bottom: 1px solid var(--ink-faint); }
          .stat:nth-child(2n) { border-right: 1px solid var(--ink-faint); }
          .stat:nth-last-child(-n+2) { border-bottom: none; }
          .challenges-section { padding: 60px 0; }
          .challenges-inner { padding: 0 16px; }
          .challenges-grid { gap: 20px; }
          .challenge-card { padding: 20px; }
          .features { padding: 60px 0; }
          .features-inner { padding: 0 16px; gap: 40px; }
          .feature-item { padding: 20px 16px; gap: 16px; flex-direction: column; }
          .feature-num { font-size: 2rem; min-width: auto; }
          .comparison-section { padding: 60px 0; }
          .comparison-inner { padding: 0 16px; }
          .comp-card { padding: 20px; }
          .cta-section { padding: 60px 0 80px; }
          .cta-inner { padding: 0 16px; }
          .aeo-section { padding: 60px 0; }
          .aeo-inner { padding: 0 16px; }
          .faq-section { padding: 60px 0; }
          .faq-inner { padding: 0 16px; }
          .footer { padding: 24px 0; }
          .footer-inner { padding: 0 16px; }
        }
      `}</style>

      <div className={`page ${syne.className} ${theme}`}>
        {/* Nav */}
        <nav className="nav">
          <div className="nav-inner">
            <div className="logo">
              Innungs<span className="logo-accent">App</span> <span className="logo-pro">PRO</span>
            </div>
            <div className="nav-mobile-toggle">
              <button
                className="nav-menu-btn"
                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                aria-label="Navigation toggle"
              >
                {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
              </button>
            </div>
            <div className={`nav-links ${mobileMenuOpen ? 'nav-links-mobile-open' : ''}`}>
              <a href="#leistungen" className="nav-link" onClick={() => setMobileMenuOpen(false)}>Leistungen</a>

              <button
                onClick={toggleTheme}
                style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '4px', display: 'flex', alignItems: 'center', color: 'var(--ink-muted)' }}
                aria-label="Toggle theme"
                title={theme === 'theme-dark' ? 'Light Mode' : 'Dark Mode'}
              >
                {theme === 'theme-dark' ? <Sun size={18} /> : <Moon size={18} />}
              </button>

              <Link href="/login" className="nav-link" onClick={() => setMobileMenuOpen(false)}>Login</Link>
              <a
                href={CONTACT_WEBMAIL_HREF}
                className="btn-primary"
                onClick={() => {
                  handleContactCtaClick('nav')
                  setMobileMenuOpen(false)
                }}
                target="_blank"
                rel="noreferrer"
              >
                Team kontaktieren <ArrowRight size={13} />
              </a>
            </div>
          </div>
        </nav>

        <main>
          {/* Hero */}
          <section className="hero">
            <div className="eyebrow">Für Handwerksinnungen in Deutschland</div>
            <h1 className="hero-h1">
              Weniger Verwaltung.<br />
              <em>Mehr Leben.</em><br />
              <span style={{ fontSize: 'clamp(1.5rem, 3vw, 2.5rem)', fontWeight: 600, color: 'var(--ink-muted)', letterSpacing: '-0.02em', display: 'block', marginTop: '16px' }}>Die All-in-One Software für die moderne Handwerksinnung.</span>
            </h1>

            <div className="hero-body">
              <div style={{ flex: 1 }}>
                <p className="hero-desc" style={{ fontWeight: 600, color: 'var(--ink)', marginBottom: '16px' }}>
                  Schluss mit Zettelwirtschaft, Excel-Chaos und ungelesenen E-Mails.
                </p>
                <p className="hero-desc">
                  Ihre Mitgliederverwaltung, Push-News und Lehrstellenbörse — gebündelt in einer sicheren Cloud-Plattform, die Ihre Prozesse automatisiert und den Innungsalltag vereinfacht.
                </p>
                <div className="hero-cta" style={{ marginTop: '32px', maxWidth: '300px' }}>
                  <a
                    href={CONTACT_WEBMAIL_HREF}
                    className="btn-primary-lg"
                    style={{ justifyContent: 'center' }}
                    onClick={() => handleContactCtaClick('hero')}
                    target="_blank"
                    rel="noreferrer"
                  >
                    Team kontaktieren <ArrowRight size={16} />
                  </a>
                  <div style={{ fontSize: '0.75rem', color: 'var(--ink-muted)', textAlign: 'center', marginTop: '8px' }}>
                    Individuelle Beratung. Keine Vertragsbindung.
                  </div>
                  {showMailFallback && (
                    <div className="mail-fallback">
                      Kein Mailprogramm? Schreiben Sie direkt an{' '}
                      <a className="mail-fallback-link" href={`mailto:${CONTACT_EMAIL}`}>
                        {CONTACT_EMAIL}
                      </a>
                      .
                      <div className="mail-fallback-row">
                        <a
                          className="mail-fallback-link"
                          href={CONTACT_WEBMAIL_HREF}
                          target="_blank"
                          rel="noreferrer"
                        >
                          In Webmail öffnen
                        </a>
                      </div>
                    </div>
                  )}
                </div>
              </div>

              <div className="hero-image-wrapper">
                <Image
                  src="/mobile-mockup.png"
                  alt="InnungsApp PRO Mobile Interface"
                  width={400}
                  height={800}
                  priority
                  style={{
                    width: '100%',
                    height: 'auto',
                    objectFit: 'contain'
                  }}
                />
              </div>
            </div>

            {/* Stats */}
            <div className="stats">
              {STATS.map((s) => (
                <div key={s.label} className="stat">
                  <div className="stat-num">{s.num}</div>
                  <div className="stat-label">{s.label}</div>
                </div>
              ))}
            </div>
            <p className="hero-desc" style={{ marginTop: '16px', fontSize: '0.85rem' }}>
              * Angaben zur Zeitersparnis sind Erfahrungswerte und hängen von Ausgangsprozess, Datengrundlage und Nutzungsumfang ab.
            </p>
          </section>



          {/* Challenges / Pain Points */}
          <section className="challenges-section">
            <div className="challenges-inner">
              <div className="section-marker">Herausforderungen</div>
              <h2 className="cta-h2">Kennen Sie diese Probleme<br />im <em>Innungsalltag?</em></h2>
              <div className="challenges-grid">
                <div className="challenge-card">
                  <h3 className="challenge-title">Geringe Erreichbarkeit</h3>
                  <p className="challenge-desc">Wichtige E-Mails landen im Spam-Ordner oder werden überlesen. Informationen kommen bei den Mitgliedern nicht rechtzeitig an.</p>
                </div>
                <div className="challenge-card">
                  <h3 className="challenge-title">Zettelwirtschaft</h3>
                  <p className="challenge-desc">Mitgliedsdaten sind über verschiedene Excel-Listen, Ordner und lokale Festplatten verstreut. Die Datenpflege kostet massiv Zeit.</p>
                </div>
                <div className="challenge-card">
                  <h3 className="challenge-title">Nachwuchsmangel</h3>
                  <p className="challenge-desc">Es wird immer schwieriger, junge Talente für das Handwerk zu begeistern und freie Ausbildungsplätze erfolgreich zu besetzen.</p>
                </div>
              </div>
            </div>
          </section>

          {/* Features */}
          <section id="leistungen" className="features">
            <div className="features-inner">
              <div className="features-sticky">
                <div className="section-marker">Leistungen</div>
                <h2 className="features-h2">
                  Alles,<br />was Ihre<br />Innung<br />braucht.
                </h2>
                <p className="features-sub">
                  Kein Sammelsurium aus Insellösungen. Eine durchdachte Plattform für die moderne Handwerksinnung — von der Verwaltung bis zur Nachwuchsgewinnung.
                </p>
              </div>

              <div className="feature-list">
                {FEATURES.map((f) => (
                  <div key={f.num} className="feature-item">
                    <div className="feature-num">{f.num}</div>
                    <div>
                      <h3 className="feature-title">{f.title}</h3>
                      <p className="feature-desc">{f.desc}</p>
                      <div className="feature-tags">
                        {f.tags.map((t) => (
                          <span key={t} className="feature-tag">{t}</span>
                        ))}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </section>

          {/* Gegenüberstellung / Comparison */}
          <section className="comparison-section">
            <div className="comparison-inner">
              <div className="section-marker" style={{ textAlign: 'center' }}>Der Vergleich</div>
              <h2 className="cta-h2" style={{ textAlign: 'center' }}>Warum <em>InnungsApp PRO?</em></h2>
              <div className="comparison-grid">
                <div className="comp-card comp-old">
                  <h3 className="comp-title" style={{ color: '#dc3232' }}>Der alte Weg</h3>
                  <ul className="comp-list">
                    <li className="comp-item"><span className="comp-icon-red">✕</span> Verteilte Excel-Listen und Aktenordner</li>
                    <li className="comp-item"><span className="comp-icon-red">✕</span> Wichtige E-Mails verstauben ungelesen</li>
                    <li className="comp-item"><span className="comp-icon-red">✕</span> Manueller Abgleich von Zu- und Absagen</li>
                    <li className="comp-item"><span className="comp-icon-red">✕</span> Keine Sichtbarkeit für junge Talente</li>
                    <li className="comp-item"><span className="comp-icon-red">✕</span> Hoher Frust bei der Verwaltung</li>
                  </ul>
                </div>
                <div className="comp-card comp-new">
                  <h3 className="comp-title" style={{ color: 'var(--gold)' }}>Der InnungsApp Weg</h3>
                  <ul className="comp-list">
                    <li className="comp-item"><span className="comp-icon-green">✓</span> Digitales Cloud-CRM, überall abrufbar</li>
                    <li className="comp-item"><span className="comp-icon-green">✓</span> Push-Nachrichten in Echtzeit</li>
                    <li className="comp-item"><span className="comp-icon-green">✓</span> Automatisierte 1-Klick Event-Zusagen</li>
                    <li className="comp-item"><span className="comp-icon-green">✓</span> Integrierte, lokale Lehrlingsbörse</li>
                    <li className="comp-item"><span className="comp-icon-green">✓</span> Bis zu 10 Stunden Zeitersparnis je nach Prozess</li>
                  </ul>
                </div>
              </div>
            </div>
          </section>

          {/* AEO / GEO Content Block */}
          <section className="aeo-section">
            <div className="aeo-inner">
              <div className="section-marker">Über unsere Plattform</div>
              <h2 className="cta-h2" style={{ marginBottom: '32px', fontSize: 'clamp(2rem, 4vw, 3rem)' }}>Die smarte Lösung für moderne Handwerksorganisationen</h2>
              <div className="aeo-text">
                <p>
                  <strong>InnungsApp PRO</strong> ist eine cloudbasierte Verwaltungssoftware, die speziell auf die Bedürfnisse von <strong>Handwerksinnungen in Deutschland</strong> zugeschnitten ist. Die Plattform bündelt Mitgliederverwaltung, Kommunikation und Eventmanagement in einer zentralen Oberfläche.
                </p>
                <p>
                  Je nach bestehender Prozesslandschaft ist eine Reduktion des administrativen Aufwands um <strong>bis zu 10 Stunden pro Woche</strong> möglich. Statt ineffizienter E-Mail-Verteiler nutzt die Plattform Push-Technologie für schnelle Zustellung und eine bessere Erreichbarkeit in der Praxis.
                </p>
                <p>
                  Teile der Infrastruktur laufen auf Servern in Texas (USA). Für Drittlandtransfers werden EU-Standardvertragsklauseln (SCC), dokumentierte Transfer Impact Assessments (TIA) und zusätzliche Schutzmaßnahmen eingesetzt. Vor Produktivbetrieb wird mit jeder Innung ein AV-Vertrag nach Art. 28 DSGVO geschlossen.
                </p>
              </div>
            </div>
          </section>

          {/* FAQ Section */}
          <section className="faq-section">
            <div className="faq-inner">
              <div className="section-marker">FAQ</div>
              <h2 className="cta-h2" style={{ marginBottom: '48px' }}>Häufige <em>Fragen</em></h2>

              {[
                {
                  q: 'Wie schnell sind wir startklar?',
                  a: 'In der Regel innerhalb von 1–3 Werktagen. Unser Onboarding-Team importiert Ihre bestehenden Mitgliederdaten (aus Excel oder CSV), richtet Ihre Innung ein und begleitet Sie beim ersten Login. Sie müssen nichts technisch einrichten.',
                },
                {
                  q: 'Ist die Plattform DSGVO-konform?',
                  a: 'Wir arbeiten mit DSGVO-orientierten Prozessen. Vor Go-Live wird ein AV-Vertrag (Art. 28 DSGVO) geschlossen, TOMs sind dokumentiert, und bei Datenverarbeitung in den USA nutzen wir SCC plus Transfer-Folgenabschaetzung (TIA) und zusaetzliche Schutzmassnahmen. Die konkrete Compliance haengt von der gewaehlten Konfiguration und den vertraglichen Einstellungen der Innung ab.',
                },
                {
                  q: 'Können meine Mitglieder die App sofort benutzen?',
                  a: 'Ja — ohne App-Store-Konto und ohne Schulung. Mitglieder erhalten eine E-Mail-Einladung, klicken den Link und sind direkt drin. Die Oberfläche ist so einfach wie WhatsApp. Wer will, kann zusätzlich die native iOS/Android App installieren.',
                },
                {
                  q: 'Was kostet InnungsApp PRO und gibt es Vertragsbindung?',
                  a: 'Die Kosten richten sich nach der Größe Ihrer Innung (Anzahl Mitglieder). Es gibt keine langfristige Vertragsbindung — Sie können monatlich kündigen. Kontaktieren Sie uns für ein individuelles Angebot. Pilotinnungen profitieren von besonders günstigen Konditionen.',
                },
                {
                  q: 'Können mehrere Innungen oder ein Verband die Plattform nutzen?',
                  a: 'Ja. Die Plattform ist mandantenfähig — jede Innung hat ihren eigenen, vollständig getrennten Bereich. Verbände können mehrere angeschlossene Innungen zentral verwalten. Daten und Kommunikation bleiben dabei immer sauber getrennt.',
                },
                {
                  q: 'Wie funktionieren Push-Benachrichtigungen?',
                  a: 'Wenn Sie als Admin eine News veröffentlichen, erhalten aktive Mitglieder sofort eine Push-Nachricht auf ihr Smartphone — auch wenn die App im Hintergrund läuft. In vielen Innungen liegt die Interaktion mit Push-Nachrichten spürbar über klassischen E-Mail-Newslettern.',
                },
              ].map((faq, i) => (
                <div key={i} className="faq-item" style={i === 5 ? { borderBottom: 'none' } : {}}>
                  <button className="faq-question" onClick={() => toggleFaq(i)}>
                    <span>{faq.q}</span>
                    <span className="faq-icon">{openFaq === i ? '−' : '+'}</span>
                  </button>
                  <div
                    className="faq-answer"
                    style={{ display: openFaq === i ? 'block' : 'none' }}
                  >
                    {faq.a}
                  </div>
                </div>
              ))}
            </div>
          </section>

          {/* CTA */}
          <section className="cta-section">
            <div className="cta-inner">
              <div>
                <div className="section-marker" style={{ marginBottom: '28px' }}>Bereit loszulegen?</div>
                <h2 className="cta-h2">
                  Ihre Innung.<br />
                  Ihre App.<br />
                  <em>Ihre Zukunft.</em>
                </h2>
              </div>
              <div className="cta-right">
                <a
                  href={CONTACT_WEBMAIL_HREF}
                  className="btn-primary-lg"
                  onClick={() => handleContactCtaClick('bottom')}
                  target="_blank"
                  rel="noreferrer"
                >
                  Jetzt Team kontaktieren <ArrowUpRight size={18} />
                </a>
                <p className="cta-note">Persönliche Beratung. Keine Vertragsbindung.</p>
                {showMailFallback && (
                  <div className="mail-fallback">
                    Kein Mailprogramm? Schreiben Sie direkt an{' '}
                    <a className="mail-fallback-link" href={`mailto:${CONTACT_EMAIL}`}>
                      {CONTACT_EMAIL}
                    </a>
                    .
                    <div className="mail-fallback-row">
                      <a
                        className="mail-fallback-link"
                        href={CONTACT_WEBMAIL_HREF}
                        target="_blank"
                        rel="noreferrer"
                      >
                        In Webmail öffnen
                      </a>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </section>
        </main>

        {/* Footer */}
        <footer className="footer">
          <div className="footer-inner">
            <div className="footer-logo" style={{ display: 'flex', alignItems: 'center' }}>
              Innungs<span className="logo-accent">App</span> <span className="logo-pro" style={{ fontSize: '0.6rem', padding: '1px 4px', marginLeft: '6px' }}>PRO</span>
            </div>
            <p className="footer-copy">
              © {new Date().getFullYear()} InnungsApp SaaS. Alle Rechte vorbehalten.
            </p>
            <div className="footer-links">
              <Link href="/impressum" className="footer-link">Impressum</Link>
              <Link href="/datenschutz" className="footer-link">Datenschutz</Link>
              <button type="button" onClick={openCookieSettings} className="footer-link">
                Cookie-Einstellungen
              </button>
            </div>
          </div>
        </footer>

        {cookieConsent === 'pending' && (
          <div className="cookie-banner" role="dialog" aria-live="polite" aria-label="Cookie Hinweis">
            <div className="cookie-banner-inner">
              <p className="cookie-banner-text">
                Wir nutzen optionale Analyse-Cookies (PostHog), um die Landingpage zu verbessern.
                PostHog startet erst nach Ihrer Zustimmung. Mehr Infos in der{' '}
                <Link href="/datenschutz" className="cookie-banner-link">
                  Datenschutzerklärung
                </Link>
                .
              </p>
              <div className="cookie-banner-actions">
                <button className="cookie-btn" onClick={() => setCookieChoice('declined')}>
                  Nur notwendige
                </button>
                <button
                  className="cookie-btn cookie-btn-primary"
                  onClick={() => setCookieChoice('accepted')}
                >
                  Cookies akzeptieren
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </>
  )
}