/* global React */
// Produkte page — 4 chapters, 12 service areas from Katalog

const PRODUCT_CHAPTERS = [
  {
    id: 'infrastruktur',
    num: '01',
    title: 'Infrastruktur, die trägt.',
    lead: 'Backup, Rechenzentrum, Virtualisierung und Arbeitsplätze — das Fundament jeder modernen IT. Hochverfügbar, DSGVO-konform, aus Deutschland.',
    accent: 'var(--brand-cyan)',
    items: [
      { n:'01', t:'Backup & Datensicherung', tag:'Veeam · Cloud Backup · BaaS',
        lead:'Ihre Daten — lokal, hybrid, in der Cloud. Immer sicher.',
        desc:'Datenverlust kann existenzbedrohend sein. Als zertifizierter Veeam-Partner sichern wir Ihre Daten gegen Ransomware, Ausfälle und menschliche Fehler.',
        groups: [
          { h:'Veeam Backup & Replication', pts:['VMware & Hyper-V Backup','Instant VM Recovery','Veeam ONE Monitoring','Automatisierte Backup-Prüfung'] },
          { h:'Cloud & Offsite', pts:['S3, Azure, AWS Targets','Offsite-Sicherung','Backup-as-a-Service','Ransomware-sichere Speicherung'] },
        ] },
      { n:'02', t:'Rechenzentrum & Hosting', tag:'Server · Mail · Exchange',
        lead:'Full-Managed Hosting aus deutschem Rechenzentrum.',
        desc:'Höchste Verfügbarkeit, DSGVO-konformer Betrieb, persönlicher Ansprechpartner — wir übernehmen den kompletten Betrieb Ihrer geschäftskritischen Systeme.',
        groups: [
          { h:'Server Hosting', pts:['Dedizierte Server & VMs','Full-Managed Betrieb','99,9 % SLA · redundant','DSGVO-konform, Deutschland'] },
          { h:'Web- & Mail-Hosting', pts:['Managed Web Hosting','SSL & Monitoring','Shared Exchange & ActiveSync','MailStore Archivierung'] },
        ] },
      { n:'03', t:'Virtualisierung & Citrix', tag:'VMware · Hyper-V · Proxmox',
        lead:'Flexibel arbeiten — auf jedem Gerät, überall.',
        desc:'Virtualisierung ist das Fundament moderner IT. Kombiniert mit Citrix-DaaS ermöglichen wir Home-Office, mobile Teams und standortübergreifende Arbeit.',
        groups: [
          { h:'VMware · Hyper-V · Proxmox', pts:['vSphere / ESXi Planung & Betrieb','Hyper-V Cluster & HA','Proxmox VE · Ceph Storage','P2V / V2V Migration'] },
          { h:'Citrix DaaS', pts:['Virtuelle Windows-Arbeitsplätze','PC, Mac, Tablet, Smartphone','Zentrales Patch-Management','Daten bleiben im Rechenzentrum'] },
        ] },
      { n:'04', t:'Microsoft 365 & Cloud-PC', tag:'Migration · Managed · Win 365',
        lead:'Die Cloud-Plattform für produktives, mobiles Arbeiten.',
        desc:'Von der ersten Planung über die Migration bis zum laufenden Betrieb — inklusive Windows 365 Cloud-PC für Thin Clients oder ältere Hardware.',
        groups: [
          { h:'Migration & Managed M365', pts:['Analyse & Migrationskonzept','Exchange & Dateien → Cloud','Azure AD / Entra ID Sync','Intune · MFA · Compliance'] },
          { h:'Windows 365 Cloud-PC', pts:['Vollwertiger PC aus der Cloud','Browser oder Remote-App','Ideal für Thin Clients','Feste monatliche Kosten'] },
        ] },
    ],
  },
  {
    id: 'sicherheit',
    num: '02',
    title: 'Sicherheit, die wirkt.',
    lead: 'Proaktiver Schutz auf allen Ebenen: Endpoint, E-Mail, Netzwerk, Compliance und — wichtigster Faktor — Mensch.',
    accent: 'var(--brand-orange)',
    items: [
      { n:'05', t:'IT-Sicherheit', tag:'Bitdefender · EDR · MailStore',
        lead:'Proaktiver Schutz gegen moderne Cyberbedrohungen.',
        desc:'Cyberangriffe werden immer raffinierter. Wir schützen Ihr Unternehmen mit bewährten Lösungen führender Hersteller — umfassend und zuverlässig.',
        groups: [
          { h:'Bitdefender Endpoint', pts:['Zertifizierter Partner','EDR & Ransomware-Schutz','GravityZone Konsole','Windows · macOS · Linux · Mobile'] },
          { h:'Mail Security & Archiv', pts:['MailStore Partner','Revisionssichere Archivierung','Spam- & Phishing-Schutz','E-Mail-Verschlüsselung'] },
        ] },
      { n:'06', t:'NIS2 & DSGVO', tag:'Gap-Analyse · Audit',
        lead:'Compliance — strukturiert, pragmatisch, nachweisbar.',
        desc:'Die NIS2-Richtlinie der EU stellt seit Oktober 2024 erhöhte Anforderungen an die Cybersicherheit vieler Unternehmen. Wir helfen Ihnen, gesetzliche Anforderungen zu erfüllen — ohne unnötigen Aufwand.',
        groups: [
          { h:'NIS2-Umsetzung', pts:['Betroffenheits- & Gap-Analyse','Richtlinien & Konzepte','Technische Maßnahmen','Meldeprozesse & Audit'] },
          { h:'DSGVO & Datenschutz', pts:['Datenschutz-Folgenabschätzung','TOMs & AVV','DSGVO-Hosting Deutschland','Cloud-Compliance'] },
        ] },
      { n:'07', t:'Security Awareness', tag:'Phishing · SoSafe · E-Learning',
        lead:'Der Mensch: größtes Risiko — und beste Verteidigung.',
        desc:'Über 90 % erfolgreicher Angriffe beginnen mit Phishing oder Social Engineering. Mit gezielten Schulungen machen wir Ihre Mitarbeiter stark.',
        groups: [
          { h:'Phishing-Simulation', pts:['phished.io — KI-gestützt','Vollautomatisierte Kampagnen','Messbare Ergebnisse','Reporting pro Abteilung'] },
          { h:'SoSafe E-Learning', pts:['Europas Nr. 1 Awareness-Plattform','Sichere Passwörter & MFA','Social Engineering · CEO-Fraud','Fortschrittsauswertung'] },
        ] },
    ],
  },
  {
    id: 'netzwerke',
    num: '03',
    title: 'Netzwerke, die verbinden.',
    lead: 'Next-Gen Firewalls, intelligentes SD-WAN, offene Stacks und moderne Kommunikation — für Standorte, Home-Office und Cloud.',
    accent: 'var(--brand-sky)',
    items: [
      { n:'08', t:'Firewall · Netzwerk · SD-WAN', tag:'NGFW · WLAN · Zero Trust',
        lead:'Next-Gen Firewall. Intelligentes SD-WAN.',
        desc:'Tiefgehende Paket-Analyse, Echtzeit-Bedrohungserkennung und intelligentes Routing — on-premise, im Rechenzentrum oder in der Cloud.',
        groups: [
          { h:'NGFW & Netzwerk', pts:['Sophos · UniFi · pfSense · OPNsense','IDS/IPS & DPI','VPN & Zero Trust (ZTNA)','WLAN: Cisco · Ubiquiti · HPE Aruba'] },
          { h:'SD-WAN & Standorte', pts:['Automatisches Failover','QoS für Sprache, Video, Apps','Cloud-Anbindung (Azure, AWS)','24/7 Monitoring'] },
        ] },
      { n:'09', t:'Linux & Open Source', tag:'Docker · K8s · Nextcloud',
        lead:'Offene Technologien für mehr Unabhängigkeit.',
        desc:'Unabhängigkeit durch bewährte Open-Source-Stacks — Betrieb und Beratung aus einer Hand.',
        groups: [
          { h:'Linux & Container', pts:['Debian · Ubuntu · RHEL','Nextcloud · Proxmox · pfSense','Docker & Kubernetes','MySQL · PostgreSQL · MariaDB'] },
        ] },
      { n:'10', t:'IP-Telefonie & UC', tag:'Teams · Asterisk · Cisco',
        lead:'Moderne Kommunikation, flexibel integriert.',
        desc:'Flexible VoIP-Lösungen für Microsoft Teams, Asterisk und Cisco Unified Communications.',
        groups: [
          { h:'Telefonie & UC', pts:['Teams Direct Routing','Asterisk · FreePBX','Cisco CUCM · Jabber · Webex','SIP-Trunks & PSTN-Gateways'] },
        ] },
    ],
  },
  {
    id: 'beratung-support',
    num: '04',
    title: 'Beratung, die weiterbringt.',
    lead: 'Support-Level, Monitoring, Endpoint Management und strategische Beratung — mit persönlichem Ansprechpartner und klaren SLAs.',
    accent: 'var(--brand-green)',
    items: [
      { n:'11', t:'Support & Monitoring', tag:'Helpdesk · 1st–3rd Level',
        lead:'Von der Soforthilfe zum strategischen IT-Management.',
        desc:'Drei Support-Level, 24/7-Monitoring — persönlicher Ansprechpartner inklusive.',
        groups: [
          { h:'Helpdesk & Monitoring', pts:['1st / 2nd / 3rd Level','Remote & Vor-Ort','24/7 Monitoring & Alerts','Patch- & Update-Management'] },
        ] },
      { n:'12', t:'baramundi UEM & Strategie', tag:'UEM · Strategie · Reviews',
        lead:'Zentrales Endpoint-Management und IT-Strategie.',
        desc:'Zentrales Endpoint-Management mit baramundi plus strategische Beratung mit klaren Meilensteinen.',
        groups: [
          { h:'baramundi UEM', pts:['Zertifizierter Partner','Software-Verteilung & OS-Deployment','Inventar & Lizenzmanagement','MDM · BYOD · Self-Service'] },
        ] },
    ],
  },
];

const PARTNERS = ['Veeam','Microsoft 365','VMware','Citrix','Bitdefender','baramundi','MailStore','Sophos','SoSafe','Cisco'];

const PROCESS_STEPS = [
  { n:'01', t:'Analyse', d:'IT-Analyse, Gap-Analyse, Bestandsaufnahme Ihrer Systeme.' },
  { n:'02', t:'Konzept', d:'Herstellerunabhängige Empfehlung, Planung, Budget, Dokumentation.' },
  { n:'03', t:'Umsetzung', d:'Implementierung im RZ oder vor Ort — minimale Downtime.' },
  { n:'04', t:'Betrieb', d:'Monitoring, Patching, feste Ansprechpartner, regelmäßige Reviews.' },
];

function ProduktePage() {
  const [activeChap, setActiveChap] = useState('infrastruktur');
  const [openItem, setOpenItem] = useState(null);

  return (
    <div className="page">
      <PageHeader
        crumbs={[{label:'Start',path:'#/'},{label:'Produkte & Leistungen'}]}
        eyebrow="Portfolio · 12 Bereiche · 4 Kapitel"
        title="Was wir für Sie leisten."
        lead="Zwölf Service-Bereiche in vier Kapiteln — alles aus einer Hand, mit persönlichem Ansprechpartner. Backup, Cloud, Virtualisierung, Microsoft 365, Citrix, Security, NIS2, SD-WAN und mehr."
      />

      {/* Chapter tabs */}
      <section className="section" style={{paddingBottom:0}}>
        <div className="container">
          <div className="tabs" style={{marginBottom:0}}>
            {PRODUCT_CHAPTERS.map(c => (
              <button key={c.id} className={`tab ${activeChap===c.id?'active':''}`} onClick={() => { setActiveChap(c.id); setOpenItem(null); }}>
                <span className="mono" style={{color:'var(--fg-dim)',marginRight:10,fontSize:11}}>{c.num}</span>
                {c.title.replace(/, die.*\./,'')}
              </button>
            ))}
          </div>
        </div>
      </section>

      {PRODUCT_CHAPTERS.filter(c => c.id === activeChap).map(chap => (
        <Fragment key={chap.id}>
          <section className="section tab-panel" style={{paddingTop:48,paddingBottom:48}}>
            <div className="container">
              <div className="two-col" style={{gap:48}}>
                <div>
                  <div className="mono" style={{fontSize:12,letterSpacing:'0.12em',color:chap.accent,marginBottom:12,textTransform:'uppercase'}}>Kapitel {chap.num}</div>
                  <h2>{chap.title}</h2>
                </div>
                <p style={{fontSize:17,color:'var(--fg-muted)'}}>{chap.lead}</p>
              </div>
            </div>
          </section>

          <section className="section" style={{paddingTop:0}}>
            <div className="container">
              <div style={{display:'grid',gap:12}}>
                {chap.items.map(it => {
                  const open = openItem === it.n;
                  return (
                    <div key={it.n} style={{
                      border: '1px solid var(--border-soft)',
                      borderRadius: 14,
                      background: open ? 'var(--surface)' : 'var(--bg)',
                      transition: 'background 0.2s',
                    }}>
                      <button
                        onClick={() => setOpenItem(open ? null : it.n)}
                        style={{
                          width:'100%', display:'grid',
                          gridTemplateColumns:'60px 1fr auto',
                          gap:24, alignItems:'center',
                          padding:'28px 32px', textAlign:'left', cursor:'pointer',
                        }}>
                        <div className="mono" style={{fontSize:13,color:chap.accent,letterSpacing:'0.05em'}}>{it.n}</div>
                        <div>
                          <h3 style={{fontSize:22,marginBottom:6}}>{it.t}</h3>
                          <div className="mono" style={{fontSize:12,color:'var(--fg-dim)',letterSpacing:'0.05em'}}>{it.tag}</div>
                        </div>
                        <div style={{
                          width:36,height:36,borderRadius:'50%',
                          border:'1px solid var(--border)',
                          display:'flex',alignItems:'center',justifyContent:'center',
                          color:'var(--fg-muted)',
                          transform: open ? 'rotate(45deg)' : 'none',
                          transition:'transform 0.2s',
                          fontSize:18,
                        }}>+</div>
                      </button>
                      {open && (
                        <div style={{padding:'0 32px 32px', animation:'fadeIn 0.25s ease'}}>
                          <div style={{borderTop:'1px solid var(--border-soft)',paddingTop:28}}>
                            <p style={{fontSize:17,color:'var(--fg)',marginBottom:10,fontWeight:500}}>{it.lead}</p>
                            <p style={{marginBottom:28,maxWidth:'70ch'}}>{it.desc}</p>
                            <div style={{display:'grid',gridTemplateColumns:it.groups.length>1?'1fr 1fr':'1fr',gap:32}}>
                              {it.groups.map((g,gi) => (
                                <div key={gi}>
                                  <div className="mono" style={{fontSize:11,letterSpacing:'0.1em',color:chap.accent,marginBottom:14,textTransform:'uppercase'}}>{g.h}</div>
                                  <ul style={{listStyle:'none',padding:0,margin:0,display:'grid',gap:10}}>
                                    {g.pts.map((p,pi) => (
                                      <li key={pi} style={{display:'flex',gap:12,fontSize:14,color:'var(--fg-muted)'}}>
                                        <span style={{color:chap.accent,marginTop:2}}>▸</span>{p}
                                      </li>
                                    ))}
                                  </ul>
                                </div>
                              ))}
                            </div>
                          </div>
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          </section>
        </Fragment>
      ))}

      {/* Process */}
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <div className="two-col" style={{marginBottom:48,gap:48}}>
            <div>
              <Eyebrow>Unser Vorgehen</Eyebrow>
              <h2 style={{marginTop:16}}>In vier Schritten zur modernisierten IT.</h2>
            </div>
            <p style={{fontSize:17}}>Ob Cloud-Migration, Netzwerk-Umbau oder Security-Rollout — wir folgen einem bewährten Projektablauf mit klaren Meilensteinen und herstellerunabhängiger Empfehlung.</p>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:1,background:'var(--border-soft)',border:'1px solid var(--border-soft)',borderRadius:16,overflow:'hidden'}}>
            {PROCESS_STEPS.map((s,i) => (
              <div key={i} style={{background:'var(--bg)',padding:32,minHeight:220}}>
                <div className="mono" style={{fontSize:36,fontWeight:500,color:'var(--accent)',letterSpacing:'-0.02em',marginBottom:24}}>{s.n}</div>
                <h4 style={{fontSize:20,marginBottom:10}}>{s.t}</h4>
                <p style={{fontSize:14}}>{s.d}</p>
              </div>
            ))}
          </div>
          <style>{`
            @media (max-width: 900px) {
              .page > section > .container > div[style*="grid-template-columns: repeat(4"] {
                grid-template-columns: repeat(2, 1fr) !important;
              }
            }
          `}</style>
        </div>
      </section>

      {/* Partners */}
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <Eyebrow>Zertifizierte Partner</Eyebrow>
          <h2 style={{marginTop:16,marginBottom:32,maxWidth:'20ch'}}>Wir arbeiten mit den Besten.</h2>
          <div style={{display:'flex',flexWrap:'wrap',gap:12}}>
            {PARTNERS.map(p => (
              <div key={p} style={{
                padding:'14px 20px',
                border:'1px solid var(--border)',
                borderRadius:8,
                fontFamily:'JetBrains Mono, monospace',
                fontSize:13,
                letterSpacing:'0.02em',
                color:'var(--fg-muted)',
                background:'var(--surface)',
              }}>{p}</div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <div className="cta-banner">
            <Eyebrow>Nächster Schritt</Eyebrow>
            <h2 style={{marginTop:20,maxWidth:'22ch',marginLeft:'auto',marginRight:'auto'}}>Lassen Sie uns gemeinsam starten.</h2>
            <p style={{maxWidth:'50ch',marginLeft:'auto',marginRight:'auto'}}>Unverbindliches Beratungsgespräch — wir melden uns innerhalb eines Werktages.</p>
            <div className="hero-cta">
              <a className="btn btn-accent" href="#/kontakt">Termin anfragen <ArrowRight/></a>
              <a className="btn btn-ghost mono" href="tel:+494056194700">+49 40 561947 0</a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ProduktePage, PRODUCT_CHAPTERS, PARTNERS, PROCESS_STEPS });