// MethodV2 — large heading statement, then three compact columns below a rule.
function MethodV2() {
  const { lang } = React.useContext(window.LangContext);
  const { isMobile, isTablet } = window.useBreakpoint();
  const [refH2, visH2] = window.useReveal();
  const [refCols, visCols] = window.useReveal({ threshold: 0.08 });

  const en = {
    eyebrow: "03 · Method",
    h2line1: "Three steps.",
    h2line2: "Each one answers a concrete question.",
    acts: [
      {
        n: "I", verb: "Understand",
        promise: "How work actually moves today.",
        body: "Before AI can be used effectively, it needs to be clear how tasks, decisions, and coordination actually work in practice — not just on paper.",
      },
      {
        n: "II", verb: "Clarify",
        promise: "Where ownership, handoffs, and decisions become unclear.",
        body: "Together we clarify where work stalls, who holds responsibility, and what needs to be decided before implementation.",
      },
      {
        n: "III", verb: "Implement",
        promise: "Introducing AI so it works in daily operations.",
        body: "The focus is a workflow that teams can understand, own, and reliably use.",
      },
    ],
  };

  const de = {
    eyebrow: "03 · Methode",
    h2line1: "Drei Schritte.",
    h2line2: "Jeder klärt eine konkrete Frage.",
    acts: [
      {
        n: "I", verb: "Verstehen",
        promise: "Wie Arbeit heute wirklich abläuft.",
        body: "Bevor KI sinnvoll eingesetzt werden kann, muss klar sein, wie Aufgaben, Entscheidungen und Abstimmungen im Alltag tatsächlich funktionieren — nicht nur auf dem Papier.",
      },
      {
        n: "II", verb: "Klären",
        promise: "Wo Verantwortung, Übergaben und Entscheidungen unklar werden.",
        body: "Gemeinsam klären wir, wo Arbeit hängen bleibt, wer Verantwortung trägt und was vor der Umsetzung entschieden werden muss.",
      },
      {
        n: "III", verb: "Umsetzen",
        promise: "KI so einführen, dass sie im Alltag funktioniert.",
        body: "Im Mittelpunkt steht ein Ablauf, den Teams verstehen, verantworten und zuverlässig nutzen können.",
      },
    ],
  };

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

  return (
    <section id="method" style={{
      position: "relative",
      padding: isMobile ? "80px 24px 80px" : isTablet ? "80px 40px 80px 40px" : "140px 80px 120px 120px",
      borderBottom: "1px solid #2d2d38",
      background: "#16161b",
      overflow: "hidden",
    }}>
      {/* Watermark */}
      <div style={{
        position: "absolute",
        top: 80,
        right: isMobile ? 16 : 80,
        fontFamily: "Montserrat", fontWeight: 200,
        fontSize: (isMobile || isTablet) ? 80 : 200, lineHeight: 1, color: "#1f1f27",
        letterSpacing: "-0.04em", pointerEvents: "none",
      }}>03</div>

      <div style={{ position: "relative", maxWidth: 1280, margin: "0 auto" }}>

        {/* Eyebrow */}
        <div style={{ display: "flex", gap: 24, alignItems: "center", marginBottom: 56 }}>
          <div style={{ width: 40, height: 1, background: "#4a4a5a" }}></div>
          <span className="label label--wide" style={{ color: "#a8a8b8" }}>{t.eyebrow}</span>
        </div>

        {/* Large heading — dominant statement */}
        <div ref={refH2} className={!isMobile ? `reveal${visH2 ? " visible" : ""}` : ""} style={{ margin: 0 }}>
          <h2 style={{
            fontFamily: "Montserrat", fontWeight: 200,
            fontSize: "clamp(40px, 5.4vw, 88px)",
            lineHeight: 1.04, letterSpacing: "-0.025em",
            color: "#ffffff", margin: "0 0 16px",
          }}>
            {t.h2line1}
          </h2>
          <p style={{
            fontFamily: "Montserrat", fontWeight: 300,
            fontSize: 14, letterSpacing: "0.16em",
            textTransform: "uppercase", color: "#8080a0",
            margin: 0,
          }}>{t.h2line2}</p>
        </div>

        {/* Horizontal rule — structural divider between heading and columns */}
        <div style={{ height: 1, background: "#2d2d38", margin: (isMobile || isTablet) ? "56px 0 48px" : "80px 0 64px" }}></div>

        {/* Three columns — stacked on mobile and tablet */}
        <div ref={refCols} className={!isMobile ? `reveal-stagger${visCols ? " visible" : ""}` : ""} style={{ display: "grid", gridTemplateColumns: (isMobile || isTablet) ? "1fr" : "1fr 1fr 1fr", gap: (isMobile || isTablet) ? 0 : "0 80px" }}>
          {t.acts.map((a, i) => (
            <div key={a.n} className={!isMobile ? "reveal-item" : ""} style={{
              paddingLeft: i > 0 && !isMobile && !isTablet ? 20 : 0,
              borderLeft: i > 0 && !isMobile && !isTablet ? "1px solid #2d2d38" : "none",
              paddingTop: i > 0 && (isMobile || isTablet) ? 40 : 0,
              marginTop: i > 0 && (isMobile || isTablet) ? 40 : 0,
              borderTop: i > 0 && (isMobile || isTablet) ? "1px solid #2d2d38" : "none",
            }}>
              {/* Large graphical Roman numeral */}
              <div style={{
                fontFamily: "Montserrat", fontWeight: 200,
                fontSize: "clamp(48px, 5vw, 72px)",
                lineHeight: 1, letterSpacing: "-0.02em",
                color: "#0db8cc",
                marginBottom: 24,
              }}>{a.n}</div>

              {/* Verb — medium, white */}
              <h3 style={{
                fontFamily: "Montserrat", fontWeight: 200,
                fontSize: "clamp(22px, 2.2vw, 30px)",
                color: "#ffffff", margin: "0 0 22px",
                letterSpacing: "-0.015em", lineHeight: 1.1,
              }}>{a.verb}</h3>

              {/* Promise */}
              <p style={{
                fontFamily: "Montserrat", fontWeight: 300,
                fontSize: 17, lineHeight: 1.5, color: "#d4d4dc",
                margin: "0 0 12px", letterSpacing: "-0.005em",
              }}>{a.promise}</p>

              {/* Body */}
              <p style={{
                fontFamily: "Montserrat", fontWeight: 300,
                fontSize: 15, lineHeight: 1.75, color: "#8080a0",
                margin: 0,
              }} dangerouslySetInnerHTML={{ __html: a.body }} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.MethodV2 = MethodV2;