"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 } 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 extrem hoher Erreichbarkeit. Sofort, zuverlässig, DSGVO-konform.',
    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: '10 Std.', label: 'Zeitersparnis pro Woche' },
  { num: 'Echtzeit', label: 'Kommunikation' },
  { num: 'Cloud', label: 'Sicher & Überall' },
  { num: '100 %', label: 'DSGVO-konform' },
]

export default function RootPage() {
  const [theme, setTheme] = useState('theme-light');
  const [mounted, setMounted] = useState(false);
  const [openFaq, setOpenFaq] = useState<number | null>(null);

  useEffect(() => {
    setMounted(true);
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);

  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": "Zettelwirtschaft war gestern. Reduzieren Sie den Verwaltungsaufwand Ihrer Innung um 10 Std/Woche. Die perfekte Handwerk Software inkl. CRM & App."
      },
      {
        "@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": "Ja. 100% Hosting in Deutschland und streng nach DSGVO-Standards entwickelt."
            }
          },
          {
            "@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;
        }
        .footer-link:hover { color: var(--ink); }

        /* 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;
        }

        @media (max-width: 639px) {
          .nav-links .nav-link { display: none; }
          .stat { border-right: none; padding-right: 0; }
          .stat:nth-child(odd) { border-right: 1px solid var(--ink-faint); padding-right: 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-links">
              <a href="#leistungen" className="nav-link">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">Login</Link>
              <Link href="/login" className="btn-primary">
                Team kontaktieren <ArrowRight size={13} />
              </Link>
            </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' }}>
                  <Link href="/login" className="btn-primary-lg" style={{ justifyContent: 'center' }}>
                    Team kontaktieren <ArrowRight size={16} />
                  </Link>
                  <div style={{ fontSize: '0.75rem', color: 'var(--ink-muted)', textAlign: 'center', marginTop: '8px' }}>
                    Individuelle Beratung. Keine Vertragsbindung.
                  </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>
          </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> 10 Stunden Zeitersparnis pro Woche</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 die führende cloudbasierte Verwaltungssoftware, die speziell auf die Bedürfnisse von <strong>Handwerksinnungen in Deutschland</strong> zugeschnitten ist. Mit einem tiefen Verständnis für die administrativen Herausforderungen des Handwerks bietet unsere Software eine sichere, DSGVO-konforme Umgebung zur zentralen Verwaltung von Mitgliedsdaten.
                </p>
                <p>
                  Im Durchschnitt reduzieren Innungen ihren administrativen Aufwand nach der Einführung um <strong>bis zu 10 Stunden pro Woche</strong>. Statt ineffizienter E-Mail-Verteiler nutzt die Plattform moderne Push-Technologie, welche für höchste Erreichbarkeit sorgt. Die Integration einer eigenen Lehrlingsbörse löst zudem aktiv das Problem des Nachwuchsmangels, indem sie Betriebe und junge Talente lokal vernetzt.
                </p>
                <p>
                  Alle Serverstandorte befinden sich in Deutschland, wodurch höchste Datenschutzstandards garantiert werden. Egal ob Eventmanagement, Kommunikation oder Mitgliederverwaltung – die InnungsApp PRO bündelt alle essenziellen Funktionen in einer einzigen, intuitiven Oberfläche.
                </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: 'Ja, vollständig. Alle Daten werden ausschließlich auf zertifizierten Servern in Deutschland gespeichert. Wir schließen mit Ihnen einen Auftragsverarbeitungsvertrag (AVV) ab und haben die Software von Anfang an nach dem Prinzip "Privacy by Design" entwickelt. Kein Datentransfer in Drittländer.',
                },
                {
                  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 alle aktiven Mitglieder sofort eine Push-Nachricht auf ihr Smartphone — auch wenn die App im Hintergrund läuft. Die Öffnungsrate liegt typischerweise bei über 80 %, verglichen mit unter 20 % bei 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">
                <Link href="/login" className="btn-primary-lg">
                  Jetzt Team kontaktieren <ArrowUpRight size={18} />
                </Link>
                <p className="cta-note">Persönliche Beratung. Keine Vertragsbindung.</p>
              </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="#" className="footer-link">Impressum</Link>
              <Link href="#" className="footer-link">Datenschutz</Link>
            </div>
          </div>
        </footer>
      </div>
    </>
  )
}