// Practice Areas page — accordion
function Practice() {
  const D = window.MS_DATA;
  const [open, setOpen] = React.useState("civil-rights");

  const toggle = (id) => setOpen(open === id ? null : id);

  return (
    <main data-screen-label="Practice Areas page">
      <section className="page-head container">
        <span className="eyebrow"><span className="rule"></span>The Firm · Practice</span>
        <h1>Five practice areas,<br/>one <em>institutional posture.</em></h1>
        <p className="lead">We represent New Mexico's counties, municipalities, school districts, insurance carriers, and commercial entities. Our work is defensive, deliberate, and grounded in procedure — from the first responsive pleading through dispositive motion, trial, and appeal.</p>
      </section>

      <section className="pa-wrap container">
        {D.practiceAreas.map((p) => {
          const isOpen = open === p.id;
          return (
            <div className={`pa-item ${isOpen ? "open" : ""}`} key={p.id} id={p.id}>
              <div className="pa-head" onClick={() => toggle(p.id)}>
                <div className="num">{p.n}</div>
                <div className="tag">{p.tag}</div>
                <div className="t">{p.t}</div>
                <div className="toggle">+</div>
              </div>
              <div className="pa-body">
                {p.img && <img src={p.img} alt={p.t} className="pa-img" />}
                <div className="k">Overview</div>
                <div className="prose">
                  {p.body.map((para, i) => <p key={i}>{para}</p>)}
                  {p.sections && p.sections.map((s, i) => (
                    <React.Fragment key={i}>
                      <h4>{s.h}</h4>
                      <p>{s.p}</p>
                    </React.Fragment>
                  ))}
                </div>
              </div>
            </div>
          );
        })}
      </section>
    </main>
  );
}

window.Practice = Practice;