// website/page-dossier.jsx — /funktionen/mitarbeiterdossier

function PageDossier() {
  return (
    <main>
      {/* HERO */}
      <section className="section" style={{ paddingTop: 80, paddingBottom: 64 }}>
        <div className="container page-hero-grid">
          <div>
            <div style={{ marginBottom: 24 }}>
              <SwissPill>Mitarbeiterdossier · HRIS</SwissPill>
            </div>
            <h1 className="h-hero" style={{ marginBottom: 24, textWrap: 'pretty' }}>
              Kein Ordner. Kein Excel.<br/><span className="gradient-word">Alles an einem Ort.</span>
            </h1>
            <p className="lead" style={{ marginBottom: 32, maxWidth: 540 }}>
              Mitarbeiterdaten, Dokumente und Jahresgespräche strukturiert führen — von der Einstellung bis zum letzten Arbeitstag.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
              <a href="#demo" className="btn btn-primary">Demo anfragen <ArrowRight size={13} /></a>
              <a href="#ats" className="body" style={{ color: 'var(--text-sub)', display: 'inline-flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
                Zum ATS <ArrowRight size={13} />
              </a>
            </div>
          </div>

          <DossierPreview />
        </div>
      </section>

      {/* FEATURES */}
      <section className="section weak">
        <div className="container">
          <div style={{ maxWidth: 720, marginBottom: 56 }}>
            <div className="eyebrow">was im dossier drin ist</div>
            <h2 className="h-section">Vier Bereiche. Eine Akte pro Person.</h2>
          </div>
          <div className="grid-2" style={{ gap: 20 }}>
            <FeatureItem
              icon={<IconID />}
              title="Mitarbeiterdaten"
              desc="Stammdaten, Kontakt, Eintritt, Pensum, Anstellungsverhältnis. Strukturiert erfasst, einfach aktualisiert — die Quelle der Wahrheit."
            />
            <FeatureItem
              icon={<IconDoc />}
              title="Dokumente"
              desc="Arbeitsvertrag, Reglemente, Zertifikate, Lohnausweise — alles an einem Ort. Durchsuchbar, versioniert, sicher abgelegt."
            />
            <FeatureItem
              icon={<IconChat />}
              title="Mitarbeitergespräche"
              desc="Jahresgespräche, Standortbestimmungen, Probezeit-Reviews — strukturiert dokumentiert mit Zielen, Notizen und Entscheiden."
            />
            <FeatureItem
              icon={<IconNote />}
              title="Notizen pro Mitarbeiter"
              desc="Kurze Gedanken, wichtige Hinweise, Erinnerungen — alles, was sonst auf Post-it Notes landet, gehört ins Dossier."
            />
          </div>
        </div>
      </section>

      {/* SEAMLESS TRANSITION */}
      <section className="section">
        <div className="container two-col-grid">
          <div>
            <div className="eyebrow">nahtloser übergang</div>
            <h3 className="h-section" style={{ fontSize: 44, marginBottom: 20 }}>
              Aus Bewerber wird <span className="gradient-word">Mitarbeiter:in.</span>
            </h3>
            <p className="lead" style={{ color: 'var(--text-default)' }}>
              Nach der Einstellung geht es direkt weiter — aus dem Kandidatenprofil im ATS wird automatisch ein Mitarbeiterdossier. Adressen, Dokumente, CV: alles wandert mit. Kein doppeltes Erfassen.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 24 }}>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 999, background: '#E5FCED', color: '#0D622C', fontFamily: 'Inter', fontWeight: 600, fontSize: 12 }}>
                <Check size={12} color="#16A34A" /> Stammdaten übernommen
              </div>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 999, background: '#E5FCED', color: '#0D622C', fontFamily: 'Inter', fontWeight: 600, fontSize: 12 }}>
                <Check size={12} color="#16A34A" /> Dokumente migriert
              </div>
            </div>
          </div>

          <TransitionPreview />
        </div>
      </section>

      {/* SIZED RIGHT */}
      <section className="section weak tight">
        <div className="container two-col-grid">
          <div>
            <div className="eyebrow">für 5 bis 300 mitarbeitende</div>
            <h3 className="h-section" style={{ fontSize: 36 }}>Wächst mit deinem Team.</h3>
          </div>
          <p className="lead" style={{ color: 'var(--text-default)' }}>
            Funktioniert für kleine Teams genauso wie für wachsende KMU. Kein wochenlanges Setup, keine 200-seitige Konfigurations-Spec — du legst los, und das Dossier füllt sich mit jedem neuen Mitarbeitenden.
          </p>
        </div>
      </section>

      {/* DATEN IN CH */}
      <section className="section">
        <div className="container">
          <div style={{ maxWidth: 720, marginBottom: 48 }}>
            <div className="eyebrow">daten in der schweiz</div>
            <h2 className="h-section">Deine Personalakte gehört dir.</h2>
          </div>
          <div className="grid-3">
            <div className="card">
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: '#F8D6D6', color: '#DC2626',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 18,
              }}>
                <svg width="22" height="22" viewBox="0 0 32 32" aria-hidden="true">
                  <rect width="32" height="32" rx="4" fill="#DC2626"/>
                  <rect x="13" y="6" width="6" height="20" fill="#FEFEFE"/>
                  <rect x="6" y="13" width="20" height="6" fill="#FEFEFE"/>
                </svg>
              </div>
              <div className="h-card" style={{ marginBottom: 8 }}>Hosting in der Schweiz</div>
              <div className="body" style={{ color: 'var(--text-sub)' }}>
                Server in Zürich, Schweizer Recht, nDSG/DSGVO konform. Keine Datentransfers in Drittstaaten.
              </div>
            </div>
            <div className="card">
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: '#E0E9FC', color: '#335CFF',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 18,
              }}>
                <IconLock />
              </div>
              <div className="h-card" style={{ marginBottom: 8 }}>Granulare Berechtigungen</div>
              <div className="body" style={{ color: 'var(--text-sub)' }}>
                Zugriff nur für berechtigte Personen. HR sieht alles, die Linie nur ihr Team — saubere Trennung von Rollen.
              </div>
            </div>
            <div className="card">
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: '#E5DEF5', color: '#6941C6',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 18,
              }}>
                <IconExport />
              </div>
              <div className="h-card" style={{ marginBottom: 8 }}>Daten gehören dem Unternehmen</div>
              <div className="body" style={{ color: 'var(--text-sub)' }}>
                Bei Kündigung vollständiger Export aller Daten — strukturiert, ohne Lock-in.
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <CTABlock
        headline="Personalakten neu gedacht."
        accent="Heute starten."
        sub="In der Demo zeigen wir dir das Dossier am konkreten Beispiel — mit deinen Anforderungen."
      />
    </main>
  );
}

// ───────── Dossier preview ─────────
function DossierPreview() {
  return (
    <div style={{
      background: '#FEFEFE', border: '1px solid var(--stroke-soft)',
      borderRadius: 24, boxShadow: 'var(--shadow-lg)', padding: 22,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
        <div style={{ width: 8, height: 8, borderRadius: 999, background: '#E2E8F0' }}></div>
        <div style={{ width: 8, height: 8, borderRadius: 999, background: '#E2E8F0' }}></div>
        <div style={{ width: 8, height: 8, borderRadius: 999, background: '#E2E8F0' }}></div>
        <div style={{ marginLeft: 14, fontFamily: 'Inter', fontSize: 12, color: '#94A3B8' }}>
          app.xaduno.ch · Dossier · N. Imhof
        </div>
      </div>
      {/* Profile header */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12,
        padding: '14px 16px',
        background: '#F8FAFC', border: '1px solid #E2E8F0', borderRadius: 12,
        marginBottom: 12,
      }}>
        <div style={{
          width: 44, height: 44, borderRadius: 999, background: BRAND_GRAD,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', fontFamily: 'Poppins', fontWeight: 600, fontSize: 14,
        }}>NI</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'Poppins', fontWeight: 600, fontSize: 15, color: '#0F172A' }}>Noé Imhof</div>
          <div style={{ fontFamily: 'Inter', fontSize: 12, color: '#64748B' }}>Software Engineer · seit 01.04.2025</div>
        </div>
        <div style={{
          padding: '4px 10px', borderRadius: 999,
          background: '#E5FCED', color: '#0D622C',
          fontFamily: 'Inter', fontSize: 10, fontWeight: 700,
        }}>● Aktiv</div>
      </div>
      {/* Tabs */}
      <div style={{ display: 'flex', gap: 14, borderBottom: '1px solid #F1F5F9', marginBottom: 10 }}>
        {['Stammdaten', 'Dokumente', 'Gespräche', 'Notizen'].map((t, i) => (
          <div key={t} style={{
            padding: '8px 0',
            borderBottom: i === 0 ? '2px solid #335CFF' : '2px solid transparent',
            fontFamily: 'Inter', fontWeight: i === 0 ? 600 : 500, fontSize: 12,
            color: i === 0 ? '#335CFF' : '#64748B',
          }}>{t}</div>
        ))}
      </div>
      {/* Body */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {[
          ['Geburtsdatum', '14.07.1992'],
          ['AHV-Nummer', '756.•••• ••••'],
          ['Pensum', '100% · 42h'],
          ['Adresse', 'Bahnhofstr. 12, Visp'],
          ['Vertrag', 'unbefristet'],
          ['Probezeit', 'bis 30.06.25'],
        ].map(([k, v]) => (
          <div key={k} style={{
            padding: '10px 12px', background: '#F8FAFC',
            border: '1px solid #E2E8F0', borderRadius: 8,
          }}>
            <div style={{ fontFamily: 'Inter', fontSize: 10, color: '#64748B', marginBottom: 2 }}>{k}</div>
            <div style={{ fontFamily: 'Inter', fontWeight: 600, fontSize: 12, color: '#0F172A' }}>{v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ───────── Transition preview ─────────
function TransitionPreview() {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 14, alignItems: 'center',
    }}>
      {/* Bewerber */}
      <div style={{
        background: '#FEFEFE', border: '1px solid var(--stroke-soft)',
        borderRadius: 16, padding: 16, boxShadow: 'var(--shadow-xs)',
      }}>
        <div style={{
          display: 'inline-flex', padding: '3px 8px', borderRadius: 999,
          background: '#E0E9FC', color: '#2340B3',
          fontFamily: 'Poppins', fontWeight: 600, fontSize: 10,
          marginBottom: 10,
        }}>ATS · Bewerber</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 32, height: 32, borderRadius: 999, background: BRAND_GRAD,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff', fontFamily: 'Poppins', fontWeight: 600, fontSize: 11,
          }}>NI</div>
          <div>
            <div style={{ fontFamily: 'Inter', fontWeight: 600, fontSize: 12, color: '#0F172A' }}>Noé Imhof</div>
            <div style={{ fontFamily: 'Inter', fontSize: 10, color: '#64748B' }}>Software Engineer</div>
          </div>
        </div>
      </div>
      {/* Arrow */}
      <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
        <defs>
          <linearGradient id="argd-ds" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#B45EE8"/>
            <stop offset="100%" stopColor="#E14A8D"/>
          </linearGradient>
        </defs>
        <path d="M8 18 L28 18 M20 10 L28 18 L20 26" stroke="url(#argd-ds)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
      </svg>
      {/* Mitarbeiter */}
      <div style={{
        background: '#0F172A', borderRadius: 16, padding: 16, color: '#FEFEFE',
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', top: -40, right: -40, width: 120, height: 120,
          borderRadius: '50%', filter: 'blur(50px)', opacity: 0.6,
          background: BRAND_GRAD_TIGHT,
        }}></div>
        <div style={{
          position: 'relative',
          display: 'inline-flex', padding: '3px 8px', borderRadius: 999,
          background: 'rgba(254,254,254,0.10)',
          fontFamily: 'Poppins', fontWeight: 600, fontSize: 10,
          marginBottom: 10,
        }}>HRIS · Mitarbeiter:in</div>
        <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 32, height: 32, borderRadius: 999, background: BRAND_GRAD,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff', fontFamily: 'Poppins', fontWeight: 600, fontSize: 11,
          }}>NI</div>
          <div>
            <div style={{ fontFamily: 'Inter', fontWeight: 600, fontSize: 12 }}>Noé Imhof</div>
            <div style={{ fontFamily: 'Inter', fontSize: 10, color: 'rgba(254,254,254,0.65)' }}>seit 01.04.2025</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ───────── Icons ─────────
function IconID() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="14" rx="2"/>
      <circle cx="9" cy="11" r="2.5"/>
      <line x1="14" y1="10" x2="18" y2="10"/>
      <line x1="14" y1="14" x2="18" y2="14"/>
    </svg>
  );
}
function IconDoc() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
      <polyline points="14 2 14 8 20 8"/>
      <line x1="8" y1="13" x2="16" y2="13"/>
      <line x1="8" y1="17" x2="14" y2="17"/>
    </svg>
  );
}
function IconChat() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
    </svg>
  );
}
function IconNote() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 20h9"/>
      <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
    </svg>
  );
}
function IconLock() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="11" width="18" height="11" rx="2"/>
      <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
    </svg>
  );
}
function IconExport() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7"/>
      <polyline points="16 6 12 2 8 6"/>
      <line x1="12" y1="2" x2="12" y2="15"/>
    </svg>
  );
}

window.PageDossier = PageDossier;