/* global React */
// Page components: Home, About, History, Dienstleistung, Beratung, Rechenzentrum,
// Lösungen (+ Ungana Cloud, Ungana Exchange), Blog, Jobs, Kontakt

// --- shared atoms ---
function Eyebrow({ children }) { return <div className="eyebrow">{children}</div>; }
function PageHeader({ crumbs, eyebrow, title, lead }) {
  return (
    <header className="page-header">
      <div className="bg-grid"></div>
      <div className="container" style={{position:'relative',zIndex:2}}>
        {crumbs && (
          <div className="breadcrumb">
            {crumbs.map((c, i) => (
              <Fragment key={i}>
                {i > 0 && <span className="sep">/</span>}
                {c.path ? <a href={c.path}>{c.label}</a> : <span>{c.label}</span>}
              </Fragment>
            ))}
          </div>
        )}
        <Eyebrow>{eyebrow}</Eyebrow>
        <h1 style={{marginTop:20}}>{title}</h1>
        {lead && <p style={{marginTop:20,fontSize:18}}>{lead}</p>}
      </div>
    </header>
  );
}

// ======================================
// HOME
// ======================================
function HomePage() {
  const services = [
    { icon: ICONS.service, title: 'IT-Service', num: '01', text: 'Feste Ansprechpartner, die Ihre Systeme kennen. Keine Tickets ins Leere — reale Menschen, die Verantwortung übernehmen.', href: '#/dienstleistung' },
    { icon: ICONS.beratung, title: 'Beratung', num: '02', text: 'Projektleitung, Architektur, Auswahl. Wir bringen Klarheit in komplexe IT-Landschaften — bevor gebaut wird.', href: '#/beratung' },
    { icon: ICONS.outsourcing, title: 'Outsourcing', num: '03', text: 'IT-Ressourcen als verlässlicher Service. Kalkulierbare Kosten, planbare Kapazität — Sie konzentrieren sich auf Ihr Geschäft.', href: '#/dienstleistung' },
    { icon: ICONS.security, title: 'IT-Sicherheit', num: '04', text: 'Monitoring, Patching, Backup, Endpoint Protection. Sicherheit ist keine Option — sie ist Grundlage.', href: '#/beratung' },
    { icon: ICONS.cloud, title: 'Cloud / Rechenzentrum', num: '05', text: 'UNGANA Cloud in deutschem Rechenzentrum. Ihre Anwendungen hochverfügbar, DSGVO-konform, skalierbar.', href: '#/rechenzentrum' },
    { icon: ICONS.hosting, title: 'Hosting', num: '06', text: 'Proaktives Monitoring. Sie erfahren von einer Störung, bevor Ihr Kunde anruft — meistens vorher schon behoben.', href: '#/rechenzentrum' },
  ];

  return (
    <div className="page">
      <section className="hero">
        <div className="bg-grid"></div>
        <HeroMark />
        <div className="container hero-inner">
          <div className="hero-meta">
            <span className="status-pill"><span className="dot"></span>Alle Systeme verfügbar</span>
            <span className="mono" style={{fontSize:12,color:'var(--fg-dim)'}}>HAMBURG · SEIT 2003</span>
          </div>
          <h1>
            Ihr IT-Partner<br/>
            in <span className="accent">Hamburg</span>.<br/>
            <span style={{color:'var(--fg-muted)',fontWeight:500}}>Persönlich.<br/>Verbindlich. Verständlich.</span>
          </h1>
          <p className="hero-lead">
            Wir sind ein mittelständisches IT-Systemhaus an der Burchardstraße. Von der
            Konzeption über den Betrieb bis zum Hosting — Sie bekommen feste Ansprechpartner
            und Lösungen, die Ihre Sprache sprechen.
          </p>
          <div className="hero-cta">
            <a className="btn btn-primary" href="#/kontakt">Gespräch vereinbaren <ArrowRight/></a>
            <a className="btn btn-ghost" href="#/dienstleistung">Leistungen ansehen</a>
          </div>
          <div className="hero-stats">
            <div>
              <div className="stat-num">20+</div>
              <div className="stat-label">Jahre Erfahrung</div>
            </div>
            <div>
              <div className="stat-num">99.95%</div>
              <div className="stat-label">Uptime SLA</div>
            </div>
            <div>
              <div className="stat-num">&lt;30min</div>
              <div className="stat-label">Reaktionszeit</div>
            </div>
            <div>
              <div className="stat-num">DE</div>
              <div className="stat-label">Rechenzentrum</div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="left">
              <Eyebrow>Leistungen · 06</Eyebrow>
              <h2>Was wir für Sie tun.</h2>
              <p style={{fontSize:16}}>Sechs Bereiche, ein Team. Alles aus einer Hand — ohne Schnittstellen­verluste, ohne Ping-Pong zwischen Dienstleistern.</p>
            </div>
            <a className="btn btn-ghost" href="#/dienstleistung">Alle Details <ArrowRight/></a>
          </div>
          <div className="card-grid">
            {services.map((s, i) => (
              <a key={i} className="card" href={s.href}>
                <div className="card-num mono">{s.num} / 06</div>
                <div className="card-icon"><Icon d={s.icon} size={18}/></div>
                <h3>{s.title}</h3>
                <p>{s.text}</p>
                <span className="card-link mono">MEHR ERFAHREN <ArrowRight size={12}/></span>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <Eyebrow>Lösungen · UNGANA</Eyebrow>
          <h2 style={{marginTop:16, marginBottom:40, maxWidth:'20ch'}}>Unsere eigenen Cloud-Produkte.</h2>
          <div className="showcase">
            <div>
              <span className="showcase-badge">● UNGANA CLOUD</span>
              <h3>Cloud Computing aus Hamburg.</h3>
              <p style={{fontSize:15}}>Ihre Anwendungen laufen in unserer UNGANA Cloud — in einem deutschen Rechenzentrum, mit festen Ansprechpartnern, ohne Umwege über AWS-Support-Portale.</p>
              <ul>
                <li>DSGVO-konform, Daten bleiben in Deutschland</li>
                <li>Skalierbare VMs, Container, Backup</li>
                <li>24/7 Monitoring durch 4its-Team</li>
                <li>Transparente Kosten, keine versteckten Egress-Gebühren</li>
              </ul>
              <a className="btn btn-primary" href="#/loesungen/ungana-cloud">UNGANA Cloud entdecken <ArrowRight/></a>
            </div>
            <UnganaVisual />
          </div>
        </div>
      </section>

      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <div className="two-col" style={{marginBottom:48,gap:48,alignItems:'end'}}>
            <div>
              <Eyebrow>Unser Vorgehen</Eyebrow>
              <h2 style={{marginTop:16}}>In vier Schritten zur modernisierten IT.</h2>
            </div>
            <p style={{fontSize:16}}>Ob Cloud-Migration, Netzwerk-Umbau oder Security-Rollout — klare Meilensteine, herstellerunabhängige Empfehlung.</p>
          </div>
          <div className="process-grid" style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:1,background:'var(--border-soft)',border:'1px solid var(--border-soft)',borderRadius:16,overflow:'hidden'}}>
            {[
              {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.'},
            ].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) {
              .process-grid { grid-template-columns: repeat(2, 1fr) !important; }
            }
            @media (max-width: 520px) {
              .process-grid { grid-template-columns: 1fr !important; }
            }
          `}</style>
        </div>
      </section>

      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <div className="cta-banner">
            <Eyebrow>Los geht's</Eyebrow>
            <h2 style={{marginTop:20, maxWidth:'18ch', marginLeft:'auto', marginRight:'auto'}}>Zeit für einen IT-Partner, der zuhört?</h2>
            <p style={{maxWidth:'50ch', marginLeft:'auto', marginRight:'auto'}}>
              Erstgespräch, unverbindlich, 30 Minuten. Wir hören zu — und sagen Ihnen ehrlich, ob wir passen.
            </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>
  );
}

// Abstract "cloud" visual
function UnganaVisual() {
  return (
    <div className="showcase-visual">
      <svg viewBox="0 0 400 300" width="100%" height="100%" style={{display:'block'}}>
        <defs>
          <pattern id="dots" 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(#dots)"/>
        {/* 3 stacked tile groups = regions */}
        {[40, 140, 240].map((x, i) => (
          <g key={i} transform={`translate(${x} 80)`}>
            <rect width="120" height="140" rx="6" fill="var(--surface-2)" stroke="var(--border)"/>
            <text x="12" y="22" fontFamily="JetBrains Mono" fontSize="9" fill="var(--fg-dim)" letterSpacing="1">
              {['NODE-A01','NODE-B02','NODE-C03'][i]}
            </text>
            <circle cx="108" cy="18" r="3" fill={['#6FB85A','#6FB85A','#E89B3C'][i]}/>
            {/* mini tiles mirroring logo */}
            {[0,1,2].map(r =>
              [0,1,2].map(c => (
                <g key={`${r}${c}`} transform={`translate(${12 + c*32} ${40 + r*32})`}>
                  <polygon points="0,0 28,0 0,28" fill={['#14284B','#3FA4C9','#7FB9DC','#E89B3C','#6FB85A','#5A6B89','#223055','#3FA4C9','#14284B'][(r*3+c+i)%9]} opacity={r===1&&c===1?1:0.5}/>
                  <polygon points="28,0 28,28 0,28" fill="var(--border)" opacity="0.4"/>
                </g>
              ))
            )}
          </g>
        ))}
        <line x1="160" y1="150" x2="180" y2="150" stroke="var(--accent)" strokeWidth="1.5"/>
        <line x1="260" y1="150" x2="280" y2="150" stroke="var(--accent)" strokeWidth="1.5"/>
      </svg>
    </div>
  );
}

// ======================================
// ABOUT
// ======================================
function AboutPage() {
  return (
    <div className="page">
      <PageHeader
        crumbs={[{label:'Start',path:'#/'},{label:'Über uns'}]}
        eyebrow="Unternehmen"
        title="Ein Hamburger IT-Systemhaus mit Haltung."
        lead="Seit über zwei Jahrzehnten betreuen wir mittelständische Unternehmen in Norddeutschland. Unsere Überzeugung: Gute IT entsteht durch Kommunikation — nicht durch Ticket-Systeme."
      />
      <section className="section">
        <div className="container">
          <div className="two-col">
            <div>
              <Eyebrow>Unsere Haltung</Eyebrow>
              <h2 style={{marginTop:16}}>Kommunikation schafft Wissen.</h2>
            </div>
            <div>
              <p style={{marginBottom:20,fontSize:17,color:'var(--fg)'}}>
                Wissen entsteht durch Kommunikation — und wird durch sie vermehrt. Das ist keine Floskel, sondern unser Arbeitsprinzip.
              </p>
              <p style={{marginBottom:16}}>
                Wir glauben nicht an Drei-Wort-Ticket-Antworten. Wir glauben an Telefonate, an Verstehen, an das gemeinsame Erarbeiten von Lösungen. Jeder unserer Kunden hat feste Ansprechpartner, die die Systeme kennen — und die Menschen dahinter.
              </p>
              <p>
                Das macht uns langsamer als ein Call-Center — und besser als eines. Entscheidungen werden nicht durch fünf Eskalations­stufen gereicht, sondern direkt getroffen.
              </p>
            </div>
          </div>
        </div>
      </section>
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <div className="two-col">
            <div>
              <Eyebrow>Leistungsspektrum</Eyebrow>
              <h2 style={{marginTop:16}}>Was wir tun — von A bis Z.</h2>
            </div>
            <div>
              <p style={{marginBottom:16,fontSize:16}}>
                Wir bieten umfassende <strong>IT-Serviceleistungen</strong>: von Netzwerktechnik über Maillösungen und Webhosting bis hin zu Voice-over-IP-Architekturen. Ein weiterer Schwerpunkt ist der ins <strong>Rechenzentrum</strong> ausgelagerte IT-Betrieb — individuelle Lösungen für kleine Betriebe ebenso wie Komplettpakete für mittelständische Unternehmen.
              </p>
              <p style={{marginBottom:16}}>
                Als <strong>Consulting-Partner</strong> begleiten wir Sie in allen wichtigen IT-Fragen, die mittelständische Unternehmen bewegen. Wir begutachten und analysieren Ihre IT-technische Ist-Situation, erarbeiten Lösungsvorschläge und setzen diese auf Wunsch gemeinsam mit Ihnen um.
              </p>
              <p>
                Abgerundet wird unser Leistungsspektrum durch <strong>Schulungen</strong> sowie umfassende <strong>Wartungs- und Supportdienstleistungen</strong> — vom ersten Konzept über die Implementierung bis in den Livebetrieb.
              </p>
            </div>
          </div>
        </div>
      </section>
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <Eyebrow>Drei Säulen</Eyebrow>
          <h2 style={{marginTop:16, marginBottom:40}}>Service · Outsourcing · Apphosting.</h2>
          <div className="pillar-grid">
            <div className="pillar-card">
              <div className="pillar-num mono">01</div>
              <h3>Service</h3>
              <p>Wir konzipieren, entwickeln und implementieren Unternehmensnetzwerke — und liefern eine zukunftsweisende, sichere Kommunikationslandschaft komplett von A bis Z. Inklusive Wartung, Support und Schulung.</p>
            </div>
            <div className="pillar-card">
              <div className="pillar-num mono">02</div>
              <h3>Outsourcing</h3>
              <p>Ins Rechenzentrum ausgelagerter IT-Betrieb. Vom einzelnen Server bis zum Komplettpaket für den Mittelstand — inklusive Backup, Monitoring und Betreuung durch feste Ansprechpartner.</p>
            </div>
            <div className="pillar-card">
              <div className="pillar-num mono">03</div>
              <h3>Apphosting</h3>
              <p>Gehostete Anwendungen, Maillösungen, Webhosting und Voice-over-IP — betrieben aus Deutschland, DSGVO-konform. Unsere UNGANA-Plattformen sind dafür das Herzstück.</p>
            </div>
          </div>
        </div>
      </section>
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <div className="two-col">
            <div>
              <Eyebrow>Telekommunikation</Eyebrow>
              <h2 style={{marginTop:16}}>Voice &amp; Data wachsen zusammen.</h2>
            </div>
            <div>
              <p style={{marginBottom:16,fontSize:16}}>
                Wir machen Ihr Telekommunikationssystem zukunftsfähig, indem wir <strong>Voice over IP</strong> integrieren. Die Netze wachsen zusammen — der Betrieb von zwei separaten Infrastrukturen für Sprache und Daten ist nicht mehr nötig.
              </p>
              <p>
                Das bedeutet für Sie: weniger Hardware, weniger Wartungsaufwand, niedrigere Kosten — und eine Telefonanlage, die mit Ihrem Unternehmen mitwächst.
              </p>
            </div>
          </div>
        </div>
      </section>
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <Eyebrow>Consulting</Eyebrow>
          <h2 style={{marginTop:16, marginBottom:24}}>IT-Beratung — unabhängig &amp; umfassend.</h2>
          <p style={{maxWidth:720,fontSize:16,marginBottom:32}}>
            Unabhängig davon, ob Sie uns auch mit der Umsetzung Ihrer IT-Projekte beauftragen: Wir übernehmen Begutachtung und Analyse Ihrer IT-Situation, erarbeiten Lösungs­vorschläge und stellen auf Wunsch den Kontakt zu ausführenden Partnern her.
          </p>
          <div className="consulting-steps">
            <div className="consulting-step">
              <div className="consulting-step-num mono">A</div>
              <h4>Analyse</h4>
              <p>Bestandsaufnahme von Infrastruktur, Prozessen und Schmerz­punkten — ohne Vorfestlegung auf ein Produkt.</p>
            </div>
            <div className="consulting-step">
              <div className="consulting-step-num mono">B</div>
              <h4>Lösungs­vorschlag</h4>
              <p>Konkrete Optionen mit Aufwand, Kosten und Risiken. Sie entscheiden, wie weit Sie gehen wollen.</p>
            </div>
            <div className="consulting-step">
              <div className="consulting-step-num mono">C</div>
              <h4>Umsetzung</h4>
              <p>Durch uns, gemeinsam mit Ihrem Team oder mit einem Partner unserer Wahl — ganz nach Situation.</p>
            </div>
          </div>
        </div>
      </section>
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <div className="claim-banner">
            <Eyebrow>Unser Anspruch</Eyebrow>
            <h2 style={{marginTop:16,fontSize:44}}>IT was never so simple.</h2>
            <p style={{maxWidth:640,marginTop:16,fontSize:16}}>
              Damit Dinge endlich fertig werden. Ihr Hamburger Systemhaus — seit über zwei Jahrzehnten.
            </p>
            <div style={{display:'flex',gap:12,marginTop:28,flexWrap:'wrap'}}>
              <a className="btn btn-primary" href="#/kontakt">Gespräch vereinbaren <ArrowRight/></a>
              <a className="btn btn-ghost" href="#/geschichte">Unsere Geschichte</a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ======================================
// HISTORY
// ======================================
function HistoryPage() {
  const timeline = [
    { year: '2003', title: 'Gründung in Hamburg', text: 'Die 4its GmbH entsteht an der Burchardstraße mit einem kleinen Team und großer Überzeugung: IT kann einfach sein.' },
    { year: '2008', title: 'Erstes eigenes Rechenzentrum', text: 'Wir beginnen, Kundensysteme im eigenen Hosting zu betreiben — Grundstein für spätere Cloud-Angebote.' },
    { year: '2014', title: 'UNGANA Exchange startet', text: 'Gehostete Exchange-Umgebung für den Mittelstand. Mail, Kalender, Kontakte — betreut aus Deutschland.' },
    { year: '2019', title: 'UNGANA Cloud', text: 'Eigene IaaS-Plattform mit VMs, Storage und Backup. DSGVO-konform, mit festen Ansprechpartnern.' },
    { year: '2023', title: '20 Jahre 4its', text: 'Zwei Jahrzehnte IT-Dienstleistung. Viele Kunden sind fast genauso lange dabei.' },
    { year: 'heute', title: 'Weiter persönlich', text: 'Wir wachsen bewusst. Lieber mit weniger Kunden intensiver arbeiten, als viele schlecht betreuen.' },
  ];
  return (
    <div className="page">
      <PageHeader
        crumbs={[{label:'Start',path:'#/'},{label:'Über uns',path:'#/ueber-uns'},{label:'Geschichte'}]}
        eyebrow="Seit 2003"
        title="Unsere Geschichte."
        lead="Zwei Jahrzehnte Hamburger IT. Einige unserer ersten Kunden sind heute noch bei uns."
      />
      <section className="section">
        <div className="container" style={{maxWidth:800}}>
          <div className="timeline">
            {timeline.map((t, i) => (
              <div key={i} className="timeline-item">
                <div className="timeline-year mono">{t.year}</div>
                <div>
                  <h4>{t.title}</h4>
                  <p>{t.text}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Eyebrow, PageHeader, HomePage, AboutPage, HistoryPage, UnganaVisual });
