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

function PageMultiposting() {
  return (
    <main>
      {/* HERO */}
      <section className="section" style={{ paddingTop: 80, paddingBottom: 64 }}>
        <div className="container page-hero-grid">
          <div>
            <div style={{ marginBottom: 24 }}>
              <SwissPill>Multiposting · 100+ Plattformen</SwissPill>
            </div>
            <h1 className="h-hero" style={{ marginBottom: 24, textWrap: 'pretty' }}>
              Einmal erfassen. <span className="gradient-word">Überall sichtbar.</span>
            </h1>
            <p className="lead" style={{ marginBottom: 32, maxWidth: 540 }}>
              Stelle einmal anlegen, auf allen relevanten Jobportalen gleichzeitig veröffentlichen. Kein separates Login, kein manuelles Kopieren.
            </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' }}>
                Zurück zum ATS <ArrowRight size={13} />
              </a>
            </div>
          </div>

          <MultipostingSetupPreview />
        </div>
      </section>

      {/* TRUST BLOCK */}
      <section className="section tight" style={{ paddingTop: 16, paddingBottom: 48 }}>
        <div className="container">
          <div className="trust-block-grid" style={{
            background: '#0F172A', borderRadius: 24, padding: '36px 40px',
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', top: -100, right: -100, width: 320, height: 320,
              borderRadius: '50%', filter: 'blur(100px)', opacity: 0.4,
              background: 'radial-gradient(circle, #B45EE8 0%, #E14A8D 40%, transparent 70%)',
            }}></div>
            <div style={{ position: 'relative' }}>
              <div className="eyebrow on-dark" style={{ marginBottom: 12 }}>enterprise-reichweite</div>
              <div style={{
                fontFamily: 'Poppins', fontWeight: 500, fontSize: 32, lineHeight: 1.15,
                letterSpacing: '-0.02em', color: '#FEFEFE', marginBottom: 12,
                textWrap: 'pretty',
              }}>
                Dieselbe Stellenreichweite wie <span className="gradient-word">SAP SuccessFactors, SmartRecruiters oder Onlyfy</span> — zum KMU-Preis.
              </div>
              <p style={{
                fontFamily: 'Inter', fontSize: 16, lineHeight: 1.55, letterSpacing: '-0.01em',
                color: 'rgba(254,254,254,0.7)', margin: 0, maxWidth: 680,
              }}>
                Xaduno greift auf dieselbe Multiposting-Infrastruktur zu wie führende Enterprise-Recruiting-Plattformen. Gleiche Reichweite, ohne den Enterprise-Overhead.
              </p>
            </div>
            <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 160 }}>
              <div style={{
                background: 'rgba(254,254,254,0.06)',
                border: '1px solid rgba(254,254,254,0.12)',
                borderRadius: 14, padding: '14px 18px',
              }}>
                <div style={{ fontFamily: 'Poppins', fontWeight: 600, fontSize: 28, color: '#FEFEFE', letterSpacing: '-0.02em' }}>100+</div>
                <div style={{ fontFamily: 'Inter', fontSize: 11, color: 'rgba(254,254,254,0.65)' }}>Plattformen</div>
              </div>
              <div style={{
                background: 'rgba(254,254,254,0.06)',
                border: '1px solid rgba(254,254,254,0.12)',
                borderRadius: 14, padding: '14px 18px',
              }}>
                <div style={{ fontFamily: 'Poppins', fontWeight: 600, fontSize: 28, color: '#FEFEFE', letterSpacing: '-0.02em' }}>1 Klick</div>
                <div style={{ fontFamily: 'Inter', fontSize: 11, color: 'rgba(254,254,254,0.65)' }}>statt 10 Logins</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* PLATFORM GRID */}
      <section className="section weak">
        <div className="container">
          <div style={{ maxWidth: 720, marginBottom: 48 }}>
            <div className="eyebrow">unterstützte plattformen</div>
            <h2 className="h-section">Wo deine Stelle erscheint.</h2>
            <p className="lead" style={{ marginTop: 16, color: 'var(--text-default)' }}>
              Schweizer Jobportale, internationale Netzwerke, branchenspezifische Boards — wir sind angeschlossen, wo deine Kandidaten sind.
            </p>
          </div>
          <PlatformGrid />
        </div>
      </section>

      {/* PROCESS */}
      <section className="section">
        <div className="container">
          <div style={{ maxWidth: 720, marginBottom: 56 }}>
            <div className="eyebrow">so funktioniert's</div>
            <h2 className="h-section">Eine Stelle. Drei Schritte. Live.</h2>
          </div>
          <StepRow steps={[
            { title: 'Stelle in Xaduno anlegen',                 desc: 'Titel, Beschreibung, Konditionen — einmal erfassen. Vorlagen helfen, wiederkehrende Stellen schneller zu publizieren.' },
            { title: 'Plattformen auswählen',                    desc: 'Aktive Verträge importieren oder über Xaduno neue Kanäle dazubuchen. Mit Häkchen statt zehn Logins.' },
            { title: 'Veröffentlichen — ein Klick',              desc: 'Deine Stelle erscheint zeitgleich auf allen ausgewählten Plattformen. Bewerbungen landen direkt in Xaduno.' },
          ]} />
        </div>
      </section>

      {/* BRING YOUR CONTRACTS */}
      <section className="section weak tight">
        <div className="container two-col-grid">
          <div style={{
            background: '#FEFEFE', border: '1px solid var(--stroke-soft)',
            borderRadius: 20, padding: 28, boxShadow: 'var(--shadow-xs)',
          }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>bestehende verträge</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                ['Jobs.ch · Premium', 'aktiv bis 12/2025', '#16A34A'],
                ['LinkedIn · Recruiter Lite', 'aktiv', '#16A34A'],
                ['jobup.ch · Standard', 'aktiv bis 06/2026', '#16A34A'],
              ].map(([n, s, c]) => (
                <div key={n} style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  padding: '12px 16px',
                  background: '#F8FAFC', border: '1px solid var(--stroke-soft)', borderRadius: 12,
                }}>
                  <div>
                    <div style={{ fontFamily: 'Inter', fontWeight: 600, fontSize: 13, color: 'var(--text-strong)' }}>{n}</div>
                    <div style={{ fontFamily: 'Inter', fontSize: 11, color: 'var(--text-sub)' }}>{s}</div>
                  </div>
                  <div style={{
                    display: 'inline-flex', alignItems: 'center', gap: 6,
                    fontFamily: 'Inter', fontSize: 11, color: c, fontWeight: 600,
                  }}>
                    <Check size={12} color={c} /> übernommen
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div>
            <div className="eyebrow">bestehende verträge mitbringen</div>
            <h3 className="h-section" style={{ fontSize: 36, marginBottom: 16 }}>Kein Doppelkauf. Keine Doppelarbeit.</h3>
            <p className="lead" style={{ color: 'var(--text-default)' }}>
              Wer bereits Verträge bei Jobs.ch, jobup.ch oder anderen Portalen hat, kann diese direkt in Xaduno einbinden. Du nutzt weiterhin deine Kontingente — wir kümmern uns um die Verteilung.
            </p>
          </div>
        </div>
      </section>

      {/* CTA */}
      <CTABlock
        headline="Eine Stelle. 100+ Plattformen."
        accent="Ein Klick."
        sub="Wir zeigen dir in der Demo, wie das Multiposting in deinem Workflow aussieht — mit deinen bestehenden Verträgen."
      />
    </main>
  );
}

// ───────── Multiposting setup preview ─────────
function MultipostingSetupPreview() {
  const sel = [
    { n: 'jobs.ch',    c: '#E11D48', s: true },
    { n: 'jobup.ch',   c: '#0EA5E9', s: true },
    { n: 'LinkedIn',   c: '#0A66C2', s: true },
    { n: 'Indeed',     c: '#003A9B', s: true },
    { n: 'JobScout24', c: '#F97316', s: true },
    { n: 'Stepstone',  c: '#0099CC', s: false },
    { n: 'XING',       c: '#026466', s: true },
    { n: 'Glassdoor',  c: '#0CAA41', s: false },
  ];
  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 · Multiposting
        </div>
      </div>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14,
      }}>
        <div style={{ fontFamily: 'Poppins', fontWeight: 600, fontSize: 14, color: '#0F172A' }}>
          Plattformen für „Senior Product Designer"
        </div>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '4px 10px', borderRadius: 999,
          background: '#E0E9FC', color: '#2340B3',
          fontFamily: 'Inter', fontSize: 11, fontWeight: 700,
        }}>{sel.filter(s => s.s).length} ausgewählt</div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
        {sel.map((p) => (
          <div key={p.n} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '10px 12px',
            background: p.s ? '#F8FAFC' : '#FEFEFE',
            border: '1px solid', borderColor: p.s ? '#E2E8F0' : '#E2E8F0',
            borderRadius: 10,
          }}>
            <div style={{
              width: 24, height: 24, borderRadius: 6, background: p.c,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#fff', fontFamily: 'Poppins', fontWeight: 700, fontSize: 11,
            }}>{p.n[0].toUpperCase()}</div>
            <div style={{
              flex: 1, fontFamily: 'Inter', fontWeight: 600, fontSize: 12, color: '#0F172A',
            }}>{p.n}</div>
            {p.s
              ? <Check size={14} color="#16A34A" />
              : <div style={{ width: 14, height: 14, borderRadius: 4, border: '1.5px solid #CBD5E1' }}></div>
            }
          </div>
        ))}
      </div>
      <button style={{
        marginTop: 14, width: '100%',
        background: BRAND_GRAD, color: '#fff', border: 'none',
        padding: '12px 16px', borderRadius: 10,
        fontFamily: 'Poppins', fontWeight: 600, fontSize: 13,
        cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      }}>
        Auf 6 Plattformen veröffentlichen <ArrowRight size={13} />
      </button>
    </div>
  );
}

// ───────── Platform grid (wordmark chips, not real logos) ─────────
function PlatformGrid() {
  const tiles = [
    { n: 'jobs.ch',    c: '#E11D48' },
    { n: 'jobup.ch',   c: '#0EA5E9' },
    { n: 'LinkedIn',   c: '#0A66C2' },
    { n: 'Indeed',     c: '#003A9B' },
    { n: 'JobScout24', c: '#F97316' },
    { n: 'Monster',    c: '#6E40C9' },
    { n: 'Glassdoor',  c: '#0CAA41' },
    { n: 'XING',       c: '#026466' },
    { n: 'Stepstone',  c: '#0099CC' },
    { n: 'topjobs.ch', c: '#0F172A' },
    { n: 'jobchannel', c: '#6941C6' },
    { n: 'und 90+ weitere', c: '#94A3B8', muted: true },
  ];
  return (
    <div className="platform-grid">
      {tiles.map((t) => (
        <div key={t.n} style={{
          background: '#FEFEFE', border: '1px solid var(--stroke-soft)',
          borderRadius: 14, padding: '20px 22px',
          display: 'flex', alignItems: 'center', gap: 14,
          boxShadow: 'var(--shadow-xs)',
        }}>
          {!t.muted ? (
            <div style={{
              width: 36, height: 36, borderRadius: 10, background: t.c,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#fff', fontFamily: 'Poppins', fontWeight: 700, fontSize: 15,
              flexShrink: 0,
            }}>{t.n[0].toUpperCase()}</div>
          ) : (
            <div style={{
              width: 36, height: 36, borderRadius: 10,
              background: '#F1F5F9',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#64748B', fontFamily: 'Poppins', fontWeight: 700, fontSize: 18,
              flexShrink: 0,
            }}>+</div>
          )}
          <div style={{
            fontFamily: 'Poppins', fontWeight: 600, fontSize: 15,
            color: t.muted ? 'var(--text-sub)' : 'var(--text-strong)',
            letterSpacing: '-0.01em',
          }}>{t.n}</div>
        </div>
      ))}
    </div>
  );
}

window.PageMultiposting = PageMultiposting;