/* global React */

const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

/* ============================================================
   BILDMARKE — 4its-derived mosaic, abstracted as a stylized
   "cloud shield": 4-tile grid (orange, blue, green, navy)
   with a diagonal split per tile — echoes the 4its mark DNA
   while being unique to veeamcloudbackup.de.
   ============================================================ */
function VeeamMark({ size = 38, light = false }) {
  const colors = {
    orange:  '#E8954A',
    blue:    '#6BB8DC',
    green:   '#7CC275',
    navy:    '#1F3A5F',
    light:   light ? '#FFFFFF22' : '#E8EDF4',
    line:    light ? '#FFFFFF44' : '#FFFFFF',
  };
  return (
    <svg className="vc-mark" viewBox="0 0 40 40" width={size} height={size} aria-label="veeamcloudbackup.de">
      {/* Outer rounded clip */}
      <defs>
        <clipPath id="vcclip">
          <rect x="0" y="0" width="40" height="40" rx="9" />
        </clipPath>
      </defs>
      <g clipPath="url(#vcclip)">
        {/* 2x2 base tiles */}
        <rect x="0"  y="0"  width="20" height="20" fill={colors.light} />
        <rect x="20" y="0"  width="20" height="20" fill={colors.light} />
        <rect x="0"  y="20" width="20" height="20" fill={colors.light} />
        <rect x="20" y="20" width="20" height="20" fill={colors.light} />

        {/* Diagonal halves — each tile gets its accent color in one triangle */}
        {/* TL — orange (upper-left triangle) */}
        <polygon points="0,0 20,0 0,20" fill={colors.orange} />
        {/* TR — blue (lower-left triangle pointing in) */}
        <polygon points="20,20 40,0 20,0" fill={colors.blue} />
        {/* BL — green */}
        <polygon points="0,20 20,40 0,40" fill={colors.green} />
        {/* BR — navy (the anchor) */}
        <polygon points="20,20 40,20 40,40 20,40" fill={colors.navy} />

        {/* Hairline grid lines for that crafted mosaic feel */}
        <line x1="20" y1="0" x2="20" y2="40" stroke={colors.line} strokeWidth="1" />
        <line x1="0" y1="20" x2="40" y2="20" stroke={colors.line} strokeWidth="1" />
        <line x1="0" y1="0" x2="20" y2="20" stroke={colors.line} strokeWidth="0.6" opacity="0.5" />
        <line x1="40" y1="0" x2="20" y2="20" stroke={colors.line} strokeWidth="0.6" opacity="0.5" />
        <line x1="0" y1="40" x2="20" y2="20" stroke={colors.line} strokeWidth="0.6" opacity="0.5" />
        <line x1="40" y1="40" x2="20" y2="20" stroke={colors.line} strokeWidth="0.6" opacity="0.5" />
      </g>
    </svg>
  );
}

/* ============================================================
   HEADER
   ============================================================ */
function Header() {
  const [scrolled, setScrolled] = useStateS(false);
  useEffectS(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={`hdr ${scrolled ? 'hdr--scrolled' : ''}`} data-screen-label="00 Header">
      <div className="topbar">
        <div className="wrap topbar-inner mono">
          <span>4its GmbH · Burchardstraße 22 · 20095 Hamburg</span>
          <div className="topbar-right">
            <a href="tel:+49405619470">+49 40 561 947 0</a>
            <span className="dot" />
            <a href="mailto:info@veeamcloudbackup.de">info@veeamcloudbackup.de</a>
            <span className="dot" />
            <span className="status-online"><i /> Support online</span>
          </div>
        </div>
      </div>
      <div className="wrap hdr-row">
        <a href="#top" className="brand vc-lockup">
          <VeeamMark size={38} />
          <span className="vc-text">
            <span className="vc-wordmark" style={{ fontSize: 22 }}>veeamcloudbackup<span className="tld">.de</span></span>
            <span className="vc-sub">Cloud Backup as a Service · Hamburg</span>
          </span>
        </a>
        <nav className="hdr-nav">
          <a href="#leistungen">Leistungen</a>
          <a href="#dreizweiens">3-2-1-Regel</a>
          <a href="#konfigurator">Konfigurator</a>
          <a href="#pakete">Pakete</a>
          <a href="#faq">FAQ</a>
        </nav>
        <div className="hdr-actions">
          <a href="#kontakt" className="btn btn-ghost btn-sm">Kostenlos testen</a>
          <a href="#konfigurator" className="btn btn-primary btn-sm">Konfigurieren <span className="arrow">→</span></a>
        </div>
      </div>

      <style>{`
        .hdr { position: sticky; top: 0; z-index: 50; background: var(--paper); transition: box-shadow .2s ease, background .2s ease; }
        .hdr--scrolled { box-shadow: 0 1px 0 var(--edge), 0 6px 20px -12px rgba(0,0,0,.1); background: oklch(99% 0.004 95 / 0.95); backdrop-filter: blur(8px); }
        .topbar { background: var(--ink-deep); color: oklch(76% 0.012 240); font-size: 12px; }
        .topbar-inner { display: flex; justify-content: space-between; padding: 8px 0; letter-spacing: 0.02em; }
        .topbar a { color: var(--paper); }
        .topbar a:hover { color: var(--brand); }
        .topbar-right { display: flex; align-items: center; gap: 14px; }
        .topbar .dot { width: 3px; height: 3px; border-radius: 50%; background: oklch(40% 0.012 240); }
        .status-online { display: inline-flex; align-items: center; gap: 6px; color: oklch(80% 0.05 160); }
        .status-online i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px oklch(58% 0.135 160 / 0.25); animation: pulse 2.4s infinite; }
        @keyframes pulse { 0%,100% { box-shadow: 0 0 0 2px oklch(58% 0.135 160 / 0.25); } 50% { box-shadow: 0 0 0 6px oklch(58% 0.135 160 / 0.05); } }

        .hdr-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; gap: 32px; }
        .vc-text { display: flex; flex-direction: column; line-height: 1.1; }
        .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
        .brand-text b { font-family: var(--f-display); font-size: 17px; font-weight: 700; color: var(--ink-deep); letter-spacing: -0.01em; }
        .brand-text small { font-family: var(--f-mono); font-size: 11px; color: var(--mute); margin-top: 2px; letter-spacing: 0.02em; }
        .hdr-nav { display: flex; gap: 28px; font-size: 14px; color: var(--ink-soft); }
        .hdr-nav a { position: relative; padding: 4px 0; transition: color .15s ease; }
        .hdr-nav a:hover { color: var(--brand-deep); }
        .hdr-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
        .hdr-nav a:hover::after { transform: scaleX(1); }
        .hdr-actions { display: flex; gap: 10px; }
        @media (max-width: 1040px) { .hdr-nav { display: none; } }
        @media (max-width: 760px) { .topbar-inner > span:first-child { display: none; } .brand-text small { display: none; } }
      `}</style>
    </header>
  );
}

/* ============================================================
   HERO
   ============================================================ */
function Hero() {
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="wrap hero-grid">
        <div className="hero-left">
          <div className="hero-tags">
            <span className="tag">Veeam Cloud Service Provider</span>
            <span className="tag tag-neutral">VCSP Silver · seit 2017</span>
          </div>
          <h1 className="reveal in">
            Daten sicher in die Cloud.<br/>
            <span className="hero-accent">Aus Hamburg, ohne Umwege.</span>
          </h1>
          <p className="lead mt-24">
            Erweitern Sie Ihre bestehende Veeam-Backup-Infrastruktur um ein verschlüsseltes
            Cloud-Repository in unserem deutschen Rechenzentrum. DSGVO-konform, monatlich kündbar,
            persönlicher Support aus Hamburg.
          </p>

          <div className="hero-cta mt-32">
            <a href="#konfigurator" className="btn btn-primary">
              Tarif konfigurieren <span className="arrow">→</span>
            </a>
            <a href="#kontakt" className="btn btn-ghost">
              30 Tage kostenfrei testen
            </a>
          </div>

          <div className="hero-trust mt-48">
            <div className="hero-trust-item">
              <div className="num">25</div>
              <div className="lbl">Jahre 4its GmbH</div>
            </div>
            <div className="hero-trust-item">
              <div className="num">100<small>%</small></div>
              <div className="lbl">Hosting in Deutschland</div>
            </div>
            <div className="hero-trust-item">
              <div className="num">30<small>Tage</small></div>
              <div className="lbl">kostenfreier Test</div>
            </div>
            <div className="hero-trust-item">
              <div className="num">≤24<small>h</small></div>
              <div className="lbl">Zugangsdaten nach Buchung</div>
            </div>
          </div>
        </div>

        <div className="hero-right">
          <HeroVisual />
        </div>
      </div>

      <style>{`
        .hero { padding: 64px 0 96px; position: relative; overflow: hidden; }
        .hero::before {
          content: "";
          position: absolute; inset: 0;
          background-image:
            linear-gradient(var(--edge) 1px, transparent 1px),
            linear-gradient(90deg, var(--edge) 1px, transparent 1px);
          background-size: 80px 80px;
          mask-image: radial-gradient(ellipse 80% 60% at 80% 30%, black, transparent 70%);
          opacity: 0.5;
          pointer-events: none;
        }
        .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; position: relative; }
        @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 32px; } }
        .hero-left { position: relative; }
        .hero-tags { display: flex; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
        .hero-accent {
          background: linear-gradient(90deg, var(--brand-deep), var(--brand));
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
        .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
        .hero-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-top: 32px; border-top: 1px solid var(--edge); }
        .hero-trust-item .num { font-family: var(--f-display); font-weight: 800; font-size: 32px; color: var(--ink-deep); letter-spacing: -0.02em; }
        .hero-trust-item .num small { font-size: 14px; color: var(--mute); margin-left: 2px; font-weight: 500; letter-spacing: 0; }
        .hero-trust-item .lbl { font-family: var(--f-mono); font-size: 11px; color: var(--mute); margin-top: 2px; letter-spacing: 0.02em; }
        @media (max-width: 760px) { .hero-trust { grid-template-columns: repeat(2, 1fr); } }
      `}</style>
    </section>
  );
}

/* Hero visual — abstract 3-2-1 backup flow diagram */
function HeroVisual() {
  return (
    <div className="hero-visual" aria-hidden>
      <svg viewBox="0 0 520 460" width="100%" height="100%" style={{ overflow: 'visible' }}>
        <defs>
          <linearGradient id="lineG" x1="0%" x2="100%">
            <stop offset="0%" stopColor="oklch(58% 0.135 160 / 0)" />
            <stop offset="50%" stopColor="oklch(58% 0.135 160)" />
            <stop offset="100%" stopColor="oklch(58% 0.135 160 / 0)" />
          </linearGradient>
          <pattern id="dotsG" width="14" height="14" patternUnits="userSpaceOnUse">
            <circle cx="1" cy="1" r="1" fill="oklch(78% 0.012 240)" />
          </pattern>
        </defs>

        <rect x="0" y="0" width="520" height="460" fill="url(#dotsG)" opacity="0.4" rx="20" />

        {/* On-prem panel */}
        <g transform="translate(20, 60)">
          <rect width="200" height="120" rx="14" fill="white" stroke="oklch(82% 0.010 95)" />
          <text x="20" y="32" fontFamily="JetBrains Mono" fontSize="11" fill="var(--mute)" letterSpacing="1">01 / ON-PREMISE</text>
          <text x="20" y="58" fontFamily="Manrope" fontWeight="700" fontSize="16" fill="var(--ink-deep)">Produktivsystem</text>
          <g transform="translate(20, 74)">
            {[0,1,2,3].map(i => (
              <g key={i} transform={`translate(${i*38}, 0)`}>
                <rect width="30" height="28" rx="4" fill="oklch(94% 0.006 95)" stroke="oklch(85% 0.010 95)"/>
                <rect x="4" y="6" width="22" height="2" fill="var(--brand-deep)" opacity="0.5"/>
                <rect x="4" y="10" width="14" height="2" fill="var(--mute)" opacity="0.4"/>
                <rect x="4" y="14" width="18" height="2" fill="var(--mute)" opacity="0.4"/>
              </g>
            ))}
          </g>
        </g>

        {/* Local backup panel */}
        <g transform="translate(20, 230)">
          <rect width="200" height="100" rx="14" fill="white" stroke="oklch(82% 0.010 95)" />
          <text x="20" y="32" fontFamily="JetBrains Mono" fontSize="11" fill="var(--mute)" letterSpacing="1">02 / LOKALES BACKUP</text>
          <text x="20" y="58" fontFamily="Manrope" fontWeight="700" fontSize="16" fill="var(--ink-deep)">Veeam Backup Server</text>
          <g transform="translate(20, 70)">
            <rect width="160" height="14" rx="3" fill="oklch(94% 0.006 95)"/>
            <rect width="120" height="14" rx="3" fill="var(--ink-deep)"/>
          </g>
        </g>

        {/* Cloud panel - the highlight */}
        <g transform="translate(300, 140)">
          <rect width="200" height="170" rx="14" fill="var(--ink-deep)" stroke="var(--brand-deep)" strokeWidth="1.5"/>
          <text x="20" y="32" fontFamily="JetBrains Mono" fontSize="11" fill="var(--brand)" letterSpacing="1">03 / OFF-SITE</text>
          <text x="20" y="58" fontFamily="Manrope" fontWeight="700" fontSize="16" fill="white">Cloud Repository</text>
          <text x="20" y="78" fontFamily="JetBrains Mono" fontSize="10" fill="oklch(70% 0.012 240)">Hamburg · ISO 27001</text>

          {/* Stacks */}
          <g transform="translate(20, 96)">
            {[0,1,2,3,4].map(i => (
              <rect key={i} x={i*32} y={20 - i*2} width="26" height="50" rx="3" fill="oklch(28% 0.05 160)" stroke="var(--brand)" strokeWidth="0.5"/>
            ))}
          </g>

          {/* Encryption badge */}
          <g transform="translate(140, 130)">
            <circle r="20" fill="var(--brand)"/>
            <path d="M-6 -2 V -6 a 6 6 0 0 1 12 0 V -2 M-9 -2 H 9 v 12 H -9 Z" fill="none" stroke="white" strokeWidth="1.5" strokeLinecap="round"/>
          </g>
        </g>

        {/* Flow line from local to cloud */}
        <path d="M 220 280 C 260 280, 260 220, 300 220" stroke="url(#lineG)" strokeWidth="2" fill="none" strokeDasharray="6 4">
          <animate attributeName="stroke-dashoffset" from="0" to="-20" dur="1.5s" repeatCount="indefinite"/>
        </path>
        <path d="M 220 120 C 260 120, 260 200, 300 200" stroke="oklch(78% 0.012 240)" strokeWidth="1.2" fill="none" strokeDasharray="4 4" opacity="0.5"/>

        {/* Floating data packet */}
        <g>
          <rect x="0" y="0" width="22" height="14" rx="2" fill="var(--brand)" opacity="0.9">
            <animateMotion dur="2.5s" repeatCount="indefinite" path="M 220 280 C 260 280, 260 220, 300 220"/>
          </rect>
        </g>

        {/* Tiny annotations */}
        <text x="248" y="218" fontFamily="JetBrains Mono" fontSize="9" fill="var(--brand-deep)">AES-256</text>
        <text x="248" y="232" fontFamily="JetBrains Mono" fontSize="9" fill="var(--brand-deep)">TLS 1.3</text>

        {/* Bottom labels */}
        <g transform="translate(20, 350)" fontFamily="JetBrains Mono" fontSize="10" fill="var(--mute)">
          <text>3-2-1-REGEL · INTEGRIERT</text>
        </g>
        <g transform="translate(20, 366)">
          <line x1="0" y1="0" x2="480" y2="0" stroke="oklch(85% 0.010 95)" strokeDasharray="2 4"/>
        </g>
        <g transform="translate(20, 386)" fontFamily="Manrope" fontWeight="500" fontSize="13" fill="var(--ink-soft)">
          <text>3 Kopien · 2 Medien · 1 Off-Site</text>
        </g>
      </svg>
      <style>{`
        .hero-visual {
          aspect-ratio: 520 / 460;
          width: 100%;
          background: var(--paper-2);
          border: 1px solid var(--edge);
          border-radius: var(--r-xl);
          padding: 18px;
        }
      `}</style>
    </div>
  );
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
function TrustStrip() {
  return (
    <section className="trust-strip tight">
      <div className="wrap">
        <div className="trust-row">
          <div className="trust-lbl mono">Vertrauen, das in 25 Jahren gewachsen ist</div>
          <div className="trust-logos">
            <TrustLogo label="Veeam Cloud Service Provider" sub="VCSP Silver" />
            <TrustLogo label="Microsoft Partner" sub="zertifiziert" />
            <TrustLogo label="ISO 27001" sub="Rechenzentrum DE" />
            <TrustLogo label="DSGVO-konform" sub="Hosting in Hamburg" />
            <TrustLogo label="VMware" sub="Solution Provider" />
          </div>
        </div>
      </div>
      <style>{`
        .trust-strip { padding: 56px 0; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); background: var(--paper); }
        .trust-row { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: center; }
        .trust-lbl { font-size: 12px; letter-spacing: 0.05em; color: var(--mute); text-transform: uppercase; }
        .trust-logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
        @media (max-width: 1040px) {
          .trust-row { grid-template-columns: 1fr; }
          .trust-logos { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 600px) {
          .trust-logos { grid-template-columns: repeat(2, 1fr); }
        }
      `}</style>
    </section>
  );
}
function TrustLogo({ label, sub }) {
  return (
    <div className="trust-logo">
      <div className="trust-logo-mark">
        <svg viewBox="0 0 40 24" width="40" height="24">
          <rect x="0.5" y="0.5" width="39" height="23" rx="3" fill="none" stroke="var(--edge-strong)" strokeDasharray="2 2"/>
        </svg>
      </div>
      <div className="trust-logo-text">
        <div className="trust-logo-name">{label}</div>
        <div className="trust-logo-sub mono">{sub}</div>
      </div>
      <style>{`
        .trust-logo { display: flex; align-items: center; gap: 10px; opacity: 0.85; transition: opacity .2s; }
        .trust-logo:hover { opacity: 1; }
        .trust-logo-name { font-weight: 600; font-size: 13px; color: var(--ink-deep); line-height: 1.2; }
        .trust-logo-sub { font-size: 10px; color: var(--mute); letter-spacing: 0.04em; }
      `}</style>
    </div>
  );
}

/* ============================================================
   3-2-1 REGEL — visualized
   ============================================================ */
function ThreeTwoOne() {
  return (
    <section id="dreizweiens">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">02 / Die Grundlage</div>
            <h2 className="mt-16">Die 3-2-1-Regel.<br/>Drei Kopien. Zwei Medien. Ein Off-Site-Ort.</h2>
          </div>
          <p className="lead">
            Ohne Off-Site-Kopie ist Ihr Backup nicht sicher. Veeamcloudbackup.de ist exakt dieser
            dritte Ort — verschlüsselt, in Deutschland, ohne dass Sie ein zweites Rechenzentrum betreiben müssen.
          </p>
        </div>

        <div className="rule321">
          <div className="rule321-card">
            <div className="rule321-num">3</div>
            <div className="rule321-bd">
              <h3>Kopien</h3>
              <p className="muted">Original-Daten plus zwei weitere Sicherungen. Redundanz ist nicht optional — sie ist der Plan.</p>
            </div>
          </div>
          <div className="rule321-arrow" aria-hidden>→</div>
          <div className="rule321-card">
            <div className="rule321-num">2</div>
            <div className="rule321-bd">
              <h3>Medien</h3>
              <p className="muted">Unterschiedliche Speichertypen: lokale Disk plus Cloud-Repository. Ein Ausfall trifft nie beides.</p>
            </div>
          </div>
          <div className="rule321-arrow" aria-hidden>→</div>
          <div className="rule321-card rule321-highlight">
            <div className="rule321-num">1</div>
            <div className="rule321-bd">
              <h3>Off-Site</h3>
              <p className="muted">Geografisch entfernt vom Original — das ist unser Job. Hamburger Rechenzentrum, AES-256-verschlüsselt.</p>
            </div>
            <div className="rule321-badge mono">Hier setzen wir an</div>
          </div>
        </div>
      </div>

      <style>{`
        .rule321 { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; align-items: stretch; }
        @media (max-width: 980px) { .rule321 { grid-template-columns: 1fr; }
          .rule321-arrow { display: none; }
        }
        .rule321-card { background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 20px; position: relative; transition: all .25s ease; }
        .rule321-card:hover { border-color: var(--ink-deep); transform: translateY(-2px); box-shadow: var(--shadow-md); }
        .rule321-num { font-family: var(--f-display); font-weight: 800; font-size: 96px; line-height: 0.85; color: var(--ink-deep); letter-spacing: -0.05em; }
        .rule321-bd h3 { margin-bottom: 6px; }
        .rule321-arrow { font-size: 32px; color: var(--mute); display: flex; align-items: center; padding: 0 6px; }
        .rule321-highlight { background: var(--ink-deep); border-color: var(--ink-deep); color: var(--paper); }
        .rule321-highlight h3 { color: var(--paper); }
        .rule321-highlight .muted { color: oklch(75% 0.012 240); }
        .rule321-highlight .rule321-num { color: var(--brand); }
        .rule321-badge { position: absolute; top: 18px; right: 18px; font-size: 10px; padding: 4px 10px; border-radius: 999px; background: var(--brand); color: white; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; }
      `}</style>
    </section>
  );
}

/* ============================================================
   VORTEILE
   ============================================================ */
function Vorteile() {
  const items = [
    { idx: '01', title: 'Bewährte Veeam-Technologie', body: 'Nutzen Sie Ihre vorhandene Veeam-Lizenz. Cloud Connect ist in allen aktuellen Versionen enthalten — keine Zusatzkosten.' },
    { idx: '02', title: 'Ende-zu-Ende-Verschlüsselung', body: 'AES-256 Verschlüsselung vor der Übertragung. Auch wir können Ihre Daten nicht einsehen.' },
    { idx: '03', title: 'Sie steuern, wir hosten', body: 'Verwalten Sie Ihre Cloud-Repositories aus der vertrauten Veeam-Konsole. Volle Hoheit, ohne fremdes UI.' },
    { idx: '04', title: 'Monatlich kündbar', body: 'Keine Vertragsbindung. Pakete jederzeit anpassen, hochskalieren, reduzieren oder beenden — monatlich.' },
    { idx: '05', title: 'WAN-Acceleration optional', body: 'Caching und Deduplikation reduzieren das übertragene Volumen um bis zu 50× bei Vollsicherungen.' },
    { idx: '06', title: 'Persönlicher Support', body: '4its-Techniker aus Hamburg. Keine Tickets ins Nirvana — direkter Draht per Telefon und E-Mail.' },
  ];
  return (
    <section id="leistungen" className="vorteile" data-screen-label="03 Vorteile">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">03 / Warum 4its</div>
            <h2 className="mt-16">Sechs Gründe, warum Mittelständler<br/>uns ihre Backups anvertrauen.</h2>
          </div>
          <p className="lead">
            Wir sind keine Hyperscaler-Plattform. Wir sind ein Hamburger Systemhaus, das seit 25 Jahren
            Backup, Virtualisierung und Rechenzentrumsbetrieb für Mittelständler macht — und Ihre Anrufe selbst beantwortet.
          </p>
        </div>

        <div className="grid-3 vorteile-grid">
          {items.map((it) => (
            <div className="vorteil-card card" key={it.idx}>
              <div className="vorteil-idx mono">{it.idx}</div>
              <h3 className="mt-16">{it.title}</h3>
              <p className="muted mt-8">{it.body}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .vorteile-grid { gap: 0; border-top: 1px solid var(--edge); border-left: 1px solid var(--edge); }
        .vorteil-card {
          border: none;
          border-right: 1px solid var(--edge);
          border-bottom: 1px solid var(--edge);
          border-radius: 0;
          padding: 32px;
          background: var(--paper);
          transition: background .25s ease;
        }
        .vorteil-card:hover { background: var(--paper-2); border-radius: 0; }
        .vorteil-idx { font-size: 11px; color: var(--brand-deep); letter-spacing: 0.06em; }
      `}</style>
    </section>
  );
}

/* ============================================================
   PACKAGES — three plans
   ============================================================ */
function Packages() {
  const loadPreset = (preset) => (e) => {
    e.preventDefault();
    window.dispatchEvent(new CustomEvent('vc-load-preset', { detail: preset }));
  };

  const plans = [
    {
      name: 'Starter',
      tagline: 'Für Einzelserver & kleine Umgebungen',
      price: '39',
      perMonth: '€ / Monat',
      specs: ['1 VM', '250 GB Backup-Speicher', 'Standard-Repository'],
      includes: ['Veeam Cloud Connect inkl. WAN', '7 Restore Points', 'AES-256 Verschlüsselung', 'E-Mail-Support'],
      highlight: false,
      preset: { vms: 1, sourceGB: 100, retention: 7, immutable: false, setup: true, term: 'annual' },
    },
    {
      name: 'Business S',
      tagline: 'Der Einstieg für KMU',
      price: '109',
      perMonth: '€ / Monat',
      specs: ['3 VMs', '1 TB Backup-Speicher', 'Standard-Repository'],
      includes: ['Veeam Cloud Connect inkl. WAN', '14 Restore Points', 'Mengenstaffel ab 1 TB', 'Telefon-Support 9–18 Uhr'],
      highlight: false,
      preset: { vms: 3, sourceGB: 350, retention: 14, immutable: false, setup: true, term: 'annual' },
    },
    {
      name: 'Business M',
      tagline: 'Der Klassiker für den Mittelstand',
      price: '189',
      perMonth: '€ / Monat',
      specs: ['5 VMs', '2 TB Backup-Speicher', 'Standard-Repository'],
      includes: ['Veeam Cloud Connect inkl. WAN', '14 Restore Points', '−7 % Mengenrabatt', 'Telefon-Support 9–18 Uhr', 'Ersteinrichtung im Angebot'],
      highlight: true,
      badge: 'Beliebteste Wahl',
      preset: { vms: 5, sourceGB: 700, retention: 14, immutable: false, setup: true, term: 'annual' },
    },
    {
      name: 'Business L',
      tagline: 'Für wachsende Infrastrukturen',
      price: '399',
      perMonth: '€ / Monat',
      specs: ['10 VMs', '5 TB Backup-Speicher', 'Standard-Repository'],
      includes: ['Veeam Cloud Connect inkl. WAN', '21 Restore Points', '−10 % Mengenrabatt', 'Prioritäts-Support', 'Quartals-Review mit Techniker'],
      highlight: false,
      preset: { vms: 10, sourceGB: 1700, retention: 21, immutable: false, setup: true, term: 'annual' },
    },
  ];

  return (
    <section id="pakete" className="packages dark" data-screen-label="06 Pakete">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">05 / Pakete</div>
            <h2 className="mt-16">Fünf Pakete.<br/>Eine ehrliche Preisbasis.</h2>
          </div>
          <p className="lead">
            Pauschalpakete für planbare Budgets — oder rechnen Sie sich mit dem Konfigurator
            Ihren exakten Tarif auf den Cent aus. Alle Preise netto. Mindestlaufzeit 12 Monate,
            monatlich abgerechnet. Optional monatlich kündbar mit +15 % Aufschlag.
          </p>
        </div>

        <div className="pkg-row">
          {plans.map((p) => (
            <div key={p.name} className={`pkg-card ${p.highlight ? 'is-highlight' : ''}`}>
              {p.badge && <div className="pkg-badge mono">{p.badge}</div>}
              <div className="pkg-head">
                <h3>{p.name}</h3>
                <p className="muted">{p.tagline}</p>
              </div>
              <div className="pkg-price">
                <span className="pkg-price-cur">€</span>
                <span className="pkg-price-num">{p.price}</span>
                <span className="pkg-price-suf">/ Monat netto</span>
              </div>
              <ul className="pkg-specs">
                {p.specs.map((s, i) => (
                  <li key={i} className="mono">{s}</li>
                ))}
              </ul>
              <ul className="pkg-list">
                {p.includes.map((line) => (
                  <li key={line}>
                    <svg viewBox="0 0 12 12" width="14" height="14" aria-hidden>
                      <path d="M2 6.5L4.8 9 10 3.2" fill="none" stroke="var(--brand)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                    <span>{line}</span>
                  </li>
                ))}
              </ul>
              <a href="#konfigurator" onClick={loadPreset(p.preset)} className={`btn ${p.highlight ? 'btn-brand' : 'btn-ghost'} pkg-cta`}>
                Tarif wählen
                <span className="arrow">→</span>
              </a>
            </div>
          ))}
        </div>

        {/* Enterprise band */}
        <div className="pkg-enterprise">
          <div className="pkg-ent-left">
            <div className="eyebrow" style={{ color: 'var(--accent)' }}>Enterprise</div>
            <h3 className="mt-16">Ab 20 VMs &amp; 10 TB — wir bauen das passend.</h3>
            <p className="muted mt-16" style={{ maxWidth: '54ch' }}>
              SLA mit RPO/RTO-Garantien, eigener Cloud-Tenant, dedicated Account Manager, optional
              VSPP-Lizenzmiete. Wir kalkulieren Ihr Setup individuell.
            </p>
          </div>
          <div className="pkg-ent-right">
            <div className="pkg-ent-pricing">
              <div className="pkg-ent-from mono">ab</div>
              <div className="pkg-ent-vm">7,50 €<small>/ VM</small></div>
              <div className="pkg-ent-plus mono">+</div>
              <div className="pkg-ent-st">0,05 €<small>/ GB</small></div>
            </div>
            <a href="#kontakt" className="btn btn-brand pkg-cta" style={{ marginTop: 16 }}>
              Beratung anfragen <span className="arrow">→</span>
            </a>
          </div>
        </div>

        {/* Modular add-ons */}
        <div className="pkg-addons mono">
          <div className="pkg-addons-h">· Modular dazubuchen</div>
          <div className="pkg-addon-grid">
            <div className="pkg-addon">
              <span>Aufpreis Immutable Storage</span>
              <b>+0,03 € / GB</b>
            </div>
            <div className="pkg-addon">
              <span>Zusätzliche VM</span>
              <b>+7,90 € / Monat</b>
            </div>
            <div className="pkg-addon">
              <span>Zusatz-Storage</span>
              <b>+25 € / 500 GB</b>
            </div>
            <div className="pkg-addon">
              <span>Offline-Seeding</span>
              <b>99 € einmalig</b>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .packages { background: var(--ink-deep); }
        .pkg-row {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 16px;
        }
        @media (max-width: 1140px) { .pkg-row { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
        @media (max-width: 640px)  { .pkg-row { grid-template-columns: 1fr; } }

        .pkg-card {
          position: relative;
          background: oklch(15% 0.015 240);
          border: 1px solid oklch(26% 0.015 240);
          border-radius: var(--r-lg);
          padding: 28px 24px;
          display: flex;
          flex-direction: column;
          gap: 20px;
          transition: border-color .25s ease, transform .25s ease;
        }
        .pkg-card:hover { border-color: oklch(60% 0.10 240); transform: translateY(-3px); }
        .pkg-card.is-highlight {
          background: linear-gradient(180deg, #1F3A5F 0%, oklch(20% 0.06 250) 100%);
          border-color: var(--accent);
          box-shadow: 0 20px 50px -20px rgba(232, 149, 74, .35);
        }
        .pkg-badge {
          position: absolute; top: -12px; left: 24px;
          background: var(--accent);
          color: white;
          font-size: 10px; font-weight: 500;
          padding: 5px 12px; border-radius: 999px;
          letter-spacing: 0.06em; text-transform: uppercase;
        }
        .packages .pkg-card h3 { color: var(--paper); font-size: 22px; }
        .packages .pkg-card .muted { color: oklch(72% 0.012 240); margin-top: 6px; font-size: 13px; }
        .pkg-price { display: flex; align-items: baseline; gap: 4px; padding-bottom: 20px; border-bottom: 1px dashed oklch(30% 0.015 240); }
        .pkg-price-cur { font-family: var(--f-display); font-weight: 600; font-size: 22px; color: oklch(80% 0.012 240); margin-right: 2px; }
        .pkg-price-num { font-family: var(--f-display); font-weight: 800; font-size: 44px; color: var(--paper); letter-spacing: -0.03em; line-height: 0.9; }
        .pkg-price-suf { font-family: var(--f-mono); font-size: 11px; color: oklch(72% 0.012 240); margin-left: 4px; }
        .pkg-specs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
        .pkg-specs li { font-size: 11px; letter-spacing: 0.05em; color: oklch(78% 0.04 200); padding: 6px 10px; background: oklch(22% 0.02 240); border-radius: 5px; }
        .pkg-card.is-highlight .pkg-specs li { background: oklch(28% 0.06 250); color: oklch(86% 0.06 60); }
        .pkg-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
        .pkg-list li { display: flex; gap: 10px; font-size: 13px; color: oklch(82% 0.012 240); line-height: 1.4; }
        .pkg-list li svg { flex-shrink: 0; margin-top: 3px; }
        .pkg-cta { width: 100%; }
        .pkg-card .btn-ghost { color: var(--paper); border-color: oklch(30% 0.015 240); background: transparent; }
        .pkg-card .btn-ghost:hover { background: oklch(22% 0.015 240); border-color: var(--accent); }

        /* Enterprise band */
        .pkg-enterprise {
          margin-top: 32px;
          display: grid;
          grid-template-columns: 1.4fr 1fr;
          gap: 32px;
          align-items: center;
          padding: 36px 40px;
          background: oklch(15% 0.015 240);
          border: 1px solid oklch(26% 0.015 240);
          border-left: 3px solid var(--accent);
          border-radius: var(--r-lg);
        }
        @media (max-width: 860px) { .pkg-enterprise { grid-template-columns: 1fr; padding: 28px; } }
        .pkg-enterprise h3 { color: var(--paper); font-size: 24px; }
        .pkg-enterprise .muted { color: oklch(75% 0.012 240); }
        .pkg-ent-right { display: flex; flex-direction: column; align-items: flex-end; }
        @media (max-width: 860px) { .pkg-ent-right { align-items: flex-start; } }
        .pkg-ent-pricing { display: flex; align-items: baseline; gap: 14px; font-family: var(--f-display); color: var(--paper); }
        .pkg-ent-from { color: oklch(70% 0.012 240); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; align-self: center; }
        .pkg-ent-vm, .pkg-ent-st { font-weight: 800; font-size: 32px; letter-spacing: -0.02em; }
        .pkg-ent-vm small, .pkg-ent-st small { font-size: 13px; font-weight: 500; color: oklch(70% 0.012 240); margin-left: 4px; letter-spacing: 0; }
        .pkg-ent-plus { font-size: 18px; color: oklch(60% 0.012 240); align-self: center; }

        /* Modular add-ons strip */
        .pkg-addons { margin-top: 28px; padding: 24px 0 0; border-top: 1px dashed oklch(26% 0.015 240); }
        .pkg-addons-h { font-size: 11px; letter-spacing: 0.06em; color: oklch(60% 0.012 240); text-transform: uppercase; margin-bottom: 14px; }
        .pkg-addon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
        @media (max-width: 860px) { .pkg-addon-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 480px) { .pkg-addon-grid { grid-template-columns: 1fr; } }
        .pkg-addon { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: oklch(15% 0.015 240); border: 1px solid oklch(24% 0.015 240); border-radius: 8px; font-size: 12px; }
        .pkg-addon span { color: oklch(72% 0.012 240); }
        .pkg-addon b { color: var(--paper); font-weight: 600; }
      `}</style>
    </section>
  );
}

/* ============================================================
   HOW IT WORKS — 3 steps
   ============================================================ */
function HowItWorks() {
  const steps = [
    { idx: '01', title: 'Konfigurieren & buchen', body: 'Stellen Sie Ihren Tarif im Konfigurator ein. Innerhalb von 24 Stunden erhalten Sie Ihre Zugangsdaten per E-Mail.' },
    { idx: '02', title: 'Cloud-Repository einrichten', body: 'Fügen Sie das Cloud-Repository in Ihrer Veeam-Konsole hinzu. Anleitung in der FAQ — oder Ersteinrichtung durch unsere Techniker.' },
    { idx: '03', title: 'Backup-Job starten', body: 'Bestehende Jobs anpassen, neue erstellen. Ab jetzt landen Ihre Sicherungen verschlüsselt in Hamburg.' },
  ];
  return (
    <section id="ablauf" data-screen-label="07 Ablauf">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">06 / Ablauf</div>
            <h2 className="mt-16">Drei Schritte<br/>zum Off-Site-Backup.</h2>
          </div>
          <p className="lead">
            Keine Migration, kein neues Tool. Sie ergänzen Ihre bestehende Veeam-Umgebung um ein
            zusätzliches Repository — den Rest erledigt Veeam, wie immer.
          </p>
        </div>

        <div className="steps">
          {steps.map((s, i) => (
            <div key={s.idx} className="step-card">
              <div className="step-idx mono">{s.idx}</div>
              <div className="step-line" />
              <h3 className="mt-24">{s.title}</h3>
              <p className="muted mt-8">{s.body}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
        @media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
        .step-card { padding: 32px 0; position: relative; }
        .step-idx { font-size: 13px; color: var(--brand-deep); letter-spacing: 0.06em; font-weight: 500; }
        .step-line { height: 2px; width: 40px; background: var(--brand); margin-top: 14px; }
      `}</style>
    </section>
  );
}

/* ============================================================
   DATACENTER specs
   ============================================================ */
function Datacenter() {
  const specs = [
    'Autonome Brandabschnitte',
    'Redundantes Klimasystem (N+1)',
    'Physikalisch getrennte Zuführungen',
    'Redundanter Backbone',
    '24/7 Videoüberwachung',
    '24/7 Zutrittskontrolle & Sicherheitsdienst',
    'Doppelboden für Versorgung & Klima',
    'Brandmeldeanlage Rauch + Hand',
    'INERGEN®-Löschsystem',
    'USV von MGE UPS®',
    'Diesel-Notstrom (KNURZ®)',
    'ISO 27001 zertifiziert',
  ];
  return (
    <section id="rechenzentrum" className="datacenter">
      <div className="wrap dc-grid">
        <div className="dc-left">
          <div className="eyebrow">07 / Infrastruktur</div>
          <h2 className="mt-16">Hochsicherheits-<br/>rechenzentrum,<br/>Standort Deutschland.</h2>
          <p className="lead mt-24">
            Ihre Backups liegen physisch in einem Hochsicherheits-Rechenzentrum auf deutschem
            Boden. Redundant ausgelegt, mehrfach abgesichert, mit Stromversorgung selbst dann,
            wenn draußen die Lichter ausgehen.
          </p>
          <div className="dc-meta mono mt-32">
            <div><span className="muted">Standort:</span> Deutschland</div>
            <div><span className="muted">Verschlüsselung:</span> AES-256 / TLS 1.3</div>
            <div><span className="muted">Verfügbarkeit:</span> 99,9 % monatlich</div>
            <div><span className="muted">Compliance:</span> DSGVO · ISO 27001</div>
          </div>
        </div>
        <div className="dc-right">
          <div className="dc-card">
            <div className="dc-card-head">
              <span className="mono" style={{ fontSize: 11, letterSpacing: '0.06em', color: 'var(--mute)' }}>SPEZIFIKATION / RZ HAMBURG</span>
              <span className="dc-status mono"><i/> ONLINE</span>
            </div>
            <ul className="dc-list">
              {specs.map((s) => (
                <li key={s}>
                  <span className="dc-tick">
                    <svg viewBox="0 0 12 12" width="10" height="10">
                      <path d="M2 6.5L4.8 9 10 3.2" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </span>
                  <span>{s}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
      <style>{`
        .datacenter { background: var(--paper-2); border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
        .dc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
        @media (max-width: 980px) { .dc-grid { grid-template-columns: 1fr; gap: 32px; } }
        .dc-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; }
        .dc-meta .muted { display: block; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 2px; }
        .dc-card { background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r-lg); padding: 28px; }
        .dc-card-head { display: flex; justify-content: space-between; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px dashed var(--edge); }
        .dc-status { font-size: 11px; color: var(--brand-deep); display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.06em; }
        .dc-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); animation: pulse 2.4s infinite; }
        .dc-list { list-style: none; padding: 8px 0 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
        @media (max-width: 540px) { .dc-list { grid-template-columns: 1fr; } }
        .dc-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-soft); padding: 6px 0; }
        .dc-tick { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-deep); align-items: center; justify-content: center; flex-shrink: 0; }
      `}</style>
    </section>
  );
}

/* ============================================================
   TESTIMONIAL
   ============================================================ */
function Testimonial() {
  return (
    <section className="testimonial">
      <div className="wrap">
        <figure className="tm">
          <div className="tm-mark mono">"</div>
          <blockquote>
            Unser Unternehmen expandiert und das Datenvolumen wächst permanent. Veeam Cloud Backup
            ist die perfekte Ergänzung unserer Backup-Strategie — bewährte Technologie, die sicher
            und zuverlässig funktioniert. Ein großes Plus sind die einfache Bedienung und die
            Flexibilität.
          </blockquote>
          <figcaption>
            <div className="tm-author">Christof Balzer</div>
            <div className="tm-role mono">Geschäftsführer · KÖLLA GmbH &amp; Co. KG</div>
          </figcaption>
        </figure>
      </div>
      <style>{`
        .testimonial { padding: 96px 0; }
        .tm { max-width: 880px; margin: 0 auto; text-align: center; position: relative; }
        .tm-mark { font-family: var(--f-display); font-size: 120px; line-height: 1; color: var(--brand); opacity: 0.4; margin-bottom: -40px; }
        .tm blockquote {
          font-family: var(--f-display);
          font-weight: 500;
          font-size: clamp(22px, 2.4vw, 32px);
          line-height: 1.35;
          color: var(--ink-deep);
          letter-spacing: -0.015em;
          margin: 0 0 32px;
          text-wrap: balance;
        }
        .tm-author { font-weight: 600; font-size: 16px; }
        .tm-role { font-size: 12px; color: var(--mute); letter-spacing: 0.04em; margin-top: 4px; text-transform: uppercase; }
      `}</style>
    </section>
  );
}

/* ============================================================
   FAQ — accordion
   ============================================================ */
function FAQ() {
  const items = [
    {
      q: 'Welche Veeam-Lizenz benötigen wir?',
      a: 'Veeam Backup & Replication ab Version 9 — und Cloud Connect ist in allen aktuellen Versionen enthalten. Es ist also keine separate Lizenz nötig, der Anschluss an unser Cloud Repository ist vollständig in Ihrer bestehenden Veeam-Welt enthalten.',
    },
    {
      q: 'Wie lange dauert die Ersteinrichtung?',
      a: 'Nach Buchung erhalten Sie innerhalb von 24 Stunden Ihre Zugangsdaten. Das Hinzufügen des Cloud Repository in der Veeam-Konsole dauert etwa 10 Minuten — oder wir richten alles für Sie remote ein (Option im Konfigurator).',
    },
    {
      q: 'Wie lange dauert die erste Übertragung?',
      a: 'Das hängt stark von Ihrer Internetanbindung ab. Faustregel: 80 GB bei 80 MBit/s ≈ 2 Stunden. Für sehr große Initial­sicherungen empfehlen wir den optionalen Seeding-Service — Sie schicken einen USB-Datenträger nach Hamburg und wir spielen die Erstsicherung direkt im Rechenzentrum ein.',
    },
    {
      q: 'Wie viel Speicher brauche ich wirklich?',
      a: 'Faustregel für Veeam-Retention: ca. 1,5–2,5× der Quelldatenmenge, abhängig von Versionsanzahl, Komprimierung und Inkrementen. Im Konfigurator oben sehen Sie eine Live-Berechnung inklusive Workspace-Puffer.',
    },
    {
      q: 'Wer kann unsere Daten einsehen?',
      a: 'Niemand außer Ihnen. Sie aktivieren in Veeam die clientseitige AES-256-Verschlüsselung — selbst wir als Betreiber sehen nur verschlüsselte Datenblöcke. Das Passwort liegt ausschließlich bei Ihnen.',
    },
    {
      q: 'Wie kommen wir im Notfall schnell an unsere Daten?',
      a: 'Erstens: Sie restoren wie gewohnt aus der Veeam-Konsole — die Cloud verhält sich wie ein lokales Repository. Zweitens für den absoluten Ernstfall: Rufen Sie uns an, wir kopieren Ihre Daten auf einen Datenträger und schicken diesen per Kurier (Service: 150 € + Versand).',
    },
    {
      q: 'Können wir auch Microsoft 365 sichern?',
      a: 'Ja. Veeam Backup for Microsoft 365 lässt sich gegen unser Cloud Repository einrichten — Postfächer, SharePoint, OneDrive und Teams. Sprechen Sie uns für ein passendes Paket an.',
    },
    {
      q: 'Was passiert, wenn wir kündigen?',
      a: 'Sie kündigen monatlich. Sie behalten 30 Tage Zugriff auf Ihre Daten, um sie zu migrieren oder lokal zurück­zuspielen. Auf Wunsch löschen wir Ihre Daten danach revisionssicher und stellen eine Löschbestätigung aus.',
    },
  ];
  const [open, setOpen] = useStateS(0);
  return (
    <section id="faq" data-screen-label="09 FAQ">
      <div className="wrap faq-grid">
        <div className="faq-left">
          <div className="eyebrow">08 / Häufige Fragen</div>
          <h2 className="mt-16">Antworten auf das,<br/>was IT-Leiter immer<br/>als erstes fragen.</h2>
          <p className="lead mt-24">
            Wenn Ihre Frage nicht dabei ist, rufen Sie uns einfach an —
            <a href="tel:+49405619470" style={{ color: 'var(--brand-deep)', fontWeight: 500 }}> +49 40 561 947 0</a>.
            Wir gehen selbst dran.
          </p>
        </div>
        <div className="faq-right">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'is-open' : ''}`}>
              <button onClick={() => setOpen(open === i ? -1 : i)} className="faq-q">
                <span>{it.q}</span>
                <span className="faq-toggle" aria-hidden>{open === i ? '−' : '+'}</span>
              </button>
              <div className="faq-a">
                <p>{it.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
        @media (max-width: 980px) { .faq-grid { grid-template-columns: 1fr; gap: 32px; } }
        .faq-item { border-bottom: 1px solid var(--edge); }
        .faq-item:first-child { border-top: 1px solid var(--edge); }
        .faq-q { width: 100%; background: transparent; border: 0; padding: 22px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; text-align: left; font-family: var(--f-display); font-weight: 600; font-size: 17px; color: var(--ink-deep); transition: color .15s; }
        .faq-q:hover { color: var(--brand-deep); }
        .faq-toggle { font-family: var(--f-display); font-weight: 400; font-size: 24px; color: var(--mute); transition: transform .25s ease, color .15s; line-height: 1; }
        .faq-item.is-open .faq-toggle { color: var(--brand-deep); }
        .faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease; }
        .faq-item.is-open .faq-a { max-height: 400px; padding-bottom: 22px; }
        .faq-a p { color: var(--ink-soft); max-width: 60ch; }
      `}</style>
    </section>
  );
}

/* ============================================================
   CTA + KONTAKT
   ============================================================ */
function CTA() {
  return (
    <section id="kontakt" className="cta dark" data-screen-label="10 Kontakt">
      <div className="wrap cta-grid">
        <div>
          <div className="eyebrow">09 / Loslegen</div>
          <h2 className="mt-16">30 Tage testen.<br/>50 GB kostenfrei. Keine Verpflichtung.</h2>
          <p className="lead mt-24">
            Wir richten Ihnen einen Test-Zugang ein — Sie probieren, was Veeam Cloud Backup wirklich kann.
            Nach 30 Tagen endet der Test automatisch. Sie entscheiden, ob es weitergeht.
          </p>
          <div className="cta-meta mono mt-32">
            <div>
              <span className="muted">Telefon</span>
              <a href="tel:+49405619470">+49 40 561 947 0</a>
            </div>
            <div>
              <span className="muted">E-Mail</span>
              <a href="mailto:info@veeamcloudbackup.de">info@veeamcloudbackup.de</a>
            </div>
            <div>
              <span className="muted">Adresse</span>
              4its GmbH · Burchardstraße 22 · 20095 Hamburg
            </div>
            <div>
              <span className="muted">Antwortzeit</span>
              ≤ 24 h werktags
            </div>
          </div>
        </div>
        <ContactForm />
      </div>
      <style>{`
        .cta { padding: 96px 0; }
        .cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
        @media (max-width: 980px) { .cta-grid { grid-template-columns: 1fr; gap: 40px; } }
        .cta-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 13px; }
        .cta-meta a { color: var(--paper); }
        .cta-meta a:hover { color: var(--brand); }
        .cta-meta > div > .muted { display: block; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 4px; color: oklch(65% 0.012 240); }
      `}</style>
    </section>
  );
}

function ContactForm() {
  const [sent, setSent] = useStateS(false);
  const [sending, setSending] = useStateS(false);
  const [error, setError] = useStateS(null);
  const [a, setA] = useStateS(() => Math.floor(Math.random() * 7) + 2);
  const [b, setB] = useStateS(() => Math.floor(Math.random() * 7) + 2);
  const [captcha, setCaptcha] = useStateS('');
  const [accepted, setAccepted] = useStateS(false);
  const [formToken, setFormToken] = useStateS(null);
  const [message, setMessage] = useStateS('Guten Tag, bitte schicken Sie uns einen kostenlosen Testzugang zu. Mit freundlichen Grüßen');
  const [attachedConfig, setAttachedConfig] = useStateS(null);
  const mountedAt = useRefS(Date.now());
  const submitGuard = useRefS(false);

  // HMAC-Token vom Server holen (gegen Replay/CSRF)
  useEffectS(() => {
    let cancelled = false;
    fetch('send.php', { method: 'GET' })
      .then((r) => r.ok ? r.json() : null)
      .then((data) => {
        if (!cancelled && data && data.token) setFormToken(data.token);
      })
      .catch(() => { /* Fallback im Submit-Handler */ });
    return () => { cancelled = true; };
  }, []);

  // Konfigurator -> Kontaktformular: Konfiguration übernehmen
  useEffectS(() => {
    const onQuoteRequest = (e) => {
      const c = e.detail || {};
      setAttachedConfig(c);

      const fmtEUR = (n) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(n || 0);
      const isTrial = c.mode === 'trial';
      const greet = isTrial
        ? 'Guten Tag,\n\nbitte richten Sie uns einen kostenlosen 30-Tage-Testzugang zur folgenden Konfiguration ein:'
        : 'Guten Tag,\n\nbitte erstellen Sie uns ein verbindliches Angebot zur folgenden Konfiguration:';

      const lines = [
        greet,
        '',
        '────────── IHRE KONFIGURATION ──────────',
        `Empfohlener Tarif:   ${c.plan || '—'}`,
        `Virtuelle Maschinen: ${c.vms}`,
        `Backup-Quelldaten:   ${(c.sourceGB || 0).toLocaleString('de-DE')} GB`,
        `Versionen:           ${c.retention}`,
        `Speicherbedarf:      ca. ${(c.storageGB || 0).toLocaleString('de-DE')} GB`,
        `Speichertyp:         ${c.storageType}`,
        `Vertragslaufzeit:    ${c.term === 'monthly' ? 'monatlich kündbar (+15 %)' : '12 Monate (Standard)'}`,
        `Ersteinrichtung:     ${c.setup ? 'ja (149 € einmalig)' : 'nein'}`,
        `Offline-Seeding:     ${c.seeding ? 'ja (99 € einmalig)' : 'nein'}`,
        '',
        `Kalkulation netto:`,
        `  Monatlich:         ${fmtEUR(c.monthlyNet)}`,
        `  Einmalig:          ${fmtEUR(c.oneTime)}`,
        `  Jahressumme:       ${fmtEUR(c.yearTotal)}`,
        '',
        'Bitte melden Sie sich mit den Details zur Vertragsgestaltung.',
        'Mit freundlichen Grüßen',
      ];
      setMessage(lines.join('\n'));

      // Scroll zum Formular
      const el = document.getElementById('kontakt');
      if (el) {
        const top = el.getBoundingClientRect().top + window.scrollY - 60;
        window.scrollTo({ top, behavior: 'smooth' });
      }
    };
    window.addEventListener('vc-request-quote', onQuoteRequest);
    return () => window.removeEventListener('vc-request-quote', onQuoteRequest);
  }, []);

  const refreshCaptcha = () => {
    setA(Math.floor(Math.random() * 7) + 2);
    setB(Math.floor(Math.random() * 7) + 2);
    setCaptcha('');
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    setError(null);

    if (submitGuard.current || sending) return;

    const formEl = e.currentTarget;
    const fd = new FormData(formEl);

    // 1) Honeypot — hidden fields should stay empty
    if (fd.get('website') || fd.get('fax_number')) {
      setError('Anfrage konnte nicht zugeordnet werden. Bitte versuchen Sie es erneut.');
      return;
    }

    // 2) Time trap — humans take ≥2s to fill a form
    const elapsed = Date.now() - mountedAt.current;
    if (elapsed < 2000) {
      setError('Bitte einen Moment Geduld — das Formular lädt noch.');
      return;
    }

    // 3) Math captcha
    const expected = a + b;
    if (Number(captcha) !== expected) {
      setError('Bitte lösen Sie die Sicherheitsfrage korrekt.');
      refreshCaptcha();
      return;
    }

    // 4) Rate limit — max 3 submissions per hour from this browser
    try {
      const key = 'vc_form_submits_v1';
      const now = Date.now();
      const recent = (JSON.parse(localStorage.getItem(key) || '[]') || []).filter((t) => now - t < 3600 * 1000);
      if (recent.length >= 3) {
        setError('Sie haben in der letzten Stunde mehrere Anfragen gesendet. Bitte rufen Sie uns direkt an.');
        return;
      }
    } catch (e) {}

    // 5) Consent check (DSGVO Art. 6 Abs. 1 lit. a)
    if (!accepted) {
      setError('Bitte stimmen Sie der Datenschutzerklärung zu.');
      return;
    }

    // POST to backend endpoint (send.php on the production host)
    const payload = {
      name:        fd.get('name'),
      company:     fd.get('company'),
      email:       fd.get('email'),
      phone:       fd.get('phone'),
      message:     fd.get('message'),
      captcha:     captcha,
      captcha_a:   a,
      captcha_b:   b,
      website:     fd.get('website')    || '',
      fax_number:  fd.get('fax_number') || '',
      form_start:  mountedAt.current,
      form_token:  formToken || '',
      consent:     accepted,
      config:      attachedConfig || null,
    };

    setSending(true);
    try {
      const res = await fetch('send.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });

      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        const errMap = {
          captcha_failed:    'Die Sicherheitsfrage wurde nicht korrekt beantwortet.',
          rate_limited:      'Sie haben in der letzten Stunde mehrere Anfragen gesendet. Bitte rufen Sie uns direkt an.',
          consent_required:  'Bitte stimmen Sie der Datenschutzerklärung zu.',
          validation:        'Bitte prüfen Sie Ihre Eingaben.',
          mail_failed:       'Senden fehlgeschlagen. Bitte versuchen Sie es später erneut oder rufen Sie uns an.',
          spam_pattern:      'Die Nachricht konnte nicht versendet werden.',
          too_fast:          'Bitte einen Moment Geduld und erneut absenden.',
          token_missing:     'Bitte laden Sie die Seite neu und versuchen Sie es erneut.',
          token_invalid:     'Sicherheits-Token ungültig. Bitte Seite neu laden.',
          token_expired:     'Ihre Sitzung ist abgelaufen. Bitte Seite neu laden.',
          token_too_fresh:   'Bitte einen Moment Geduld und erneut absenden.',
          nonce_replay:      'Doppelte Einreichung erkannt.',
          origin_forbidden:  'Anfrage aus nicht autorisierter Quelle.',
          email_undeliverable: 'Die angegebene E-Mail-Domain ist nicht erreichbar.',
        };
        setError(errMap[data.error] || 'Senden fehlgeschlagen. Bitte rufen Sie uns unter +49 40 561 947 0 an.');
        refreshCaptcha();
        return;
      }

      // Erfolgreich gesendet — client-side rate counter aktualisieren
      try {
        const key = 'vc_form_submits_v1';
        const now = Date.now();
        const recent = (JSON.parse(localStorage.getItem(key) || '[]') || []).filter((t) => now - t < 3600 * 1000);
        recent.push(now);
        localStorage.setItem(key, JSON.stringify(recent));
      } catch (e) {}

      submitGuard.current = true;
      setSent(true);
    } catch (err) {
      // Netzwerk-/Server-Fehler — Fallback auf mailto
      console.warn('Form submit failed, offering mailto fallback', err);
      setError(null);
      const mailtoBody = encodeURIComponent(
        `Name: ${payload.name}\nFirma: ${payload.company}\nE-Mail: ${payload.email}\nTelefon: ${payload.phone || '—'}\n\n${payload.message}`
      );
      const mailtoSubject = encodeURIComponent('Anfrage Testzugang · ' + (payload.company || ''));
      window.location.href = `mailto:info@4its.de?subject=${mailtoSubject}&body=${mailtoBody}`;
    } finally {
      setSending(false);
    }
  };

  return (
    <form className="cf" onSubmit={onSubmit} noValidate>
      <div className="cf-head">
        <span className="mono" style={{ fontSize: 11, letterSpacing: '0.06em', color: 'oklch(72% 0.012 240)' }}>TESTZUGANG / ERSTBERATUNG</span>
        <span className="cf-secure mono" title="Verschlüsselte Übertragung & Bot-Schutz">
          <svg viewBox="0 0 12 14" width="10" height="12" aria-hidden>
            <path d="M3 6V4 a3 3 0 0 1 6 0 v2 M2 6 h8 v7 H2 z" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
          </svg>
          TLS 1.3 · Bot-Schutz aktiv
        </span>
      </div>
      {!sent ? (
        <>
          <div className="cf-row">
            <label>Ihr Name<input name="name" type="text" placeholder="Max Muster" required autoComplete="name" /></label>
            <label>Firma<input name="company" type="text" placeholder="Musterfirma GmbH" required autoComplete="organization" /></label>
          </div>
          <label>Geschäftliche E-Mail<input name="email" type="email" placeholder="name@firma.de" required autoComplete="email" /></label>
          <label>Telefon (optional)<input name="phone" type="tel" placeholder="+49 …" autoComplete="tel" /></label>
          <label>Nachricht
            <textarea
              name="message"
              rows="3"
              value={message}
              onChange={(e) => setMessage(e.target.value)}
            ></textarea>
          </label>

          {attachedConfig && (
            <div className="cf-attached" role="status">
              <span className="cf-attached-icon" aria-hidden>
                <svg viewBox="0 0 14 14" width="12" height="12"><path d="M2 7.5L5.5 11 12 4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </span>
              <div className="cf-attached-body">
                <b>Konfiguration angehängt: {attachedConfig.plan}</b>
                <span>{attachedConfig.vms} VM · {(attachedConfig.storageGB || 0).toLocaleString('de-DE')} GB · {attachedConfig.storageType} · {attachedConfig.term === 'monthly' ? 'monatlich' : '12 Monate'}</span>
              </div>
              <button type="button" className="cf-attached-x" onClick={() => setAttachedConfig(null)} title="Konfiguration entfernen">×</button>
            </div>
          )}

          {/* HONEYPOT — hidden from humans, bots fill it */}
          <div className="cf-honeypot" aria-hidden="true">
            <label>Webseite (bitte leer lassen)<input name="website" type="text" tabIndex="-1" autoComplete="off" /></label>
            <label>Fax<input name="fax_number" type="text" tabIndex="-1" autoComplete="off" /></label>
          </div>

          {/* MATH CAPTCHA */}
          <div className="cf-captcha">
            <div className="cf-captcha-q">
              <span className="cf-captcha-lbl mono">Sicherheitsfrage</span>
              <span className="cf-captcha-prompt">
                Wie viel ist <b>{a}</b> + <b>{b}</b>?
              </span>
              <button type="button" className="cf-captcha-refresh" onClick={refreshCaptcha} title="Neue Frage">
                <svg viewBox="0 0 14 14" width="12" height="12" aria-hidden>
                  <path d="M11.5 3.5 V1 M11.5 3.5 H9 M11.5 3.5 A5 5 0 1 0 12.5 7" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </button>
            </div>
            <input
              name="captcha"
              type="text"
              inputMode="numeric"
              pattern="[0-9]*"
              placeholder="Antwort"
              value={captcha}
              onChange={(e) => setCaptcha(e.target.value.replace(/[^0-9]/g, '').slice(0, 3))}
              className="cf-captcha-input"
              required
              autoComplete="off"
            />
          </div>

          <label className="cf-check">
            <input type="checkbox" checked={accepted} onChange={(e) => setAccepted(e.target.checked)} required />
            <span>Ich akzeptiere die <a href="datenschutz.html" target="_blank" rel="noopener">Datenschutzerklärung</a> und stimme der Kontaktaufnahme zu (Art. 6 Abs. 1 lit. a DSGVO).</span>
          </label>

          {error && (
            <div className="cf-error" role="alert">
              <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden>
                <circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" strokeWidth="1.4"/>
                <path d="M8 5v4 M8 11.2 v0.1" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
              </svg>
              <span>{error}</span>
            </div>
          )}

          <button type="submit" className="btn btn-brand cf-submit" disabled={sending}>
            {sending ? (
              <>
                <span className="cf-spinner" aria-hidden /> Wird gesendet …
              </>
            ) : (
              <>Testzugang anfordern <span className="arrow">→</span></>
            )}
          </button>

          <div className="cf-foot mono">
            Ihre Daten werden ausschließlich zur Bearbeitung Ihrer Anfrage verwendet ·
            Server in Hamburg · DSGVO-konform · Kein Tracking ohne Einwilligung
          </div>
        </>
      ) : (
        <div className="cf-sent">
          <div className="cf-sent-mark">
            <svg viewBox="0 0 24 24" width="32" height="32"><path d="M5 12.5L10 17 20 7" fill="none" stroke="var(--brand)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
          <h3>Vielen Dank.</h3>
          <p className="muted">Wir melden uns innerhalb von 24 Stunden mit Ihren Zugangsdaten.</p>
        </div>
      )}
      <style>{`
        .cf { background: oklch(15% 0.015 240); border: 1px solid oklch(26% 0.015 240); border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 14px; }
        .cf-head { padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px dashed oklch(26% 0.015 240); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
        .cf-secure { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: oklch(72% 0.012 240); letter-spacing: 0.04em; }
        .cf-secure svg { color: var(--brand); }
        .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        @media (max-width: 540px) { .cf-row { grid-template-columns: 1fr; } }
        .cf label { display: flex; flex-direction: column; gap: 6px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: oklch(72% 0.012 240); }
        .cf input, .cf textarea {
          font-family: var(--f-body);
          font-size: 14px;
          padding: 12px 14px;
          background: oklch(11% 0.015 240);
          border: 1px solid oklch(26% 0.015 240);
          border-radius: 8px;
          color: var(--paper);
          letter-spacing: 0;
          text-transform: none;
          transition: border-color .15s;
        }
        .cf input::placeholder, .cf textarea::placeholder { color: oklch(50% 0.012 240); }
        .cf input:focus, .cf textarea:focus { outline: none; border-color: var(--brand); }
        .cf-check { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-size: 12px !important; letter-spacing: 0 !important; text-transform: none !important; color: oklch(75% 0.012 240) !important; }
        .cf-check input { accent-color: var(--brand); margin-top: 2px; }
        .cf-check a { color: var(--brand); text-decoration: underline; }
        .cf-submit { margin-top: 8px; }
        .cf-submit[disabled] { opacity: 0.7; cursor: wait; }
        .cf-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cf-spin 0.7s linear infinite; margin-right: 6px; vertical-align: -2px; }
        @keyframes cf-spin { to { transform: rotate(360deg); } }

        /* Honeypot — hidden from sighted users but reachable by bots */
        .cf-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

        /* Math captcha */
        .cf-captcha {
          display: grid;
          grid-template-columns: 1.4fr 1fr;
          gap: 12px;
          padding: 14px;
          background: oklch(11% 0.015 240);
          border: 1px solid oklch(26% 0.015 240);
          border-radius: 10px;
          align-items: center;
        }
        @media (max-width: 540px) { .cf-captcha { grid-template-columns: 1fr; } }
        .cf-captcha-q { display: flex; flex-direction: column; gap: 4px; position: relative; }
        .cf-captcha-lbl { font-size: 10px; color: oklch(60% 0.012 240); letter-spacing: 0.06em; text-transform: uppercase; }
        .cf-captcha-prompt { font-family: var(--f-body); font-size: 14px; color: var(--paper); text-transform: none; letter-spacing: 0; }
        .cf-captcha-prompt b { color: var(--brand); font-weight: 700; }
        .cf-captcha-refresh {
          position: absolute; right: 0; top: -2px;
          background: transparent; border: 0;
          width: 22px; height: 22px;
          border-radius: 4px;
          color: oklch(60% 0.012 240);
          cursor: pointer;
          display: inline-flex; align-items: center; justify-content: center;
          transition: color .15s, background .15s;
        }
        .cf-captcha-refresh:hover { color: var(--brand); background: oklch(20% 0.015 240); }
        .cf-captcha-input { text-align: center; font-family: var(--f-mono) !important; font-size: 16px !important; font-weight: 600; }

        /* Error */
        .cf-error {
          display: flex; align-items: center; gap: 10px;
          padding: 10px 14px;
          background: oklch(22% 0.06 25);
          border: 1px solid oklch(40% 0.10 25);
          border-radius: 8px;
          color: oklch(85% 0.08 25);
          font-size: 13px;
        }

        .cf-foot { font-size: 10px; color: oklch(55% 0.012 240); letter-spacing: 0.02em; line-height: 1.5; padding-top: 8px; }

        .cf-attached {
          display: flex; align-items: center; gap: 12px;
          padding: 12px 14px;
          background: oklch(22% 0.06 160);
          border: 1px solid oklch(40% 0.10 160);
          border-radius: 8px;
          font-size: 13px;
          color: var(--paper);
          letter-spacing: 0;
          text-transform: none;
        }
        .cf-attached-icon {
          width: 22px; height: 22px;
          border-radius: 50%;
          background: var(--brand);
          color: white;
          display: inline-flex; align-items: center; justify-content: center;
          flex-shrink: 0;
        }
        .cf-attached-body { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
        .cf-attached-body b { font-weight: 600; }
        .cf-attached-body span { font-family: var(--f-mono); font-size: 11px; color: oklch(80% 0.04 160); letter-spacing: 0.02em; }
        .cf-attached-x {
          background: transparent; border: 0; color: oklch(80% 0.04 160);
          font-size: 22px; line-height: 1; cursor: pointer;
          padding: 0 4px;
          transition: color .15s;
        }
        .cf-attached-x:hover { color: var(--paper); }

        .cf-sent { text-align: center; padding: 24px 0; }
        .cf-sent-mark { width: 64px; height: 64px; border-radius: 50%; background: oklch(22% 0.06 160); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
        .cf-sent h3 { color: var(--paper); margin-bottom: 8px; }
        .cf-sent .muted { color: oklch(72% 0.012 240); }
      `}</style>
    </form>
  );
}

/* ============================================================
   FOOTER
   ============================================================ */
function Footer() {
  return (
    <footer className="ft">
      <div className="wrap">
        <div className="ft-grid">
          <div className="ft-brand">
            <a href="#top" className="vc-lockup">
              <VeeamMark size={34} />
              <span className="vc-text">
                <span className="vc-wordmark" style={{ fontSize: 19 }}>veeamcloudbackup<span className="tld">.de</span></span>
                <span className="vc-sub">Cloud Backup as a Service</span>
              </span>
            </a>
            <p className="muted mt-16" style={{ fontSize: 13, maxWidth: 320 }}>
              veeamcloudbackup.de ist das Cloud-Backup-Produkt der 4its GmbH — mit über 25 Jahren Erfahrung
              in Backup, Virtualisierung und Rechenzentrumsbetrieb für Mittelständler in Norddeutschland.
            </p>
          </div>
          <div>
            <div className="ft-h mono">Lösung</div>
            <a href="#leistungen">Vorteile</a>
            <a href="#dreizweiens">3-2-1-Regel</a>
            <a href="#konfigurator">Konfigurator</a>
            <a href="#pakete">Pakete</a>
            <a href="#rechenzentrum">Rechenzentrum</a>
          </div>
          <div>
            <div className="ft-h mono">4its</div>
            <a href="https://4its.de/dienstleistung/">IT-Service</a>
            <a href="https://4its.de/beratung/">Beratung</a>
            <a href="https://4its.de/rechenzentrum/">Rechenzentrum</a>
            <a href="https://4its.de/">4its.de</a>
          </div>
          <div>
            <div className="ft-h mono">Kontakt</div>
            <a href="tel:+49405619470">+49 40 561 947 0</a>
            <a href="mailto:info@veeamcloudbackup.de">info@veeamcloudbackup.de</a>
            <span className="muted" style={{ fontSize: 13, marginTop: 12, display: 'block' }}>
              Burchardstraße 22<br/>20095 Hamburg
            </span>
          </div>
        </div>
        <div className="ft-bottom mono">
          <div>© 2017–2026 4its GmbH · veeamcloudbackup.de ist eine Landingpage der 4its GmbH</div>
          <div className="ft-legal">
            <a href="#" onClick={(e) => { e.preventDefault(); window.__openCookieSettings && window.__openCookieSettings(); }}>Cookie-Einstellungen</a>
            <a href="impressum.html">Impressum</a>
            <a href="datenschutz.html">Datenschutz</a>
            <a href="agb.html">AGB</a>
          </div>
        </div>
      </div>
      <style>{`
        .ft { background: var(--paper-2); border-top: 1px solid var(--edge); padding: 72px 0 32px; color: var(--ink-soft); }
        .ft-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 32px; padding-bottom: 48px; border-bottom: 1px solid var(--edge); }
        @media (max-width: 860px) { .ft-grid { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } }
        .ft-h { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; }
        .ft a { display: block; font-size: 14px; padding: 4px 0; color: var(--ink-soft); transition: color .15s; }
        .ft a:hover { color: var(--brand-deep); }
        .ft-bottom { display: flex; justify-content: space-between; padding-top: 24px; font-size: 12px; color: var(--mute); }
        .ft-bottom a { display: inline; padding: 0; }
        .ft-legal { display: flex; gap: 20px; }
      `}</style>
    </footer>
  );
}

window.VeeamMark = VeeamMark;
window.Header = Header;
window.Hero = Hero;
window.TrustStrip = TrustStrip;
window.ThreeTwoOne = ThreeTwoOne;
window.Vorteile = Vorteile;
window.Packages = Packages;
window.HowItWorks = HowItWorks;
window.Datacenter = Datacenter;
window.Testimonial = Testimonial;
window.FAQ = FAQ;
window.CTA = CTA;
window.Footer = Footer;