// website/page-uns.jsx — Über uns (Xaduno)

function PageUns() {
  return (
    <main>
      {/* HERO */}
      <section className="section" style={{ paddingTop: 80, paddingBottom: 48 }}>
        <div className="container page-hero-grid">
          <div>
            <div style={{ marginBottom: 24 }}>
              <SwissPill>Über Xaduno</SwissPill>
            </div>
            <h1 className="h-hero" style={{ marginBottom: 24, textWrap: 'pretty', fontSize: 72 }}>
              Aus der Praxis. <span className="gradient-word">Für die Praxis.</span>
            </h1>
            <p className="lead" style={{ marginBottom: 32, maxWidth: 540 }}>
              Xaduno entstand aus über 300 Recruiting-Projekten mit Schweizer KMU. Jede Funktion basiert auf echtem Feedback aus dem Alltag — kein Funktions-Overkill, keine internationale Suite, die angepasst wurde.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
              <a href="#demo" className="btn btn-primary">Demo anfragen <ArrowRight size={13} /></a>
              <a href="#kontakt" className="body" style={{ color: 'var(--text-sub)', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                Kontakt aufnehmen <ArrowRight size={13} />
              </a>
            </div>
          </div>

          {/* Numbers 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' }}>
              <div className="eyebrow on-dark" style={{ marginBottom: 24 }}>im einsatz</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
                {[
                  ['70+',   'Schweizer KMU'],
                  ['300+',  'Recruiting-Projekte'],
                  ['1000+', 'Kandidatengespräche'],
                  ['10+',   'Jahre HR-Erfahrung'],
                ].map(([v, l]) => (
                  <div key={l}>
                    <div style={{
                      fontFamily: 'Poppins', fontWeight: 600, fontSize: 44, lineHeight: 1,
                      letterSpacing: '-0.025em',
                      background: BRAND_GRAD, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
                    }}>{v}</div>
                    <div style={{ fontFamily: 'Inter', fontSize: 13, color: 'rgba(254,254,254,0.7)', marginTop: 8 }}>{l}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* STORY */}
      <section className="section weak">
        <div className="container">
          <div style={{ maxWidth: 760, marginBottom: 56 }}>
            <div className="eyebrow">wie xaduno entstanden ist</div>
            <h2 className="h-section">Erst implementiert, dann selbst gebaut.</h2>
          </div>
          <div className="grid-3">
            {[
              {
                n: '01',
                t: 'Recruiting im Alltag begleiten',
                d: 'SPRUNG. — die Firma hinter Xaduno — begleitet seit Jahren Schweizer KMU beim Recruiting. Von der Strategie bis zur Besetzung. Über 300 Projekte. 1000+ Kandidatengespräche.',
              },
              {
                n: '02',
                t: 'Bestehende Tools getestet',
                d: 'Gemeinsam mit unseren Kunden haben wir Recruiting-Lösungen implementiert. Das Fazit war immer ähnlich: veraltet, überdimensioniert oder unvollständig.',
              },
              {
                n: '03',
                t: 'Xaduno entstanden',
                d: 'Ende 2024 begannen wir Xaduno zu entwickeln — von Tag eins direkt mit unseren Kunden getestet. Jede Funktion basiert auf echtem KMU-Alltag.',
              },
            ].map((s) => (
              <div key={s.n} className="card">
                <div style={{
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  width: 36, height: 36, borderRadius: 999,
                  background: BRAND_GRAD, color: '#FEFEFE',
                  fontFamily: 'Poppins', fontWeight: 600, fontSize: 14,
                  marginBottom: 18,
                }}>{s.n}</div>
                <div className="h-card" style={{ marginBottom: 8 }}>{s.t}</div>
                <div className="body" style={{ color: 'var(--text-sub)' }}>{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FOUNDER QUOTE */}
      <section className="section">
        <div className="container two-col-grid">
          <div>
            <div className="eyebrow">gründer-perspektive</div>
            <h2 className="h-section" style={{ fontSize: 44, marginBottom: 24 }}>
              Wir bauen Xaduno für die <span className="gradient-word">KMU, die wir kennen.</span>
            </h2>
            <p className="lead" style={{ color: 'var(--text-default)', marginBottom: 16 }}>
              Im Wallis verwurzelt, schweizweit im Einsatz. Wir reden mit unseren Kunden — wöchentlich, nicht quartalsweise. Was nicht funktioniert, fliegt wieder raus.
            </p>
          </div>

          <div style={{
            background: '#0F172A', borderRadius: 24, padding: 40,
            color: '#FEFEFE', position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', top: -120, right: -120, width: 360, height: 360,
              borderRadius: '50%', filter: 'blur(100px)', opacity: 0.4,
              background: 'radial-gradient(circle, #B45EE8 0%, #5FCAF9 50%, transparent 80%)',
            }}></div>
            <div style={{ position: 'relative' }}>
              <svg width="42" height="42" viewBox="0 0 24 24" fill="none" style={{ marginBottom: 18 }}>
                <path d="M6 9 H10 V13 Q10 17 6 18 M14 9 H18 V13 Q18 17 14 18"
                  stroke="url(#qg-us)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
                <defs>
                  <linearGradient id="qg-us" 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: 24, lineHeight: 1.4,
                letterSpacing: '-0.015em', color: '#FEFEFE', margin: 0,
              }}>
                Es gibt genug Recruiting-Tools. Aber kein Schweizer KMU braucht 200 Features, die es nie verwendet. Wir bauen das, was wirklich gebraucht wird — und nichts darüber hinaus.
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 32 }}>
                <div style={{
                  width: 56, height: 56, 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: 15 }}>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>

      {/* VALUES */}
      <section className="section weak">
        <div className="container">
          <div style={{ maxWidth: 760, marginBottom: 56 }}>
            <div className="eyebrow">unsere prinzipien</div>
            <h2 className="h-section">Was uns wichtig ist.</h2>
          </div>
          <div className="grid-3">
            <FeatureItem
              icon={<UnsIconFlag />}
              title="Schweiz first"
              desc="Hosting in der Schweiz. Schweizer Recht. Schweizer Support. Keine Datentransfers in Drittstaaten. Wir bauen für hier."
            />
            <FeatureItem
              icon={<UnsIconHand />}
              title="Aus echtem Feedback"
              desc="Jede Funktion entsteht aus realem KMU-Alltag. Was unsere Kunden nicht brauchen, kommt nicht rein."
            />
            <FeatureItem
              icon={<UnsIconBox />}
              title="Kein Lock-in"
              desc="Deine Daten gehören dir. Bei Kündigung erhältst du einen vollständigen, strukturierten Export — ohne Diskussion."
            />
          </div>
        </div>
      </section>

      {/* CTA */}
      <CTABlock
        headline="Lass uns reden."
        accent="Persönlich aus Visp."
        sub="Egal ob du Xaduno testen, eine Frage stellen oder einfach Hallo sagen willst — wir sind erreichbar."
      />
    </main>
  );
}

function UnsIconFlag() {
  return (
    <svg width="24" height="24" viewBox="0 0 32 32" aria-hidden="true">
      <rect width="32" height="32" rx="6" 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>
  );
}
function UnsIconHand() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 11V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0"/>
      <path d="M14 10V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v2"/>
      <path d="M10 10.5V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v8"/>
      <path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/>
    </svg>
  );
}
function UnsIconBox() {
  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 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
      <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
      <line x1="12" y1="22.08" x2="12" y2="12"/>
    </svg>
  );
}

window.PageUns = PageUns;