/* global React, useReveal, Topo, ArrowRight */

// Microsoft Bookings URL: replace with the real link from Microsoft Bookings
const BOOKINGS_URL = "https://outlook.office.com/bookwithme/user/f2a3b6ab6e2a49f588b905f27d6d15ca@micheler.eu/meetingtype/SVRwCe7HMUGxuT6WGxi68g2?anonymous&ismsaljsauthenabled&ep=mlink";

// Spam-resistant email: display uses (at), real address is constructed on click.
function Email({ user = "simon", domain = "ki-alpin.at", subject, className, children }) {
  const handleClick = (e) => {
    e.preventDefault();
    const href = `mailto:${user}@${domain}${subject ? `?subject=${encodeURIComponent(subject)}` : ""}`;
    window.location.href = href;
  };
  return (
    <a href="#" onClick={handleClick} className={className}>
      {children || `${user} (at) ${domain}`}
    </a>
  );
}

/* ---------- CTA ---------- */

function CTA() {
  const ref = useReveal();
  const [selectedPath, setSelectedPath] = useState('erstgespraech');

  const paths = [
    { id: 'erstgespraech', n: "01", lbl: "Erstgespräch", sub: "Unverbindlich · kein Verkauf · Q&A" },
    { id: 'workshop', n: "02", lbl: "Workshop-Anfrage", sub: "Team, Datum, Zielsetzung" },
    { id: 'pilot', n: "03", lbl: "Pilot oder Custom-Projekt", sub: "Use Case besprechen" },
    { id: 'keynote', n: "04", lbl: "Vortrag oder Keynote", sub: "Event-Anfrage" }
  ];

  const mailtoFor = (pathId) => {
    const labels = {
      erstgespraech: "Erstgespräch",
      workshop: "Workshop-Anfrage",
      pilot: "Pilot / Custom-Projekt",
      keynote: "Vortrag / Keynote"
    };
    return { user: "simon", domain: "ki-alpin.at", subject: `Anfrage: ${labels[pathId]}` };
  };

  return (
    <section className="section cta" id="kontakt">
      <Topo seed={8} opacity={0.25} lines={8} />
      <div className="wrap reveal" ref={ref}>
        <div className="section-head">
          <div className="label-col">
            <span className="num">N° 08</span>
            <span className="name">Kontakt</span>
          </div>
          <span className="eyebrow">Wie weiter</span>
        </div>

        <div className="cta-grid">
          <div>
            <h2>Sagen Sie uns, wo Sie stehen. <span className="serif-it" style={{ color: 'var(--accent)' }}>Wir sagen Ihnen, was als nächstes Sinn macht.</span></h2>
            <p style={{ fontSize: 16, color: 'var(--fg)', maxWidth: '52ch', marginTop: 18 }}>
              Wählen Sie den Weg, der am ehesten zu Ihrem aktuellen Punkt passt. Wir antworten innerhalb
              eines Werktags.
            </p>

            <div className="cta-paths">
              {paths.map(p => {
                const isBooking = p.id === 'erstgespraech';
                const handleClick = (e) => {
                  if (isBooking) return;
                  e.preventDefault();
                  const m = mailtoFor(p.id);
                  window.location.href = `mailto:${m.user}@${m.domain}?subject=${encodeURIComponent(m.subject)}`;
                };
                return (
                  <a
                    key={p.id}
                    className="cta-path"
                    href={isBooking ? BOOKINGS_URL : '#'}
                    target={isBooking ? '_blank' : undefined}
                    rel={isBooking ? 'noopener noreferrer' : undefined}
                    onClick={handleClick}
                    onMouseEnter={() => setSelectedPath(p.id)}
                    style={selectedPath === p.id ? { paddingLeft: 12 } : {}}
                  >
                    <span className="n">{p.n}</span>
                    <div>
                      <div className="lbl">{p.lbl}</div>
                      <div className="sub">{p.sub}</div>
                    </div>
                    <span className="arr">
                      <svg width="14" height="10" viewBox="0 0 14 10" fill="none">
                        <path d="M0 5h12M8 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" />
                      </svg>
                    </span>
                  </a>
                );
              })}
            </div>
          </div>

          <div className="booking-card booking-card--bookings">
            <span className="mono booking-kind">Termin · Microsoft Bookings</span>
            <h3>Erstgespräch direkt buchen.</h3>
            <p className="booking-lede">
              30 Minuten, unverbindlich. Sie wählen einen freien Slot im Kalender, Sie bekommen automatisch
              eine Einladung mit Teams-Link.
            </p>

            <ul className="booking-points">
              <li><span className="dot"></span>Live-Verfügbarkeit aus dem Kalender</li>
              <li><span className="dot"></span>Bestätigung & Erinnerung per E-Mail</li>
              <li><span className="dot"></span>Persönlich mit Simon, kein Funnel und kein Vorgespräch</li>
            </ul>

            <a className="submit" href={BOOKINGS_URL} target="_blank" rel="noopener noreferrer">
              Termin auswählen
            </a>

            <div className="booking-alt">
              <span className="mono" style={{ fontSize: 10 }}>Lieber per Mail?</span>
              <Email className="link" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */

function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-col">
            <a href="#intro" className="footer-mark" aria-label="KI ALPIN">
              <img
                src="assets/ki-alpin-icon-only-reverse-pine-bg.svg"
                alt=""
                width="72"
                height="72"
              />
            </a>
            <div className="footer-claim">
              KI, die <span className="em">arbeitet</span>.<br/>Nicht beeindruckt.
            </div>
            <div className="mono" style={{ fontSize: 11, opacity: 0.6 }}>
              Strategische KI-Beratung · Wien · DACH
            </div>
          </div>
          <div className="footer-col">
            <h5>Leistungen</h5>
            <a href="#leistungen">KI-Strategie</a>
            <a href="#leistungen">Workshops</a>
            <a href="#leistungen">Automatisierung</a>
            <a href="#leistungen">Individuelle Systeme</a>
          </div>
          <div className="footer-col">
            <h5>Marke</h5>
            <a href="#positionierung">Ansatz</a>
            <a href="#methodik">Methodik</a>
            <a href="#arbeiten">Referenzprojekte</a>
            <a href="#simon">Simon &amp; Nikolay</a>
            <a href="#netzwerk">Netzwerk</a>
          </div>
          <div className="footer-col">
            <h5>Kontakt</h5>
            <Email>simon (at) ki-alpin.at</Email>
            <a href="tel:+436644690234">+43 664 4690234</a>
            <a href={BOOKINGS_URL} target="_blank" rel="noopener noreferrer">Erstgespräch buchen</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 · KI ALPIN · Wien</span>
          <span className="footer-legal">
            <a href="Impressum.html">Impressum</a>
            <a href="Datenschutz.html">Datenschutz</a>
            <a href="AGB.html">AGB</a>
            <a href="KI-Transparenz.html">KI-Transparenz</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { CTA, Footer });