/* Process section.
   Three phases as cards stacked horizontally (desktop) or vertically (mobile). */
function Process() {
  const { t } = useT();
  const mobile = useMobile();
  const phases = t("process.phases");

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

  return (
    <section id="process" data-bg="approval" style={{ padding: mobile ? "72px 20px 56px" : "112px 32px 80px", maxWidth: 1200, margin: "0 auto" }}>
      <div style={window.eyebrowBlue}>{t("process.eyebrow")}</div>
      <h2 style={titleStyle}>
        {t("process.title_pre")} <span style={{ color: "#94A3B8" }}>{t("process.title_post")}</span>
      </h2>
      <p style={{
        font: mobile ? "500 17px/1.4 'Inter'" : "500 20px/1.4 'Inter'",
        color: "#2DD4BF",
        marginTop: 16,
        letterSpacing: "-0.01em"
      }}>{t("process.sub")}</p>

      <div style={{
        display: "grid",
        gridTemplateColumns: mobile ? "1fr" : "repeat(3, 1fr)",
        gap: mobile ? 12 : 16,
        marginTop: mobile ? 40 : 56,
        position: "relative"
      }}>
        {Array.isArray(phases) && phases.map((p, i) => {
          const isLive = i === phases.length - 1;
          return (
            <article key={i} style={{
              background: "var(--tb-surface)",
              border: `1px solid ${isLive ? "rgba(45,212,191,0.30)" : "var(--tb-line)"}`,
              borderRadius: 16,
              padding: mobile ? 20 : 28,
              boxShadow: isLive
                ? "0 0 0 1px rgba(45,212,191,0.12), 0 16px 40px rgba(0,0,0,0.5)"
                : "0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45)",
              display: "flex",
              flexDirection: "column",
              gap: 14
            }}>
              <header style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <div style={{
                  font: mobile ? "700 28px/1 'JetBrains Mono'" : "700 36px/1 'JetBrains Mono'",
                  color: isLive ? "#2DD4BF" : "#3B82F6",
                  letterSpacing: "-0.02em"
                }}>{p.n}</div>
                <div style={{
                  font: "600 11px/1 'Inter'",
                  letterSpacing: "0.10em",
                  textTransform: "uppercase",
                  color: isLive ? "#2DD4BF" : "#94A3B8",
                  background: isLive ? "rgba(45,212,191,0.10)" : "var(--tb-surface-2)",
                  border: `1px solid ${isLive ? "rgba(45,212,191,0.30)" : "var(--tb-line)"}`,
                  borderRadius: 999,
                  padding: "6px 10px",
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 8
                }}>
                  {isLive && <span style={{
                    width: 6, height: 6, borderRadius: 999, background: "#2DD4BF",
                    boxShadow: "0 0 0 3px rgba(45,212,191,0.25)"
                  }} />}
                  {p.days}
                </div>
              </header>

              <h3 style={{
                font: mobile ? "600 20px/1.25 'Inter'" : "600 24px/1.25 'Inter'",
                letterSpacing: "-0.015em",
                color: "#fff",
                margin: 0
              }}>{p.title}</h3>

              <p style={{
                font: "400 15px/1.6 'Inter'",
                color: "#94A3B8",
                margin: 0
              }}>{p.body}</p>

              <div style={{
                marginTop: 4,
                paddingTop: 16,
                borderTop: "1px solid var(--tb-line)",
                display: "flex", flexDirection: "column", gap: 10
              }}>
                {Array.isArray(p.deliverables) && p.deliverables.map((d, j) => (
                  <div key={j} style={{
                    display: "flex", alignItems: "flex-start", gap: 10,
                    font: "400 14px/1.5 'Inter'",
                    color: "#CBD5E1"
                  }}>
                    <span style={{
                      width: 16, height: 16, borderRadius: 999,
                      background: isLive ? "rgba(45,212,191,0.14)" : "rgba(59,130,246,0.14)",
                      color: isLive ? "#2DD4BF" : "#60A5FA",
                      display: "inline-flex",
                      alignItems: "center",
                      justifyContent: "center",
                      font: "700 10px 'Inter'",
                      flexShrink: 0,
                      marginTop: 2
                    }}>✓</span>
                    {d}
                  </div>
                ))}
              </div>
            </article>
          );
        })}
      </div>
    </section>
  );
}

window.Process = Process;