// How We Work — Timeline

function Process() {
  const steps = [
    { n: "01", t: "Discover", d: "Understand your business and identify opportunities.", details: ["Audit", "Goals", "Constraints"] },
    { n: "02", t: "Build", d: "Create infrastructure and systems around growth goals.", details: ["Stack", "Workflows", "Content"] },
    { n: "03", t: "Launch", d: "Deploy and optimize.", details: ["QA", "Measure", "Tune"] },
    { n: "04", t: "Scale", d: "Double down on what works.", details: ["Compound", "Expand", "Iterate"] },
  ];
  return (
    <section id="process" style={{ padding: "140px 0", background: "var(--ink)", color: "var(--paper)" }}>
      <div className="container">
        <div className="section-head" style={{ paddingBottom: 80 }}>
          <div>
            <Reveal>
              <div className="row gap-3" style={{ alignItems: "center" }}>
                <span className="idx" style={{ color: "rgba(255,255,255,0.5)" }}>04</span>
                <span style={{ width: 28, height: 1, background: "rgba(255,255,255,0.2)" }}></span>
                <span className="eyebrow" style={{ color: "var(--paper)" }}>How We Work</span>
              </div>
            </Reveal>
            <Reveal delay={120}>
              <h2 className="h-1" style={{ marginTop: 32, color: "var(--paper)" }}>
                Growth should feel <span style={{ color: "var(--accent)" }}>intentional.</span>
              </h2>
            </Reveal>
          </div>
          <Reveal delay={200}>
            <p className="lede" style={{ color: "rgba(255,255,255,0.6)", maxWidth: "40ch" }}>
              Simple process. Real partnership. Built to compound, not to impress.
            </p>
          </Reveal>
        </div>

        {/* Timeline */}
        <div style={{ position: "relative", marginTop: 32 }}>
          <div style={{
            position: "absolute",
            top: 38,
            left: 0,
            right: 0,
            height: 1,
            background: "rgba(255,255,255,0.12)",
          }}></div>

          <div className="process-grid" style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 32,
            position: "relative",
          }}>
            {steps.map((s, i) => (
              <Reveal key={s.n} delay={i * 120}>
                <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                  <div className="row" style={{ alignItems: "center", gap: 14 }}>
                    <span style={{
                      width: 14, height: 14,
                      borderRadius: "50%",
                      background: i === 0 ? "var(--accent)" : "var(--paper)",
                      border: "4px solid var(--ink)",
                      boxShadow: i === 0 ? "0 0 0 2px var(--accent)" : "0 0 0 2px rgba(255,255,255,0.2)",
                    }}></span>
                    <span style={{
                      fontFamily: "var(--mono)",
                      fontSize: 11,
                      letterSpacing: "0.16em",
                      color: "rgba(255,255,255,0.5)",
                      textTransform: "uppercase",
                    }}>STEP {s.n}</span>
                  </div>
                  <h3 style={{ margin: "20px 0 0", fontSize: 34, fontWeight: 500, letterSpacing: "-0.03em" }}>{s.t}</h3>
                  <p style={{ margin: 0, fontSize: 15, color: "rgba(255,255,255,0.65)", lineHeight: 1.5, maxWidth: 280 }}>
                    {s.d}
                  </p>
                  <ul style={{ listStyle: "none", margin: "16px 0 0", padding: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                    {s.details.map((d) => (
                      <li key={d} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: "rgba(255,255,255,0.55)" }}>
                        <span style={{ width: 14, height: 1, background: "rgba(255,255,255,0.3)" }}></span>
                        {d}
                      </li>
                    ))}
                  </ul>
                </div>
              </Reveal>
            ))}
          </div>
        </div>

        <Reveal delay={200}>
          <div style={{
            marginTop: 100,
            padding: "32px 0 0",
            borderTop: "1px solid rgba(255,255,255,0.1)",
            display: "grid",
            gridTemplateColumns: "1fr 1fr 1fr",
            gap: 24,
          }} className="process-quote">
            {["No fluff.", "No disappearing account managers.", "No guessing."].map((q, i) => (
              <div key={q} style={{
                fontSize: 20,
                letterSpacing: "-0.02em",
                fontWeight: 450,
                color: "var(--paper)",
              }}>
                <span style={{ color: "var(--accent)", marginRight: 8, fontFamily: "var(--mono)", fontSize: 12 }}>0{i+1}</span>
                {q}
              </div>
            ))}
          </div>
        </Reveal>
      </div>

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

window.Process = Process;