// website/page-danke.jsx — Dankesseite nach Formular-Submit

function PageDanke() {
  const [name, setName] = React.useState('');

  React.useEffect(() => {
    try {
      const n = sessionStorage.getItem('xaduno-demo-name') || '';
      setName(n);
    } catch (e) { /* ignore */ }
  }, []);

  return (
    <main>
      {/* HERO */}
      <section className="section" style={{ paddingTop: 80, paddingBottom: 32, position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', top: -240, right: '50%', transform: 'translateX(50%)',
          width: 720, height: 720,
          borderRadius: '50%', filter: 'blur(160px)', opacity: 0.18,
          background: 'radial-gradient(circle, #B45EE8 0%, #E14A8D 40%, transparent 70%)',
          pointerEvents: 'none',
        }}></div>
        <div className="container" style={{ textAlign: 'center', maxWidth: 720, position: 'relative' }}>
          {/* Check animation */}
          <div style={{
            width: 88, height: 88, borderRadius: '50%',
            background: BRAND_GRAD,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            marginBottom: 28,
            boxShadow: '0 24px 48px -12px rgba(225,74,141,0.35)',
            animation: 'xaduno-pop 600ms cubic-bezier(0.16, 1, 0.3, 1)',
          }}>
            <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#FEFEFE" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="20 6 9 17 4 12" style={{
                strokeDasharray: 30, strokeDashoffset: 30,
                animation: 'xaduno-check 600ms 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards',
              }}/>
            </svg>
          </div>
          <style>{`
            @keyframes xaduno-pop { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }
            @keyframes xaduno-check { to { stroke-dashoffset: 0; } }
            @keyframes xaduno-fade-up { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
            .xaduno-fade { animation: xaduno-fade-up 500ms 200ms backwards; }
          `}</style>

          <h1 className="h-hero xaduno-fade" style={{ marginBottom: 20, textWrap: 'pretty', fontSize: 60 }}>
            {name ? <>Danke, {name}!</> : <>Danke!</>}<br/>
            <span className="gradient-word">Wir haben deine Anfrage.</span>
          </h1>
          <p className="lead xaduno-fade" style={{ maxWidth: 580, margin: '0 auto' }}>
            Wir melden uns innerhalb von <b style={{ fontWeight: 600, color: 'var(--text-strong)' }}>24 Stunden</b> an Werktagen mit einem Terminvorschlag für deine persönliche Demo.
          </p>
        </div>
      </section>

      {/* WHAT HAPPENS NEXT */}
      <section className="section tight" style={{ paddingTop: 32, paddingBottom: 64 }}>
        <div className="container">
          <div className="grid-3" style={{ gap: 18 }}>
            {[
              {
                n: '01', t: 'Bestätigung per Mail',
                d: 'Du erhältst eine Bestätigung mit allen Infos zum nächsten Schritt — schau auch im Spam-Ordner nach.',
                icon: <IconMailLg />,
              },
              {
                n: '02', t: 'Terminvorschlag',
                d: 'Innerhalb von 24 Stunden an Werktagen meldet sich Lukas oder ein Teammitglied mit Terminvorschlägen.',
                icon: <IconCalendar />,
              },
              {
                n: '03', t: '30-Min Live-Demo',
                d: 'Wir zeigen dir Xaduno an deinem konkreten Anwendungsfall — keine Slide-Show, sondern die Plattform live.',
                icon: <IconVideo />,
              },
            ].map((s) => (
              <div key={s.n} className="card">
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
                  <div style={{
                    width: 44, height: 44, borderRadius: 12,
                    background: 'var(--bg-sub)', color: 'var(--text-strong)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>{s.icon}</div>
                  <div style={{
                    fontFamily: 'Poppins', fontWeight: 600, fontSize: 12,
                    letterSpacing: '0.18em', color: 'var(--text-soft)',
                  }}>{s.n}</div>
                </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>

      {/* MEANWHILE */}
      <section className="section weak">
        <div className="container">
          <div style={{ maxWidth: 720, marginBottom: 40 }}>
            <div className="eyebrow">während du wartest</div>
            <h2 className="h-section" style={{ fontSize: 44 }}>Lies dich ein.</h2>
          </div>
          <div className="grid-3" style={{ gap: 18 }}>
            <MeanwhileCard
              tag="ATS"
              title="Bewerbungsmanagement"
              desc="Wie die Kandidaten-Pipeline funktioniert und wo das Team-Feedback landet."
              href="#ats"
              tone="#335CFF"
            />
            <MeanwhileCard
              tag="Multiposting"
              title="100+ Plattformen, ein Klick"
              desc="Welche Jobportale unterstützt sind und wie bestehende Verträge übernommen werden."
              href="#multiposting"
              tone="#6941C6"
            />
            <MeanwhileCard
              tag="Mitarbeiterdossier"
              title="Strukturiert, digital, sicher"
              desc="Was alles im Dossier landet und wie der Übergang aus dem ATS funktioniert."
              href="#dossier"
              tone="#F97316"
            />
          </div>
        </div>
      </section>

      {/* CONTACT FALLBACK */}
      <section className="section tight" style={{ paddingTop: 0, paddingBottom: 96 }}>
        <div className="container">
          <div style={{
            background: '#0F172A', borderRadius: 24, padding: '36px 40px',
            color: '#FEFEFE', position: 'relative', overflow: 'hidden',
            display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center',
          }}>
            <div style={{
              position: 'absolute', top: -100, right: -100, width: 280, height: 280,
              borderRadius: '50%', filter: 'blur(100px)', opacity: 0.35,
              background: 'radial-gradient(circle, #B45EE8 0%, #E14A8D 40%, transparent 70%)',
            }}></div>
            <div style={{ position: 'relative' }}>
              <div className="eyebrow on-dark" style={{ marginBottom: 12 }}>kein zeit zu warten?</div>
              <div style={{
                fontFamily: 'Poppins', fontWeight: 500, fontSize: 28, lineHeight: 1.15,
                letterSpacing: '-0.02em', color: '#FEFEFE', marginBottom: 12,
              }}>
                Ruf uns direkt an oder schreib uns.
              </div>
              <p style={{
                fontFamily: 'Inter', fontSize: 14, color: 'rgba(254,254,254,0.7)',
                margin: 0, maxWidth: 520,
              }}>
                Lukas und das Team in Visp sind unter der Woche von 08:00 – 18:00 erreichbar.
              </p>
            </div>
            <div style={{
              position: 'relative', display: 'flex', flexDirection: 'column', gap: 8, minWidth: 240,
            }}>
              <a href="mailto:kontakt@xaduno.ch" className="btn btn-on-dark" style={{ justifyContent: 'center' }}>
                <IconMailMini2 /> kontakt@xaduno.ch
              </a>
              <a href="tel:+41279243004" className="btn" style={{
                justifyContent: 'center',
                background: 'rgba(254,254,254,0.06)', color: '#FEFEFE',
                border: '1px solid rgba(254,254,254,0.15)',
              }}>
                <IconPhoneMini2 /> +41 27 924 30 04
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function MeanwhileCard({ tag, title, desc, href, tone }) {
  return (
    <a href={href} className="card feature-card" style={{ textDecoration: 'none', display: 'block' }}>
      <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>
      <div className="h-card" style={{ marginBottom: 8 }}>{title}</div>
      <div className="body" style={{ color: 'var(--text-sub)', marginBottom: 16 }}>{desc}</div>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        fontFamily: 'Inter', fontWeight: 600, fontSize: 13, color: tone,
      }}>
        Mehr erfahren <ArrowRight size={12} />
      </div>
    </a>
  );
}

function IconMailLg() {
  return (
    <svg width="22" height="22" 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 IconCalendar() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="18" rx="2"/>
      <line x1="16" y1="2" x2="16" y2="6"/>
      <line x1="8" y1="2" x2="8" y2="6"/>
      <line x1="3" y1="10" x2="21" y2="10"/>
    </svg>
  );
}
function IconVideo() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <polygon points="23 7 16 12 23 17 23 7"/>
      <rect x="1" y="5" width="15" height="14" rx="2"/>
    </svg>
  );
}
function IconMailMini2() {
  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 IconPhoneMini2() {
  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.PageDanke = PageDanke;