// Process timeline + Arrest steps + Expungement

const ProcessTimeline = ({ city }) => {
  const c = CITIES[city];
  const [active, setActive] = React.useState(0);
  return (
    <section id="process" style={{ padding: "96px 0", background: "var(--paper)" }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 18, flexWrap: "wrap" }}>
          <span className="mono-label" style={{ fontSize: 11, color: "var(--sun)" }}>05 · THE PROCESS</span>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 64px)", margin: 0, lineHeight: 1, letterSpacing: "-0.01em" }}>
            From arrest to expungement.
          </h2>
        </div>
        <p className="serif" style={{ fontSize: 20, fontStyle: "italic", color: "var(--ink-soft)", margin: "0 0 56px", maxWidth: 760, lineHeight: 1.45 }}>
          Eight stages. The earlier we're involved, the more options you have — bond, charging decisions, and detention motions all happen in the first 24 hours.
        </p>

        {/* Timeline rail */}
        <div style={{ position: "relative", marginBottom: 40 }}>
          <div style={{ position: "absolute", top: 22, left: 0, right: 0, height: 1, background: "var(--rule)" }}/>
          <div style={{ display: "grid", gridTemplateColumns: `repeat(${PROCESS.length}, 1fr)`, gap: 0 }}>
            {PROCESS.map((s, i) => (
              <button key={s.n} type="button"
                      onClick={() => setActive(i)}
                      aria-pressed={i === active}
                      style={{
                        background: "transparent", border: 0, padding: "0 8px",
                        textAlign: "center", cursor: "pointer",
                        display: "flex", flexDirection: "column", alignItems: "center", gap: 10
                      }}>
                <span style={{
                  width: 44, height: 44, borderRadius: "50%",
                  background: i === active ? "var(--ink)" : "var(--paper)",
                  color: i === active ? "var(--cream)" : "var(--ink)",
                  border: `1px solid ${i === active ? "var(--ink)" : "var(--rule-strong)"}`,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: "var(--mono)", fontSize: 13, fontWeight: 500,
                  transition: "all .15s",
                  position: "relative", zIndex: 1
                }}>{s.n}</span>
                <span style={{
                  fontSize: 11, fontFamily: "var(--mono)", letterSpacing: "0.06em",
                  textTransform: "uppercase",
                  color: i === active ? "var(--ink)" : "var(--ink-soft)",
                  opacity: i === active ? 1 : 0.55,
                  fontWeight: i === active ? 600 : 400,
                  lineHeight: 1.3,
                  maxWidth: 110
                }}>{s.h}</span>
              </button>
            ))}
          </div>
        </div>

        {/* Active step detail */}
        <div style={{ background: "var(--cream-2)", padding: "36px 36px", border: "1px solid var(--rule)", display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 36, alignItems: "start" }} className="grid-3">
          <div>
            <div className="mono-label" style={{ fontSize: 10, color: "var(--sun)", marginBottom: 8 }}>STAGE</div>
            <div className="numeric serif" style={{ fontSize: 72, lineHeight: 1, letterSpacing: "-0.02em" }}>{PROCESS[active].n}</div>
          </div>
          <div>
            <h3 className="serif" style={{ fontSize: 32, lineHeight: 1.1, margin: "0 0 14px" }}>{PROCESS[active].h}</h3>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--ink-soft)", margin: 0, maxWidth: 620 }}>{PROCESS[active].b}</p>
          </div>
          <div style={{ borderLeft: "1px solid var(--rule)", paddingLeft: 28, minWidth: 200 }}>
            <div className="mono-label" style={{ fontSize: 10, color: "var(--sun)", marginBottom: 8 }}>WHERE · IN {c.name.toUpperCase()}</div>
            <div className="serif" style={{ fontSize: 18, lineHeight: 1.3, color: "var(--ink)" }}>{PROCESS[active].city}</div>
          </div>
        </div>

        {/* Nav arrows */}
        <div style={{ marginTop: 20, display: "flex", justifyContent: "space-between" }}>
          <button type="button" className="btn-ghost"
                  disabled={active === 0}
                  onClick={() => setActive(Math.max(0, active - 1))}
                  style={{ opacity: active === 0 ? 0.4 : 1 }}>
            ← Previous
          </button>
          <button type="button" className="btn-primary"
                  disabled={active === PROCESS.length - 1}
                  onClick={() => setActive(Math.min(PROCESS.length - 1, active + 1))}
                  style={{ opacity: active === PROCESS.length - 1 ? 0.4 : 1 }}>
            Next stage →
          </button>
        </div>
      </div>
    </section>
  );
};

const IfArrested = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="arrested" style={{ padding: "96px 0", background: "var(--ink)", color: "var(--cream)" }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 18, flexWrap: "wrap" }}>
          <span className="mono-label" style={{ fontSize: 11, color: "var(--sun-soft)" }}>06 · IF YOU'VE BEEN ARRESTED</span>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 64px)", margin: 0, lineHeight: 1, letterSpacing: "-0.01em", color: "var(--cream)" }}>
            Five things to do <em style={{ color: "var(--sun-soft)" }}>right now.</em>
          </h2>
        </div>
        <p className="serif" style={{ fontSize: 20, fontStyle: "italic", color: "rgba(245,239,227,0.78)", margin: "0 0 48px", maxWidth: 720, lineHeight: 1.45 }}>
          The hours and days after an arrest shape everything that follows. Even if you can't reach a lawyer this minute, these five hold up.
        </p>

        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 56 }} className="grid-2">
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 0 }}>
            {ARREST_STEPS.map((s, i) => {
              const isOpen = open === i;
              return (
                <li key={s.n} style={{ borderTop: "1px solid rgba(245,239,227,0.18)" }}>
                  <button type="button"
                          onClick={() => setOpen(isOpen ? -1 : i)}
                          aria-expanded={isOpen}
                          style={{
                            width: "100%", background: "transparent", border: 0,
                            padding: "24px 0", textAlign: "left", cursor: "pointer",
                            color: "var(--cream)", display: "flex", alignItems: "baseline", gap: 24
                          }}>
                    <span className="mono-label numeric" style={{ fontSize: 11, color: "var(--sun-soft)", minWidth: 36 }}>{s.n}</span>
                    <span className="serif" style={{ fontSize: 28, lineHeight: 1.15, flex: 1, color: "var(--cream)" }}>{s.h}</span>
                    <span style={{ fontSize: 18, color: "var(--sun-soft)", transform: isOpen ? "rotate(45deg)" : "none", transition: "transform .2s" }}>+</span>
                  </button>
                  {isOpen && (
                    <p style={{ fontSize: 15.5, lineHeight: 1.65, color: "rgba(245,239,227,0.85)", margin: "0 0 24px", paddingLeft: 60, maxWidth: 640 }}>
                      {s.b}
                    </p>
                  )}
                </li>
              );
            })}
            <li style={{ borderTop: "1px solid rgba(245,239,227,0.18)" }}/>
          </ul>

          <aside style={{ background: "var(--cream)", color: "var(--ink)", padding: "36px 32px", border: "1px solid var(--rule-strong)" }}>
            <div className="mono-label" style={{ fontSize: 10, marginBottom: 18, color: "var(--sun-text)" }}>ARREST EMERGENCY · 24H</div>
            <h3 className="serif" style={{ fontSize: 34, margin: "0 0 18px", lineHeight: 1.05, letterSpacing: "-0.01em" }}>
              If a loved one was just booked.
            </h3>
            <p style={{ fontSize: 15, lineHeight: 1.55, margin: "0 0 24px", color: "var(--ink-soft)" }}>
              Bond conditions, charging decisions, and pretrial detention motions all happen in the first day. When you call, Johnn answers — he runs intake himself.
            </p>
            <a href="tel:+15055851235" style={{
              display: "block",
              fontFamily: "var(--mono)", fontSize: 13, letterSpacing: "0.06em",
              color: "var(--ink)", textDecoration: "none", textTransform: "uppercase",
              borderTop: "1px solid var(--rule-strong)", paddingTop: 16, marginBottom: 6
            }}>CALL</a>
            <div className="serif" style={{ fontSize: 40, lineHeight: 1, letterSpacing: "-0.02em" }}>505.585.1235</div>
            <div style={{ marginTop: 20, fontSize: 12, fontFamily: "var(--mono)", letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--ink-soft)" }}>
              ABQ → MDC · LC → Doña Ana Detention
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
};

// Expungement section — waiting periods table + 2 tracks
const ExpungementSection = ({ city }) => {
  const c = CITIES[city];
  const courthouse = city === "abq" ? "Second Judicial District Court · 400 Lomas Blvd. NW" : "Third Judicial District Court · 201 W. Picacho Ave.";
  return (
    <section id="expungement" style={{ padding: "96px 0", background: "var(--cream-2)" }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 18, flexWrap: "wrap" }}>
          <span className="mono-label" style={{ fontSize: 11, color: "var(--sun)" }}>07 · AFTER THE CASE</span>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 64px)", margin: 0, lineHeight: 1, letterSpacing: "-0.01em" }}>
            Clear your record.
          </h2>
        </div>
        <p className="serif" style={{ fontSize: 20, fontStyle: "italic", color: "var(--ink-soft)", margin: "0 0 48px", maxWidth: 760, lineHeight: 1.45 }}>
          Resolving the criminal case is step one. Clearing the record is step two. Expungement under the Criminal Record Expungement Act (NMSA § 29-3A) seals records from public databases and lets you legally answer "no" to most arrest and conviction questions.
        </p>

        {/* Two tracks */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginBottom: 48 }} className="grid-2">
          <div style={{ background: "var(--paper)", padding: "32px 28px", border: "1px solid var(--rule)" }}>
            <div className="mono-label" style={{ fontSize: 10, color: "var(--sun)", marginBottom: 12 }}>TRACK A · NON-CONVICTION · § 29-3A-4</div>
            <h3 className="serif" style={{ fontSize: 28, margin: "0 0 14px", lineHeight: 1.1 }}>If your case ended without a conviction.</h3>
            <p style={{ fontSize: 14.5, lineHeight: 1.6, color: "var(--ink-soft)", margin: "0 0 18px" }}>
              Dismissals, acquittals, nolle prosequi, pre-prosecution diversion, conditional discharges, and certain Motor Vehicle Code deferred sentences.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "10px 16px", fontSize: 14, lineHeight: 1.5 }}>
              <span className="mono-label" style={{ fontSize: 10, color: "var(--sun)" }}>WAIT</span>
              <span>1 year from final disposition</span>
              <span className="mono-label" style={{ fontSize: 10, color: "var(--sun)" }}>STANDARD</span>
              <span>Court <em>shall</em> grant if you qualify</span>
              <span className="mono-label" style={{ fontSize: 10, color: "var(--sun)" }}>HEARING</span>
              <span>Often unnecessary</span>
              <span className="mono-label" style={{ fontSize: 10, color: "var(--sun)" }}>TYPICAL TIME</span>
              <span>4–6 months end-to-end</span>
            </div>
          </div>

          <div style={{ background: "var(--ink)", color: "var(--cream)", padding: "32px 28px" }}>
            <div className="mono-label" style={{ fontSize: 10, color: "var(--sun-soft)", marginBottom: 12 }}>TRACK B · CONVICTION · § 29-3A-5</div>
            <h3 className="serif" style={{ fontSize: 28, margin: "0 0 14px", lineHeight: 1.1, color: "var(--cream)" }}>If you were convicted.</h3>
            <p style={{ fontSize: 14.5, lineHeight: 1.6, color: "rgba(245,239,227,0.82)", margin: "0 0 18px" }}>
              Discretionary. You must show "justice will be served" — a written narrative addressing five statutory factors. This is where most denied petitions fall apart.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "10px 16px", fontSize: 14, lineHeight: 1.5 }}>
              <span className="mono-label" style={{ fontSize: 10, color: "var(--sun-soft)" }}>WAIT</span>
              <span>2–10 years (offense-dependent)</span>
              <span className="mono-label" style={{ fontSize: 10, color: "var(--sun-soft)" }}>STANDARD</span>
              <span>Court may grant or deny</span>
              <span className="mono-label" style={{ fontSize: 10, color: "var(--sun-soft)" }}>HEARING</span>
              <span>Mandatory</span>
              <span className="mono-label" style={{ fontSize: 10, color: "var(--sun-soft)" }}>TYPICAL TIME</span>
              <span>7–10 months end-to-end</span>
            </div>
          </div>
        </div>

        {/* Waiting periods table */}
        <div style={{ background: "var(--paper)", padding: "32px 36px", border: "1px solid var(--rule)" }}>
          <div className="mono-label" style={{ fontSize: 10, color: "var(--sun)", marginBottom: 18 }}>CONVICTION-TRACK WAITING PERIODS</div>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14.5 }}>
            <thead>
              <tr style={{ borderBottom: "1px solid var(--rule-strong)" }}>
                <th style={{ textAlign: "left", padding: "12px 0", fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", opacity: 0.65 }}>Offense category</th>
                <th style={{ textAlign: "right", padding: "12px 0", fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", opacity: 0.65 }}>Wait</th>
              </tr>
            </thead>
            <tbody>
              {[
                ["Municipal ordinance violation", "2 yrs"],
                ["Misdemeanor (general)", "2 yrs"],
                ["Aggravated battery misdemeanor (§ 30-3-5(B))", "4 yrs"],
                ["Fourth-degree felony", "4 yrs"],
                ["Third-degree felony", "6 yrs"],
                ["Second-degree felony", "8 yrs"],
                ["First-degree felony", "10 yrs"],
                ["Crimes Against Household Members Act offense", "10 yrs"]
              ].map(([k, v], i) => (
                <tr key={i} style={{ borderBottom: "1px solid var(--rule)" }}>
                  <td style={{ padding: "14px 0", color: "var(--ink)" }}>{k}</td>
                  <td style={{ padding: "14px 0", textAlign: "right", color: "var(--ink)", fontFamily: "var(--mono)", fontSize: 13, fontWeight: 500 }}>{v}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <p style={{ fontSize: 13, color: "var(--ink-soft)", margin: "20px 0 0", fontStyle: "italic" }}>
            Clock runs from the date you completed your <strong style={{ color: "var(--ink)" }}>last</strong> sentence in any jurisdiction — not just the case you want expunged.
          </p>
        </div>

        {/* What's excluded */}
        <div style={{ marginTop: 32, padding: "26px 28px", background: "var(--paper)", borderLeft: "3px solid var(--sun)" }}>
          <div className="mono-label" style={{ fontSize: 10, color: "var(--sun)", marginBottom: 10 }}>PERMANENTLY EXCLUDED · § 29-3A-5(G)</div>
          <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: "var(--ink)" }}>
            Five categories of convictions cannot be expunged at any waiting period: offenses against a child · offenses that caused great bodily harm or death · SORNA sex offenses · embezzlement · DWI offenses involving alcohol or drugs. Non-conviction outcomes for the same charges may still qualify.
          </p>
        </div>

        {/* Cross-link to expungementnewmexico.com */}
        <div style={{ marginTop: 18, padding: "20px 28px", background: "var(--cream-2)", border: "1px solid var(--rule)", display: "flex", flexWrap: "wrap", gap: 16, alignItems: "center", justifyContent: "space-between" }}>
          <div>
            <div className="mono-label" style={{ fontSize: 10, color: "var(--sun)", marginBottom: 4 }}>FULL EXPUNGEMENT GUIDE</div>
            <div className="serif" style={{ fontSize: 22, lineHeight: 1.2 }}>Step-by-step guides, every form, every fee.</div>
          </div>
          <a href="https://www.expungementnewmexico.com" target="_blank" rel="noopener noreferrer" className="btn-primary" aria-label="Visit expungementnewmexico.com — opens in new tab">
            expungementnewmexico.com →
          </a>
        </div>

        {/* File-where callout */}
        <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 18 }} className="grid-3">
          <div style={{ padding: "20px 22px", border: "1px solid var(--rule)" }}>
            <div className="mono-label" style={{ fontSize: 10, color: "var(--sun)", marginBottom: 6 }}>FILE AT</div>
            <div className="serif" style={{ fontSize: 18, lineHeight: 1.25 }}>{courthouse}</div>
            <div style={{ fontSize: 12, color: "var(--ink-soft)", marginTop: 6 }}>Petitions file in the district where the case originated.</div>
          </div>
          <div style={{ padding: "20px 22px", border: "1px solid var(--rule)" }}>
            <div className="mono-label" style={{ fontSize: 10, color: "var(--sun)", marginBottom: 6 }}>FILING FEE</div>
            <div className="numeric serif" style={{ fontSize: 28, lineHeight: 1 }}>$132.00</div>
            <div style={{ fontSize: 12, color: "var(--ink-soft)", marginTop: 6 }}>Waivable via Form 4-222 if you can't afford it.</div>
          </div>
          <div style={{ padding: "20px 22px", border: "1px solid var(--rule)" }}>
            <div className="mono-label" style={{ fontSize: 10, color: "var(--sun)", marginBottom: 6 }}>SERVE</div>
            <div className="serif" style={{ fontSize: 17, lineHeight: 1.3 }}>{c.county} DA · NM DPS LERB · arresting agency</div>
            <div style={{ fontSize: 12, color: "var(--ink-soft)", marginTop: 6 }}>30 days objection (non-conviction) · 60 days (conviction).</div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { ProcessTimeline, IfArrested, ExpungementSection });
