/* global React, useReveal, ArrowRight */

const PMF_BOOKINGS_URL = "https://outlook.office.com/bookwithme/user/f2a3b6ab6e2a49f588b905f27d6d15ca@micheler.eu/meetingtype/SVRwCe7HMUGxuT6WGxi68g2?anonymous&ismsaljsauthenabled&ep=mlink";

/* ---------- Schwerpunkt · KI im Projektmanagement (N° 04) ----------
   Sits between Leistungen (N° 03) and Projekte (N° 05).
   Reads as a sober, current focus area, not a sales pitch.
   Two real offers — Inhouse-Workshop + längere Begleitung — one CTA below.
   No em-dashes, no fake metrics, no AI-buzz. */

function PMFocus() {
  const ref = useReveal();

  const offers = [
    {
      kind: "Workshop · Inhouse",
      title: "Lösungen für KI im Projektmanagement",
      lede: "Ein bis zwei Tage mit Ihrem PM-Team. Wir arbeiten an Vorgängen aus dem laufenden Geschäft: Status, Risiken, Stakeholder-Briefings, Doku. Am Ende stehen drei lauffähige Prototypen und ein Plan für die nächsten 30 Tage.",
      points: [
        "Use-Case-Bewertung an Ihren echten Vorgängen",
        "Drei lauffähige Prototypen am Ende des Tages",
        "30-Tage-Plan für das Team",
        "Anschlussfähig an PMI, IPMA, Agile"
      ]
    },
    {
      kind: "Begleitung · Individuell",
      title: "Mehrwöchige Zusammenarbeit mit Ihrem Team",
      lede: "Für Teams, die nach dem Workshop weiterarbeiten oder direkt eine längere Begleitung suchen. Wir kommen regelmäßig, arbeiten an realen Vorgängen mit und bauen mit Ihren Leuten Schritt für Schritt eigenständige Lösungen auf.",
      points: [
        "Wöchentlicher Sprechpunkt mit dem Team",
        "Gemeinsamer Aufbau erster Automatisierungen",
        "Doku und Schulung für die spätere Übergabe",
        "6 bis 12 Wochen, klar abgegrenzter Scope"
      ]
    }
  ];

  return (
    <section className="section pm-focus" id="pm-focus">
      <div className="wrap reveal" ref={ref}>
        <div className="section-head">
          <div className="label-col">
            <span className="num">N° 04</span>
            <span className="name">Schwerpunkt</span>
          </div>
          <div>
            <span className="eyebrow">Wo wir gerade am tiefsten arbeiten</span>
            <h2 className="h-1" style={{ marginTop: 16, maxWidth: '22ch' }}>
              KI im <span className="serif-it" style={{ color: 'var(--accent)' }}>Projektmanagement</span>.
            </h2>
            <p className="lead" style={{ marginTop: 20 }}>
              PM ist ein guter Startpunkt für KI im Unternehmen. Vorgänge sind strukturiert,
              Übergaben wiederholen sich, ein Großteil der Arbeit ist dokumentiert. Bedingungen,
              unter denen KI heute zuverlässig läuft.
            </p>
            <p style={{ marginTop: 12, color: 'var(--fg-muted)', fontSize: 15 }}>
              Lehrauftrag am WIFI Wien. Eigene Tools im Einsatz, darunter der Interview Expert
              für die strukturierte Hypothesenarbeit von Consultants.
            </p>
          </div>
        </div>

        {/* Real workshop moment — anchors the offers in something that actually happened */}
        <figure className="pm-figure">
          <div className="pm-figure-frame">
            <image-slot
              id="pm-workshop"
              style={{ width: '100%', height: '100%', display: 'block', position: 'absolute', inset: 0 }}
              shape="rect"
              placeholder="Workshop · Querformat"
            ></image-slot>
          </div>
          <figcaption className="pm-figure-cap">
            <span className="pm-figure-kind">Inhouse-Workshop · Wien</span>
            <span className="pm-figure-text">KI im Projektmanagement, live mit einem PM-Team.</span>
          </figcaption>
        </figure>

        {/* Two offers */}
        <div className="pm-offers">
          {offers.map((o, i) => (
            <article className="pm-offer" key={i}>
              <header className="pm-offer-head">
                <span className="pm-offer-kind">{o.kind}</span>
              </header>
              <h3 className="pm-offer-title">{o.title}</h3>
              <p className="pm-offer-lede">{o.lede}</p>
              <ul className="pm-offer-points">
                {o.points.map((p, j) => <li key={j}>{p}</li>)}
              </ul>
            </article>
          ))}
        </div>

        {/* Single CTA below both offers */}
        <div className="pm-cta">
          <a href={PMF_BOOKINGS_URL} target="_blank" rel="noopener noreferrer" className="btn pm-cta-btn">
            Erstgespräch buchen <ArrowRight />
          </a>
          <span className="pm-cta-note">
            30 Minuten, kostenfrei. Sie lernen uns kennen, wir Ihren Kontext.
          </span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PMFocus });