/* global React */
// Pages: Dienstleistung, Beratung, Rechenzentrum, Lösungen overview, Ungana Cloud, Ungana Exchange

function DienstleistungPage() {
  const [tab, setTab] = useState('service');
  const tabs = [
    { id: 'service', label: 'IT-Service' },
    { id: 'outsourcing', label: 'Outsourcing' },
    { id: 'security', label: 'IT-Sicherheit' },
    { id: 'hosting', label: 'Hosting & Monitoring' },
  ];
  const content = {
    service: {
      title: 'Wir verstehen Ihre IT. Und Ihr Geschäft.',
      lead: 'Feste Ansprechpartner statt Call-Center-Roulette. Wir kennen Ihre Systeme, Ihre Prozesse — und Ihre Kollegen beim Vornamen.',
      points: ['Managed Workplace: Client-Betreuung, Patches, Rollout', 'Server- und Netzwerkbetrieb vor Ort und remote', 'Priorisierte Hotline für Kundenunternehmen', 'Quartalsweise IT-Reviews mit Ihrem Ansprechpartner'],
    },
    outsourcing: {
      title: 'IT-Kapazität auf Abruf.',
      lead: 'Keine Vakanz-Sorgen, keine Urlaubslücken. Wir stellen das Know-how — Sie planen mit kalkulierbaren Kosten.',
      points: ['Flexible Service-Levels, monatlich anpassbar', 'Dedizierte Ingenieure ergänzen Ihr Team', 'Übergabe ohne Reibungsverluste', 'DSGVO-konforme Remote-Zugänge'],
    },
    security: {
      title: 'Sicherheit als Selbstverständlichkeit.',
      lead: 'Monitoring, Patching, Endpoint Protection, Backup. Wir kümmern uns — Sie bleiben handlungsfähig.',
      points: ['24/7-Monitoring kritischer Systeme', 'Automatisierter Patch- und Update-Management', 'Backup-Strategie nach 3-2-1-Prinzip', 'Awareness-Schulungen für Ihre Mitarbeiter'],
    },
    hosting: {
      title: 'Sie erfahren von Störungen zuerst.',
      lead: 'Unser Monitoring schlägt an, bevor Ihre Anwender den Fehler bemerken. In 9 von 10 Fällen ist er behoben, bevor der erste Anruf kommt.',
      points: ['Echtzeit-Monitoring mit individuellen Thresholds', 'Alerting über Mail, SMS, Telefon — je Eskalationsstufe', 'Monatliches Reporting, transparent lesbar', 'Statusseite für Ihre Systeme'],
    },
  };
  const c = content[tab];
  return (
    <div className="page">
      <PageHeader
        crumbs={[{label:'Start',path:'#/'},{label:'Dienstleistung'}]}
        eyebrow="Dienstleistung"
        title="Alles aus einer Hand. Für echte Menschen."
        lead="Vier zusammenhängende Leistungsbereiche. Ein Team. Keine Schnittstellen, keine Schuld-Zuweisungen zwischen Dienstleistern."
      />
      <section className="section">
        <div className="container">
          <div className="tabs">
            {tabs.map(t => (
              <button key={t.id} className={`tab ${tab === t.id ? 'active' : ''}`} onClick={() => setTab(t.id)}>{t.label}</button>
            ))}
          </div>
          <div className="tab-panel two-col">
            <div>
              <Eyebrow>{tabs.find(t => t.id === tab).label}</Eyebrow>
              <h2 style={{marginTop:16}}>{c.title}</h2>
              <p style={{marginTop:20,fontSize:17,color:'var(--fg)'}}>{c.lead}</p>
              <a className="btn btn-primary" href="#/kontakt" style={{marginTop:28}}>Gespräch zu diesem Thema <ArrowRight/></a>
            </div>
            <div>
              <div style={{padding:32,background:'var(--surface)',border:'1px solid var(--border-soft)',borderRadius:16}}>
                <div className="mono" style={{fontSize:11,color:'var(--fg-dim)',letterSpacing:'0.08em',marginBottom:20,textTransform:'uppercase'}}>Was Sie bekommen</div>
                <ul style={{listStyle:'none',padding:0,margin:0,display:'grid',gap:16}}>
                  {c.points.map((p, i) => (
                    <li key={i} style={{display:'flex',gap:12,fontSize:15,color:'var(--fg)'}}>
                      <span className="mono" style={{color:'var(--accent)',minWidth:32}}>0{i+1}.</span>
                      <span style={{color:'var(--fg-muted)'}}>{p}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function BeratungPage() {
  return (
    <div className="page">
      <PageHeader
        crumbs={[{label:'Start',path:'#/'},{label:'Beratung'}]}
        eyebrow="Beratung"
        title="Klarheit, bevor gebaut wird."
        lead="Die meisten IT-Projekte scheitern nicht an Technik, sondern an Annahmen. Wir stellen Fragen, bevor wir Angebote schreiben."
      />
      <section className="section">
        <div className="container">
          <div className="card-grid">
            {[
              {n:'01', t:'IT-Strategie', d:'Bestandsaufnahme Ihrer heutigen IT-Landschaft, Bewertung, Roadmap über 24 Monate. Mit Zahlen, nicht mit Folien-Poesie.'},
              {n:'02', t:'Architektur-Review', d:'Wir sehen uns Ihre Systemarchitektur an und zeigen, wo Sie entkoppeln, wo Sie konsolidieren und wo Sie einfach mal lassen sollten.'},
              {n:'03', t:'Projekt-Leitung', d:'Große Rollouts, Migrationen, Umzüge. Wir führen — intern und mit externen Gewerken — und nehmen Ihnen das Taktieren ab.'},
              {n:'04', t:'Cloud-Strategie', d:'Lift-and-Shift, Re-Platform, oder bewusst On-Premise halten? Wir entscheiden gemeinsam — auf Basis Ihrer Realität.'},
              {n:'05', t:'IT-Sicherheits-Audit', d:'Strukturierter Check gegen BSI-Grundschutz. Sie bekommen eine Liste, die nach Risiko sortiert ist — nicht nach Alphabet.'},
              {n:'06', t:'Zweite Meinung', d:'Sie haben ein Angebot eines anderen Dienstleisters? Wir lesen es — ehrlich, ohne uns reindrängen zu wollen.'},
            ].map((s, i) => (
              <div key={i} className="card">
                <div className="card-num mono">{s.n} / 06</div>
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function RechenzentrumPage() {
  return (
    <div className="page">
      <PageHeader
        crumbs={[{label:'Start',path:'#/'},{label:'Rechenzentrum'}]}
        eyebrow="Infrastruktur"
        title="Rechenzentrum in Deutschland."
        lead="Ihre Systeme laufen dort, wo deutsche Datenschutz-Regeln gelten — betreut von Menschen, die Sie kennen."
      />
      <section className="section">
        <div className="container">
          <div className="spec-grid">
            <div className="spec-item">
              <div className="spec-label">Verfügbarkeit</div>
              <div className="spec-value">99.95<span className="spec-unit">%</span></div>
            </div>
            <div className="spec-item">
              <div className="spec-label">Redundanz</div>
              <div className="spec-value">N+1</div>
            </div>
            <div className="spec-item">
              <div className="spec-label">Standort</div>
              <div className="spec-value">DE</div>
            </div>
            <div className="spec-item">
              <div className="spec-label">Anbindung</div>
              <div className="spec-value">10<span className="spec-unit">Gbit/s</span></div>
            </div>
            <div className="spec-item">
              <div className="spec-label">Zertifizierung</div>
              <div className="spec-value" style={{fontSize:18}}>ISO 27001</div>
            </div>
            <div className="spec-item">
              <div className="spec-label">USV</div>
              <div className="spec-value">2N</div>
            </div>
            <div className="spec-item">
              <div className="spec-label">Kühlung</div>
              <div className="spec-value">N+1</div>
            </div>
            <div className="spec-item">
              <div className="spec-label">Zugang</div>
              <div className="spec-value" style={{fontSize:18}}>24/7</div>
            </div>
          </div>
          <div style={{marginTop:56}} className="two-col">
            <div>
              <Eyebrow>Was drin steckt</Eyebrow>
              <h2 style={{marginTop:16}}>Moderne Infrastruktur, die nicht auffällt.</h2>
            </div>
            <div>
              <p style={{marginBottom:16,fontSize:17,color:'var(--fg)'}}>
                Unser Rechenzentrum ist redundant ausgelegt — Strom, Netz, Kühlung, Feuerschutz. Nicht weil es sich gut liest, sondern weil Ausfälle teuer sind.
              </p>
              <p>
                Für Sie heißt das: Ihre Anwendungen laufen. Ihre Daten bleiben in Deutschland. Und wenn doch einmal etwas passiert, reden Sie mit dem Team, das die Hardware tatsächlich anfasst.
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function LoesungenPage() {
  return (
    <div className="page">
      <PageHeader
        crumbs={[{label:'Start',path:'#/'},{label:'Lösungen'}]}
        eyebrow="Lösungen"
        title="UNGANA — unsere eigenen Cloud-Produkte."
        lead="Zwei Produkte, eine Idee: deutsche Cloud-Dienste mit festen Ansprechpartnern. Keine Sprach-Hotlines, keine Auto-Responder."
      />
      <section className="section">
        <div className="container" style={{display:'grid',gap:32}}>
          <div className="showcase">
            <div>
              <span className="showcase-badge">● UNGANA CLOUD</span>
              <h3>Infrastructure-as-a-Service.</h3>
              <p style={{fontSize:15}}>VMs, Storage, Backup und Netzwerk auf unserer eigenen Plattform. Sie konfigurieren — wir betreiben.</p>
              <ul>
                <li>Compute in verschiedenen Größen, stundengenau abgerechnet</li>
                <li>Block- und Objekt-Storage, auf Wunsch verschlüsselt</li>
                <li>Automatische Snapshots und Offsite-Backup</li>
                <li>Dediziertes VLAN, VPN-Anbindung an Ihr Netz</li>
              </ul>
              <a className="btn btn-primary" href="#/loesungen/ungana-cloud">Zu UNGANA Cloud <ArrowRight/></a>
            </div>
            <UnganaVisual />
          </div>
          <div className="showcase">
            <div>
              <span className="showcase-badge" style={{background:'color-mix(in oklab, var(--brand-orange) 15%, transparent)',color:'var(--brand-orange)'}}>● UNGANA EXCHANGE</span>
              <h3>Mail & Kollaboration.</h3>
              <p style={{fontSize:15}}>Gehostetes Exchange für den Mittelstand — mit Migration, Betrieb und Support aus einer Hand.</p>
              <ul>
                <li>Exchange-Postfächer mit 50 GB Standard-Größe</li>
                <li>Migration aus O365, POP3, IMAP oder on-prem Exchange</li>
                <li>Advanced Threat Protection inklusive</li>
                <li>Compliance-Archivierung nach GoBD</li>
              </ul>
              <a className="btn btn-ghost" href="#/loesungen/ungana-exchange">Zu UNGANA Exchange <ArrowRight/></a>
            </div>
            <ExchangeVisual />
          </div>
        </div>
      </section>
    </div>
  );
}

function ExchangeVisual() {
  return (
    <div className="showcase-visual">
      <svg viewBox="0 0 400 300" width="100%" height="100%" style={{display:'block'}}>
        <defs>
          <pattern id="dots2" width="12" height="12" patternUnits="userSpaceOnUse">
            <circle cx="1" cy="1" r="1" fill="var(--border)"/>
          </pattern>
        </defs>
        <rect width="400" height="300" fill="url(#dots2)"/>
        {/* mailbox list mock */}
        <g transform="translate(40 50)">
          {[0,1,2,3,4].map(i => (
            <g key={i} transform={`translate(0 ${i*42})`}>
              <rect width="320" height="34" rx="4" fill="var(--surface-2)" stroke="var(--border)"/>
              <circle cx="18" cy="17" r="8" fill={['#14284B','#E89B3C','#3FA4C9','#6FB85A','#5A6B89'][i]}/>
              <rect x="36" y="10" width="120" height="6" rx="2" fill="var(--fg-muted)" opacity="0.6"/>
              <rect x="36" y="20" width="200" height="4" rx="2" fill="var(--fg-dim)" opacity="0.4"/>
              <rect x="290" y="14" width="20" height="6" rx="2" fill="var(--accent)" opacity={i===0?1:0.3}/>
            </g>
          ))}
        </g>
      </svg>
    </div>
  );
}

function UnganaCloudPage() {
  return (
    <div className="page">
      <PageHeader
        crumbs={[{label:'Start',path:'#/'},{label:'Lösungen',path:'#/loesungen'},{label:'UNGANA Cloud'}]}
        eyebrow="Produkt · Cloud Computing"
        title="UNGANA Cloud."
        lead="Unsere eigene IaaS-Plattform. Deutsche Rechenzentren, faire Preise, persönlicher Support."
      />
      <section className="section">
        <div className="container">
          <div className="card-grid">
            {[
              {n:'01', t:'Compute', d:'VMs von 1 vCPU / 2 GB bis zu 32 vCPU / 256 GB. Virtualisierung auf VMware und Hyper-V als Kernkompetenz, Proxmox auf Wunsch. NVMe-Storage.'},
              {n:'02', t:'Storage', d:'Block-Storage für VMs, S3-kompatibler Object-Storage für Backups und Archive. Verschlüsselung on-rest Standard.'},
              {n:'03', t:'Backup', d:'Snapshots auf Knopfdruck, Offsite-Replikation in zweites Rechenzentrum. Recovery-Tests inklusive.'},
              {n:'04', t:'Netzwerk', d:'Dedizierte VLANs, Site-to-Site-VPN, optional MPLS-Anbindung. Public-IPs auf Wunsch.'},
              {n:'05', t:'Monitoring', d:'Integriertes Monitoring mit Alerting. Sie sehen in Echtzeit, wie es Ihren Systemen geht.'},
              {n:'06', t:'Managed Services', d:'Auf Wunsch übernehmen wir Patchmanagement, OS-Updates, Applikations­betrieb komplett.'},
            ].map((s, i) => (
              <div key={i} className="card">
                <div className="card-num mono">{s.n} / 06</div>
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function UnganaExchangePage() {
  return (
    <div className="page">
      <PageHeader
        crumbs={[{label:'Start',path:'#/'},{label:'Lösungen',path:'#/loesungen'},{label:'UNGANA Exchange'}]}
        eyebrow="Produkt · Mail & Kollaboration"
        title="UNGANA Exchange."
        lead="Gehostetes Exchange für den Mittelstand. Mit Migration, Betrieb und Support aus einer Hand."
      />
      <section className="section">
        <div className="container">
          <div className="two-col">
            <div>
              <Eyebrow>Leistungsumfang</Eyebrow>
              <h2 style={{marginTop:16}}>Was drin ist.</h2>
              <ul style={{listStyle:'none',padding:0,margin:'32px 0 0',display:'grid',gap:16}}>
                {['50 GB Exchange-Postfach pro Nutzer','Outlook, OWA, ActiveSync für Mobilgeräte','Öffentliche Ordner, Ressourcenpostfächer','Advanced Threat Protection gegen Phishing','Compliance-Archivierung (GoBD)','Migration aus O365, IMAP, on-prem Exchange'].map((p,i) => (
                  <li key={i} style={{display:'flex',gap:12,fontSize:15,color:'var(--fg-muted)'}}>
                    <span className="mono" style={{color:'var(--accent)',minWidth:32}}>0{i+1}</span>
                    <span>{p}</span>
                  </li>
                ))}
              </ul>
            </div>
            <ExchangeVisual/>
          </div>
        </div>
      </section>
    </div>
  );
}
// fix typo above
function _fix(){}

Object.assign(window, { DienstleistungPage, BeratungPage, RechenzentrumPage, LoesungenPage, UnganaCloudPage, UnganaExchangePage, ExchangeVisual });