/* KontaktPage.jsx (EN) */

const initCalEmbed = () => {
  if (window.__calInitDone) return;
  window.__calInitDone = true;
  (function (C, A, L) {
    let p = function (a, ar) { a.q.push(ar); };
    let d = C.document;
    C.Cal = C.Cal || function () {
      let cal = C.Cal; let ar = arguments;
      if (!cal.loaded) {
        cal.ns = {}; cal.q = cal.q || [];
        d.head.appendChild(d.createElement("script")).src = A;
        cal.loaded = true;
      }
      if (ar[0] === L) {
        const api = function () { p(api, arguments); };
        const namespace = ar[1]; api.q = api.q || [];
        if (typeof namespace === "string") {
          cal.ns[namespace] = cal.ns[namespace] || api;
          p(cal.ns[namespace], ar);
          p(cal, ["initNamespace", namespace]);
        } else p(cal, ar);
        return;
      }
      p(cal, ar);
    };
  })(window, "https://app.cal.com/embed/embed.js", "init");

  window.Cal("init", "unverbindliches-telefongesprach", { origin: "https://app.cal.com" });
  window.Cal.ns["unverbindliches-telefongesprach"]("inline", {
    elementOrSelector: "#my-cal-inline-unverbindliches-telefongesprach",
    config: { layout: "month_view", useSlotsViewOnSmallScreen: "true" },
    calLink: "carl-wiesemann/unverbindliches-telefongesprach",
  });
  window.Cal.ns["unverbindliches-telefongesprach"]("ui", {
    hideEventTypeDetails: false,
    layout: "month_view",
    styles: { branding: { brandColor: "#1554a8" } },
    hideBranding: true,
  });
};

const KontaktBooking = () => {
  React.useEffect(() => {
    initCalEmbed();
  }, []);

  const scrollToKalender = (e) => {
    e.preventDefault();
    const target = document.getElementById('kalender');
    if (!target) return;
    const y = target.getBoundingClientRect().top + window.scrollY - 80;
    window.scrollTo({ top: y, behavior: 'smooth' });
  };

  return (
    <section className="section" data-screen-label="KontaktBooking" style={{ paddingTop: 'clamp(120px, 14vw, 200px)', paddingBottom: 0, position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{ position: 'absolute', top: -200, right: -150, width: 700, height: 700, background: 'radial-gradient(circle, rgba(21,84,168,0.08) 0%, transparent 60%)', pointerEvents: 'none', zIndex: 0 }} />
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 'clamp(40px, 6vw, 96px)', alignItems: 'start' }} className="kb-grid">
          <div className="r-up">
            <div className="eyebrow eyebrow-row" style={{ marginBottom: 32 }}>
              <span className="eyebrow-dot" /> Book a meeting
            </div>
            <h2 style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-display-m)', fontWeight: 500, lineHeight: 1.05, letterSpacing: '-0.025em', margin: 0, maxWidth: '16ch', textWrap: 'balance' }}>
              Learn more in a <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>conversation.</em>
            </h2>
          </div>

          <div className="r-up r-d1">
            <p style={{ marginTop: 0, fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', maxWidth: '60ch' }}>
              15 minutes on the phone. We discuss where AI would or would not make sense in your business. By the end you have clarity about the next steps — whether we work together or not.
            </p>
            <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 18, fontSize: 15, color: 'var(--fg-2)' }}>
              {['A short overview of your current process', 'Which AI use cases are realistic', 'A rough estimate of effort and benefit'].map(t => (
                <div key={t} style={{ display: 'flex', gap: 14, alignItems: 'baseline' }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--color-accent)' }}>→</span>
                  <span>{t}</span>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--border-hairline)', fontSize: 13, color: 'var(--fg-3)', lineHeight: 1.6 }}>
              Prefer email? <a href="mailto:info@cawi-media.de?subject=Initial%20Consultation%20Request" style={{ color: 'var(--fg-1)', borderBottom: '1px solid currentColor', paddingBottom: 1 }}>info@cawi-media.de</a>
            </div>
          </div>
        </div>

        <div className="r-up r-d2" style={{ marginTop: 'clamp(32px, 4vw, 48px)', display: 'flex', justifyContent: 'center' }}>
          <a href="#kalender" className="btn btn-primary" onClick={scrollToKalender}>
            Pick a time in the calendar
            <svg width="10" height="12" viewBox="0 0 10 12" fill="none" aria-hidden="true"><path d="M5 1V11M5 11L1 7M5 11L9 7" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" /></svg>
          </a>
        </div>

        <div id="kalender" className="r-up r-d3" style={{ marginTop: 'clamp(32px, 4vw, 48px)', scrollMarginTop: 100 }}>
          <div id="my-cal-inline-unverbindliches-telefongesprach" style={{ width: '100%', minHeight: 720 }} />
        </div>
      </div>
      <style>{`
        @media (max-width:880px){ .kb-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

const KontaktReassure = () => (
  <section className="section bg-ink-grad" data-screen-label="KontaktReassure" style={{ position: 'relative', overflow: 'hidden', paddingTop: 'clamp(48px, 6vw, 80px)' }}>
    <div aria-hidden style={{ position: 'absolute', top: -200, left: -150, width: 700, height: 700, background: 'radial-gradient(circle, rgba(52,131,224,0.08) 0%, transparent 60%)', pointerEvents: 'none', zIndex: 0 }} />
    <div className="container r-up" style={{ position: 'relative', zIndex: 1 }}>
      <div className="eyebrow eyebrow-row" style={{ marginBottom: 32, color: 'rgba(255,255,255,0.6)' }}>
        <span className="eyebrow-dot" style={{ background: 'rgba(255,255,255,0.6)' }} /> Why a meeting is worth it
      </div>
      <div className="kb-reassure-grid">
        {[
          { t: 'Clarity over buzzwords', b: 'We talk concretely about your processes, not generic AI trends.' },
          { t: 'Honest assessment', b: "If AI brings you nothing, we say so. Even when we lose a mandate by saying it." },
          { t: 'Committed but non-binding', b: 'You invest 15 minutes. No sales pressure, no follow-ups you do not want.' },
          { t: 'Mittelstand experience', b: 'We know the reality of owner-led companies with grown structures and limited resources.' },
        ].map(x => (
          <div key={x.t}>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 18, fontWeight: 500, color: '#fff', marginBottom: 12, letterSpacing: '-0.005em' }}>
              {x.t}
            </div>
            <div style={{ fontSize: 15, lineHeight: 1.6, color: 'rgba(255,255,255,0.78)' }}>
              {x.b}
            </div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 'clamp(56px, 7vw, 80px)', display: 'flex', justifyContent: 'center' }}>
        <a href="#kalender" className="btn btn-white" onClick={(e) => { e.preventDefault(); const t = document.getElementById('kalender'); if (!t) return; const y = t.getBoundingClientRect().top + window.scrollY - 80; window.scrollTo({ top: y, behavior: 'smooth' }); }}>
          Pick a time in the calendar
          <svg width="10" height="12" viewBox="0 0 10 12" fill="none" aria-hidden="true"><path d="M5 11V1M5 1L1 5M5 1L9 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" /></svg>
        </a>
      </div>
    </div>
    <style>{`
      .kb-reassure-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 56px) clamp(40px, 5vw, 80px); }
      @media (max-width:720px){ .kb-reassure-grid { grid-template-columns: 1fr; } }
    `}</style>
  </section>
);

Object.assign(window, { KontaktBooking, KontaktReassure });