/* global React, Topo, Button, Icon, Section, Container, Eyebrow */

const PACKAGES = [
  {
    id: 'network', icon: 'wifi', name: 'KMUcare.network', range: 'Netzwerk',
    headline: 'Solide Basis: dein Netzwerk.',
    intro: 'Wir halten dein Netzwerk am Leben. Ideal für Betriebe ohne eigenen Server — du hast Internet, WLAN und Firewall, und wir sorgen dafür, dass alles läuft.',
    price: 'ab CHF 49 / Mt',
    listHeadline: 'IM PAKET',
    incl: [
      ['Wartung Firewall, Switch, WLAN', 'Konfiguration, Monitoring und regelmässige Pflege deiner Netzwerk‑Komponenten — auch bei komplexen Mehrstandort‑Setups.'],
      ['Verfügbarkeits‑Monitoring', 'Wir sehen Ausfälle bevor du sie merkst und reagieren automatisch oder per Hand.'],
      ['Firmware‑ und Sicherheits‑Updates', 'Patches werden geprüft, getestet und ausserhalb deiner Bürozeit eingespielt.'],
      ['Reaktion: Bürozeit, NBD', 'Antwort innerhalb der Geschäftszeiten, Vor‑Ort spätestens am nächsten Werktag.'],
      ['Monatlicher Statusbericht', 'Eine kompakte Zusammenfassung pro Monat — was lief, was wir gemacht haben, was noch ansteht.'],
    ],
  },
  {
    id: 'system', icon: 'monitor', name: 'KMUcare.system', range: 'Netzwerk + Endgeräte',
    headline: 'Der Standard für KMU.',
    intro: 'Netzwerk plus alle Arbeitsplätze und Server. Der Standard für Betriebe mit eigener IT‑Infrastruktur — du bekommst einen Ansprechpartner für alles.',
    price: 'ab CHF 390 / Mt', featured: true,
    listHeadline: 'ALLES AUS .NETWORK, PLUS',
    incl: [
      ['Wartung Workstations, Server, NAS', 'Wir kümmern uns um Notebooks, Desktops, Server und Storage — Hardware wie Software.'],
      ['Patch‑Management Endpoints', 'Betriebssystem‑ und Software‑Updates rollen kontrolliert aus, nicht zufällig.'],
      ['Backup‑Überwachung (täglich)', 'Wir prüfen jeden Morgen, dass deine Sicherungen tatsächlich gelaufen sind — und gehen Fehler sofort an.'],
      ['Helpdesk Bürozeit, Reaktion 4 h', 'Direkter Draht für deine Mitarbeitenden — telefonisch, per E‑Mail oder Ticket. Spätestens 4 h Reaktionszeit.'],
      ['Jährliches IT‑Review', 'Einmal im Jahr setzen wir uns mit dir hin: Was ist passiert, was kommt, was lohnt sich?'],
    ],
  },
  {
    id: 'complete', icon: 'shield', name: 'KMUcare.complete', range: 'Rundum‑Betreuung',
    headline: 'Wenn Stillstand keine Option ist.',
    intro: 'Wir kümmern uns um alles — proaktiv, rund um die Uhr. Für Betriebe, bei denen ein IT‑Ausfall direkt Umsatz oder Reputation kostet.',
    price: 'ab CHF 890 / Mt',
    listHeadline: 'ALLES AUS .SYSTEM, PLUS',
    incl: [
      ['Proaktives Monitoring', '24/7‑Überwachung mit Schwellwerten, Trends und automatischer Eskalation an unser Pikett.'],
      ['24 / 7 Notfall‑Hotline (Pikett)', 'Auch nachts und am Wochenende erreichbar — eine Pikett‑Person mit Zugriff auf dein System.'],
      ['Backup inkl. Restore‑Tests', 'Wir testen regelmässig, ob sich deine Sicherungen wirklich zurückspielen lassen — bevor du es brauchst.'],
      ['Managed Endpoint‑Schutz (EDR)', 'Endpoint Detection & Response auf allen Geräten — Bedrohungen werden erkannt und automatisch isoliert.'],
      ['Reaktion 1 h, jährliches IT‑Review', 'Reaktionszeit unter 1 Stunde rund um die Uhr. Einmal im Jahr eine umfassende Strategie‑Review mit der Geschäftsleitung.'],
    ],
  },
];

const ALSO = [
  { icon: 'compass', title: 'IT‑Konzept & Beratung', body: 'Standortbestimmung, Strategie, Roadmap. Auch ohne Vertrag.' },
  { icon: 'shield', title: 'Security‑Check', body: 'Wir schauen, wo dein Betrieb verwundbar ist — bevor jemand anders es tut.' },
  { icon: 'wifi', title: 'Netzwerk & WLAN', body: 'Planung, Installation, Optimierung. Auch in alten Gebäuden mit dicken Wänden.' },
  { icon: 'lock', title: 'Cloud Office', body: 'Migration, Setup und Sicherheits‑Hardening für E‑Mail, Kalender und Zusammenarbeit.' },
  { icon: 'tool', title: 'Hardware‑Beschaffung', body: 'Wir beschaffen, was zu dir passt. Keine Marge auf Geräten — Beratung statt Verkauf.' },
  { icon: 'globe', title: 'Cloud & Hosting', body: 'Server in CH‑Rechenzentren. Du weisst, wo deine Daten liegen.' },
];

function PageServices() {
  return (
    <div data-screen-label="Dienstleistungen">
      {/* Hero */}
      <Section pad="120px 28px 80px" bg="var(--kmu-paper)" label="Services Hero">
        <Topo opacity={0.55}/>
        <Container>
          <Eyebrow dot>DIENSTLEISTUNGEN</Eyebrow>
          <h1 className="kmu-display" style={{ margin: '18px 0 0', fontSize: 'clamp(48px, 6.4vw, 88px)' }}>
            Drei Pakete.<br/>Plus alles dazwischen.
          </h1>
          <p className="kmu-lead" style={{ marginTop: 26, maxWidth: 680 }}>
            Unsere drei Hauptpakete decken 90% aller KMU‑Situationen ab. Den Rest machen wir individuell — du sagst uns, was du brauchst, wir schauen, was passt.
          </p>
        </Container>
      </Section>

      {/* Packages — long cards */}
      <Section bg="#fff" pad="80px 28px" label="Pakete">
        <Container>
          <div style={{ display: 'grid', gap: 28 }}>
            {PACKAGES.map((p) => <PackageRow key={p.id} {...p} />)}
          </div>
        </Container>
      </Section>

      {/* Also */}
      <Section id="einzelthemen" bg="var(--kmu-paper)" label="Weitere Leistungen">
        <Container>
          <Eyebrow>WAS WIR AUCH MACHEN</Eyebrow>
          <h2 className="kmu-h2" style={{ margin: '10px 0 48px', maxWidth: 720 }}>
            Einzelthemen — auch ohne Paket.
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
            {ALSO.map((a) => (
              <article key={a.title} style={{
                background: '#fff', border: '1px solid var(--kmu-line)',
                borderRadius: 18, padding: 26,
              }}>
                <div style={{
                  width: 42, height: 42, borderRadius: 12, background: 'var(--kmu-blue-100)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: 'var(--kmu-blue-700)', marginBottom: 18,
                }}><Icon name={a.icon} size={22}/></div>
                <h3 style={{ fontWeight: 700, fontSize: 18, margin: '0 0 8px' }}>{a.title}</h3>
                <p className="kmu-small" style={{ margin: 0 }}>{a.body}</p>
              </article>
            ))}
          </div>
        </Container>
      </Section>

      {/* FAQ */}
      <Section bg="#fff" label="FAQ">
        <Container max={920}>
          <Eyebrow>HÄUFIGE FRAGEN</Eyebrow>
          <h2 className="kmu-h2" style={{ margin: '10px 0 36px' }}>Was du sicher fragen wirst.</h2>
          <FAQ q="Bin ich an einen Vertrag gebunden?" a="Nein. Unsere Verträge sind monatlich kündbar. Wenn wir nicht passen, sollen wir dich auch nicht halten."/>
          <FAQ q="Was kostet ein Erstgespräch?" a="Nichts. 30 Minuten, vor Ort oder am Telefon. Du bekommst danach eine ehrliche Einschätzung — auch wenn die Antwort lautet «braucht ihr nicht»."/>
          <FAQ q="Macht ihr auch nur Beratung?" a="Ja. Standortbestimmungen und IT‑Konzepte sind eine eigene Dienstleistung. Du musst danach nicht mit uns weitermachen."/>
          <FAQ q="Wie schnell seid ihr im Notfall erreichbar?" a="Tagsüber innert 30 Minuten Reaktionszeit. Notfall‑Hotline (24/7) für KMUcare.complete‑Kunden."/>
        </Container>
      </Section>
    </div>
  );
}

function PackageRow({ id, icon, name, range, headline, intro, price, incl, listHeadline = 'IM PAKET', featured }) {
  return (
    <article id={id} style={{
      background: featured ? 'var(--fg-1)' : '#fff',
      color: featured ? '#fff' : 'inherit',
      border: featured ? 'none' : '1px solid var(--kmu-line)',
      borderRadius: 24, padding: 40,
      boxShadow: featured ? 'var(--shadow-lg)' : 'var(--shadow-sm)',
      display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 48,
      position: 'relative', overflow: 'hidden',
    }}>
      {featured && <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at top right, rgba(46,155,218,0.16), transparent 60%)' }}/>}
      <div style={{ position: 'relative' }}>
        <div style={{
          width: 52, height: 52, borderRadius: 14,
          background: featured ? 'var(--kmu-blue)' : 'var(--kmu-blue-100)',
          color: featured ? '#fff' : 'var(--kmu-blue-700)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 22,
        }}><Icon name={icon} size={26}/></div>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 36, letterSpacing: '-0.02em' }}>{name}</div>
        <div className="kmu-mono" style={{ fontSize: 13, color: featured ? 'rgba(255,255,255,0.6)' : 'var(--fg-4)', marginTop: 6 }}>
          {range} · {price}
        </div>
        <p style={{ marginTop: 22, fontSize: 16, lineHeight: 1.6, color: featured ? 'rgba(255,255,255,0.78)' : 'var(--fg-3)' }}>
          {intro}
        </p>
        <div style={{ marginTop: 26 }}>
          <Button variant={featured ? 'onDark' : 'primary'} icon="arrow-right" as="a" href="#/kontakt">{name} anfragen</Button>
        </div>
      </div>
      <div style={{ position: 'relative' }}>
        <div className="kmu-eyebrow" style={{ color: featured ? 'var(--kmu-blue-300)' : undefined, marginBottom: 14 }}>{listHeadline}</div>
        <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gap: 18 }}>
          {incl.map(([t, b]) => (
            <li key={t} style={{ display: 'grid', gridTemplateColumns: '24px 1fr', gap: 14, alignItems: 'flex-start' }}>
              <Icon name="check" size={20} color={featured ? 'var(--kmu-blue-300)' : 'var(--kmu-blue)'} strokeWidth={2.4}/>
              <div>
                <div style={{ fontWeight: 600, fontSize: 16, color: featured ? '#fff' : 'var(--fg-1)' }}>{t}</div>
                <div style={{ fontSize: 14, lineHeight: 1.55, marginTop: 2, color: featured ? 'rgba(255,255,255,0.7)' : 'var(--fg-3)' }}>{b}</div>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </article>
  );
}

function FAQ({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderBottom: '1px solid var(--kmu-line)' }}>
      <button onClick={() => setOpen(!open)} style={{
        width: '100%', textAlign: 'left', background: 'transparent', border: 'none',
        padding: '22px 0', cursor: 'pointer', display: 'flex', justifyContent: 'space-between',
        alignItems: 'center', gap: 16,
      }}>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 19, color: 'var(--fg-1)' }}>{q}</span>
        <span style={{
          width: 28, height: 28, borderRadius: 999, border: '1px solid var(--kmu-line-strong)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--fg-3)', fontSize: 18, lineHeight: 1, flexShrink: 0,
          transition: 'transform 220ms', transform: open ? 'rotate(45deg)' : 'none',
        }}>+</span>
      </button>
      {open && <p style={{ margin: '0 0 22px', maxWidth: 680, fontSize: 15, lineHeight: 1.65, color: 'var(--fg-3)' }}>{a}</p>}
    </div>
  );
}

window.PageServices = PageServices;
window.PACKAGES = PACKAGES;
window.PackageRow = PackageRow;