// Courts directory (varies by city), FAQ

const CourtsDirectory = ({ city }) => {
  const c = CITIES[city];
  return (
    <section id="courts" 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)" }}>08 · COURTS & AGENCIES · {c.name.toUpperCase()}</span>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 64px)", margin: 0, lineHeight: 1, letterSpacing: "-0.01em" }}>
            Where your case is heard.
          </h2>
        </div>
        <p className="serif" style={{ fontSize: 20, fontStyle: "italic", color: "var(--ink-soft)", margin: "0 0 48px", maxWidth: 760, lineHeight: 1.45 }}>
          {c.courtsIntro}
        </p>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }} className="grid-2">
          {c.courts.map((court, i) => (
            <article key={i} style={{
              background: "var(--cream-2)", padding: "30px 28px",
              border: "1px solid var(--rule)",
              display: "flex", flexDirection: "column", gap: 12
            }}>
              <div className="mono-label" style={{ fontSize: 10, color: "var(--sun)" }}>0{i + 1}</div>
              <h3 className="serif" style={{ fontSize: 26, margin: 0, lineHeight: 1.15 }}>{court.name}</h3>
              <p style={{ fontSize: 13.5, color: "var(--ink-soft)", margin: 0, fontStyle: "italic", fontFamily: "var(--serif)" }}>{court.sub}</p>
              <div style={{ height: 1, background: "var(--rule)", margin: "4px 0" }}/>
              <address style={{ fontStyle: "normal", fontSize: 14, lineHeight: 1.55, color: "var(--ink)" }}>
                {court.addr}<br/>{court.city}<br/>
                <a href={`tel:${court.phone.replace(/[^0-9+]/g, "")}`} className="numeric" style={{ color: "var(--ink)", textDecoration: "none" }}>{court.phone}</a>
              </address>
              <div className="mono-label" style={{ fontSize: 10, opacity: 0.6 }}>{court.web}</div>
              <p style={{ fontSize: 13, lineHeight: 1.55, color: "var(--ink-soft)", margin: "6px 0 0" }}>{court.notes}</p>
            </article>
          ))}
        </div>

        {/* How cases move */}
        <div style={{ marginTop: 36, padding: "30px 36px", background: "var(--sky)", color: "var(--ink)" }}>
          <div className="mono-label" style={{ fontSize: 10, marginBottom: 12 }}>HOW CASES MOVE</div>
          <h3 className="serif" style={{ fontSize: 24, margin: "0 0 12px", lineHeight: 1.2 }}>
            {c.flowH}
          </h3>
          <p style={{ fontSize: 15, lineHeight: 1.6, margin: 0, maxWidth: 880 }}>
            {c.flowP}
          </p>
        </div>

        {/* Neighborhoods served strip */}
        <div style={{ marginTop: 28, display: "flex", flexWrap: "wrap", gap: "8px 14px", alignItems: "center" }}>
          <span className="mono-label" style={{ fontSize: 10, opacity: 0.55, marginRight: 8 }}>NEIGHBORHOODS SERVED ·</span>
          {c.neighborhoods.map(n => (
            <span key={n} style={{
              fontSize: 12, fontFamily: "var(--mono)", letterSpacing: "0.04em",
              padding: "4px 10px", borderRadius: 999, border: "1px solid var(--rule)",
              color: "var(--ink-soft)"
            }}>{n}</span>
          ))}
        </div>
      </div>
    </section>
  );
};

const FeesSection = () => (
  <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)" }}>09 · COST</span>
        <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 64px)", margin: 0, lineHeight: 1, letterSpacing: "-0.01em" }}>
          What it costs, plainly.
        </h2>
      </div>
      <p className="serif" style={{ fontSize: 20, fontStyle: "italic", color: "var(--ink-soft)", margin: "0 0 48px", maxWidth: 760, lineHeight: 1.45 }}>
        Flat-fee pricing on most matters — you know what you'll pay before we start. Payment plans on every case.
      </p>

      {/* Starting-price grid — direct from the fee schedule */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }} className="grid-4">
        {[
          { label: "First-offense DWI", from: "$3,000", note: "trial included" },
          { label: "Misdemeanor", from: "$1,500", note: "general / traffic" },
          { label: "Domestic violence", from: "$2,500", note: "1st offense, misd." },
          { label: "Felony possession", from: "$3,500", note: "controlled substance" },
          { label: "4th-degree felony", from: "$5,000", note: "non-drug, non-DWI" },
          { label: "Felony DWI (4th)", from: "$7,500", note: "trial separate" },
          { label: "Probation violation", from: "$2,500", note: "hearing-based" },
          { label: "Expungement", from: "$3,500", note: "$250/mo plan" }
        ].map((b, i) => (
          <a key={i} href={`Fees.html#${["dwi","misdemeanors","dv","drugs","felony","dwi","post","expungement"][i]}`}
             style={{ textDecoration: "none", color: "inherit", display: "block" }}>
            <div style={{
              background: "var(--paper)", padding: "22px 22px",
              border: "1px solid var(--rule)",
              display: "flex", flexDirection: "column", gap: 6,
              height: "100%", 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)" }}>STARTING AT</div>
              <div className="numeric serif" style={{ fontSize: 36, lineHeight: 1, letterSpacing: "-0.02em", color: "var(--ink)" }}>{b.from}</div>
              <div className="serif" style={{ fontSize: 17, lineHeight: 1.2, color: "var(--ink)", marginTop: 4 }}>{b.label}</div>
              <div style={{ fontSize: 11, fontFamily: "var(--mono)", letterSpacing: "0.04em", color: "var(--ink-soft)", textTransform: "uppercase" }}>{b.note}</div>
            </div>
          </a>
        ))}
      </div>

      <div style={{ marginTop: 28, padding: "26px 32px", background: "var(--ink)", color: "var(--cream)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 20 }}>
        <div>
          <div className="mono-label" style={{ fontSize: 10, color: "var(--sun-soft)", marginBottom: 6 }}>PAYMENT</div>
          <div className="serif" style={{ fontSize: 19, lineHeight: 1.4, color: "var(--cream)" }}>
            50% down · balance before trial · card on file · cash, check, credit accepted
          </div>
        </div>
        <a href="Fees.html" className="btn-primary lg" style={{ background: "var(--sun)", color: "var(--ink)", borderColor: "var(--sun)" }}>See the full fee schedule →</a>
      </div>

      <p style={{ marginTop: 22, fontSize: 12.5, color: "var(--ink-soft)", textAlign: "center", maxWidth: 760, marginLeft: "auto", marginRight: "auto", fontStyle: "italic" }}>
        Ranges depend on facts, jurisdiction, prior record, and trial posture. Quote confirmed in writing after consultation. <strong style={{ color: "var(--ink)" }}>Appeals are not included</strong> in any fee — separate engagement and fee. All fees subject to the reasonableness requirement of NM Rule 16-101.5(A).
      </p>
    </div>
  </section>
);

const CDFAQs = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ padding: "96px 0", background: "var(--paper)" }}>
      <div className="container" style={{ maxWidth: 920 }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 40, flexWrap: "wrap" }}>
          <span className="mono-label" style={{ fontSize: 11, color: "var(--sun)" }}>10 · FAQ</span>
          <h2 className="serif" style={{ fontSize: "clamp(36px, 5vw, 56px)", margin: 0, lineHeight: 1, letterSpacing: "-0.01em" }}>
            Questions people actually ask.
          </h2>
        </div>
        <div style={{ borderTop: "1px solid var(--rule)" }} role="list">
          {CD_FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} role="listitem" style={{ borderBottom: "1px solid var(--rule)" }}>
                <button type="button" className="faq-toggle"
                        aria-expanded={isOpen}
                        onClick={() => setOpen(isOpen ? -1 : i)}>
                  <span className="serif" style={{ fontSize: "clamp(20px, 2.3vw, 24px)", lineHeight: 1.25, fontWeight: 400, color: "var(--ink)" }}>{f.q}</span>
                  <span className="faq-icon" aria-hidden="true">
                    <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
                      <path d="M5 1 L5 9 M1 5 L9 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
                    </svg>
                  </span>
                </button>
                {isOpen && (
                  <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--ink-soft)", margin: "0 0 22px", maxWidth: 760 }}>
                    {f.a}
                  </p>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

const CDCta = ({ city }) => {
  const c = CITIES[city];
  const phone = city === "lc" ? "575.649.2897" : "505.585.1235";
  const telHref = city === "lc" ? "tel:+15756492897" : "tel:+15055851235";
  return (
    <section style={{ padding: "96px 0", background: "var(--ink)", color: "var(--cream)" }}>
      <div className="container grid-2" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 72, alignItems: "center" }}>
        <div>
          <span className="mono-label" style={{ fontSize: 11, color: "var(--sun-soft)" }}>11 · YOUR MOVE</span>
          <h2 className="serif" style={{ fontSize: "clamp(56px, 7vw, 96px)", margin: "20px 0 24px", lineHeight: 0.96, letterSpacing: "-0.02em", color: "var(--cream)" }}>
            Charged in {c.name}?<br/>
            <em style={{ color: "var(--sun-soft)" }}>The first call is free.</em>
          </h2>
          <p className="serif" style={{ fontSize: 22, fontStyle: "italic", color: "rgba(245,239,227,0.85)", margin: "0 0 32px", maxWidth: 580, lineHeight: 1.45 }}>
            Whether the arrest happened this morning or the charge is months old, the earlier we're involved, the more options you have.
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center" }}>
            <a href={telHref} className="btn-primary lg" style={{ background: "var(--sun)", color: "var(--ink)", borderColor: "var(--sun)" }}>
              Call {phone}
            </a>
            <a href="mailto:office@landofenchantment.law" className="btn-ghost lg" style={{ color: "var(--cream)", borderColor: "rgba(245,239,227,0.4)" }}>
              office@landofenchantment.law
            </a>
          </div>
          <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 6, fontSize: 13, color: "rgba(245,239,227,0.6)" }}>
            <span>Email <span style={{ color: "var(--sun-soft)" }}>office@landofenchantment.law</span></span>
            <span className="mono-label" style={{ fontSize: 10, letterSpacing: "0.1em" }}>FREE · CONFIDENTIAL · AVAILABLE FOR ARREST EMERGENCIES</span>
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <div style={{ textAlign: "center" }}>
            <QR size={220} color="var(--cream)" bg="var(--ink)" padding={0}/>
            <div className="mono-label" style={{ fontSize: 11, color: "var(--sun-soft)", marginTop: 16 }}>OR SCAN TO BOOK</div>
          </div>
        </div>
      </div>
    </section>
  );
};

const CDFooter = () => (
  <footer style={{ padding: "56px 0 32px", background: "var(--paper)", borderTop: "1px solid var(--rule)" }}>
    <div className="container grid-4" style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr", gap: 48 }}>
      <div>
        <LogoHorizontal height={36}/>
        <p style={{ fontSize: 13, lineHeight: 1.5, color: "var(--ink-soft)", margin: "16px 0 12px", maxWidth: 360 }}>
          The Law Office of Johnn Osborn, P.C., doing business as Land of Enchantment Law. Licensed in New Mexico &amp; Texas.
        </p>
        <div style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 12, fontFamily: "var(--mono)", letterSpacing: "0.04em" }}>
          <a href="https://www.landofenchantment.law" target="_blank" rel="noopener noreferrer" style={{ color: "var(--ink)", textDecoration: "none" }}>landofenchantment.law →</a>
          <a href="https://www.expungementnewmexico.com" target="_blank" rel="noopener noreferrer" style={{ color: "var(--ink)", textDecoration: "none" }}>expungementnewmexico.com →</a>
        </div>
      </div>
      {[
        { h: "Practice", items: [
          { l: "DWI defense", href: "DWI.html" },
          { l: "Expungement", href: "Expungement.html" },
          { l: "Penalties", href: "Penalties.html" },
          { l: "Albuquerque", href: "Albuquerque.html" },
          { l: "Las Cruces", href: "Las Cruces.html" },
          { l: "Santa Fe", href: "Santa Fe.html" }
        ]},
        { h: "Pricing", items: [
          { l: "Full fee schedule", href: "Fees.html" },
          { l: "DWI fees", href: "Fees.html#dwi" },
          { l: "Misdemeanor fees", href: "Fees.html#misdemeanors" },
          { l: "Felony fees", href: "Fees.html#felony" },
          { l: "Expungement fees", href: "Fees.html#expungement" }
        ]},
        { h: "Help", items: [
          { l: "If you've been arrested", href: "If Arrested.html" },
          { l: "Client resources", href: "Resources.html" },
          { l: "Terms of Use", href: "Terms.html" }
        ]}
      ].map(col => (
        <div key={col.h}>
          <div className="mono-label" style={{ fontSize: 10, opacity: 0.55, marginBottom: 12 }}>{col.h.toUpperCase()}</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
            {col.items.map(it => (
              <li key={it.l}>
                <a href={it.href} style={{ fontSize: 13.5, lineHeight: 1.4, color: "var(--ink)", textDecoration: "none" }}>{it.l}</a>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>

    <div className="container" style={{ marginTop: 36 }}>
    <div className="grid-4" style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr 1fr 1.3fr", gap: 36, paddingTop: 28, borderTop: "1px solid var(--rule)" }}>
      <div>
        <div className="mono-label" style={{ fontSize: 10, opacity: 0.55, marginBottom: 12 }}>FREE CONSULTATION</div>
        <div style={{ fontSize: 14, lineHeight: 1.6, color: "var(--ink-soft)" }}>Available for arrest emergencies. Johnn answers the phone and runs intake himself.</div>
      </div>
      <div>
        <div className="mono-label" style={{ fontSize: 10, opacity: 0.55, marginBottom: 12 }}>ALBUQUERQUE</div>
        <address style={{ fontSize: 14, lineHeight: 1.5, fontStyle: "normal" }}>
          9621 4th St NW, Suite 505<br/>Albuquerque, NM 87114<br/>
          <a href="tel:+15055851235" className="numeric" style={{ color: "var(--ink)", textDecoration: "none", marginTop: 4, display: "inline-block" }}>(505) 585-1235</a>
        </address>
      </div>
      <div>
        <div className="mono-label" style={{ fontSize: 10, opacity: 0.55, marginBottom: 12 }}>LAS CRUCES</div>
        <address style={{ fontSize: 14, lineHeight: 1.5, fontStyle: "normal" }}>
          516 E. Lucero Ave, Suite 575<br/>Las Cruces, NM 88005<br/>
          <a href="tel:+15756492897" className="numeric" style={{ color: "var(--ink)", textDecoration: "none", marginTop: 4, display: "inline-block" }}>(575) 649-2897</a>
        </address>
      </div>
      <div>
        <div className="mono-label" style={{ fontSize: 10, opacity: 0.55, marginBottom: 12 }}>CONTACT</div>
        <div style={{ fontSize: 14, lineHeight: 1.7 }}>
          <a href="mailto:office@landofenchantment.law" style={{ color: "var(--ink)", fontSize: 12.5, overflowWrap: "break-word" }}>office@landofenchantment.law</a>
        </div>
      </div>
    </div>
    </div>
    <div className="container" style={{ marginTop: 36 }}>
    <div style={{ paddingTop: 28, borderTop: "1px solid var(--rule)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: "14px 24px", alignItems: "center" }}>
      <span className="mono-label" style={{ fontSize: 10, opacity: 0.5 }}>© 2026 LAW OFFICE OF JOHNN OSBORN, P.C. · ALL RIGHTS RESERVED · ATTORNEY ADVERTISING</span>
      <nav aria-label="Footer" style={{ display: "flex", gap: 18, alignItems: "center", flexWrap: "wrap" }}>
        <a href="Terms.html" className="mono-label" style={{ fontSize: 10, opacity: 0.75, color: "var(--ink)", textDecoration: "none" }}>TERMS OF USE</a>
        <span className="mono-label" style={{ fontSize: 10, opacity: 0.4 }}>·</span>
        <span className="mono-label" style={{ fontSize: 10, opacity: 0.5 }}>NM &amp; TX BAR LICENSED</span>
      </nav>
    </div>
    </div>
    <div className="container" style={{ marginTop: 24, fontSize: 11, color: "var(--ink-soft)", lineHeight: 1.55, opacity: 0.75 }}>
      Disclaimer: The information on this page is for general informational purposes only and does not constitute legal advice. Eligibility for expungement and outcomes in criminal cases depend on the specific facts of your case. You should consult an attorney for advice regarding your individual situation. Contacting Land of Enchantment Law does not create an attorney-client relationship.
    </div>
  </footer>
);

Object.assign(window, { CourtsDirectory, FeesSection, CDFAQs, CDCta, CDFooter });
