// website/page-ats.jsx — /funktionen/ats

function PageATS() {
  return (
    <main>
      {/* HERO */}
      <section className="section" style={{ paddingTop: 80, paddingBottom: 64 }}>
        <div className="container page-hero-grid">
          <div>
            <div style={{ marginBottom: 24 }}>
              <SwissPill>Bewerbungsmanagement · ATS</SwissPill>
            </div>
            <h1 className="h-hero" style={{ marginBottom: 24, textWrap: 'pretty' }}>
              Alle Bewerbungen.<br/>Ein Ort. <span className="gradient-word">Kein Chaos.</span>
            </h1>
            <p className="lead" style={{ marginBottom: 32, maxWidth: 540 }}>
              Bewerbungen zentral verwalten, das Team einbinden und schneller entscheiden — von der Stelle bis zur Einstellung in einer Pipeline.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
              <a href="#demo" className="btn btn-primary">Demo anfragen <ArrowRight size={13} /></a>
              <a href="#multiposting" className="body" style={{ color: 'var(--text-sub)', display: 'inline-flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
                Multiposting ansehen <ArrowRight size={13} />
              </a>
            </div>
          </div>

          {/* Pipeline mock */}
          <ATSPipelinePreview />
        </div>
      </section>

      {/* FEATURES */}
      <section className="section weak">
        <div className="container">
          <div style={{ maxWidth: 720, marginBottom: 56 }}>
            <div className="eyebrow">das kann das ats</div>
            <h2 className="h-section">Vom Eingang bis zur Einstellung — alles im Griff.</h2>
          </div>
          <div className="grid-3" style={{ gap: 20 }}>
            <FeatureItem
              icon={<IconPipeline />}
              title="Kandidaten-Pipeline"
              desc="Jeder Bewerber hat einen Status — vom Eingang bis zum Angebot. Sofort sehen, wer wo steht und was als nächstes ansteht."
            />
            <FeatureItem
              icon={<IconMail />}
              title="E-Mail direkt aus dem System"
              desc="Antworten mit Vorlagen, alles automatisch dokumentiert im Kandidatendossier. Keine Outlook-Kette mehr."
            />
            <FeatureItem
              icon={<IconUpload />}
              title="Dokumente anfordern"
              desc="Ein Klick — und der Kandidat lädt Diplom, Zeugnis oder Strafregisterauszug direkt ins Dossier hoch."
            />
            <FeatureItem
              icon={<IconTeam />}
              title="Team-Feedback im Profil"
              desc="Fachverantwortliche bewerten Kandidaten direkt am Profil. Keine E-Mails an HR weiterleiten."
            />
            <FeatureItem
              icon={<IconTask />}
              title="Aufgaben & Kommentare"
              desc="@nenne Kolleg:innen, weise Aufgaben zu, halte Notizen fest — direkt am Kandidaten oder an der Stelle."
            />
            <FeatureItem
              icon={<IconStar />}
              title="Bewertungen aggregiert"
              desc="Jedes Teammitglied vergibt Sterne, Xaduno zeigt den Konsens auf einen Blick. Klarheit statt Bauchgefühl."
            />
          </div>
        </div>
      </section>

      {/* PROCESS */}
      <section className="section">
        <div className="container">
          <div style={{ maxWidth: 720, marginBottom: 56 }}>
            <div className="eyebrow">so läuft der prozess</div>
            <h2 className="h-section">In drei Schritten zur Einstellung.</h2>
          </div>
          <StepRow steps={[
            { title: 'Stelle erfassen & veröffentlichen', desc: 'Stellenausschreibung in Minuten anlegen — Multiposting auf 100+ Plattformen mit einem Klick.' },
            { title: 'Bewerbungen eingehend',             desc: 'Alle Bewerbungen landen automatisch in deiner Pipeline — kein Posteingang-Chaos mehr.' },
            { title: 'Team bewertet, Entscheid fällt',    desc: 'Fachpersonen geben Feedback direkt im System. Konsens, Vergleich, Angebot — alles dokumentiert.' },
          ]} />
        </div>
      </section>

      {/* FOR WHOM */}
      <section className="section weak tight">
        <div className="container two-col-grid-wide">
          <div>
            <div className="eyebrow">für wen ist das?</div>
            <h3 className="h-section" style={{ fontSize: 36 }}>Für Schweizer KMU ohne grosse HR-Abteilung.</h3>
          </div>
          <p className="lead" style={{ color: 'var(--text-default)' }}>
            Wenn du Bewerbungen bisher per E-Mail oder in Excel-Listen verwaltest, dabei den Überblick verlierst und Fachverantwortliche per CC einbindest — dann ist Xaduno für dich gemacht.
          </p>
        </div>
      </section>

      {/* CTA */}
      <CTABlock
        headline="Bereit, dein Recruiting"
        accent="zu vereinfachen?"
        sub="In 30 Minuten zeigen wir dir, wie das ATS in deinem Alltag aussieht. Unverbindlich und kostenlos."
      />
    </main>
  );
}

// ───────── ATS pipeline preview ─────────
function ATSPipelinePreview() {
  const cols = [
    { t: 'Neu',         n: 24, c: '#335CFF', bg: '#E0E9FC', cards: ['Lena F.', 'Marco K.', 'Sarah V.'] },
    { t: 'Screening',   n: 11, c: '#6941C6', bg: '#E5DEF5', cards: ['Jonas B.', 'Mia H.'] },
    { t: 'Interview',   n: 6,  c: '#F97316', bg: '#FEEADD', cards: ['Anna H.', 'Tom R.'] },
    { t: 'Eingestellt', n: 1,  c: '#16A34A', bg: '#E5FCED', cards: ['Noé I.'] },
  ];
  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 · Pipeline · Senior Product Designer
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
        {cols.map(col => (
          <div key={col.t} style={{
            background: '#F8FAFC', border: '1px solid #E2E8F0', borderRadius: 12, padding: 10,
            display: 'flex', flexDirection: 'column', gap: 6, minHeight: 240,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 2 }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 4,
                padding: '3px 8px', borderRadius: 999, background: col.bg, color: col.c,
                fontFamily: 'Poppins', fontWeight: 600, fontSize: 10,
              }}>{col.t}</div>
              <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 10, color: '#64748B' }}>{col.n}</div>
            </div>
            {col.cards.map((name, i) => (
              <div key={i} style={{
                background: '#FEFEFE', border: '1px solid #E2E8F0',
                borderRadius: 8, padding: '8px 8px',
                display: 'flex', alignItems: 'center', gap: 6,
              }}>
                <div style={{
                  width: 18, height: 18, borderRadius: 999, background: col.c,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: '#fff', fontFamily: 'Poppins', fontWeight: 600, fontSize: 8,
                }}>{name.split(' ').map(p => p[0]).join('').slice(0, 2)}</div>
                <div style={{
                  fontFamily: 'Inter', fontWeight: 500, fontSize: 10, color: '#0F172A',
                  whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                }}>{name}</div>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

// ───────── Icons (24px, 1.5 stroke — Teenyicons style) ─────────
function IconPipeline() {
  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="4" width="5" height="16" rx="1.5"/>
      <rect x="9.5" y="4" width="5" height="11" rx="1.5"/>
      <rect x="16" y="4" width="5" height="7" rx="1.5"/>
    </svg>
  );
}
function IconMail() {
  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"/>
      <path d="M3 7l9 6 9-6"/>
    </svg>
  );
}
function IconUpload() {
  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 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
      <polyline points="17 8 12 3 7 8"/>
      <line x1="12" y1="3" x2="12" y2="15"/>
    </svg>
  );
}
function IconTeam() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
      <circle cx="9" cy="7" r="4"/>
      <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
      <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
    </svg>
  );
}
function IconTask() {
  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="4" width="18" height="16" rx="2"/>
      <polyline points="8 11 11 14 16 9"/>
    </svg>
  );
}
function IconStar() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
    </svg>
  );
}

window.PageATS = PageATS;