/* How it works (dark section) + Other features */

const HowItWorks = () => {
  const steps = t("how.steps");
  const ref = useReveal();
  return (
    <section id="how" ref={ref} style={{
      background: "#f8ecf4",
      color: "var(--ink)",
      padding: "100px 0",
      borderRadius: 0,
    }}>
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 40 }} className="reveal">
          <span style={{ fontSize: 13, color: "var(--ink-3)", display: "inline-flex", alignItems: "center", gap: 10 }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)" }} />
            {t("how.eyebrow")}
          </span>
          <h2 className="h2" style={{ color: "var(--ink)", marginTop: 14, maxWidth: 700, margin: "14px auto 14px" }}>{t("how.title")}</h2>
          <p className="body-lg" style={{ color: "var(--ink-3)", maxWidth: 620, margin: "0 auto 24px" }}>{t("how.subtitle")}</p>
          <a href={window.ctaUrl()} target="_blank" rel="noreferrer" className="btn" style={{
            background: "var(--accent)", color: "#fff",
          }}>
            {t("how.cta")} <ArrowRight />
          </a>
        </div>

        {/* Animated product GIF */}
        <div className="reveal" style={{
          maxWidth: 900, margin: "40px auto 40px",
          borderRadius: 18,
          overflow: "hidden",
          border: "1px solid #e8d9e4",
          boxShadow: "0 30px 60px -20px rgba(193, 92, 196, 0.25)",
          background: "#ffffff",
        }}>
          <img src="assets/how-gif.gif" alt="AI-Intervue product demo" style={{ width: "100%", display: "block" }} />
        </div>

        {/* 4-step grid */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }} className="how-grid">
          {steps.map((s, i) => (
            <div key={i} className="reveal" style={{
              padding: 24,
              borderRadius: 18,
              background: "#ffffff",
              border: "1px solid #e8d9e4",
              display: "flex", flexDirection: "column", gap: 10,
            }}>
              <div style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.02em",
                textTransform: "uppercase",
              }}>
                <span style={{
                  width: 22, height: 22, borderRadius: 6,
                  background: "var(--accent)", color: "var(--ink)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  fontSize: 11, fontWeight: 500,
                }}>{i + 1}</span>
                {s.step}
              </div>
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 400, lineHeight: 1.2, color: "var(--ink)", marginTop: 4 }}>{s.title}</h3>
              <p style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.5 }}>{s.body}</p>
            </div>
          ))}
        </div>

        {/* Other features */}
        <div className="reveal" style={{ marginTop: 72, textAlign: "center" }}>
          <div style={{ fontSize: 13, color: "var(--ink-3)", marginBottom: 24 }}>{t("how.other.title")}</div>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 12,
          }} className="other-grid">
            {t("how.other.items").map((it, i) => (
              <div key={i} style={{
                padding: "14px 16px",
                borderRadius: 999,
                border: "1px solid #e8d9e4",
                background: "#ffffff",
                display: "inline-flex", alignItems: "center", gap: 10,
                fontSize: 13, color: "var(--ink-2)",
                justifyContent: "center",
              }}>
                <span style={{ color: "var(--accent)" }}><Check /></span>
                {it}
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .how-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .other-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 540px) {
          .how-grid { grid-template-columns: 1fr !important; }
          .other-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

window.HowItWorks = HowItWorks;