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

const TEAM = [
  { name: 'Jonas Baumgartner', role: 'Gründer & IT‑Lead', bio: 'Lebt für saubere Netzwerke und macht zu Hause Brot.' },
  { name: 'Lena Frei', role: 'Service Desk Lead', bio: 'Erste Stimme am Telefon. Geduldig, klar, kompetent.' },
  { name: 'Marco Hofer', role: 'Senior Systems Engineer', bio: 'Cloud‑Office‑Spezialist. Fährt im Sommer Rennrad zum Kunden.' },
  { name: 'Aylin Demir', role: 'Security Engineer', bio: 'Sucht Lücken, bevor andere sie finden.' },
  { name: 'Tobias Brunner', role: 'Field Technician', bio: 'Vor Ort, schnell, zuverlässig — meist im Kombi.' },
  { name: 'Selina Aebi', role: 'Office & Backoffice', bio: 'Hält den Laden zusammen. Macht den besten Kaffee.' },
];

const VALUES = [
  { icon: 'heart', t: 'Persönlich', b: 'Du sprichst mit einem Menschen, der dein System kennt — nicht mit einem Ticket.' },
  { icon: 'eye', t: 'Transparent', b: 'Klare Preise, klare Zeiträume, keine versteckten Kosten. Auch wenn etwas schiefgeht: du erfährst es.' },
  { icon: 'leaf', t: 'Nachhaltig', b: 'Wir kaufen Hardware nicht, damit du sie ersetzen musst. Wir reparieren, was sich reparieren lässt.' },
  { icon: 'sparkle', t: 'Geradlinig', b: 'Wir verkaufen dir nichts, was du nicht brauchst. Wenn du fertig bist mit etwas, sind wir es auch.' },
];

function Avatar({ name }) {
  // deterministic color per name
  const colors = [
    ['#5a7a5e', '#1a3a4a'],
    ['#c89638', '#5a4a2a'],
    ['#3d5a6a', '#1a2a3a'],
    ['#8a5a4a', '#3a2a2a'],
    ['#5a6a8a', '#2a3a5a'],
    ['#7a6a4a', '#3a3a2a'],
  ];
  const seed = [...name].reduce((a, c) => a + c.charCodeAt(0), 0);
  const [a, b] = colors[seed % colors.length];
  const initials = name.split(' ').map((p) => p[0]).slice(0,2).join('');
  return (
    <div style={{
      width: '100%', aspectRatio: '4 / 5', borderRadius: 14,
      background: `linear-gradient(135deg, ${a} 0%, ${b} 100%)`,
      position: 'relative', overflow: 'hidden',
      display: 'flex', alignItems: 'flex-end', padding: 16,
      color: 'rgba(255,255,255,0.9)',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), transparent 55%)',
      }}/>
      <div style={{ position: 'absolute', top: 14, left: 14, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.12em', opacity: 0.7 }}>
        [ FOTO ]
      </div>
      <div style={{ position: 'relative', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, letterSpacing: '-0.01em' }}>
        {initials}
      </div>
    </div>
  );
}

function PageAbout() {
  return (
    <div data-screen-label="Über uns">
      <Section pad="120px 28px 80px" bg="var(--kmu-paper)" label="About Hero">
        <Topo opacity={0.55}/>
        <Container>
          <Eyebrow dot>ÜBER UNS</Eyebrow>
          <h1 className="kmu-display" style={{ margin: '18px 0 0', fontSize: 'clamp(48px, 6.4vw, 88px)' }}>
            Sechs Menschen — und ein<br/>Telefon, das jemand<br/>abnimmt.
          </h1>
          <p className="kmu-lead" style={{ marginTop: 28, maxWidth: 680 }}>
            Wir sind ein kleines Team, das sich ganz bewusst klein gehalten hat. So bleibt jede Beziehung persönlich, und niemand verschwindet im Ticket‑System.
          </p>
        </Container>
      </Section>

      {/* Story */}
      <Section bg="#fff" label="Geschichte">
        <Container max={900}>
          <Eyebrow>UNSERE GESCHICHTE</Eyebrow>
          <h2 className="kmu-h2" style={{ margin: '10px 0 28px' }}>2017 hat einer angefangen. 2026 sind wir sechs.</h2>
          <div className="kmu-prose" style={{ fontSize: 18, lineHeight: 1.7, color: 'var(--fg-2)' }}>
            <p>
              Jonas hat KMUcare 2017 gegründet, weil er etwas vermisste: einen IT‑Partner, der nicht zu gross für die kleinen Fragen ist — aber gross genug, damit man ihm die wichtigen anvertrauen kann. Aus einem Pultplatz wurde ein Büro. Aus einer Person ein Team.
            </p>
            <p>
              Was sich nicht geändert hat: Wir sind absichtlich klein geblieben. Jeden neuen Kunden lernen wir persönlich kennen. Jedes System dokumentieren wir so, dass jeder im Team innert Minuten weiss, was läuft. Und wir nehmen das Telefon ab.
            </p>
          </div>
        </Container>
      </Section>

      {/* Values */}
      <Section bg="var(--kmu-paper)" label="Werte">
        <Topo opacity={0.4}/>
        <Container>
          <Eyebrow>WAS UNS WICHTIG IST</Eyebrow>
          <h2 className="kmu-h2" style={{ margin: '10px 0 48px' }}>Vier Dinge, die wir nicht verhandeln.</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22 }}>
            {VALUES.map((v) => (
              <div key={v.t} style={{
                background: '#fff', border: '1px solid var(--kmu-line)',
                borderRadius: 18, padding: 28,
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 12, background: 'var(--kmu-blue-100)',
                  color: 'var(--kmu-blue-700)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                  marginBottom: 20,
                }}><Icon name={v.icon} size={22}/></div>
                <h3 style={{ fontWeight: 700, fontSize: 19, margin: '0 0 8px' }}>{v.t}</h3>
                <p className="kmu-small" style={{ margin: 0 }}>{v.b}</p>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* Team */}
      <Section bg="#fff" label="Team">
        <Container>
          <Eyebrow>DAS TEAM</Eyebrow>
          <h2 className="kmu-h2" style={{ margin: '10px 0 48px' }}>Hinter jeder Antwort steht ein Mensch.</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28, rowGap: 48 }}>
            {TEAM.map((p) => (
              <div key={p.name}>
                <Avatar name={p.name}/>
                <div style={{ marginTop: 16 }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, color: 'var(--fg-1)' }}>{p.name}</div>
                  <div className="kmu-meta" style={{ fontSize: 13, marginTop: 2 }}>{p.role}</div>
                  <p className="kmu-small" style={{ margin: '10px 0 0' }}>{p.bio}</p>
                </div>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* Numbers */}
      <Section bg="var(--fg-1)" label="Zahlen">
        <Container>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
            {[
              ['120+', 'Netzwerke'],
              ['9 Jahre', 'im Geschäft'],
              ['99.97%', 'Uptime ø'],
              ['< 30 min', 'Reaktionszeit'],
            ].map(([v, l]) => (
              <div key={l}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 56, letterSpacing: '-0.025em', color: '#fff' }}>{v}</div>
                <div className="kmu-meta" style={{ marginTop: 8, color: 'var(--kmu-blue-300)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{l}</div>
              </div>
            ))}
          </div>
        </Container>
      </Section>
    </div>
  );
}

window.PageAbout = PageAbout;
window.Avatar = Avatar;