/* Problem section.
   Big two-line statement. Below it, a grid of tool name-chips that
   collectively imply a fragmented stack — with one central chip showing
   "You" doing the integration by hand. Final line resolves the tension. */
function Problem() {
  const { t } = useT();
  const mobile = useMobile();
  const tools = t("problem.tools");
  const you = t("problem.you");
  const youSub = t("problem.youSub");

  // Desktop: 6-col grid with YOU spanning cols 3-4 rows 2-3
  const layout = [
    { r: 1, c: 1 }, { r: 1, c: 2 }, { r: 1, c: 3 }, { r: 1, c: 4 }, { r: 1, c: 5 }, { r: 1, c: 6 },
    { r: 2, c: 1 }, { r: 2, c: 2 }, { r: 2, c: 5 }, { r: 2, c: 6 },
    { r: 3, c: 1 }, { r: 3, c: 2 }, { r: 3, c: 5 }, { r: 3, c: 6 },
    { r: 4, c: 1 }, { r: 4, c: 2 }
  ];

  const titleStyle = mobile
    ? { ...sectionTitle, font: "700 32px/1.1 'Inter'" }
    : sectionTitle;

  const youNode = (
    <div style={{
      background: "rgba(245,158,11,0.10)",
      border: "1px solid rgba(245,158,11,0.45)",
      borderRadius: 14,
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      justifyContent: "center",
      gap: 4,
      position: "relative",
      zIndex: 2,
      boxShadow: "0 0 0 1px rgba(245,158,11,0.18), 0 12px 36px rgba(245,158,11,0.16)",
      minHeight: mobile ? 72 : undefined,
      padding: mobile ? "16px 12px" : undefined
    }}>
      <div style={{
        font: mobile ? "700 22px/1 'Inter'" : "700 28px/1 'Inter'",
        color: "#F59E0B", letterSpacing: "-0.02em"
      }}>{you}</div>
      <div style={{
        font: "500 12px/1.3 'Inter'", color: "#FBBF24", textAlign: "center",
        maxWidth: 200, padding: "0 12px"
      }}>{youSub}</div>
    </div>
  );

  const toolChip = (name, key) => (
    <div key={key} style={{
      background: "var(--tb-surface-2)",
      border: "1px solid var(--tb-line)",
      borderRadius: 10,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      font: "500 13px/1 'Inter'",
      color: "#CBD5E1",
      position: "relative",
      zIndex: 2,
      minHeight: mobile ? 44 : undefined
    }}>{name}</div>
  );

  return (
    <section id="problem" data-bg="disconnect" style={{ padding: mobile ? "72px 20px 56px" : "112px 32px 80px", maxWidth: 1200, margin: "0 auto" }}>
      <div style={eyebrowBlue}>{t("problem.eyebrow")}</div>

      <h2 style={titleStyle}>
        {t("problem.title_pre")}<br />
        <span style={{ color: "#94A3B8" }}>{t("problem.title_post")}</span>
      </h2>

      <p style={sectionLede}>{t("problem.body")}</p>

      {/* Tool grid */}
      <div style={{
        marginTop: mobile ? 40 : 56,
        position: "relative",
        background: "var(--tb-surface)",
        border: "1px solid var(--tb-line)",
        borderRadius: 20,
        padding: mobile ? 16 : 28,
        boxShadow: "0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px rgba(0,0,0,0.55)"
      }}>
        {mobile ? (
          /* Mobile: 2-col grid. First 8 tools → YOU (full-width) → last 8 tools */
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
            {Array.isArray(tools) && tools.slice(0, 8).map((name, i) => toolChip(name, i))}
            <div style={{ gridColumn: "1 / -1" }}>{youNode}</div>
            {Array.isArray(tools) && tools.slice(8).map((name, i) => toolChip(name, i + 8))}
          </div>
        ) : (
          /* Desktop: 6-col × 4-row CSS grid with YOU spanning center */
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(6, 1fr)",
            gridTemplateRows: "repeat(4, 72px)",
            gap: 12,
            position: "relative"
          }}>
            <ConnectingLines />
            <div style={{
              gridColumn: "3 / span 2",
              gridRow: "2 / span 2",
              position: "relative",
              zIndex: 2
            }}>{youNode}</div>
            {Array.isArray(tools) && tools.slice(0, layout.length).map((name, i) => {
              const pos = layout[i];
              return (
                <div
                  key={i}
                  style={{
                    gridColumn: pos.c,
                    gridRow: pos.r,
                    background: "var(--tb-surface-2)",
                    border: "1px solid var(--tb-line)",
                    borderRadius: 10,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    font: "500 14px/1 'Inter'",
                    color: "#CBD5E1",
                    position: "relative",
                    zIndex: 2
                  }}
                >{name}</div>
              );
            })}
          </div>
        )}
      </div>

      <p style={{
        marginTop: 32,
        font: mobile ? "500 17px/1.5 'Inter'" : "500 20px/1.5 'Inter'",
        color: "#fff",
        maxWidth: 760,
        letterSpacing: "-0.01em"
      }}>
        {t("problem.closer")}
      </p>
    </section>
  );
}

/* SVG layer drawn behind the desktop grid */
function ConnectingLines() {
  return (
    <svg
      style={{
        position: "absolute", inset: 0, width: "100%", height: "100%",
        pointerEvents: "none", zIndex: 1
      }}
      preserveAspectRatio="none"
      viewBox="0 0 600 320"
    >
      <defs>
        <linearGradient id="line-grad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="rgba(148,163,184,0.0)" />
          <stop offset="50%" stopColor="rgba(148,163,184,0.35)" />
          <stop offset="100%" stopColor="rgba(245,158,11,0.45)" />
        </linearGradient>
      </defs>
      {[
        [50, 40], [150, 40], [250, 40], [350, 40], [450, 40], [550, 40],
        [50, 120], [150, 120], [450, 120], [550, 120],
        [50, 200], [150, 200], [450, 200], [550, 200],
        [50, 280], [150, 280]
      ].map(([x, y], i) => (
        <line
          key={i}
          x1={x} y1={y} x2="300" y2="160"
          stroke="url(#line-grad)"
          strokeWidth="1"
          strokeDasharray="2 4"
        />
      ))}
    </svg>
  );
}

/* Shared section atoms */
const eyebrowBlue = {
  font: "600 11px/1 'Inter'",
  letterSpacing: "0.12em",
  textTransform: "uppercase",
  color: "#60A5FA",
  marginBottom: 18
};

const sectionTitle = {
  font: "700 52px/1.08 'Inter'",
  letterSpacing: "-0.022em",
  color: "#fff",
  margin: 0,
  maxWidth: 900,
  textWrap: "balance"
};

const sectionLede = {
  font: "400 18px/1.6 'Inter'",
  color: "#CBD5E1",
  maxWidth: 760,
  marginTop: 22
};

window.Problem = Problem;
window.eyebrowBlue = eyebrowBlue;
window.sectionTitle = sectionTitle;
window.sectionLede = sectionLede;