// Thinking — a "library" of evergreen pieces, not a chronological blog.
// Filtered by kind: Essay / Tool / Case.
function Thinking() {
  const { lang } = React.useContext(window.LangContext);
  const { isMobile, isTablet } = window.useBreakpoint();
  const [refH2, visH2] = window.useReveal();
  const [refCards, visCards] = window.useReveal({ threshold: 0.06 });

  const pieces = [
    {
      kind: "Thinking",
      title: { en: "5 Mistakes SMEs make when introducing AI", de: "5 Fehler, die KMU bei der Einführung von KI machen" },
      hook:  { en: "50 tools. No plan. No start.", de: "50 Tools. Kein Plan. Kein Anfang." },
      lede:  { en: "The patterns that stall AI adoption before the first workflow is ever built — and what to do instead.", de: "Die Muster, die KI-Einführungen in KMU bremsen — noch bevor der erste Workflow steht." },
      length: "Quick read",
      href: {
        en: "assets/notes/01_5_mistakes/5_AI_Adoption_Mistakes·Ondion.pdf",
        de: "assets/notes/01_5_mistakes/5_Fehler_bei_der_KI-Einführung·Ondion.pdf",
      },
    },
    {
      kind: "Tool",
      title: { en: "A First Look: Claude for Small Business", de: "Ein erster Einblick: Claude for Small Business" },
      hook:  { en: "Monthly close. Lead triage. Weekly brief.", de: "Monatsabschluss. Lead-Triage. Wochenbriefing." },
      lede:  { en: "What Anthropic's new SME offering actually does, where the connector gap is, and why data minimisation matters before you connect anything.", de: "Was Anthropics neues KMU-Angebot tatsächlich kann, wo die Connector-Lücke liegt — und warum Datenminimierung wichtig ist, bevor man alles anbindet." },
      length: "PDF Guide",
      href: {
        en: "assets/notes/02_claude_business/Claude_for_Small_Business·Ondion.pdf",
        de: "assets/notes/02_claude_business/Claude_für_KMU·Ondion.pdf",
      },
    },
    {
      kind: "Architecture",
      title: "Excel ▸ Supabase",
      hook:  { en: "One question. 37 Excel files.", de: "Eine Frage. 37 Excel-Dateien." },
      lede:  { en: "Why modern companies no longer build processes on spreadsheets.", de: "Warum moderne Unternehmen ihre Prozesse nicht mehr auf Excel-Dateien aufbauen." },
      length: "PDF Guide",
      href: {
        en: "assets/notes/03_excel-supabase/Excel to Supabase · Ondion.pdf",
        de: "assets/notes/03_excel-supabase/Excel zu Supabase · Ondion.pdf",
      },
    },
  ];

  const en = {
    eyebrow: "08 · Notes",
    h2line1: "Notes.",
    h2line2: "A growing collection.",
    filters: ["All", "Thinking", "Tools", "Cases", "Systems", "Governance", "Architecture"],
    footer: "Systems thinking, operational observations, governance frameworks, workflow concepts, tools, and implementation notes.",
    readLabel: "Read",
  };

  const de = {
    eyebrow: "08 · Notizen",
    h2line1: "Notizen.",
    h2line2: "Einblicke aus der Praxis.",
    filters: ["Alle", "Thinking", "Tools", "Cases", "Systems", "Governance", "Architecture"],
    footer: "Systemdenken, operative Beobachtungen, Governance-Frameworks, Workflow-Konzepte, Tools und Umsetzungsnotizen.",
    readLabel: "Lesen",
  };

  const t = lang === 'de' ? de : en;
  const [filter, setFilter] = React.useState(t.filters[0]);
  const [mobilePage, setMobilePage] = React.useState(0);

  // Reset filter and page on language change
  React.useEffect(() => { setFilter(t.filters[0]); setMobilePage(0); }, [lang]);
  React.useEffect(() => { setMobilePage(0); }, [filter]);

  return (
    <section id="thinking" style={{
      position: "relative",
      padding: isMobile ? "80px 24px 80px" : isTablet ? "80px 40px 80px 40px" : "200px 80px 200px 120px",
      borderBottom: "1px solid #2d2d38",
      background: "#16161b",
    }}>
      <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",
      }}>08</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 || isTablet) ? "1fr" : "1.2fr 1fr", gap: (isMobile || isTablet) ? 32 : 80, alignItems: (isMobile || isTablet) ? "start" : "end", marginBottom: 80 }}>
          <div ref={refH2} className={!isMobile ? `reveal${visH2 ? " visible" : ""}` : ""}>
            <h2 style={{
              fontFamily: "Montserrat", fontWeight: 200,
              fontSize: "clamp(40px, 5.4vw, 88px)",
              lineHeight: 1.04, letterSpacing: "-0.025em",
              color: "#ffffff", margin: "0 0 14px",
            }}>
              {t.h2line1}
            </h2>
            <p style={{
              fontFamily: "Montserrat", fontWeight: 300,
              fontSize: 14, letterSpacing: "0.16em",
              textTransform: "uppercase", color: "#8080a0",
              margin: 0,
            }}>{t.h2line2}</p>
          </div>

          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", justifyContent: (isMobile || isTablet) ? "flex-start" : "flex-end" }}>
            {t.filters.map(f => (
              <button key={f} onClick={() => setFilter(f)} style={{
                padding: "10px 16px", borderRadius: 4,
                background: filter === f ? "rgba(13,184,204,0.10)" : "transparent",
                border: `1px solid ${filter === f ? "rgba(13,184,204,0.28)" : "rgba(255,255,255,0.08)"}`,
                color: filter === f ? "#0db8cc" : "#a8a8b8",
                fontFamily: "Montserrat", fontWeight: 400, fontSize: 10,
                letterSpacing: "0.24em", textTransform: "uppercase",
                cursor: "pointer", transition: "all 200ms ease",
              }}>{f}</button>
            ))}
          </div>
        </div>

        {/* Cards */}
        {(() => {
          const kindMap = { "Thinking": ["Thinking", "Essay"], "Tools": ["Tool"], "Cases": ["Case"] };
          // Newest first: pieces[] is authored oldest→newest (matches 01_/02_/03_ folders),
          // but we display the most recently added note at the top.
          const ordered = pieces.slice().reverse();
          const isAll = filter === "All" || filter === "Alle";
          const allPieces = isAll
            ? ordered
            : ordered.filter(p => (kindMap[filter] || [filter]).includes(p.kind));
          const PAGE = 2;
          const totalPages = Math.ceil(allPieces.length / PAGE);
          const visible = isMobile ? allPieces.slice(mobilePage * PAGE, (mobilePage + 1) * PAGE) : allPieces;
          return (
            <>
              <div ref={refCards} className={!isMobile ? `reveal-stagger${visCards ? " visible" : ""}` : ""} style={{ display: "grid", gridTemplateColumns: (isMobile || isTablet) ? "1fr" : "repeat(3, 1fr)", gap: 18 }}>
                {visible.map((p, i) => {
                  const title = typeof p.title === 'object' ? p.title[lang] || p.title.en : p.title;
                  const hook  = p.hook && (typeof p.hook === 'object' ? p.hook[lang] || p.hook.en : p.hook);
                  const lede  = typeof p.lede  === 'object' ? p.lede[lang]  || p.lede.en  : p.lede;
                  const length = typeof p.length === 'object' ? p.length[lang] || p.length.en : p.length;
                  const url   = p.href && typeof p.href === 'object' ? p.href[lang] || null : p.href;
                  const Tag = url ? 'a' : 'article';
                  const linkProps = url ? { href: url, target: '_blank', rel: 'noopener noreferrer' } : {};
                  return (
                    <Tag key={i} {...linkProps} className={`card-dark card-dark--hero${!isMobile ? " reveal-item" : ""}`} style={{
                      padding: 32,
                      display: "flex", flexDirection: "column",
                      minHeight: (isMobile || isTablet) ? "auto" : 320,
                      transition: "background 220ms ease, border-color 220ms ease",
                      cursor: url ? "pointer" : "default",
                      textDecoration: "none", color: "inherit",
                    }}>
                      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 36 }}>
                        <span className="pill pill-teal">{p.kind}</span>
                        <span className="label label--wide" style={{ color: "#8080a0" }}>{length}</span>
                      </div>
                      <h3 style={{
                        fontFamily: "Montserrat", fontWeight: 300,
                        fontSize: 22, color: "#ffffff", margin: "0 0 16px",
                        letterSpacing: "-0.005em", lineHeight: 1.25,
                      }}>{title}</h3>
                      {hook && <p style={{
                        fontFamily: "Montserrat", fontWeight: 400,
                        fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase",
                        color: "#0db8cc", margin: "0 0 14px",
                      }}>{hook}</p>}
                      <p style={{
                        fontFamily: "Montserrat", fontWeight: 300,
                        fontSize: 13.5, lineHeight: 1.65, color: "#a8a8b8",
                        margin: "0 0 32px",
                      }}>{lede}</p>
                      <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 10 }}>
                        <span className="label label--wide" style={{ color: url ? "#0db8cc" : "#4a4a5a" }}>{t.readLabel}</span>
                        <span style={{ width: 18, height: 1, background: url ? "#0db8cc" : "#4a4a5a" }}></span>
                      </div>
                    </Tag>
                  );
                })}
              </div>

              {isMobile && totalPages > 1 && (
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 24 }}>
                  <button onClick={() => setMobilePage(p => Math.max(0, p - 1))}
                    disabled={mobilePage === 0}
                    style={{
                      background: "none", border: "1px solid #2d2d38", borderRadius: 6,
                      color: mobilePage === 0 ? "#3a3a48" : "#0db8cc",
                      fontFamily: "Montserrat", fontSize: 18, lineHeight: 1,
                      padding: "10px 18px", cursor: mobilePage === 0 ? "default" : "pointer",
                      transition: "color 200ms ease, border-color 200ms ease",
                      borderColor: mobilePage === 0 ? "#2d2d38" : "rgba(13,184,204,0.35)",
                    }}>←</button>
                  <span style={{ fontFamily: "Montserrat", fontSize: 11, letterSpacing: "0.16em", color: "#8080a0" }}>
                    {mobilePage + 1} / {totalPages}
                  </span>
                  <button onClick={() => setMobilePage(p => Math.min(totalPages - 1, p + 1))}
                    disabled={mobilePage === totalPages - 1}
                    style={{
                      background: "none", border: "1px solid #2d2d38", borderRadius: 6,
                      color: mobilePage === totalPages - 1 ? "#3a3a48" : "#0db8cc",
                      fontFamily: "Montserrat", fontSize: 18, lineHeight: 1,
                      padding: "10px 18px", cursor: mobilePage === totalPages - 1 ? "default" : "pointer",
                      transition: "color 200ms ease, border-color 200ms ease",
                      borderColor: mobilePage === totalPages - 1 ? "#2d2d38" : "rgba(13,184,204,0.35)",
                    }}>→</button>
                </div>
              )}
            </>
          );
        })()}

        <p style={{
          fontFamily: "Montserrat", fontWeight: 300, fontSize: 13,
          color: "#8080a0", lineHeight: 1.7, margin: "56px auto 0",
          maxWidth: 560, textAlign: "center",
        }}>
          {t.footer}
        </p>
      </div>
    </section>
  );
}

window.Thinking = Thinking;