// website/page-demo.jsx — Demo anfragen (Close CRM Form)

function PageDemo() {
  return (
    <main>
      {/* HERO */}
      <section className="section" style={{ paddingTop: 80, paddingBottom: 48 }}>
        <div className="container" style={{ textAlign: 'center', maxWidth: 880 }}>
          <div style={{ display: 'inline-block', marginBottom: 24 }}>
            <SwissPill>Demo · 30 Minuten · unverbindlich</SwissPill>
          </div>
          <h1 className="h-hero" style={{ marginBottom: 20, textWrap: 'pretty', fontSize: 64 }}>
            Lass uns Xaduno an <span className="gradient-word">deinem Use-Case</span> zeigen.
          </h1>
          <p className="lead" style={{ maxWidth: 640, margin: '0 auto' }}>
            Wir nehmen uns Zeit, deine Recruiting- und HR-Prozesse zu verstehen — und zeigen dir, wie Xaduno in deinem Alltag aussehen kann. Kostenlos und ohne Verkaufsdruck.
          </p>
        </div>
      </section>

      {/* FORM */}
      <section className="section tight" style={{ paddingTop: 0, paddingBottom: 96 }}>
        <div className="container demo-form-grid">
          {/* Close CRM Form */}
          <div className="card" style={{ padding: 36, boxShadow: 'var(--shadow-md)' }}>
            <close-form id="form_032o5bvKnS4AAfdy8H3SBh"></close-form>
          </div>

          {/* Side panel */}
          <aside style={{ display: 'flex', flexDirection: 'column', gap: 18, position: 'sticky', top: 100 }}>
            <div className="card" style={{ padding: 24 }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>was dich erwartet</div>
              {[
                { n: '01', t: '30-Min Demo', d: 'Wir zeigen dir Xaduno an deinem konkreten Anwendungsfall.' },
                { n: '02', t: 'Persönlicher Test-Account', d: 'Du kannst die Plattform mit deinen eigenen Daten ausprobieren.' },
                { n: '03', t: 'Onboarding in Tagen, nicht Monaten', d: 'Wenn Xaduno passt, bist du in 1–2 Wochen produktiv.' },
              ].map((s) => (
                <div key={s.n} style={{ display: 'flex', gap: 14, padding: '10px 0', borderTop: s.n !== '01' ? '1px solid #F1F5F9' : 'none' }}>
                  <div style={{
                    fontFamily: 'Poppins', fontWeight: 600, fontSize: 12, color: 'var(--text-soft)',
                    flexShrink: 0, width: 22,
                  }}>{s.n}</div>
                  <div>
                    <div style={{ fontFamily: 'Poppins', fontWeight: 600, fontSize: 14, color: 'var(--text-strong)', marginBottom: 2 }}>{s.t}</div>
                    <div style={{ fontFamily: 'Inter', fontSize: 12, color: 'var(--text-sub)', lineHeight: 1.5 }}>{s.d}</div>
                  </div>
                </div>
              ))}
            </div>

            <div className="card" style={{ padding: 24 }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>direkter draht</div>
              <div style={{ fontFamily: 'Poppins', fontWeight: 600, fontSize: 16, color: 'var(--text-strong)', letterSpacing: '-0.01em' }}>
                Bahnhofplatz 1a · 3930 Visp
              </div>
              <div style={{
                marginTop: 12, display: 'flex', flexDirection: 'column', gap: 8,
                fontFamily: 'Inter', fontSize: 14,
              }}>
                <a href="mailto:kontakt@xaduno.ch" style={{ color: '#335CFF', fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                  <IconMailMini /> kontakt@xaduno.ch
                </a>
                <a href="tel:+41279243004" style={{ color: 'var(--text-default)', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                  <IconPhoneMini /> +41 27 924 30 04
                </a>
              </div>
            </div>

            <div style={{
              background: '#0F172A', borderRadius: 20, padding: 22,
              color: '#FEFEFE', position: 'relative', overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute', top: -60, right: -60, width: 180, height: 180,
                borderRadius: '50%', filter: 'blur(70px)', opacity: 0.5,
                background: BRAND_GRAD_TIGHT,
              }}></div>
              <div style={{ position: 'relative' }}>
                <div className="eyebrow on-dark" style={{ marginBottom: 8 }}>im einsatz</div>
                <div style={{
                  fontFamily: 'Poppins', fontWeight: 600, fontSize: 32, lineHeight: 1,
                  letterSpacing: '-0.02em',
                  background: BRAND_GRAD, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
                }}>70+ KMU</div>
                <div style={{ fontFamily: 'Inter', fontSize: 13, color: 'rgba(254,254,254,0.7)', marginTop: 6 }}>
                  vertrauen auf Xaduno für ihr Recruiting & HR.
                </div>
              </div>
            </div>
          </aside>
        </div>
      </section>
    </main>
  );
}

function IconMailMini() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/>
    </svg>
  );
}
function IconPhoneMini() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
    </svg>
  );
}

window.PageDemo = PageDemo;