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

const POSTS = [
  {
    cat: 'Security', date: '14. Mär 2026', read: '6 Min',
    title: 'Was ein Phishing‑Test bei einem Schweizer KMU wirklich aufgedeckt hat',
    teaser: 'Wir haben einen kontrollierten Phishing‑Test bei einem Kunden mit 22 Mitarbeitenden gefahren. Das Ergebnis war ernüchternd — und lehrreich.',
    featured: true,
  },
  { cat: 'Backup', date: '02. Mär 2026', read: '4 Min', title: 'Die 3‑2‑1‑Regel ist 2026 nicht mehr genug. Was du stattdessen brauchst.', teaser: 'Drei Kopien, zwei Medien, eine extern — die Regel ist über 30 Jahre alt. Ransomware hat sie überholt.' },
  { cat: 'Cloud Office', date: '21. Feb 2026', read: '8 Min', title: 'Cloud Office für 12 Personen — was kostet das wirklich?', teaser: 'Die Lizenzen sind nur die halbe Wahrheit. Hier ist die ehrliche Rechnung mit allen versteckten Kosten.' },
  { cat: 'Netzwerk', date: '08. Feb 2026', read: '5 Min', title: 'Warum dein WLAN in der Backstube nicht funktioniert', teaser: 'Mehl in der Luft, Stahlbeton, Industrieöfen. Wir haben gelernt, was bei Bäckereien wirklich hilft.' },
  { cat: 'Strategie', date: '24. Jan 2026', read: '7 Min', title: '«Wir brauchen einen Server.» — Brauchst du wirklich?', teaser: 'Drei Fragen, die wir vor jedem Server‑Projekt stellen. Manchmal lautet die ehrliche Antwort: nein.' },
  { cat: 'Praxis', date: '11. Jan 2026', read: '4 Min', title: 'Ein Tag im Service Desk', teaser: 'Wie sieht ein normaler Dienstag bei Lena aus? 12 Tickets, 4 Anrufe, 1 Vor‑Ort‑Einsatz — und ein Espresso.' },
  { cat: 'Security', date: '04. Jan 2026', read: '5 Min', title: '2‑Faktor ist Pflicht. Aber welche Methode für welches Team?', teaser: 'SMS, App, Hardware‑Token, Passkey — wir vergleichen ehrlich, was bei welcher Firmengrösse Sinn macht.' },
];

function PageBlog() {
  const [feat, ...rest] = POSTS;
  return (
    <div data-screen-label="Blog">
      <Section pad="120px 28px 64px" bg="var(--kmu-paper)" label="Blog Hero">
        <Topo opacity={0.55}/>
        <Container>
          <Eyebrow dot>BLOG · NOTIZEN AUS DER WERKSTATT</Eyebrow>
          <h1 className="kmu-display" style={{ margin: '18px 0 0', fontSize: 'clamp(48px, 6.4vw, 88px)' }}>
            Was wir lernen,<br/>schreiben wir auf.
          </h1>
          <p className="kmu-lead" style={{ marginTop: 26, maxWidth: 660 }}>
            Keine SEO‑Häppchen. Keine Hot‑Takes. Nur das, was wir bei der täglichen Arbeit gelernt haben — und was anderen KMU helfen könnte.
          </p>
        </Container>
      </Section>

      {/* Featured */}
      <Section bg="#fff" pad="32px 28px 48px" label="Featured Post">
        <Container>
          <a href="#/blog#post" style={{ textDecoration: 'none', color: 'inherit' }}>
            <article style={{
              display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 0,
              border: '1px solid var(--kmu-line)', borderRadius: 22, overflow: 'hidden',
              background: '#fff', boxShadow: 'var(--shadow-sm)',
            }}>
              <PostCover cat={feat.cat} idx={0} large/>
              <div style={{ padding: 40, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                <div style={{ display: 'flex', gap: 14, alignItems: 'center', marginBottom: 14 }}>
                  <CatPill cat={feat.cat}/>
                  <span className="kmu-meta">{feat.date} · {feat.read}</span>
                </div>
                <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 36, lineHeight: 1.15, letterSpacing: '-0.02em', margin: 0, color: 'var(--fg-1)' }}>
                  {feat.title}
                </h2>
                <p style={{ marginTop: 18, fontSize: 17, lineHeight: 1.6, color: 'var(--fg-3)' }}>{feat.teaser}</p>
                <div style={{ marginTop: 26 }}>
                  <Button variant="ghost" icon="arrow-right">Weiterlesen</Button>
                </div>
              </div>
            </article>
          </a>
        </Container>
      </Section>

      {/* Grid */}
      <Section bg="#fff" pad="24px 28px 96px" label="Beiträge">
        <Container>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 26, rowGap: 48 }}>
            {rest.map((p, i) => (
              <a key={p.title} href="#/blog#post" style={{ textDecoration: 'none', color: 'inherit' }}>
                <article>
                  <PostCover cat={p.cat} idx={i + 1}/>
                  <div style={{ marginTop: 18 }}>
                    <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 10 }}>
                      <CatPill cat={p.cat}/>
                      <span className="kmu-meta" style={{ fontSize: 12 }}>{p.date} · {p.read}</span>
                    </div>
                    <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, lineHeight: 1.2, letterSpacing: '-0.015em', margin: 0, color: 'var(--fg-1)' }}>
                      {p.title}
                    </h3>
                    <p className="kmu-small" style={{ margin: '12px 0 0' }}>{p.teaser}</p>
                  </div>
                </article>
              </a>
            ))}
          </div>
        </Container>
      </Section>

      {/* Newsletter */}
      <Section bg="var(--kmu-paper)" label="Newsletter">
        <Topo opacity={0.4}/>
        <Container max={760}>
          <div style={{ textAlign: 'center' }}>
            <Eyebrow dot>NEWSLETTER</Eyebrow>
            <h2 className="kmu-h2" style={{ margin: '14px 0 16px' }}>
              Einmal im Monat. Kein Marketing.
            </h2>
            <p className="kmu-lead" style={{ margin: '0 auto', maxWidth: 540 }}>
              Wir fassen die wichtigsten IT‑Themen für Schweizer KMU zusammen. Praktisch, kurz, ohne Affiliate‑Links.
            </p>
            <form onSubmit={(e) => e.preventDefault()} style={{
              marginTop: 28, display: 'flex', gap: 8, maxWidth: 480, margin: '28px auto 0',
              background: '#fff', border: '1px solid var(--kmu-line-strong)', borderRadius: 999,
              padding: 6,
            }}>
              <input type="email" placeholder="deine@firma.ch" style={{
                flex: 1, border: 'none', outline: 'none', background: 'transparent',
                padding: '10px 16px', fontFamily: 'var(--font-sans)', fontSize: 15, color: 'var(--fg-1)',
              }}/>
              <Button type="submit" variant="primary" size="md" icon="arrow-right">Anmelden</Button>
            </form>
            <p className="kmu-meta" style={{ marginTop: 14 }}>Abmelden mit einem Klick. Daten bleiben in der Schweiz.</p>
          </div>
        </Container>
      </Section>
    </div>
  );
}

function CatPill({ cat }) {
  const tones = {
    Security: ['#fff5e8', '#a5601f'],
    Backup:   ['var(--kmu-blue-100)', 'var(--kmu-blue-700)'],
    'Cloud Office':     ['#eef0fc', '#3a4aa3'],
    Netzwerk: ['#e8f4ec', '#2f6b3d'],
    Strategie:['#f3eef9', '#6b3a8c'],
    Praxis:   ['#fbecec', '#9c3a3a'],
  };
  const [bg, fg] = tones[cat] || ['var(--kmu-mist)', 'var(--fg-2)'];
  return (
    <span style={{
      fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
      color: fg, background: bg, padding: '4px 10px', borderRadius: 999,
    }}>{cat}</span>
  );
}

function PostCover({ cat, idx, large }) {
  // Different abstract cover per index — using gradients + topo
  const palettes = [
    ['#1f73a6', '#0d3a5c'],
    ['#5a7a5e', '#2a4a32'],
    ['#c89638', '#5a4a1a'],
    ['#3d5a6a', '#1a2a35'],
    ['#8a5a4a', '#3a2a22'],
    ['#5a5a8a', '#2a2a55'],
    ['#7a4a6a', '#3a1a2a'],
  ];
  const [a, b] = palettes[idx % palettes.length];
  const motif = idx % 3;
  return (
    <div style={{
      width: '100%', aspectRatio: large ? '5 / 4' : '4 / 3',
      background: `linear-gradient(135deg, ${a} 0%, ${b} 100%)`,
      borderRadius: large ? 0 : 14,
      position: 'relative', overflow: 'hidden',
    }}>
      <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.32 }} aria-hidden>
        {motif === 0 && (
          <g fill="none" stroke="#fff" strokeWidth="1">
            {Array.from({ length: 12 }).map((_, i) => (
              <path key={i}
                d={`M -50 ${100 + i * 24} C 80 ${60 + i * 24}, 200 ${160 + i * 24}, 320 ${100 + i * 24} S 480 ${50 + i * 24}, 600 ${130 + i * 24}`}/>
            ))}
          </g>
        )}
        {motif === 1 && (
          <g fill="none" stroke="#fff" strokeWidth="1">
            {Array.from({ length: 8 }).map((_, i) => (
              <circle key={i} cx="200" cy="150" r={30 + i * 22}/>
            ))}
          </g>
        )}
        {motif === 2 && (
          <g fill="none" stroke="#fff" strokeWidth="1">
            {Array.from({ length: 18 }).map((_, i) => (
              <line key={i} x1={i * 25} y1="0" x2={i * 25 + 80} y2="300"/>
            ))}
          </g>
        )}
      </svg>
      <div style={{
        position: 'absolute', bottom: 16, left: 16, color: 'rgba(255,255,255,0.9)',
        fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase',
      }}>
        [ COVER · {cat} ]
      </div>
    </div>
  );
}

window.PageBlog = PageBlog;