/* global React, Topo, Button, Icon, Pulse, Section, Container, Eyebrow */
const { useState: useStateHm, useEffect: useEffectHm } = React;

// ─── HERO A — Calm & Natural ───────────────────────────
function HeroCalm() {
  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      background: 'var(--kmu-paper)',
      padding: '120px 28px 140px',
    }}>
      <Topo opacity={0.6}/>
      <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 72, alignItems: 'center' }}>
        <div>
          <Eyebrow dot>IT FÜR SCHWEIZER KMU · SEIT 2017</Eyebrow>
          <h1 className="kmu-display" style={{ margin: '18px 0 0', fontSize: 'clamp(56px, 7.4vw, 104px)' }}>
            IT, die einfach<br/>
            <span style={{ color: 'var(--kmu-blue)' }}>läuft.</span>
          </h1>
          <p className="kmu-lead" style={{ marginTop: 28, maxWidth: 560 }}>
            Wir kümmern uns um Netzwerk, Backup und Sicherheit — damit du dich um dein Geschäft kümmern kannst. Persönlich, geradeaus, schweizweit.
          </p>
          <div style={{ display: 'flex', gap: 14, marginTop: 40, alignItems: 'center', flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" icon="arrow-right" as="a" href="#/kontakt">Erstgespräch buchen</Button>
            <Button variant="ghost" size="lg" icon="phone" as="a" href="tel:+41625629600">+41 62 562 96 00</Button>
            <Button variant="ghost" size="lg" icon="mail" as="a" href="mailto:hallo@kmucare.ch">hallo@kmucare.ch</Button>
          </div>
          <div style={{ marginTop: 56, display: 'flex', gap: 36, flexWrap: 'wrap' }}>
            <Stat value="120+" label="Netzwerke"/>
            <Stat value="< 30 min" label="Reaktionszeit"/>
            <Stat value="2017" label="Gegründet"/>
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <NetworkIllustration/>
        </div>
      </div>
    </section>
  );
}

function Stat({ value, label }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 28, letterSpacing: '-0.02em', color: 'var(--fg-1)' }}>{value}</div>
      <div className="kmu-meta" style={{ marginTop: 2, textTransform: 'uppercase', letterSpacing: '0.08em' }}>{label}</div>
    </div>
  );
}

// ─── HERO B — Bold & Confident ─────────────────────────
function HeroBold() {
  return (
    <section style={{ position: 'relative', background: '#fff', padding: '128px 28px 96px', borderBottom: '1px solid var(--kmu-line)' }}>
      <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 6, background: 'var(--kmu-blue)' }}/>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <Eyebrow dot>SYSTEME ONLINE · MONITORING AKTIV</Eyebrow>
        <h1 style={{
          fontFamily: 'var(--font-display)', fontWeight: 800,
          fontSize: 'clamp(60px, 9.4vw, 144px)', lineHeight: 0.94,
          letterSpacing: '-0.035em', margin: '20px 0 0', color: 'var(--fg-1)',
        }}>
          Deine IT.<br/>
          Unter <span style={{ color: 'var(--kmu-blue)' }}>Kontrolle</span>.
        </h1>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, marginTop: 56, alignItems: 'end' }}>
          <p className="kmu-lead" style={{ margin: 0, fontSize: 22 }}>
            Netzwerk, Server, POS, Monitoring. Wir betreiben die IT von Schweizer KMU — schlank, sicher, persönlich. Seit 2017.
          </p>
          <div>
            <Pulse height={70}/>
            <div style={{ display: 'flex', gap: 28, marginTop: 14 }}>
              <Stat value="99.97%" label="Uptime"/>
              <Stat value="240+" label="Tickets / Mt"/>
              <Stat value="2017" label="Seit"/>
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 14, marginTop: 48, flexWrap: 'wrap' }}>
          <Button variant="primary" size="lg" icon="arrow-right" as="a" href="#/kontakt">Erstgespräch buchen</Button>
          <Button variant="secondary" size="lg" as="a" href="#/dienstleistungen">Angebot ansehen</Button>
        </div>
      </div>
    </section>
  );
}

// ─── HERO C — Editorial ────────────────────────────────
function HeroEditorial() {
  return (
    <section style={{ background: '#fff', padding: '96px 28px 80px' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 72, alignItems: 'start' }}>
        <div>
          <Eyebrow dot>EIN PERSÖNLICHER IT‑PARTNER</Eyebrow>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 'clamp(48px, 6.4vw, 92px)', lineHeight: 1.02,
            letterSpacing: '-0.025em', margin: '20px 0 0', color: 'var(--fg-1)',
          }}>
            Wir betreiben deine IT, als wäre sie unsere eigene.
          </h1>
          <p style={{ marginTop: 32, fontSize: 19, lineHeight: 1.65, color: 'var(--fg-2)', maxWidth: 600 }}>
            <span style={{
              float: 'left', fontFamily: 'var(--font-display)', fontWeight: 800,
              fontSize: 80, lineHeight: 0.85, marginRight: 14, marginTop: 6,
              color: 'var(--kmu-blue)',
            }}>S</span>
            eit 2017 betreuen wir Schweizer KMU — Bäckereien, Anwaltskanzleien, Werkstätten. Was uns Spass macht: Begegnung auf Augenhöhe und Lösungen, die <em>genau</em> passen. Nicht zu klein, nicht zu gross.
          </p>
          <div style={{ display: 'flex', gap: 18, marginTop: 40, alignItems: 'center', flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" icon="arrow-right" as="a" href="#/kontakt">Lerne uns kennen</Button>
            <span className="kmu-meta">5 Min Erstgespräch · unverbindlich</span>
          </div>
        </div>
        <aside style={{
          background: 'var(--kmu-paper)', borderRadius: 22, padding: 32,
          border: '1px solid var(--kmu-line)',
        }}>
          <PortraitPlaceholder name="Jonas B." src={(window.__resources && window.__resources.jonasPhoto) || "assets/jonas-baumgartner.png"}/>
          <div className="kmu-eyebrow" style={{ marginTop: 22 }}>GRÜNDER</div>
          <div style={{ fontWeight: 700, fontSize: 22, marginTop: 4, color: 'var(--fg-1)' }}>Jonas Baumgartner</div>
          <p className="kmu-small" style={{ marginTop: 12 }}>
            «Mir machen die kleineren Projekte am meisten Spass — weil die Begegnung persönlicher ist.»
          </p>
        </aside>
      </div>
    </section>
  );
}

// ─── Network illustration (custom SVG using brand cubes) ──
function NetworkIllustration() {
  // 7-cube hex network — matches brand mark (1 hub + 6 outer)
  const outer = [
    { x: 83, y: 50 },   // E
    { x: 66, y: 21 },   // NE
    { x: 33, y: 21 },   // NW
    { x: 17, y: 50 },   // W
    { x: 33, y: 79 },   // SW
    { x: 66, y: 79 },   // SE
  ];
  return (
    <svg viewBox="0 0 100 100" width="100%" style={{ maxWidth: 540, display: 'block', margin: '0 auto' }} aria-hidden>
      <defs>
        <radialGradient id="haloA" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="var(--kmu-blue)" stopOpacity="0.18"/>
          <stop offset="60%" stopColor="var(--kmu-blue)" stopOpacity="0.04"/>
          <stop offset="100%" stopColor="var(--kmu-blue)" stopOpacity="0"/>
        </radialGradient>
      </defs>
      <circle cx="50" cy="50" r="46" fill="url(#haloA)"/>
      {/* spokes from hub to each outer cube */}
      <g stroke="var(--kmu-blue)" strokeWidth="0.9" strokeLinecap="round" opacity="0.95">
        {outer.map((n, i) => (
          <line key={i} x1="50" y1="50" x2={n.x} y2={n.y}/>
        ))}
      </g>
      {/* hex ring connecting outer cubes */}
      <g stroke="var(--kmu-fog)" strokeWidth="0.5" strokeLinecap="round" opacity="0.7">
        {outer.map((n, i) => {
          const next = outer[(i + 1) % outer.length];
          return <line key={i} x1={n.x} y1={n.y} x2={next.x} y2={next.y}/>;
        })}
      </g>
      {/* outer cubes */}
      {outer.map((n, i) => (
        <g key={i} transform={`translate(${n.x - 4} ${n.y - 4})`}>
          <Cube/>
        </g>
      ))}
      {/* hub cube */}
      <g transform="translate(46 46)">
        <Cube hub/>
      </g>
      {/* network traffic — packets traveling along spokes (hub → outer, staggered) */}
      <g>
        {outer.map((n, i) => {
          const dur = 2.6;
          const delay = (i * dur) / outer.length;
          return (
            <g key={`pkt-${i}`}>
              {/* outbound packet: hub → outer */}
              <circle r="1.3" fill="var(--kmu-blue)">
                <animate attributeName="cx" from="50" to={n.x} dur={`${dur}s`} begin={`${delay}s`} repeatCount="indefinite"/>
                <animate attributeName="cy" from="50" to={n.y} dur={`${dur}s`} begin={`${delay}s`} repeatCount="indefinite"/>
                <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.85;1" dur={`${dur}s`} begin={`${delay}s`} repeatCount="indefinite"/>
                <animate attributeName="r" values="0.8;1.6;1.6;0.8" keyTimes="0;0.1;0.85;1" dur={`${dur}s`} begin={`${delay}s`} repeatCount="indefinite"/>
              </circle>
              {/* inbound packet: outer → hub, half-cycle later */}
              <circle r="1" fill="var(--kmu-blue-700, #1f73a6)" opacity="0.7">
                <animate attributeName="cx" from={n.x} to="50" dur={`${dur}s`} begin={`${delay + dur / 2}s`} repeatCount="indefinite"/>
                <animate attributeName="cy" from={n.y} to="50" dur={`${dur}s`} begin={`${delay + dur / 2}s`} repeatCount="indefinite"/>
                <animate attributeName="opacity" values="0;0.7;0.7;0" keyTimes="0;0.15;0.85;1" dur={`${dur}s`} begin={`${delay + dur / 2}s`} repeatCount="indefinite"/>
              </circle>
            </g>
          );
        })}
      </g>
      {/* hub glow — pulses when packets arrive */}
      <circle cx="50" cy="50" r="3" fill="var(--kmu-blue)" opacity="0">
        <animate attributeName="r" values="2;6;2" dur="2.6s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.45;0;0.45" dur="2.6s" repeatCount="indefinite"/>
      </circle>
    </svg>
  );
}

function Cube({ hub }) {
  if (hub) {
    return (
      <g>
        <path d="M4 0.5 L7.5 2.3 L4 4.1 L0.5 2.3 Z" fill="var(--kmu-blue-300)" stroke="#1f73a6" strokeWidth="0.25"/>
        <path d="M0.5 2.3 L0.5 6.5 L4 8.3 L4 4.1 Z" fill="var(--kmu-blue)" stroke="#1f73a6" strokeWidth="0.25"/>
        <path d="M7.5 2.3 L7.5 6.5 L4 8.3 L4 4.1 Z" fill="#1f73a6" stroke="#1f73a6" strokeWidth="0.25"/>
      </g>
    );
  }
  return (
    <g>
      <path d="M4 0.5 L7.5 2.3 L4 4.1 L0.5 2.3 Z" fill="#fff" stroke="var(--kmu-blue)" strokeWidth="0.3"/>
      <path d="M0.5 2.3 L0.5 6.5 L4 8.3 L4 4.1 Z" fill="#e3f2fb" stroke="var(--kmu-blue)" strokeWidth="0.3"/>
      <path d="M7.5 2.3 L7.5 6.5 L4 8.3 L4 4.1 Z" fill="#cfe5f4" stroke="var(--kmu-blue)" strokeWidth="0.3"/>
    </g>
  );
}

function PortraitPlaceholder({ name, src }) {
  if (src) {
    return (
      <div style={{
        width: '100%', aspectRatio: '4 / 5', borderRadius: 14,
        overflow: 'hidden', background: 'var(--kmu-stone)',
        border: '1px solid var(--kmu-line)',
      }}>
        <img src={src} alt={name}
          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 22%', display: 'block' }}/>
      </div>
    );
  }
  return (
    <div style={{
      width: '100%', aspectRatio: '4 / 5', borderRadius: 14,
      background: 'linear-gradient(135deg, #5a7a5e 0%, #2a4a55 70%, #1a3a4a 100%)',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16), transparent 50%)',
      }}/>
      <div style={{
        position: 'absolute', bottom: 16, left: 16, right: 16,
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
        color: 'rgba(255,255,255,0.85)', fontFamily: 'var(--font-mono)', fontSize: 10,
        letterSpacing: '0.12em', textTransform: 'uppercase',
      }}>
        <span>[ Foto · {name} ]</span>
        <span>CH</span>
      </div>
    </div>
  );
}

// ─── Trust strip ───────────────────────────────────────
function TrustStrip() {
  const items = [
    'Hotel · Zürich',
    'Immobilienverwaltung · Zug',
    'Rösterei · Zürich',
    'Lebensmittelhersteller · Zürich',
    'Dachdecker · Luzern',
    'Treuhand · Luzern',
    'Finanzdienstleister · Zürich',
    'Fitnesscenter · Basel',
    'Burgerkette · Schweiz',
    'Industriefertigung · Aargau',
    'Sanitär · Schwyz',
    'Restaurant · Winterthur',
    'Arztpraxis · Cham',
    'Reinigung · Aargau',
    'Eventbetrieb · Zug',
  ];
  return (
    <Section pad="56px 28px" bg="var(--kmu-bg)" label="Trust">
      <Container>
        <div style={{ display: 'flex', alignItems: 'center', gap: 32, flexWrap: 'wrap', justifyContent: 'space-between' }}>
          <span className="kmu-meta" style={{ textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--fg-4)' }}>
            Wir betreuen u.&nbsp;a.
          </span>
          <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap', alignItems: 'center' }}>
            {items.map((i, idx) => (
              <span key={i} style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, color: 'var(--fg-3)', opacity: 0.78 }}>
                {i}{idx < items.length - 1 ? <span style={{ marginLeft: 28, color: 'var(--kmu-fog)' }}>·</span> : null}
              </span>
            ))}
          </div>
        </div>
      </Container>
    </Section>
  );
}

// ─── Services overview (4 building blocks) ─────────────
const SERVICES = [
  { icon: 'compass',  tag: 'IT‑Konzept', title: 'Zugeschnitten auf dich', body: 'Wir hören zu, schauen uns deinen Betrieb an und schlagen vor, was wirklich nötig ist.' },
  { icon: 'database', tag: 'Backup',     title: 'Daten in sicheren Händen', body: 'Tägliche Sicherung, geprüft und ausserhalb deines Hauses gelagert. Wenn du sie brauchst, ist sie da.' },
  { icon: 'shield',   tag: 'Security',   title: 'Geschützt vor Angriffen', body: 'Firewall, Endpoint, Patch‑Management. Schutz, der zu deinem Betrieb passt — kein Theater.' },
  { icon: 'activity', tag: 'Monitoring', title: 'Konstante Überprüfung', body: 'Wir überwachen deine Systeme rund um die Uhr und sehen Probleme, bevor du sie merkst.' },
];

function Services() {
  return (
    <Section id="dienstleistungen" bg="#fff" label="Services">
      <Container>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 48 }}>
          <div>
            <Eyebrow>UNSERE DIENSTLEISTUNGEN</Eyebrow>
            <h2 className="kmu-h2" style={{ margin: '10px 0 0', maxWidth: 720 }}>
              Vier Bausteine. So viele oder so wenige, wie du brauchst.
            </h2>
          </div>
          <Button variant="ghost" icon="arrow-right" as="a" href="#/dienstleistungen">Alle Leistungen</Button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {SERVICES.map((s) => <ServiceCard key={s.tag} {...s} />)}
        </div>
      </Container>
    </Section>
  );
}

function ServiceCard({ icon, tag, title, body }) {
  const [hover, setHover] = useStateHm(false);
  return (
    <article
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: '#fff',
        border: `1px solid ${hover ? '#bfe0f3' : 'var(--kmu-line)'}`,
        borderRadius: 18, padding: 28,
        boxShadow: hover ? 'var(--shadow-md)' : 'var(--shadow-sm)',
        transition: 'all 220ms var(--ease-out)',
        transform: hover ? 'translateY(-3px)' : 'none',
      }}>
      <div style={{
        width: 48, height: 48, borderRadius: 14, background: 'var(--kmu-blue-100)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: 'var(--kmu-blue-700)', marginBottom: 22,
      }}><Icon name={icon} size={24}/></div>
      <Eyebrow>{tag}</Eyebrow>
      <h3 style={{ fontWeight: 700, fontSize: 20, margin: '8px 0 10px', color: 'var(--fg-1)' }}>{title}</h3>
      <p className="kmu-small" style={{ margin: 0 }}>{body}</p>
    </article>
  );
}

// ─── Offerings (3 packages) ────────────────────────────
const OFFERINGS = [
  { id: 'network',  icon: 'wifi',     name: 'KMUcare.network',  range: 'Netzwerk',                from: 'ab CHF 49 / Mt',
    desc: 'Wir halten dein Netzwerk am Leben. Ideal für Betriebe ohne eigenen Server.',
    headline: 'IM PAKET',
    bullets: ['Wartung Firewall, Switch, WLAN', 'Verfügbarkeits‑Monitoring', 'Firmware‑ und Sicherheits‑Updates', 'Reaktion: Bürozeit, NBD', 'Monatlicher Statusbericht'] },
  { id: 'system',   icon: 'monitor',  name: 'KMUcare.system',   range: 'Netzwerk + Endgeräte',    from: 'ab CHF 390 / Mt',
    desc: 'Netzwerk plus alle Arbeitsplätze und Server. Der Standard für KMU mit eigener IT‑Infrastruktur.',
    headline: 'ALLES AUS .NETWORK, PLUS',
    bullets: ['Wartung Workstations, Server, NAS', 'Patch‑Management Endpoints', 'Backup‑Überwachung (täglich)', 'Helpdesk Bürozeit, Reaktion 4 h', 'Jährliches IT‑Review'], featured: true },
  { id: 'complete', icon: 'shield',   name: 'KMUcare.complete', range: 'Rundum‑Betreuung',        from: 'ab CHF 890 / Mt',
    desc: 'Wir kümmern uns um alles – proaktiv, rund um die Uhr. Für Betriebe, die keinen Stillstand vertragen.',
    headline: 'ALLES AUS .SYSTEM, PLUS',
    bullets: ['Proaktives Monitoring', '24 / 7 Notfall‑Hotline (Pikett)', 'Backup inkl. Restore‑Tests', 'Managed Endpoint‑Schutz (EDR)', 'Reaktion 1 h, jährliches IT‑Review'] },
];

function Offerings() {
  return (
    <Section id="angebot" bg="var(--kmu-paper)" label="Angebot">
      <Topo opacity={0.4}/>
      <Container>
        <Eyebrow>UNSER ANGEBOT</Eyebrow>
        <h2 className="kmu-h2" style={{ margin: '10px 0 14px' }}>Drei Pakete, je nach Bedarf.</h2>
        <p className="kmu-lead" style={{ margin: '0 0 56px', maxWidth: 660 }}>
          Wir empfehlen das Paket, das zu deiner IT‑Anforderung passt. Wechseln geht jederzeit.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22, alignItems: 'stretch' }}>
          {OFFERINGS.map((o) => <OfferingCard key={o.id} {...o} />)}
        </div>
        <p className="kmu-meta" style={{ marginTop: 32, textAlign: 'center', color: 'var(--fg-4)' }}>
          Alle Pakete: Grundpauschale + Wartungsartikel pro Device + Lizenzen pro User. Beispielpreise indikativ.
        </p>
      </Container>
    </Section>
  );
}

function OfferingCard({ icon, name, range, from, desc, bullets, headline = 'IM PAKET', featured }) {
  return (
    <article style={{
      background: featured ? 'var(--fg-1)' : '#fff',
      color: featured ? '#fff' : 'inherit',
      border: featured ? 'none' : '1px solid var(--kmu-line)',
      borderRadius: 22, padding: 32,
      boxShadow: featured ? 'var(--shadow-lg)' : 'var(--shadow-sm)',
      display: 'flex', flexDirection: 'column',
      transform: featured ? 'translateY(-12px)' : 'none',
      position: 'relative', overflow: 'hidden',
    }}>
      {featured && <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at top right, rgba(46,155,218,0.18), transparent 60%)' }}/>}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24, position: 'relative' }}>
        <div style={{
          width: 48, height: 48, borderRadius: 14,
          background: featured ? 'rgba(46,155,218,0.22)' : 'var(--kmu-blue-100)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: featured ? 'var(--kmu-blue-300)' : 'var(--kmu-blue-700)',
        }}><Icon name={icon} size={24}/></div>
        {featured && (
          <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
            color: 'var(--fg-1)', background: 'var(--kmu-blue)', padding: '5px 12px', borderRadius: 999 }}>Empfohlen</span>
        )}
      </div>
      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', flex: 1 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 26, letterSpacing: '-0.02em' }}>{name}</div>
        <div className="kmu-mono" style={{ fontSize: 13, color: featured ? 'rgba(255,255,255,0.6)' : 'var(--fg-4)', marginTop: 4 }}>
          {from}
        </div>
        <p style={{ marginTop: 22, fontSize: 15, lineHeight: 1.6, color: featured ? 'rgba(255,255,255,0.78)' : 'var(--fg-3)' }}>{desc}</p>
        <div style={{ marginTop: 22, fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: featured ? 'rgba(255,255,255,0.6)' : 'var(--fg-4)' }}>{headline}</div>
        <ul style={{ listStyle: 'none', margin: '14px 0 26px', padding: 0, display: 'grid', gap: 12, flex: 1 }}>
          {bullets.map((b) => (
            <li key={b} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: featured ? 'rgba(255,255,255,0.86)' : 'var(--fg-2)' }}>
              <Icon name="check" size={16} color={featured ? 'var(--kmu-blue-300)' : 'var(--kmu-blue)'} strokeWidth={2.4}/>{b}
            </li>
          ))}
        </ul>
        <Button variant={featured ? 'onDark' : 'secondary'} size="md" icon="arrow-right" as="a" href={`#/dienstleistungen`}>Mehr zu {name}</Button>
      </div>
    </article>
  );
}

// ─── Process (How it works) ────────────────────────────
const STEPS = [
  { n: '01', title: 'Wir hören zu.', body: 'Ein 30‑Minuten‑Gespräch — vor Ort oder am Telefon. Wir verstehen, was du brauchst, und du verstehst, wie wir arbeiten.' },
  { n: '02', title: 'Wir schauen hin.', body: 'IT‑Standort‑Bestimmung. Wir dokumentieren, was da ist, und sagen ehrlich, was Sinn macht — und was nicht.' },
  { n: '03', title: 'Wir legen los.', body: 'Wir setzen um, gemeinsam mit dir. Klare Etappen, fixer Preis, kein Bullshit.' },
  { n: '04', title: 'Wir bleiben dran.', body: 'Monitoring, Updates, Backups — und ein direkter Draht zum Menschen, der dein System kennt.' },
];

function Process() {
  return (
    <Section bg="#fff" label="Vorgehen">
      <Container>
        <Eyebrow>SO ARBEITEN WIR</Eyebrow>
        <h2 className="kmu-h2" style={{ margin: '10px 0 56px', maxWidth: 720 }}>
          Vier Schritte. Ohne Geheimnisse.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, position: 'relative' }}>
          <div style={{ position: 'absolute', top: 14, left: '8%', right: '8%', height: 1, borderTop: '1px dashed var(--kmu-line-strong)' }}/>
          {STEPS.map((s) => (
            <div key={s.n} style={{ paddingRight: 24 }}>
              <div style={{
                width: 28, height: 28, borderRadius: 999,
                background: '#fff', border: '1.5px solid var(--kmu-blue)',
                color: 'var(--kmu-blue)', fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                position: 'relative', zIndex: 1, marginBottom: 22,
              }}>{s.n}</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, margin: '0 0 10px', color: 'var(--fg-1)' }}>{s.title}</h3>
              <p className="kmu-small" style={{ margin: 0 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </Container>
    </Section>
  );
}

// ─── Founder section ───────────────────────────────────
function Founder() {
  return (
    <Section bg="var(--kmu-paper)" label="Founder">
      <Topo opacity={0.4}/>
      <Container max={1080}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'center' }}>
          <PortraitPlaceholder name="Jonas B." src={(window.__resources && window.__resources.jonasPhoto) || "assets/jonas-baumgartner.png"}/>
          <div>
            <Eyebrow>ÜBER UNS</Eyebrow>
            <h2 className="kmu-h2" style={{ margin: '10px 0 24px' }}>
              Ein Mensch, der dein System kennt — und erreichbar ist, wenn du ihn brauchst.
            </h2>
            <p className="kmu-lead" style={{ margin: 0, maxWidth: 580 }}>
              Mit fünf stand 1989 ein Commodore C64 vor mir — und seither lässt mich IT nicht mehr los. Über Verkauf, Projektmanagement und IT‑Engineering bin ich 2017 ins eigene Geschäft gewechselt, um IT so zu machen, wie ich sie für richtig halte: persönlich, nachhaltig, auf Augenhöhe.
            </p>
            <p className="kmu-lead" style={{ margin: '18px 0 0', maxWidth: 580 }}>
              Dabei unterstützt mich ein Team, das mitdenkt.
            </p>
            <div style={{ marginTop: 32, padding: '22px 0', borderTop: '1px solid var(--kmu-line)', display: 'flex', gap: 36, flexWrap: 'wrap' }}>
              <Fact label="Gründer" value="Jonas Baumgartner"/>
              <Fact label="Wirkungsbereich" value="Schweizweit"/>
              <Fact label="Seit" value="2017"/>
              <Fact label="Team" value="6 Personen"/>
            </div>
            <div style={{ marginTop: 28 }}>
              <Button variant="ghost" icon="arrow-right" as="a" href="#/ueber-uns">Mehr über uns</Button>
            </div>
          </div>
        </div>
      </Container>
    </Section>
  );
}

function Fact({ label, value }) {
  return (
    <div>
      <div className="kmu-meta" style={{ textTransform: 'uppercase', letterSpacing: '0.1em', fontSize: 11 }}>{label}</div>
      <div style={{ fontWeight: 600, fontSize: 16, marginTop: 4, color: 'var(--fg-1)' }}>{value}</div>
    </div>
  );
}

// ─── Testimonial ───────────────────────────────────────
function Testimonial() {
  return (
    <Section bg="#fff" label="Stimme">
      <Container max={960}>
        <div style={{ textAlign: 'center' }}>
          <div style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 'clamp(28px, 3.6vw, 44px)', lineHeight: 1.25,
            letterSpacing: '-0.015em', color: 'var(--fg-1)',
            maxWidth: 880, margin: '0 auto',
          }}>
            <span style={{ color: 'var(--kmu-blue)', fontSize: '1.4em', lineHeight: 0, position: 'relative', top: 8 }}>“</span>
            &nbsp;Wir haben endlich das Gefühl, dass jemand unsere IT‑Bedürfnisse versteht und uns ehrlich sagt, was Sinn macht und was nicht. Wir vertrauen KMUcare, dass sie uns in unserem Sinne beraten. Das ist Gold wert.&nbsp;
            <span style={{ color: 'var(--kmu-blue)', fontSize: '1.4em', lineHeight: 0, position: 'relative', top: 8 }}>”</span>
          </div>
          <div style={{ marginTop: 36, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14 }}>
            <div style={{
              width: 44, height: 44, borderRadius: 999,
              background: 'linear-gradient(135deg, #c89638, #5a7a5e)',
              border: '2px solid #fff', boxShadow: 'var(--shadow-sm)',
            }}/>
            <div style={{ textAlign: 'left' }}>
              <div style={{ fontWeight: 600, fontSize: 15, color: 'var(--fg-1)' }}>Geschäftsführerin</div>
              <div className="kmu-meta" style={{ fontSize: 13 }}>Immobilienverwaltung · Zug</div>
            </div>
          </div>
        </div>
      </Container>
    </Section>
  );
}

// ─── CTA ───────────────────────────────────────────────
function CTA() {
  return (
    <Section bg="var(--fg-1)" pad="96px 28px" label="CTA">
      <Container max={1080}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <Eyebrow><span style={{ color: 'var(--kmu-blue-300)' }}>BEREIT WENN DU ES BIST</span></Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 800,
              fontSize: 'clamp(36px, 5vw, 64px)', lineHeight: 1.05,
              letterSpacing: '-0.025em', margin: '14px 0 18px', color: '#fff',
            }}>
              Lass uns 30 Minuten reden.
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: 'rgba(255,255,255,0.78)', margin: 0, maxWidth: 540 }}>
              Kostenlos, unverbindlich. Du erfährst, was deine IT braucht — und ob wir der richtige Partner sind.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <Button variant="onDark" size="lg" icon="arrow-right" as="a" href="#/kontakt">Erstgespräch buchen</Button>
            <a href="tel:+41625629600" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              color: '#fff', textDecoration: 'none',
              fontSize: 15, padding: '8px 0',
            }}>
              <Icon name="phone" size={18} color="var(--kmu-blue-300)"/>+41 62 562 96 00
            </a>
            <a href="mailto:hallo@kmucare.ch" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              color: '#fff', textDecoration: 'none',
              fontSize: 15, padding: '8px 0',
            }}>
              <Icon name="mail" size={18} color="var(--kmu-blue-300)"/>hallo@kmucare.ch
            </a>
          </div>
        </div>
      </Container>
    </Section>
  );
}

function HomePage({ heroVariant = 'A' }) {
  const Hero = heroVariant === 'B' ? HeroBold : heroVariant === 'C' ? HeroEditorial : HeroCalm;
  return (
    <div data-screen-label="Home">
      <Hero/>
      <TrustStrip/>
      <Services/>
      <Offerings/>
      <Process/>
      <Founder/>
      <Testimonial/>
      <CTA/>
    </div>
  );
}

window.HomePage = HomePage;