// Homepage
function Home({ setRoute }) {
  const D = window.MS_DATA;
  const [scrollY, setScrollY] = React.useState(0);
  React.useEffect(() => {
    const h = () => setScrollY(window.scrollY);
    window.addEventListener("scroll", h, { passive: true });
    return () => window.removeEventListener("scroll", h);
  }, []);

  const go = (r) => { setRoute(r); window.scrollTo({ top: 0, behavior: "instant" }); };

  return (
    <main>
      {/* HERO */}
      <section className="hero container" data-screen-label="01 Hero">
        <div className="hero-meta">
          <div className="col">
            <span className="k">Est.</span>
            <span className="v">1997 · Las Cruces, N.M.</span>
          </div>
          <div className="col" style={{textAlign: "center"}}>
            <span className="k">Vol. XXIX</span>
            <span className="v italic">Civil Litigation · Defense</span>
          </div>
          <div className="col" style={{textAlign: "right"}}>
            <span className="k">Index</span>
            <span className="v">№ 004 / Homepage</span>
          </div>
        </div>

        <h1 className="hero-tag">
          Big firm expertise.<br/>
          <em>Small firm</em> attention.<span className="tm">™</span>
        </h1>

        <div className="hero-foot">
          <div className="block">
            <div className="k">Serving New Mexico since</div>
            <div className="v">1997 &nbsp; <span style={{color: "var(--mute)", fontStyle:"italic", fontSize:15}}>— twenty-nine years</span></div>
          </div>
          <div className="block">
            <div className="k">Position</div>
            <div className="v">One of the most successful civil litigation firms in Southern New Mexico.</div>
          </div>
          <div className="scroll-indic" style={{transform: `translateY(${Math.min(scrollY * 0.4, 40)}px)`}}>
            <span>Scroll</span>
            <div className="scroll-line"></div>
          </div>
        </div>
      </section>

      {/* INTRODUCTION */}
      <section className="intro" data-screen-label="02 Introduction">
        <div className="container intro-grid">
          <div>
            <span className="eyebrow"><span className="rule"></span>Introduction</span>
            <h2 style={{marginTop: 22}}>Serving the legal needs of <em>New Mexico</em> since 1997.</h2>
          </div>
          <div className="intro-body">
            <p>Here at Mynatt Springer P.C., we take our commitment to our clients seriously. Our legal team is diverse and talented in order to provide legal expertise with depth and breadth. We are proud of our innovative solutions, which are balanced with a seasoned and respectful approach to process and procedure.</p>
            <p>As one of the most successful civil litigation firms in Southern New Mexico, our attorneys have a wealth of knowledge and experience in the areas of civil rights, employment law, personal injury, negligence, premises liability, commercial litigation, state and local government law, real property, construction, and the newly emerging cannabis law.</p>
          </div>
        </div>
      </section>

      {/* WHY US */}
      <section className="why container" data-screen-label="03 Why Us">
        <div className="why-head">
          <h2>Four commitments <em style={{fontStyle:"italic", color:"var(--brass)"}}>to every client.</em></h2>
          <span className="meta">§ 01–04</span>
        </div>
        <div className="why-grid">
          {D.whyUs.map((w) => (
            <div className="why-item" key={w.n}>
              <div className="why-num">{w.n}</div>
              <div className="why-title">{w.t}</div>
              <div className="why-body">{w.d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* CREDIBILITY */}
      <section className="cred" data-screen-label="04 Credibility">
        <div className="container cred-grid">
          <div className="cred-head">
            <div className="k">Credentials</div>
            <h3>Recognized. Rated.<br/>Relied upon.</h3>
          </div>
          <div className="cred-badge">
            <img src="images/av-preeminent.png" alt="AV Preeminent" className="cred-img" />
            <div className="t">AV Preeminent</div>
            <div className="s">Martindale-Hubbell</div>
          </div>
          <div className="cred-badge">
            <img src="images/bests.png" alt="Best's Rated" className="cred-img" />
            <div className="t">Best's Rated</div>
            <div className="s">Insurance Counsel</div>
          </div>
          <div className="cred-badge">
            <div className="seal" style={{fontStyle:"normal", fontSize: 15}}>29</div>
            <div className="t">Years in New Mexico</div>
            <div className="s">Est. 1997</div>
          </div>
        </div>
      </section>

      {/* PRACTICE TEASERS */}
      <section className="practice-teasers container" data-screen-label="05 Practice Teasers">
        <div className="head">
          <div>
            <span className="eyebrow"><span className="rule"></span>Practice Areas</span>
            <h2 style={{marginTop: 22}}>Five areas. One institutional posture.</h2>
          </div>
          <p>Our work centers on defending institutional clients — municipalities, school districts, insurance carriers, and commercial entities — across the full arc of civil litigation in state and federal courts.</p>
        </div>
        <div className="practice-list">
          {D.practiceTeasers.map((p) => (
            <div className="practice-row" key={p.id} onClick={() => go("practice")}>
              <div className="num">{p.n}</div>
              <div className="title">{p.t}</div>
              <div className="desc">{p.d}</div>
              <div className="more">Explore <ArrowIcon /></div>
            </div>
          ))}
        </div>
        <div style={{marginTop: 48, textAlign: "right"}}>
          <a className="tlink" onClick={() => go("practice")}>View all practice areas <ArrowIcon className="arrow" /></a>
        </div>
      </section>

      {/* CTA */}
      <section className="cta-block" data-screen-label="06 Contact CTA">
        <div className="container cta-inner">
          <div>
            <span className="eyebrow"><span className="rule"></span>Inquiries</span>
            <h2 style={{marginTop: 22}}>Learn how <em>our firm</em> can help you.</h2>
          </div>
          <div className="cta-side">
            <div className="address">
              <strong>Office</strong>
              1660 Hickory Loop<br/>Las Cruces, New Mexico 88005
            </div>
            <div className="address">
              <strong>Mailing</strong>
              P.O. Box 2699<br/>Las Cruces, New Mexico 88004-2699
            </div>
            <button className="btn btn-primary" onClick={() => go("contact")}>
              Contact our office <ArrowIcon className="arrow" />
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

window.Home = Home;