// website/page-home.jsx — Hauptseite (Landing)

function PageHome() {
  return (
    <main>
      {/* HERO */}
      <section className="section" style={{ paddingTop: 80, paddingBottom: 64 }}>
        <div className="container page-hero-grid">
          <div>
            <div style={{ marginBottom: 24 }}>
              <SwissPill>ATS · HRIS · für Schweizer KMU</SwissPill>
            </div>
            <h1 className="h-hero" style={{ marginBottom: 24, textWrap: 'pretty' }}>
              Recruiting und<br />Mitarbeiterdaten<br />in <span className="gradient-word">einem System.</span>
            </h1>
            <p className="lead" style={{ marginBottom: 32, maxWidth: 560 }}>
              Stellen veröffentlichen, Bewerbungen managen, im Team zusammenarbeiten und Mitarbeiterdossiers führen — alles in einer Plattform. Entwickelt für Schweizer KMU.
            </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 }}>
                Funktionen erkunden <ArrowRight size={13} />
              </a>
            </div>
            <div style={{
              marginTop: 28, display: 'flex', alignItems: 'center', gap: 16,
              fontFamily: 'Inter', fontSize: 13, color: 'var(--text-sub)'
            }}>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <Check size={14} color="#16A34A" /> Daten in der Schweiz
              </div>
              <div style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--text-soft)' }}></div>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <Check size={14} color="#16A34A" /> In Tagen einsatzbereit
              </div>
              <div style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--text-soft)' }}></div>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <Check size={14} color="#16A34A" /> Kein Lock-in
              </div>
            </div>
          </div>

          <div className="hero-visual"><HomeHeroVisual /></div>
        </div>
      </section>

      {/* LOGO STRIP */}
      <section className="section tight weak" style={{ paddingTop: 48, paddingBottom: 48 }}>
        <div className="container">
          <div style={{
            textAlign: 'center',
            fontFamily: 'Poppins', fontWeight: 500, fontSize: 13,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            color: 'var(--text-sub)', marginBottom: 28
          }}>
            70+ Schweizer KMU vertrauen auf XADUNO.
          </div>
          <LogoStrip />
        </div>
      </section>

      {/* PROBLEM → SOLUTION */}
      <section className="section">
        <div className="container">
          <div style={{ maxWidth: 760, marginBottom: 64 }}>
            <div className="eyebrow">aus der praxis · für die praxis</div>
            <h2 className="h-section" style={{ fontSize: 56 }}>
              Recruiting in Schweizer KMU ist <span className="gradient-word">verstreut.</span> Wir bringen alles zusammen.
            </h2>
          </div>
          <div className="grid-3">
            {[
            { t: 'Vorher', s: 'Bewerbungen im Outlook-Postfach', d: 'CC-Ketten, vergessene Antworten, keine zentrale Übersicht.', tone: 'bad' },
            { t: 'Vorher', s: 'Mitarbeiterdaten in Excel', d: '"FINAL_v3"-Listen, Drive-Ordner, Papier-Mappen im Schrank.', tone: 'bad' },
            { t: 'Vorher', s: 'Feedback per E-Mail', d: 'Fachpersonen weiterleiten, Antworten zusammensuchen.', tone: 'bad' },
            { t: 'Mit Xaduno', s: 'Eine Pipeline. Ein Klick.', d: 'Alle Bewerbungen an einem Ort — Multiposting auf 100+ Plattformen.', tone: 'good' },
            { t: 'Mit Xaduno', s: 'Ein Dossier pro Person.', d: 'Adressen, Verträge, Dokumente, Gespräche — strukturiert und sicher.', tone: 'good' },
            { t: 'Mit Xaduno', s: 'Team-Feedback im System.', d: 'Bewerten, kommentieren, @nennen — alles am Kandidaten.', tone: 'good' }].
            map((c, i) =>
            <div key={i} className="card" style={{
              background: c.tone === 'good' ? '#FEFEFE' : '#F8FAFC',
              opacity: c.tone === 'good' ? 1 : 0.88
            }}>
                <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '3px 10px', borderRadius: 999,
                background: c.tone === 'good' ? '#E5FCED' : '#F1F5F9',
                color: c.tone === 'good' ? '#0D622C' : 'var(--text-sub)',
                fontFamily: 'Poppins', fontWeight: 600, fontSize: 10,
                letterSpacing: '0.06em', textTransform: 'uppercase',
                marginBottom: 14
              }}>{c.t}</div>
                <div style={{
                fontFamily: 'Poppins', fontWeight: 600, fontSize: 20,
                letterSpacing: '-0.015em', color: 'var(--text-strong)', marginBottom: 8
              }}>{c.s}</div>
                <div className="body" style={{ color: 'var(--text-sub)' }}>{c.d}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* FEATURE BLOCKS */}
      <section className="section weak">
        <div className="container">
          <div style={{ maxWidth: 760, marginBottom: 72 }}>
            <div className="eyebrow">das system</div>
            <h2 className="h-section">Was XADUNO. kann.</h2>
            <p className="lead" style={{ marginTop: 16, color: 'var(--text-default)', maxWidth: 640 }}>
              Drei Bereiche, ein System. Vom ersten Klick bis zum letzten Arbeitstag.
            </p>
          </div>

          <FeatureBlock
            tag="Recruiting · ATS"
            tone="#335CFF"
            title={<>Alle Bewerbungen. <span className="gradient-word">Ein Ort.</span></>}
            desc="Kandidaten-Pipeline, E-Mail direkt aus dem System, Dokumente anfordern, Team-Feedback im Profil — alles dort wo es hingehört."
            href="#ats"
            visual={<MiniPipeline />} />
          
          <FeatureBlock
            tag="Multiposting"
            tone="#6941C6"
            title={<><span className="gradient-word">Einmal erfassen.</span> Überall sichtbar.</>}
            desc="Veröffentliche deine Stelle auf 100+ Jobportalen gleichzeitig. Bestehende Verträge können direkt eingebunden werden."
            href="#multiposting"
            visual={<MiniMultiposting />}
            reverse />
          
          <FeatureBlock
            tag="Mitarbeiterdossier · HRIS"
            tone="#F97316"
            title={<>Kein Ordner. Kein Excel. <span className="gradient-word">Alles strukturiert.</span></>}
            desc="Nach der Einstellung geht's nahtlos weiter — Stammdaten, Dokumente, Mitarbeitergespräche und Notizen pro Person."
            href="#dossier"
            visual={<MiniDossier />} />
          
        </div>
      </section>

      {/* DIFFERENTIATION */}
      <section className="section">
        <div className="container">
          <div style={{ maxWidth: 760, marginBottom: 56 }}>
            <div className="eyebrow">warum xaduno?</div>
            <h2 className="h-section">Was XADUNO. anders macht.</h2>
          </div>
          <div className="grid-3">
            <FeatureItem
              icon={<IconLink2 />}
              title="Recruiting + Mitarbeiterdaten"
              desc="Die meisten Tools lösen nur einen Teil. Xaduno verbindet beides — damit du nach der Einstellung nicht wieder bei null anfängst." />
            
            <FeatureItem
              icon={<IconShield2 />}
              title="Für Schweizer KMU gebaut"
              desc="Keine internationale Suite, die angepasst wurde. Entwickelt für Schweizer Bedürfnisse, gehostet in der Schweiz." />
            
            <FeatureItem
              icon={<IconMinus />}
              title="Keine Funktionen, die du nicht brauchst"
              desc="Kein wochenlanges Aufsetzen, keine unnötige Komplexität. In Tagen einsatzbereit — verständlich für HR und Linie." />
            
          </div>
        </div>
      </section>

      {/* ÜBER UNS */}
      <section className="section weak" data-section="ueber-uns">
        <div className="container about-grid">
          <div>
            <div className="eyebrow">über sprung.</div>
            <h2 className="h-section" style={{ marginBottom: 24, fontSize: 48 }}>
              Entstanden aus <span className="gradient-word">300+ Recruiting-Projekten.</span>
            </h2>
            <p className="lead" style={{ color: 'var(--text-default)', marginBottom: 20 }}>XADUNO. begleitet seit Jahren Schweizer KMU beim Recruiting — von der Strategie bis zur Besetzung. Immer wieder das gleiche Thema: die richtigen Tools fehlen.

            </p>
            <p className="body" style={{ color: 'var(--text-sub)', marginBottom: 24 }}>
              Bestehende Lösungen sind entweder veraltet, überdimensioniert oder decken nur einen Teil ab. Daraus ist Xaduno entstanden — eine Plattform, die genau das kann, was Schweizer KMU tatsächlich brauchen. Im Wallis verwurzelt, schweizweit im Einsatz.
            </p>
            <div style={{ display: 'flex', gap: 16, marginTop: 20 }}>
              {[
              ['300+', 'KMU begleitet'],
              ['1000+', 'Kandidatengespräche'],
              ['10+', 'Jahre HR-Erfahrung']].
              map(([v, l]) =>
              <div key={l} style={{ flex: 1 }}>
                  <div style={{
                  fontFamily: 'Poppins', fontWeight: 600, fontSize: 32, lineHeight: 1,
                  letterSpacing: '-0.025em',
                  background: BRAND_GRAD, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent'
                }}>{v}</div>
                  <div style={{ fontFamily: 'Inter', fontSize: 12, color: 'var(--text-sub)', marginTop: 6 }}>{l}</div>
                </div>
              )}
            </div>
          </div>

          {/* Founder card */}
          <div style={{
            background: '#0F172A', borderRadius: 24, padding: 36,
            color: '#FEFEFE', position: 'relative', overflow: 'hidden'
          }}>
            <div style={{
              position: 'absolute', top: -120, right: -120, width: 320, height: 320,
              borderRadius: '50%', filter: 'blur(100px)', opacity: 0.45,
              background: 'radial-gradient(circle, #B45EE8 0%, #E14A8D 40%, transparent 70%)'
            }}></div>
            <div style={{ position: 'relative' }}>
              <svg width="42" height="42" viewBox="0 0 24 24" fill="none" style={{ marginBottom: 16 }}>
                <path d="M6 9 H10 V13 Q10 17 6 18 M14 9 H18 V13 Q18 17 14 18"
                stroke="url(#qg)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none" />
                <defs>
                  <linearGradient id="qg" x1="0" y1="0" x2="1" y2="1">
                    <stop offset="0%" stopColor="#B45EE8" />
                    <stop offset="100%" stopColor="#5FCAF9" />
                  </linearGradient>
                </defs>
              </svg>
              <p style={{
                fontFamily: 'Poppins', fontWeight: 500, fontSize: 22, lineHeight: 1.4,
                letterSpacing: '-0.015em', color: '#FEFEFE', margin: 0
              }}>
                In über 300 Recruiting-Projekten haben wir gesehen, was funktioniert — und was nicht. Jede Funktion in Xaduno basiert auf echtem Feedback aus dem Schweizer KMU-Alltag.
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 28 }}>
                <div style={{
                  width: 52, height: 52, borderRadius: 999, background: BRAND_GRAD,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'Poppins', fontWeight: 600, fontSize: 18, color: '#fff'
                }}>LS</div>
                <div>
                  <div style={{ fontFamily: 'Inter', fontWeight: 600, fontSize: 14 }}>Lukas Sprung</div>
                  <div style={{ fontFamily: 'Inter', fontSize: 12, color: 'rgba(254,254,254,0.65)' }}>Gründer SPRUNG. · Visp</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* PRICING TEASER */}
      <HomePricing />

      {/* FAQ */}
      <section className="section weak">
        <div className="container" style={{ maxWidth: 880 }}>
          <div style={{ maxWidth: 720, marginBottom: 40 }}>
            <div className="eyebrow">häufige fragen</div>
            <h2 className="h-section">Kurz erklärt.</h2>
          </div>
          <HomeFaq />
        </div>
      </section>

      {/* CTA */}
      <CTABlock
        headline="Bereit, dein Recruiting"
        accent="zu vereinfachen?"
        sub="In 30 Minuten zeigen wir dir Xaduno an deinem konkreten Anwendungsfall. Unverbindlich und kostenlos." />
      
    </main>);

}

// ───────── Hero visual (compact product preview) ─────────
function HomeHeroVisual() {
  return (
    <div style={{
      background: '#FEFEFE', border: '1px solid var(--stroke-soft)',
      borderRadius: 24, boxShadow: 'var(--shadow-lg)',
      padding: 18, position: 'relative'
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
        <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: 12, fontFamily: 'Inter', fontSize: 11, color: '#94A3B8' }}>
          app.xaduno.ch
        </div>
      </div>
      {/* Stats */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginBottom: 10 }}>
        {[
        ['Stellen', '12', '#335CFF'],
        ['Bewerbungen', '184', '#6941C6'],
        ['Eingestellt', '7', '#16A34A']].
        map(([l, v, c]) =>
        <div key={l} style={{
          background: '#F8FAFC', border: '1px solid #E2E8F0',
          borderRadius: 10, padding: '10px 12px'
        }}>
            <div style={{ fontFamily: 'Inter', fontSize: 10, color: '#64748B', marginBottom: 4 }}>{l}</div>
            <div style={{ fontFamily: 'Poppins', fontWeight: 600, fontSize: 22, color: c, letterSpacing: '-0.02em' }}>{v}</div>
          </div>
        )}
      </div>
      {/* Active jobs */}
      <div style={{
        background: '#FEFEFE', border: '1px solid #E2E8F0',
        borderRadius: 12, padding: 12
      }}>
        <div style={{ fontFamily: 'Poppins', fontWeight: 600, fontSize: 13, color: '#0F172A', marginBottom: 10 }}>
          Aktive Stellen
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {[
          ['Senior Product Designer', 'Zürich', '24', '#E0E9FC', '#335CFF', 'Aktiv'],
          ['Frontend Engineer', 'Remote', '41', '#E5FCED', '#16A34A', 'Aktiv'],
          ['Recruiter (m/w/d)', 'Bern', '18', '#FEEADD', '#F97316', 'Pausiert']].
          map(([t, m, a, bg, fg, s]) =>
          <div key={t} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '8px 10px',
            border: '1px solid #F1F5F9', borderRadius: 8
          }}>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'Inter', fontWeight: 600, fontSize: 11, color: '#0F172A' }}>{t}</div>
                <div style={{ fontFamily: 'Inter', fontSize: 10, color: '#64748B' }}>{m}</div>
              </div>
              <div style={{ fontFamily: 'Inter', fontSize: 10, color: '#334155' }}>
                <b>{a}</b> Bew.
              </div>
              <div style={{
              padding: '3px 8px', borderRadius: 999,
              background: bg, color: fg,
              fontFamily: 'Inter', fontSize: 9, fontWeight: 600
            }}>{s}</div>
            </div>
          )}
        </div>
      </div>
      {/* Float card */}
      <div style={{
        position: 'absolute', bottom: -28, right: -20,
        background: '#0F172A', borderRadius: 14, padding: '14px 18px',
        color: '#FEFEFE', boxShadow: '0 16px 32px -12px rgba(14,18,27,0.30)',
        display: 'flex', alignItems: 'center', gap: 12
      }}>
        <div style={{
          width: 32, height: 32, borderRadius: 999, background: BRAND_GRAD,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'Poppins', fontWeight: 600, fontSize: 11, color: '#fff'
        }}>NI</div>
        <div>
          <div style={{ fontFamily: 'Inter', fontWeight: 600, fontSize: 12 }}>Noé eingestellt 🎉</div>
          <div style={{ fontFamily: 'Inter', fontSize: 10, color: 'rgba(254,254,254,0.65)' }}>vor 2 Min.</div>
        </div>
      </div>
    </div>);

}

// ───────── Logo strip ─────────
function LogoStrip() {
  const logos = ['SIAXMA', 'ELEMENT', 'ILF', 'ASTOR KÜCHEN', 'RISI SERVICE', 'HOCHULI', 'BOCH AG', 'DINBA', 'EPLAX', 'AQUA DÄLLIKON', 'PETRO', 'SAACKE', 'SUBAG TECH', 'ALMAT AG', 'G-PHOTOS'];
  return (
    <div style={{
      display: 'flex', flexWrap: 'wrap', gap: 32, justifyContent: 'center',
      maxWidth: 1000, margin: '0 auto'
    }}>
      {logos.map((l) =>
      <div key={l} style={{
        fontFamily: 'Poppins', fontWeight: 600, fontSize: 14,
        letterSpacing: '0.08em', color: 'var(--text-sub)',
        opacity: 0.72
      }}>{l}</div>
      )}
    </div>);

}

// ───────── Feature block (alternating big section) ─────────
function FeatureBlock({ tag, tone, title, desc, href, visual, reverse }) {
  return (
    <div className="feature-block-grid">
      <div style={{ order: reverse ? 2 : 1 }}>
        <div style={{
          display: 'inline-flex', padding: '4px 10px', borderRadius: 999,
          background: `${tone}15`, color: tone,
          fontFamily: 'Poppins', fontWeight: 600, fontSize: 11,
          letterSpacing: '0.06em', textTransform: 'uppercase',
          marginBottom: 16
        }}>{tag}</div>
        <h3 className="h-section" style={{ fontSize: 44, marginBottom: 16, textWrap: 'pretty' }}>{title}</h3>
        <p className="lead" style={{ color: 'var(--text-default)', marginBottom: 22 }}>{desc}</p>
        <a href={href} style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontFamily: 'Inter', fontWeight: 600, fontSize: 14, color: tone
        }}>
          Mehr über {tag.split(' · ')[0]} <ArrowRight size={13} />
        </a>
      </div>
      <div style={{ order: reverse ? 1 : 2 }}>
        {visual}
      </div>
    </div>);

}

// ───────── Mini visuals ─────────
function MiniPipeline() {
  const cols = [
  { t: 'Neu', c: '#335CFF', bg: '#E0E9FC', n: 3 },
  { t: 'Screen', c: '#6941C6', bg: '#E5DEF5', n: 2 },
  { t: 'Interview', c: '#F97316', bg: '#FEEADD', n: 2 },
  { t: 'Hired', c: '#16A34A', bg: '#E5FCED', n: 1 }];

  return (
    <div className="card elevated" style={{ padding: 16 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 }}>
        {cols.map((col) =>
        <div key={col.t} style={{
          background: '#F8FAFC', border: '1px solid #E2E8F0',
          borderRadius: 10, padding: 10, minHeight: 170
        }}>
            <div style={{
            display: 'inline-flex', padding: '2px 8px', borderRadius: 999,
            background: col.bg, color: col.c,
            fontFamily: 'Poppins', fontWeight: 600, fontSize: 9, marginBottom: 8
          }}>{col.t}</div>
            {[...Array(col.n)].map((_, i) =>
          <div key={i} style={{
            background: '#FEFEFE', border: '1px solid #E2E8F0',
            borderRadius: 6, padding: 6, marginBottom: 4,
            display: 'flex', alignItems: 'center', gap: 5
          }}>
                <div style={{ width: 14, height: 14, borderRadius: 999, background: col.c, opacity: 0.7 }}></div>
                <div style={{ height: 5, flex: 1, background: '#E2E8F0', borderRadius: 3 }}></div>
              </div>
          )}
          </div>
        )}
      </div>
    </div>);

}

function MiniMultiposting() {
  const ps = [
  { n: 'jobs.ch', c: '#E11D48', on: true },
  { n: 'LinkedIn', c: '#0A66C2', on: true },
  { n: 'jobup.ch', c: '#0EA5E9', on: true },
  { n: 'Indeed', c: '#003A9B', on: true },
  { n: 'JobScout24', c: '#F97316', on: false },
  { n: 'XING', c: '#026466', on: true }];

  return (
    <div className="card elevated" style={{ padding: 20 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
        <div style={{ fontFamily: 'Poppins', fontWeight: 600, fontSize: 13, color: '#0F172A' }}>Plattformen wählen</div>
        <div style={{
          padding: '3px 8px', borderRadius: 999, background: '#E0E9FC', color: '#2340B3',
          fontFamily: 'Inter', fontSize: 10, fontWeight: 700
        }}>5 aktiv</div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
        {ps.map((p) =>
        <div key={p.n} style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '8px 10px', background: '#F8FAFC',
          border: '1px solid #E2E8F0', borderRadius: 8
        }}>
            <div style={{
            width: 20, height: 20, borderRadius: 5, background: p.c,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff', fontFamily: 'Poppins', fontWeight: 700, fontSize: 9
          }}>{p.n[0].toUpperCase()}</div>
            <div style={{ flex: 1, fontFamily: 'Inter', fontWeight: 600, fontSize: 11, color: '#0F172A' }}>{p.n}</div>
            {p.on ?
          <Check size={12} color="#16A34A" /> :
          <div style={{ width: 12, height: 12, borderRadius: 3, border: '1.5px solid #CBD5E1' }}></div>
          }
          </div>
        )}
      </div>
    </div>);

}

function MiniDossier() {
  return (
    <div className="card elevated" style={{ padding: 18 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14, paddingBottom: 12, borderBottom: '1px solid #F1F5F9' }}>
        <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: 14, color: '#0F172A' }}>Noé Imhof</div>
          <div style={{ fontFamily: 'Inter', fontSize: 11, color: '#64748B' }}>Software Engineer · seit 04/25</div>
        </div>
        <div style={{
          padding: '3px 8px', borderRadius: 999, background: '#E5FCED', color: '#0D622C',
          fontFamily: 'Inter', fontSize: 9, fontWeight: 700
        }}>● Aktiv</div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
        {[
        ['Pensum', '100%'],
        ['Vertrag', 'unbefristet'],
        ['Adresse', 'Visp'],
        ['Probezeit', '30.06.25']].
        map(([k, v]) =>
        <div key={k} style={{ padding: '8px 10px', background: '#F8FAFC', borderRadius: 6 }}>
            <div style={{ fontFamily: 'Inter', fontSize: 9, color: '#64748B' }}>{k}</div>
            <div style={{ fontFamily: 'Inter', fontWeight: 600, fontSize: 12, color: '#0F172A' }}>{v}</div>
          </div>
        )}
      </div>
    </div>);

}

// ───────── Home pricing teaser w/ toggle ─────────
function HomePricing() {
  const [yearly, setYearly] = React.useState(true);
  const plans = [
  {
    name: 'Starter', highlight: false,
    priceMo: 99, priceYr: 79,
    sub: 'ideal für kleine Teams',
    points: ['Bis 3 aktive Stellen', 'Multiposting', 'Kandidaten-Pipeline', 'Dossiers bis 25 MA']
  },
  {
    name: 'Wachstum', highlight: true,
    priceMo: 179, priceYr: 149,
    sub: 'für wachsende KMU',
    points: ['Unbegrenzte Stellen', 'Team-Kollaboration', 'E-Mail-Automationen', 'Mitarbeiterdossiers ∞']
  },
  {
    name: 'Enterprise', highlight: false,
    priceLabel: 'Auf Anfrage',
    sub: 'für grössere Teams',
    points: ['Alles aus Wachstum', 'API-Zugang', 'Dedizierter Support', 'SLA-Garantie']
  }];

  return (
    <section className="section">
      <div className="container">
        <div className="pricing-header-grid">
          <div>
            <div className="eyebrow">preise</div>
            <h2 className="h-section">Funktionen die du liebst. <span className="gradient-word">Preise die überzeugen.</span></h2>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{
              display: 'inline-flex', padding: 4, borderRadius: 999,
              background: '#F1F5F9', border: '1px solid var(--stroke-soft)'
            }}>
              {[
              { id: 'mo', label: 'Monatlich', on: !yearly },
              { id: 'yr', label: 'Jährlich', on: yearly }].
              map((b) =>
              <button key={b.id}
              type="button"
              onClick={() => setYearly(b.id === 'yr')}
              style={{
                padding: '8px 16px', borderRadius: 999, border: 'none',
                background: b.on ? '#FEFEFE' : 'transparent',
                boxShadow: b.on ? 'var(--shadow-xs)' : 'none',
                color: b.on ? 'var(--text-strong)' : 'var(--text-sub)',
                fontFamily: 'Inter', fontWeight: 600, fontSize: 13,
                cursor: 'pointer'
              }}>
                  {b.label}
                </button>
              )}
            </div>
            {yearly &&
            <div style={{
              padding: '6px 12px', borderRadius: 999,
              background: '#E5FCED', color: '#0D622C',
              fontFamily: 'Inter', fontWeight: 600, fontSize: 12
            }}>2 Monate gratis</div>
            }
          </div>
        </div>
        <div className="grid-3" style={{ alignItems: 'stretch', gap: 16 }}>
          {plans.map((p) =>
          <PricingTeaser key={p.name}
          name={p.name}
          price={p.priceLabel ? undefined : yearly ? p.priceYr : p.priceMo}
          priceLabel={p.priceLabel}
          sub={p.sub + (p.priceLabel ? '' : yearly ? ' · bei jährlicher Abrechnung' : ' · monatlich abgerechnet')}
          highlight={p.highlight}
          points={p.points} />

          )}
        </div>
        <div style={{ textAlign: 'center', marginTop: 32 }}>
          <a href="#preise" className="btn btn-ghost">
            Alle Preise & Features vergleichen <ArrowRight size={13} />
          </a>
        </div>
      </div>
    </section>);

}

// ───────── Pricing teaser ─────────
function PricingTeaser({ name, price, priceLabel, sub, points, highlight }) {
  return (
    <div style={{
      background: highlight ? '#0F172A' : '#FEFEFE',
      color: highlight ? '#FEFEFE' : 'var(--text-strong)',
      border: highlight ? 'none' : '1px solid var(--stroke-soft)',
      borderRadius: 20, padding: 28,
      position: 'relative', overflow: 'hidden',
      boxShadow: highlight ? '0 24px 48px -16px rgba(180,94,232,0.25)' : 'var(--shadow-xs)'
    }}>
      {highlight &&
      <div style={{
        position: 'absolute', top: -100, right: -100, width: 240, height: 240,
        borderRadius: '50%', filter: 'blur(80px)', opacity: 0.45,
        background: BRAND_GRAD_TIGHT
      }}></div>
      }
      <div style={{ position: 'relative' }}>
        <div style={{ fontFamily: 'Poppins', fontWeight: 600, fontSize: 18, marginBottom: 4 }}>{name}</div>
        <div style={{
          fontFamily: 'Inter', fontSize: 12,
          color: highlight ? 'rgba(254,254,254,0.65)' : 'var(--text-sub)',
          marginBottom: 16
        }}>{sub}</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 18 }}>
          {priceLabel ?
          <div style={{ fontFamily: 'Poppins', fontWeight: 600, fontSize: 28, letterSpacing: '-0.02em' }}>{priceLabel}</div> :

          <>
              <div style={{ fontFamily: 'Poppins', fontWeight: 600, fontSize: 32, letterSpacing: '-0.02em' }}>CHF {price}</div>
              <div style={{
              fontFamily: 'Inter', fontSize: 12,
              color: highlight ? 'rgba(254,254,254,0.55)' : 'var(--text-sub)'
            }}>/mtl.</div>
            </>
          }
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {points.map((p) =>
          <div key={p} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <Check size={12} color={highlight ? '#5FCAF9' : '#16A34A'} />
              <div style={{
              fontFamily: 'Inter', fontSize: 13,
              color: highlight ? 'rgba(254,254,254,0.85)' : 'var(--text-default)'
            }}>{p}</div>
            </div>
          )}
        </div>
      </div>
    </div>);

}

// ───────── FAQ ─────────
function HomeFaq() {
  const [open, setOpen] = React.useState(0);
  const faqs = [
  { q: 'Was ist Xaduno?', a: 'Xaduno ist ein Recruiting- und Mitarbeiter-System für Schweizer KMU. Stellenveröffentlichung, Bewerbungsmanagement, Teamzusammenarbeit und Mitarbeiterdossiers — in einer Plattform.' },
  { q: 'Für welche Unternehmen ist Xaduno gedacht?', a: 'Schweizer KMU von 5–300 Mitarbeitenden, die Bewerbungen und Mitarbeiterdaten heute über mehrere Tools (Excel, Outlook, Ordner) verwalten.' },
  { q: 'Wo werden die Daten gespeichert?', a: 'In der Schweiz. nDSG- und DSGVO-konform. Keine Datentransfers in Drittstaaten.' },
  { q: 'Wie läuft der Einstieg ab?', a: 'Nach der Demo richten wir gemeinsam deinen Account ein. Onboarding-Call, erste Stellen, Team-Einladung — in 1–2 Wochen produktiv.' },
  { q: 'Kann ich bestehende Verträge mit Jobportalen einbinden?', a: 'Ja. Bestehende Verträge bei Jobs.ch, jobup.ch oder anderen Portalen kannst du direkt in Xaduno einbinden — ohne Doppelkauf.' }];

  return (
    <div className="card" style={{ padding: '8px 8px' }}>
      {faqs.map((f, i) =>
      <div key={i} style={{ borderBottom: i < faqs.length - 1 ? '1px solid #F1F5F9' : 'none' }}>
          <button onClick={() => setOpen(open === i ? -1 : i)}
        style={{
          width: '100%', background: 'transparent', border: 'none', cursor: 'pointer',
          padding: '18px 20px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          textAlign: 'left'
        }}>
            <span style={{
            fontFamily: 'Poppins', fontWeight: 600, fontSize: 17,
            color: 'var(--text-strong)', letterSpacing: '-0.01em'
          }}>{f.q}</span>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#64748B" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
          style={{ transform: open === i ? 'rotate(180deg)' : 'none', transition: 'transform 200ms ease', flexShrink: 0 }}>
              <polyline points="6 9 12 15 18 9" />
            </svg>
          </button>
          {open === i &&
        <div style={{
          padding: '0 20px 18px',
          fontFamily: 'Inter', fontSize: 15, lineHeight: 1.6,
          color: 'var(--text-default)'
        }}>{f.a}</div>
        }
        </div>
      )}
    </div>);

}

// ───────── Icons ─────────
function IconLink2() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
    </svg>);

}
function IconShield2() {
  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 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
    </svg>);

}
function IconMinus() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9" />
      <line x1="8" y1="12" x2="16" y2="12" />
    </svg>);

}

window.PageHome = PageHome;