/* KontaktPage.jsx */

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' }}>
      {/* Soft accent glow top right — gives the page atmosphere without a hero */}
      <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 }}>
        {/* Intro: text + bullet list, above the calendar */}
        <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" /> Termin vereinbaren
            </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',
            }}>
              Im <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>Gespräch</em> mehr erfahren.
            </h2>
          </div>

          <div className="r-up r-d1">
            <p style={{ marginTop: 0, fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', maxWidth: '60ch' }}>
              15 Minuten am Telefon. Wir besprechen, wo in Ihrem Unternehmen KI sinnvoll wäre und wo nicht. Am Ende haben Sie Klarheit über die nächsten Schritte, unabhängig davon, ob wir zusammenarbeiten oder nicht.
            </p>
            <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 18, fontSize: 15, color: 'var(--fg-2)' }}>
              {['Ihr aktueller Prozess im Kurzüberblick', 'Welche KI-Use-Cases realistisch wären', 'Grobe Einordnung von Aufwand und Nutzen'].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 }}>
              Lieber per E-Mail? <a href="mailto:info@cawi-media.de?subject=Terminanfrage%20Erstgespräch" style={{ color: 'var(--fg-1)', borderBottom: '1px solid currentColor', paddingBottom: 1 }}>info@cawi-media.de</a>
            </div>
          </div>
        </div>

        {/* Centered CTA → calendar (down arrow, smooth scroll) */}
        <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}>
            Termin im Kalender wählen
            <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>

        {/* Full-width calendar — symmetric spacing top/bottom around it */}
        <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)' }}>
    {/* Soft accent glow, matching other dark sections */}
    <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)' }} /> Warum sich ein Termin lohnt
      </div>
      <div className="kb-reassure-grid">
        {[
          {
            t: 'Klarheit statt Buzzwords',
            b: 'Wir reden konkret über Ihre Prozesse, nicht über generische KI-Trends.',
          },
          {
            t: 'Ehrliche Einschätzung',
            b: 'Wenn KI bei Ihnen nichts bringt, sagen wir das. Auch wenn wir damit kein Mandat gewinnen.',
          },
          {
            t: 'Verbindlich, aber unverbindlich',
            b: 'Sie investieren 15 Minuten. Kein Verkaufsdruck, keine Folgetermine, die Sie nicht wollen.',
          },
          {
            t: 'Erfahrung aus dem Mittelstand',
            b: 'Wir kennen die Realität inhabergeführter Unternehmen mit gewachsenen Strukturen und knappen Ressourcen.',
          },
        ].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>

      {/* CTA button below bullets, above footer (up arrow, smooth scroll) */}
      <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' }); }}>
          Termin im Kalender wählen
          <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>
);

const KontaktForm = () => (
  <section className="section bg-warm" data-screen-label="KontaktForm">
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 'clamp(40px, 6vw, 120px)' }} className="pp-grid">
        <div>
          <div className="eyebrow eyebrow-row"><span className="eyebrow-dot" /> Oder schreiben Sie uns</div>
        </div>
        <div>
          <h2 style={{ fontSize: 'var(--fs-h1)', fontWeight: 500, lineHeight: 1.1, letterSpacing: '-0.02em', margin: 0, maxWidth: '18ch', textWrap: 'balance' }}>
            Kurz Ihr Anliegen. Wir melden uns <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>binnen 24 Stunden.</em>
          </h2>
          <form style={{ marginTop: 48, display: 'grid', gap: 24, maxWidth: 640 }} onSubmit={(e) => { e.preventDefault(); alert('Form ist ein Platzhalter. Bitte info@cawi-media.de verwenden.'); }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }} className="kf-row">
              <Field label="Name" name="name" required />
              <Field label="Unternehmen" name="company" />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }} className="kf-row">
              <Field label="E-Mail" name="email" type="email" required />
              <Field label="Telefon (optional)" name="phone" />
            </div>
            <Field label="Worum geht es?" name="message" textarea />
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, marginTop: 8 }}>
              <p style={{ fontSize: 12, color: 'var(--fg-3)', margin: 0, maxWidth: '40ch' }}>
                Mit dem Absenden stimmen Sie unserer <a href="datenschutz.html" style={{ color: 'inherit' }}>Datenschutzerklärung</a> zu.
              </p>
              <button type="submit" className="btn btn-primary">
                Nachricht senden
                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true"><path d="M1 9L9 1M9 1H2M9 1V8" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square" /></svg>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <style>{`@media (max-width:640px){ .kf-row { grid-template-columns: 1fr !important; } }`}</style>
  </section>
);

const Field = ({ label, name, type = 'text', required, textarea }) => (
  <label style={{ display: 'block' }}>
    <div className="eyebrow" style={{ color: 'var(--fg-3)', marginBottom: 10 }}>{label}{required && ' *'}</div>
    {textarea ? (
      <textarea name={name} rows={5} required={required} style={fieldStyle} />
    ) : (
      <input type={type} name={name} required={required} style={fieldStyle} />
    )}
  </label>
);
const fieldStyle = {
  width: '100%', padding: '14px 16px', background: '#fff',
  border: '1px solid var(--border-hairline)', borderRadius: 2,
  fontFamily: 'inherit', fontSize: 15, color: 'var(--fg-1)',
  resize: 'vertical',
};

const KontaktDirekt = () => (
  <section className="section" data-screen-label="KontaktDirekt">
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40 }} className="kd-grid">
        {[
          { l: 'E-Mail', v: <a href="mailto:info@cawi-media.de" style={{ color: 'inherit' }}>info@cawi-media.de</a> },
          { l: 'Telefon', v: <a href="tel:+4917681522326" style={{ color: 'inherit' }}>+49 176 81522326</a> },
          { l: 'Adresse', v: <>Cawi-Media<br />St.-Wigbert-Straße 30<br />34560 Fritzlar</> },
        ].map(x => (
          <div key={x.l} style={{ borderTop: '1px solid var(--border-hairline)', paddingTop: 32 }}>
            <div className="eyebrow" style={{ color: 'var(--fg-3)', marginBottom: 16 }}>{x.l}</div>
            <div style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--fg-1)' }}>{x.v}</div>
          </div>
        ))}
      </div>
    </div>
    <style>{`@media (max-width:720px){ .kd-grid { grid-template-columns: 1fr !important; } }`}</style>
  </section>
);

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