// ConnectV2 — qualified intake. Explains the first conversation, not a flashy CTA.
function ConnectV2() {
  const { lang } = React.useContext(window.LangContext);
  const { isMobile } = window.useBreakpoint();
  const [refH2, visH2] = window.useReveal();
  const [refIntake, visIntake] = window.useReveal({ threshold: 0.08 });

  const en = {
    eyebrow: "09 · Connect",
    h2line1: "Let's",
    h2line2: "talk.",
    body: "I work with you to identify where AI can meaningfully help.",
    howLabel: "How the conversation moves",
    intake: [
      ["Describe", "Where friction currently lives and where time is unnecessarily lost."],
      ["Assess",   "Together we identify realistic opportunities."],
      ["Define",   "The next practical step — concrete and actionable."],
    ],
    bookLabel: "Book a call",
    practical: [
      { label: "First call",  value: "Free of charge" },
      { label: "Format",      value: "30 min · Remote" },
      { label: "Language",    value: "DE · EN" },
    ],
  };

  const de = {
    eyebrow: "09 · Kontakt",
    h2line1: "Lassen Sie uns",
    h2line2: "sprechen.",
    body: "Ich kläre mit Ihnen, wo KI sinnvoll unterstützen kann.",
    howLabel: "Wie das Gespräch verläuft",
    intake: [
      ["Beschreiben", "Wo aktuell Reibung herrscht, wo Zeit unnötig verloren geht."],
      ["Analysieren", "Gemeinsam identifizieren wir realistische Einsatzmöglichkeiten."],
      ["Definieren",  "Den nächsten sinnvollen Schritt — konkret und umsetzbar."],
    ],
    bookLabel: "Termin buchen",
    practical: [
      { label: "Erstgespräch", value: "Kostenfrei" },
      { label: "Format",       value: "30 min · Remote" },
      { label: "Sprache",      value: "DE · EN" },
    ],
  };

  const t = lang === 'de' ? de : en;

  return (
    <section id="connect" style={{
      position: "relative",
      padding: isMobile ? "80px 24px 80px" : "220px 80px 200px 120px",
      borderBottom: "1px solid #2d2d38",
      overflow: "hidden",
    }}>
      <div style={{
        position: "absolute",
        top: 80,
        right: isMobile ? 16 : 80,
        fontFamily: "Montserrat", fontWeight: 200,
        fontSize: isMobile ? 80 : 200, lineHeight: 1, color: "#1f1f27",
        letterSpacing: "-0.04em", pointerEvents: "none",
      }}>09</div>

      <div style={{ position: "relative", maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ display: "flex", gap: 24, alignItems: "center", marginBottom: 64 }}>
          <div style={{ width: 40, height: 1, background: "#4a4a5a" }}></div>
          <span className="label label--wide" style={{ color: "#a8a8b8" }}>
            {t.eyebrow}
          </span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.2fr 1fr", gap: isMobile ? 48 : 120, alignItems: "start" }}>
          <div ref={refH2} className={!isMobile ? `reveal${visH2 ? " visible" : ""}` : ""}>
            <h2 style={{
              fontFamily: "Montserrat", fontWeight: 200,
              fontSize: "clamp(44px, 6vw, 96px)",
              lineHeight: 1.0, letterSpacing: "-0.025em",
              color: "#ffffff", margin: 0,
            }}>
              {t.h2line1}<br/>
              <span className="grad-silver-gold">{t.h2line2}</span>
            </h2>

            <p style={{
              fontFamily: "Montserrat", fontWeight: 300, fontSize: 19,
              lineHeight: 1.5, color: "#d4d4dc",
              margin: "44px 0 0", maxWidth: 520, letterSpacing: "-0.005em",
            }}>
              {t.body}
            </p>

            <div style={{ display: "flex", gap: 14, alignItems: "center", marginTop: 56, flexWrap: "wrap" }}>
              <a href="mailto:hello@ondion.de" style={{
                padding: "18px 28px", borderRadius: 10,
                background: "rgba(13,184,204,0.10)",
                border: "1px solid rgba(13,184,204,0.32)",
                color: "#0db8cc", textDecoration: "none",
                fontFamily: "Montserrat", fontWeight: 400, fontSize: 11,
                letterSpacing: "0.24em", textTransform: "uppercase",
              }}>
                hello@ondion.de
              </a>
              <a href="https://calendly.com/martina-assum/erstgesprach" target="_blank" rel="noopener noreferrer" style={{
                padding: "18px 28px", borderRadius: 10,
                border: "1px solid rgba(255,255,255,0.10)",
                color: "#d4d4dc", textDecoration: "none",
                fontFamily: "Montserrat", fontWeight: 400, fontSize: 11,
                letterSpacing: "0.24em", textTransform: "uppercase",
              }}>{t.bookLabel}</a>
            </div>
          </div>

          {/* Intake steps */}
          <div ref={refIntake} className={!isMobile ? `reveal-stagger${visIntake ? " visible" : ""}` : ""} style={{ paddingTop: isMobile ? 0 : 24 }}>
            <div className="label label--wide" style={{ color: "#8080a0", marginBottom: 36 }}>
              {t.howLabel}
            </div>
            <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 28 }}>
              {t.intake.map(([step, desc], i) => (
                <li key={i} className={!isMobile ? "reveal-item" : ""} style={{
                  display: "grid", gridTemplateColumns: "100px 1fr", gap: 24,
                  alignItems: "baseline",
                  paddingBottom: 24,
                  borderBottom: i === t.intake.length - 1 ? "none" : "1px solid #2d2d38",
                }}>
                  <div className="label label--wide" style={{ color: "#0db8cc" }}>{step}</div>
                  <div style={{ fontFamily: "Montserrat", fontWeight: 300, fontSize: 15, color: "#d4d4dc", lineHeight: 1.5 }}
                       dangerouslySetInnerHTML={{ __html: desc }} />
                </li>
              ))}
            </ol>
          </div>
        </div>

        {/* Practical strip */}
        <div style={{
          display: "flex", flexWrap: "wrap", justifyContent: isMobile ? "flex-start" : "space-between", gap: isMobile ? 32 : 48,
          marginTop: isMobile ? 64 : 100, paddingTop: 48, borderTop: "1px solid #2d2d38",
        }}>
          {t.practical.map(({ label, value }) => (
            <div key={label}>
              <div className="label label--wide" style={{ color: "#8080a0", marginBottom: 12 }}>
                {label}
              </div>
              <div style={{ fontFamily: "Montserrat", fontWeight: 300, fontSize: 16, color: "#d4d4dc" }}>
                {value}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.ConnectV2 = ConnectV2;