// website/page-kontakt.jsx — Kontakt

function PageKontakt() {

  return (
    <main>
      {/* HERO */}
      <section className="section" style={{ paddingTop: 80, paddingBottom: 48 }}>
        <div className="container" style={{ textAlign: 'center', maxWidth: 840 }}>
          <div style={{ display: 'inline-block', marginBottom: 24 }}>
            <SwissPill>Kontakt · wir sind da</SwissPill>
          </div>
          <h1 className="h-hero" style={{ marginBottom: 20, textWrap: 'pretty', fontSize: 64 }}>
            Hast du eine Frage? <span className="gradient-word">Wir sind für dich da.</span>
          </h1>
          <p className="lead" style={{ maxWidth: 600, margin: '0 auto' }}>Schreib uns. Wir melden uns innerhalb von 24 Stunden an Werktagen.

          </p>
        </div>
      </section>

      {/* CONTACT INFO + FORM */}
      <section className="section tight" style={{ paddingTop: 0, paddingBottom: 96 }}>
        <div className="container kontakt-grid">
          {/* Side panel — contact details */}
          <aside className="kontakt-aside" style={{ display: 'flex', flexDirection: 'column', gap: 18, position: 'sticky', top: 100 }}>
            <ContactCard
              icon={<KIconMail />}
              label="E-Mail"
              value="kontakt@xaduno.ch"
              href="mailto:kontakt@xaduno.ch"
              tone="#335CFF" />
            
            <ContactCard
              icon={<KIconPhone />}
              label="Telefon"
              value="+41 27 924 30 04"
              hint="Mo–Fr · 08:00 – 18:00"
              href="tel:+41279243004"
              tone="#16A34A" />
            
            <div className="card" style={{ padding: 24 }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: '#FEEADD', color: '#F97316',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 16
              }}>
                <KIconMap />
              </div>
              <div className="eyebrow" style={{ marginBottom: 8 }}>vor ort · visp</div>
              <div style={{
                fontFamily: 'Poppins', fontWeight: 600, fontSize: 18,
                color: 'var(--text-strong)', letterSpacing: '-0.01em',
                marginBottom: 4
              }}>Bahnhofplatz 1a</div>
              <div style={{
                fontFamily: 'Inter', fontSize: 14, color: 'var(--text-default)'
              }}>3930 Visp · Wallis</div>
              <a href="https://maps.google.com/maps?q=46.29362%2C%207.88140" target="_blank" rel="noopener noreferrer"
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                marginTop: 14,
                fontFamily: 'Inter', fontWeight: 600, fontSize: 13, color: '#335CFF'
              }}>
                Auf Karte öffnen <ArrowRight size={12} />
              </a>
            </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 }}>antwortzeit</div>
                <div style={{
                  fontFamily: 'Poppins', fontWeight: 600, fontSize: 32, lineHeight: 1,
                  letterSpacing: '-0.02em',
                  background: BRAND_GRAD, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent'
                }}>&lt; 24 Std.</div>
                <div style={{ fontFamily: 'Inter', fontSize: 13, color: 'rgba(254,254,254,0.7)', marginTop: 6 }}>
                  an Werktagen. Persönlich von uns aus Visp.
                </div>
              </div>
            </div>
          </aside>

          {/* Close CRM Form */}
          <div className="card" style={{ padding: 36, boxShadow: 'var(--shadow-md)' }}>
            <close-form id="form_033KSIJnRujV6r98cNZiy7"></close-form>
          </div>
        </div>
      </section>
    </main>);

}

function ContactCard({ icon, label, value, hint, href, tone }) {
  return (
    <a href={href} className="card feature-card" style={{ textDecoration: 'none', padding: 24 }}>
      <div style={{
        width: 44, height: 44, borderRadius: 12,
        background: `${tone}15`, color: tone,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        marginBottom: 16
      }}>{icon}</div>
      <div className="eyebrow" style={{ marginBottom: 8 }}>{label}</div>
      <div style={{
        fontFamily: 'Poppins', fontWeight: 600, fontSize: 20,
        color: 'var(--text-strong)', letterSpacing: '-0.015em'
      }}>{value}</div>
      {hint && <div style={{ fontFamily: 'Inter', fontSize: 13, color: 'var(--text-sub)', marginTop: 4 }}>{hint}</div>}
    </a>);

}

function KIconMail() {
  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 KIconPhone() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" 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>);

}
function KIconMap() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
      <circle cx="12" cy="10" r="3" />
    </svg>);

}

window.PageKontakt = PageKontakt;