// Shared subpage components: SubpageHero, RelatedCards, MoreOnSite teaser strip for main page

const SUBPAGES = [
  { slug: "DWI.html",                  label: "DWI",                  short: "DWI",         blurb: "NMSA § 66-8-102, the escalator, defense strategy, MVD hearing, expungement.", eyebrow: "DWI" },
  { slug: "Fees.html",                 label: "Fees",                 short: "Fees",        blurb: "Flat fees from $1,500 — DWI, misdemeanor, felony, expungement. Payment plans. Appeals not included.", eyebrow: "Pricing" },
  { slug: "Penalties.html",            label: "Penalties",            short: "Sentencing",  blurb: "DWI escalator, felony grid, mandatory minimums.", eyebrow: "Sentencing" },
  { slug: "If Arrested.html",          label: "If you've been arrested", short: "If Arrested", blurb: "Five things to do right now. Stop talking. Ask for a lawyer.", eyebrow: "Right now" },
  { slug: "Albuquerque.html",          label: "Albuquerque",          short: "Albuquerque", blurb: "Where your case is heard in Bernalillo County — Metro, 2nd JDC, DA, MDC.", eyebrow: "Location" },
  { slug: "Las Cruces.html",           label: "Las Cruces",           short: "Las Cruces",  blurb: "The Third Judicial District, Doña Ana courts, and Border Patrol checkpoint cases.", eyebrow: "Location" },
  { slug: "Santa Fe.html",             label: "Santa Fe",             short: "Santa Fe",    blurb: "The First Judicial District — Santa Fe, Rio Arriba, and Los Alamos counties.", eyebrow: "Location" },
  { slug: "Expungement.html",          label: "Expungement",          short: "Expungement", blurb: "Clear your New Mexico criminal record. Two tracks, statute, waiting periods.", eyebrow: "After the case" },
  { slug: "Resources.html",            label: "Resources",            short: "Resources",   blurb: "Public defenders, detention lookups, civil aid, crisis lines — statewide & federal.", eyebrow: "Help & referrals" }
];

const SubpageHero = ({ eyebrow, title, titleAccent, subtitle, current }) => (
  <section style={{ padding: "72px 0 56px", borderBottom: "1px solid var(--rule)" }}>
    <div className="container">
      <nav aria-label="Breadcrumb" style={{ fontSize: 12, fontFamily: "var(--mono)", letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--ink-soft)", marginBottom: 24, display: "flex", alignItems: "center", gap: 10 }}>
        <a href="Criminal Defense.html" style={{ color: "var(--ink)", textDecoration: "none", opacity: 0.7 }}>Criminal defense</a>
        <span style={{ opacity: 0.4 }}>/</span>
        <span style={{ color: "var(--sun)" }}>{current}</span>
      </nav>
      <div className="mono-label" style={{ fontSize: 12, color: "var(--sun)", marginBottom: 22 }}>
        <span className="dot" style={{ marginRight: 10 }}/>{eyebrow}
      </div>
      <h1 className="serif" style={{
        fontSize: "clamp(48px, 6.4vw, 96px)", lineHeight: 1.04, letterSpacing: "-0.02em",
        margin: 0, color: "var(--ink)", maxWidth: 1100
      }}>
        {title}{titleAccent && <em style={{ color: "var(--sun)" }}> {titleAccent}</em>}
      </h1>
      {subtitle && (
        <p className="serif" style={{
          fontSize: 22, lineHeight: 1.45, fontStyle: "italic",
          color: "var(--ink-soft)", margin: "32px 0 0", maxWidth: 820
        }}>
          {subtitle}
        </p>
      )}
    </div>
  </section>
);

// Related-pages strip at the bottom of every sub-page
const RelatedPages = ({ exclude = [] }) => {
  const items = SUBPAGES.filter(s => !exclude.includes(s.slug));
  return (
    <section style={{ padding: "96px 0", background: "var(--cream-2)" }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 36, flexWrap: "wrap" }}>
          <span className="mono-label" style={{ fontSize: 11, color: "var(--sun)" }}>KEEP READING</span>
          <h2 className="serif" style={{ fontSize: "clamp(32px, 4vw, 48px)", margin: 0, lineHeight: 1, letterSpacing: "-0.01em" }}>
            Related pages.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 16 }} className="grid-4">
          {items.map(s => (
            <a key={s.slug} href={s.slug} style={{
              background: "var(--paper)", border: "1px solid var(--rule)",
              padding: "26px 24px", textDecoration: "none", color: "var(--ink)",
              display: "flex", flexDirection: "column", gap: 12,
              transition: "border-color .15s, transform .15s"
            }} onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--ink)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--rule)"; e.currentTarget.style.transform = "none"; }}>
              <div className="mono-label" style={{ fontSize: 10, color: "var(--sun)" }}>{s.eyebrow.toUpperCase()}</div>
              <div className="serif" style={{ fontSize: 24, lineHeight: 1.1 }}>{s.label}</div>
              <div style={{ fontSize: 13, color: "var(--ink-soft)", lineHeight: 1.5, flex: 1 }}>{s.blurb}</div>
              <div style={{ fontSize: 12, fontFamily: "var(--mono)", letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink)", marginTop: "auto" }}>
                Read →
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

// Teaser strip for main page — same as RelatedPages but with a different header.
const MoreOnSite = () => (
  <section 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)" }}>06 · GO DEEPER</span>
        <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 64px)", margin: 0, lineHeight: 1, letterSpacing: "-0.01em" }}>
          Resources for your case.
        </h2>
      </div>
      <p className="serif" style={{ fontSize: 20, fontStyle: "italic", color: "var(--ink-soft)", margin: "0 0 40px", maxWidth: 720, lineHeight: 1.45 }}>
        Five focused pages — the statutes, the courthouses, and the first calls that shape every New Mexico criminal case.
      </p>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 14 }} className="grid-3">
        {SUBPAGES.map((s, i) => (
          <a key={s.slug} href={s.slug} style={{
            background: i === 0 ? "var(--ink)" : "var(--paper)",
            color: i === 0 ? "var(--cream)" : "var(--ink)",
            border: i === 0 ? "1px solid var(--ink)" : "1px solid var(--rule)",
            padding: "28px 22px", textDecoration: "none",
            display: "flex", flexDirection: "column", gap: 12,
            transition: "transform .15s, border-color .15s"
          }} onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-2px)"; }}
            onMouseLeave={e => { e.currentTarget.style.transform = "none"; }}>
            <div className="mono-label" style={{ fontSize: 10, color: i === 0 ? "var(--sun-soft)" : "var(--sun)" }}>0{i + 1} · {s.eyebrow.toUpperCase()}</div>
            <div className="serif" style={{ fontSize: 28, lineHeight: 1.05 }}>{s.label}</div>
            <div style={{ fontSize: 13, lineHeight: 1.5, color: i === 0 ? "rgba(245,239,227,0.82)" : "var(--ink-soft)", flex: 1 }}>{s.blurb}</div>
            <div style={{ fontSize: 11, fontFamily: "var(--mono)", letterSpacing: "0.08em", textTransform: "uppercase", marginTop: "auto", display: "flex", alignItems: "center", gap: 6 }}>
              Open page
              <svg width="10" height="10" viewBox="0 0 12 12" fill="none">
                <path d="M2 6 L10 6 M7 3 L10 6 L7 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { SUBPAGES, SubpageHero, RelatedPages, MoreOnSite });