import './Contact.css'

// Replace BOOKING_URL with your actual booking portal URL
const BOOKING_URL = 'https://termine.superfice.de'

export default function Contact() {
  return (
    <div className="contact section">
      <div className="container">
        <div className="contact-inner">

          {/* Left: copy */}
          <div className="contact-copy">
            <span className="contact-label">Kontakt</span>
            <h2 className="contact-title">Bereit für Ihr&nbsp;Aufmaß?</h2>
            <p className="contact-body">
              Buchen Sie Ihren Termin direkt online – wählen Sie Datum, Uhrzeit und
              Aufmaßbereiche in unserem Buchungsportal. Schnell, unkompliziert, verbindlich.
            </p>

            <div className="contact-promises">
              <div className="contact-promise">
                <div className="contact-promise-icon" aria-hidden="true">
                  <svg viewBox="0 0 20 20" fill="none">
                    <circle cx="10" cy="10" r="8" stroke="currentColor" strokeWidth="1.5"/>
                    <path d="M10 6v4l2.5 2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
                  </svg>
                </div>
                Terminbestätigung innerhalb von Minuten
              </div>
              <div className="contact-promise">
                <div className="contact-promise-icon" aria-hidden="true">
                  <svg viewBox="0 0 20 20" fill="none">
                    <path d="M4 10l4 4 8-8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </div>
                Aufmaß-Ergebnis innerhalb von 24 Stunden
              </div>
              <div className="contact-promise">
                <div className="contact-promise-icon" aria-hidden="true">
                  <svg viewBox="0 0 20 20" fill="none">
                    <rect x="3" y="4" width="14" height="13" rx="2" stroke="currentColor" strokeWidth="1.5"/>
                    <path d="M3 9h14M7 4V2M13 4V2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
                  </svg>
                </div>
                Flexibel stornierbar bis 24 h vorher
              </div>
            </div>
          </div>

          {/* Right: CTA card */}
          <div className="contact-card">
            <div className="contact-card-top">
              <div className="contact-card-icon" aria-hidden="true">
                <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="6" y="10" width="36" height="32" rx="3" stroke="currentColor" strokeWidth="2"/>
                  <path d="M6 20h36" stroke="currentColor" strokeWidth="2"/>
                  <path d="M16 6v8M32 6v8" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
                  <rect x="14" y="28" width="6" height="6" rx="1" fill="currentColor" opacity="0.6"/>
                  <rect x="28" y="28" width="6" height="6" rx="1" fill="currentColor" opacity="0.3"/>
                </svg>
              </div>
              <div>
                <div className="contact-card-heading">Termin buchen</div>
                <div className="contact-card-sub">Online · Sofort bestätigt</div>
              </div>
            </div>

            <a
              href={BOOKING_URL}
              target="_blank"
              rel="noopener noreferrer"
              className="btn btn--primary contact-book-btn"
            >
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
                <rect x="2" y="3" width="14" height="13" rx="2" stroke="currentColor" strokeWidth="1.5"/>
                <path d="M2 8h14" stroke="currentColor" strokeWidth="1.5"/>
                <path d="M6 1v4M12 1v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
              </svg>
              Jetzt Termin wählen
            </a>

            <div className="contact-divider">
              <span>oder direkt melden</span>
            </div>

            <div className="contact-direct">
              <a href="mailto:info@superfice.de" className="contact-direct-link">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                  <rect x="1" y="3" width="14" height="10" rx="2" stroke="currentColor" strokeWidth="1.5"/>
                  <path d="M1 5l7 5 7-5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
                </svg>
                info@superfice.de
              </a>
              <a href="tel:+4930000000" className="contact-direct-link">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                  <path d="M3 2h3l1.5 3.5-2 1.5a8 8 0 003.5 3.5l1.5-2L14 10v3a1 1 0 01-1 1C6 14 2 8 2 3a1 1 0 011-1z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
                </svg>
                +49 30 000000
              </a>
            </div>

            <p className="contact-card-note">
              Mo–Fr, 8–18 Uhr · Antwort garantiert innerhalb von 24 h
            </p>
          </div>

        </div>
      </div>
    </div>
  )
}