// Practice area tabs + sentencing visualizations

const PracticeAreas = () => {
  const [active, setActive] = React.useState("dwi");
  const cur = PRACTICE.find(p => p.key === active);
  return (
    <section id="defense" 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)" }}>03 · PRACTICE AREAS</span>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 64px)", margin: 0, lineHeight: 1, letterSpacing: "-0.01em" }}>
            What we defend.
          </h2>
        </div>
        <p className="serif" style={{ fontSize: 20, fontStyle: "italic", color: "var(--ink-soft)", margin: "0 0 40px", maxWidth: 760, lineHeight: 1.45 }}>
          From the petty misdemeanor that's costing you a job to the first-degree felony with your life on the line. Pick a category.
        </p>

        {/* Tab bar */}
        <div role="tablist" aria-label="Practice areas" style={{
          display: "flex", gap: 28, borderBottom: "1px solid var(--rule)",
          marginBottom: 40, flexWrap: "wrap"
        }}>
          {PRACTICE.map(p => (
            <button key={p.key} role="tab" type="button" className="tab-btn"
                    aria-selected={active === p.key}
                    aria-controls={`pa-${p.key}`}
                    onClick={() => setActive(p.key)}>
              {p.label}
            </button>
          ))}
        </div>

        {/* Panel */}
        <div id={`pa-${cur.key}`} role="tabpanel" style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 48 }} className="grid-2">
          <div>
            <div className="mono-label" style={{ fontSize: 10, color: "var(--sun)", marginBottom: 12 }}>
              {cur.statute}
            </div>
            <h3 className="serif" style={{ fontSize: 44, lineHeight: 1.05, letterSpacing: "-0.01em", margin: "0 0 22px" }}>
              {cur.h}
            </h3>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--ink-soft)", margin: "0 0 28px", maxWidth: 580 }}>
              {cur.blurb}
            </p>
            <a href="tel:+15055851235" className="btn-primary">Talk through your case →</a>
          </div>
          <div style={{ background: "var(--cream-2)", padding: "30px 28px", border: "1px solid var(--rule)" }}>
            <div className="mono-label" style={{ fontSize: 10, color: "var(--sun)", marginBottom: 16 }}>WHAT WE LOOK AT</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
              {cur.items.map((it, i) => (
                <li key={i} style={{ display: "flex", gap: 12, fontSize: 14.5, lineHeight: 1.5, color: "var(--ink)" }}>
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ flex: "none", marginTop: 5 }}>
                    <path d="M2 7 L6 11 L12 3" stroke="var(--sun)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  <span>{it}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};

// Interactive DWI escalator (felony block moved to its own component below)
const SentencingExplorer = () => {
  const [offense, setOffense] = React.useState(0);
  const tier = DWI_TIERS[offense];

  return (
    <section id="sentencing" 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)" }}>01 · DWI ESCALATOR</span>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 64px)", margin: 0, lineHeight: 1, letterSpacing: "-0.01em" }}>
            The DWI numbers, plain.
          </h2>
        </div>
        <p className="serif" style={{ fontSize: 20, fontStyle: "italic", color: "var(--ink-soft)", margin: "0 0 40px", maxWidth: 760, lineHeight: 1.45 }}>
          Move the slider through the offense count. New Mexico's escalator is statutory and stacks fast — these are <em>base</em> sentences before aggravated enhancements.
        </p>

        <div style={{ background: "var(--paper)", padding: "40px 36px", border: "1px solid var(--rule)" }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 28, flexWrap: "wrap", gap: 16 }}>
            <div>
              <div className="mono-label" style={{ fontSize: 10, color: "var(--sun)", marginBottom: 6 }}>DWI ESCALATOR · NMSA § 66-8-102</div>
              <h3 className="serif" style={{ fontSize: 30, margin: 0, lineHeight: 1.1 }}>
                Each conviction stacks. {tier.label}.
              </h3>
            </div>
            <div style={{ display: "flex", gap: 6, alignItems: "baseline" }}>
              <span className="numeric serif" style={{ fontSize: 84, lineHeight: 1, letterSpacing: "-0.03em", color: "var(--sun)" }}>{tier.offense}</span>
              <span className="mono-label" style={{ fontSize: 11, opacity: 0.6 }}>OFFENSE</span>
            </div>
          </div>

          <div style={{ position: "relative", padding: "16px 0 32px" }}>
            <input type="range" className="nm-range"
                   min="0" max={DWI_TIERS.length - 1} step="1"
                   value={offense}
                   onChange={e => setOffense(parseInt(e.target.value, 10))}
                   aria-label="Number of DWI offenses"/>
            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 10 }}>
              {DWI_TIERS.map((t, i) => (
                <button key={i} type="button" onClick={() => setOffense(i)}
                        aria-pressed={i === offense}
                        style={{
                          background: "transparent", border: 0, cursor: "pointer",
                          fontFamily: "var(--mono)", fontSize: 11,
                          color: i === offense ? "var(--ink)" : "var(--ink-soft)",
                          opacity: i === offense ? 1 : 0.55,
                          fontWeight: i === offense ? 600 : 400,
                          padding: "2px 4px"
                        }}>
                  {t.offense}
                </button>
              ))}
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, border: "1px solid var(--rule)" }} className="grid-4">
            <Cell k="Classification" v={tier.level} accent/>
            <Cell k="Max incarceration" v={formatDuration(tier.maxJail)}/>
            <Cell k="Mandatory min." v={tier.mandJail === 0 ? "—" : formatDuration(tier.mandJail)}/>
            <Cell k="Statutory fine cap" v={`$${tier.fine.toLocaleString()}`}/>
          </div>
          <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--ink-soft)", margin: "20px 0 0", maxWidth: 800 }}>
            {tier.note}
          </p>
          <div style={{ marginTop: 22, padding: "16px 18px", background: "var(--cream-2)", borderLeft: "3px solid var(--sun)" }}>
            <span className="mono-label" style={{ fontSize: 10, color: "var(--sun)", marginRight: 10 }}>AGGRAVATED DWI ADDS:</span>
            <span style={{ fontSize: 13.5, color: "var(--ink)" }}>BAC ≥ 0.16 · refusal of chemical testing · bodily injury · child in the vehicle (§ 66-8-102.5)</span>
          </div>
        </div>
      </div>
    </section>
  );
};

// Felony emphasis block — separate, dramatic, on dark ink
const FelonyExplorer = () => (
  <section id="felony" 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)" }}>03 · FELONY · NMSA § 31-18-15</span>
      </div>
      <h2 className="serif" style={{
        fontSize: "clamp(48px, 7vw, 96px)",
        margin: "0 0 20px", lineHeight: 0.98, letterSpacing: "-0.025em",
        color: "var(--cream)"
      }}>
        A <em style={{ color: "var(--sun-soft)" }}>felony</em> is a different kind of case.
      </h2>
      <p className="serif" style={{ fontSize: 22, fontStyle: "italic", color: "rgba(245,239,227,0.85)", margin: "0 0 48px", maxWidth: 880, lineHeight: 1.45 }}>
        Years of incarceration. Loss of voting and firearm rights. Immigration consequences. Background checks that follow you. The earliest decisions — charging, preliminary hearing, suppression — are where felony cases are won or lost.
      </p>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }} className="grid-4">
        {FELONY_GRID.map((f, i) => (
          <div key={i} style={{
            background: "rgba(245,239,227,0.06)",
            border: "1px solid rgba(245,239,227,0.2)",
            padding: "28px 24px",
            display: "flex", flexDirection: "column", gap: 10,
            color: "var(--cream)"
          }}>
            <div className="mono-label" style={{ fontSize: 10, color: "var(--sun-soft)" }}>DEGREE</div>
            <h3 className="serif" style={{ fontSize: 26, margin: "0 0 4px", lineHeight: 1.1, color: "var(--cream)" }}>{f.deg}</h3>
            <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
              <span className="numeric serif" style={{ fontSize: 64, lineHeight: 1, letterSpacing: "-0.02em", color: "var(--sun-soft)" }}>{f.years}</span>
              <span className="mono-label" style={{ fontSize: 10, color: "rgba(245,239,227,0.75)" }}>YR{f.years > 1 ? "S" : ""} BASE</span>
            </div>
            <div style={{ fontSize: 13, color: "rgba(245,239,227,0.85)", lineHeight: 1.5 }}>{f.ex}</div>
            <div style={{ marginTop: "auto", paddingTop: 14, borderTop: "1px solid rgba(245,239,227,0.2)", display: "flex", justifyContent: "space-between", fontSize: 11, fontFamily: "var(--mono)", letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(245,239,227,0.78)" }}>
              <span style={{ opacity: 0.85 }}>Fine cap</span>
              <span>${f.fine.toLocaleString()}</span>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, fontFamily: "var(--mono)", letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(245,239,227,0.78)" }}>
              <span style={{ opacity: 0.85 }}>Expunge wait</span>
              <span>{f.waitYears} yrs</span>
            </div>
          </div>
        ))}
      </div>
      <p style={{ fontSize: 13, color: "rgba(245,239,227,0.65)", margin: "28px 0 0", textAlign: "center", fontStyle: "italic" }}>
        Base sentences only. Habitual-offender, firearm, and sexual / child-victim enhancements stack on top. First-degree felonies resulting in the death of a child carry life imprisonment.
      </p>
    </div>
  </section>
);

const Cell = ({ k, v, accent }) => (
  <div style={{
    padding: "18px 20px",
    borderRight: "1px solid var(--rule)",
    background: accent ? "var(--ink)" : "transparent",
    color: accent ? "var(--cream)" : "var(--ink)"
  }}>
    <div className="mono-label" style={{ fontSize: 9.5, opacity: 0.7, marginBottom: 6 }}>{k}</div>
    <div className="serif" style={{ fontSize: 22, lineHeight: 1.15 }}>{v}</div>
  </div>
);

function formatDuration(days) {
  if (days < 365) {
    const months = Math.round(days / 30);
    if (days < 60) return `${days} days`;
    return `${months} mo.`;
  }
  const years = days / 365;
  if (years === Math.floor(years)) return `${years} yrs`;
  return `${years.toFixed(1)} yrs`;
}

Object.assign(window, { PracticeAreas, SentencingExplorer, FelonyExplorer });
