/* Kontakt page: Terminbuchung mit TidyCal-Integration */
function KontaktHero() {
  return (
    <section className="hero" style={{ padding: '160px 0 40px' }}>
      <div className="hero-grid-bg" />
      <div className="hero-glow" />
      <div className="container" style={{ position: 'relative', textAlign: 'center', maxWidth: 820, margin: '0 auto' }}>
        <span className="eyebrow"><Icon.Calendar size={14} /> &nbsp;Kostenlos &amp; unverbindlich</span>
        <h1 style={{ fontSize: 'clamp(2.4rem, 5vw, 4.4rem)', margin: '24px 0' }}>
          Kostenlose <span className="accent">IT-Potenzialanalyse</span> in 30 Min
        </h1>
        <p className="lead" style={{ margin: '0 auto', maxWidth: 640 }}>Wählen Sie direkt einen Termin in unserem Kalender.<br/>Bestätigung kommt sofort per E-Mail — keine Wartezeit, keine Rückfragen.</p>
      </div>
    </section>);

}

/* TidyCal-Embed: nutzt das offizielle TidyCal-Script (tidycal.com/js/embed.js),
   das den Kalender lädt und Auto-Resize via postMessage handhabt. */
const TIDYCAL_PATH = 'malitech-solutions/compliance-check';
const TIDYCAL_URL = `https://tidycal.com/${TIDYCAL_PATH}`;

function TidyCalIframe() {
  React.useEffect(() => {
    // Script nur EINMAL pro Seite laden — auch wenn mehrere Embeds existieren
    if (document.querySelector('script[data-tidycal-embed]')) {
      // Bereits geladen — manuell reinitialisieren falls TidyCal das anbietet
      if (window.TidyCal && typeof window.TidyCal.embed === 'function') {
        window.TidyCal.embed();
      }
      return;
    }
    const script = document.createElement('script');
    script.src = 'https://tidycal.com/js/embed.js';
    script.async = true;
    script.setAttribute('data-tidycal-embed', 'true');
    document.body.appendChild(script);
  }, []);

  return (
    <div className="tidycal-wrap">
      <div className="tidycal-embed" data-path={TIDYCAL_PATH} />
      <noscript>
        <a href={TIDYCAL_URL} target="_blank" rel="noopener" className="btn btn-primary">
          Termin direkt bei TidyCal buchen →
        </a>
      </noscript>
    </div>);

}

function TidyCalEmbed() {
  return (
    <window.ConsentGate
      category="functional"
      name="TidyCal Kalender"
      description="Für die Online-Terminbuchung benötigen wir Ihre Zustimmung."
      icon={
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" 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>
      }
      fallbackHref={TIDYCAL_URL}
      fallbackLabel="Direkt bei TidyCal buchen">
      <TidyCalIframe />
    </window.ConsentGate>);

}

function KontaktPage() {
  return (
    <React.Fragment>
      <SiteHeader active="kontakt" />
      <KontaktHero />

      <section className="section" id="kontakt" style={{ paddingTop: 20 }}>
        <div className="container">
          <div className="booking-layout">
            {/* Linke Spalte: Was Sie bekommen + Kontakt-Karten */}
            <div className="booking-info">
              <h2 style={{ fontSize: 'clamp(1.8rem, 3vw, 2.4rem)', marginBottom: 20 }}>
                Was Sie aus dem Termin mitnehmen
              </h2>
              <ul className="cta-checks">
                <li>Konkreter Befund Ihrer drei größten Compliance-Lücken</li>
                <li>Ehrliche Einschätzung: Erfüllt Ihre IT die Obliegenheiten Ihrer Cyber-Police?</li>
                <li>Roadmap zur Audit-Readiness — schriftlich, nach dem Termin</li>
                <li>100% unverbindlich · keine Vertragspflicht · keine Werbe-Mails</li>
              </ul>

              <div className="kontakt-info-grid" style={{ marginTop: 32 }}>
                <div className="ki-card">
                  <div className="ki-icon"><Icon.Phone size={18} /></div>
                  <div className="ki-label">Direkt anrufen</div>
                  <div className="ki-val">+49 521 163913-10</div>
                  <div className="ki-meta">Mo–Do 09:00–17:00 Uhr<br />Fr 09:00–14:00 Uhr</div>
                </div>
                <div className="ki-card">
                  <div className="ki-icon"><Icon.Mail size={18} /></div>
                  <div className="ki-label">E-Mail</div>
                  <div className="ki-val" style={{ fontSize: 14 }}>kontakt@malitech-solutions.de</div>
                  <div className="ki-meta">Antwort in &lt; 24h</div>
                </div>
                <div className="ki-card">
                  <div className="ki-icon"><Icon.Building size={18} /></div>
                  <div className="ki-label">Standort</div>
                  <div className="ki-val">Uthmannstraße 10</div>
                  <div className="ki-meta">33647 Bielefeld</div>
                </div>
                <div className="ki-card">
                  <div className="ki-icon"><Icon.AlertTriangle size={18} /></div>
                  <div className="ki-label">Notfall (24/7)</div>
                  <div className="ki-val">Incident Hotline</div>
                  <div className="ki-meta">Bei kritischen Ausfällen</div>
                </div>
              </div>
            </div>

            {/* Rechte Spalte: TidyCal */}
            <div className="booking-card">
              <div className="booking-head">
                <span className="eyebrow"><Icon.Calendar size={14} /> &nbsp;Termin direkt buchen</span>
                <h3 style={{ fontSize: 'clamp(1.4rem, 2.5vw, 1.8rem)', marginTop: 12 }}>
                  Compliance-Check · 30 Min
                </h3>
                <p style={{ color: 'var(--color-text-muted)', fontFamily: 'var(--font-ui)', fontSize: 14, marginTop: 8 }}>Sofort-Bestätigung per E-Mail

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

      <SiteFooter />
    </React.Fragment>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<KontaktPage />);