// ResultsPage.jsx — testimonials-led results page. No specific case values per ethics review.
function ResultsPage() {
  

  return (
    <div>
      <Nav />

      {/* HERO */}
      <section style={{ position: 'relative', minHeight: '58vh', display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
        <img src={IMG.resultsHero} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(100deg, rgba(10,20,34,0.95) 0%, rgba(10,20,34,0.78) 42%, rgba(10,20,34,0.4) 75%, rgba(10,20,34,0.12) 100%)' }} />
        <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', padding: '90px 32px', width: '100%' }}>
          <div className="reveal" style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 22 }}>
            <span style={{ height: 1, width: 40, background: 'var(--brass-500)' }}></span>
            <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '0.74rem', letterSpacing: '0.26em', color: 'var(--brass-300)' }}>
              RESULTS & CLIENT STORIES
            </span>
          </div>
          <h1 className="reveal" style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(2.4rem,5vw,4rem)', lineHeight: 1.04, color: '#fff', maxWidth: 800, marginBottom: 22 }}>
            What clients say after the case is over.
          </h1>
          <p className="reveal" style={{ fontFamily: 'var(--font-serif)', fontSize: 'clamp(1.1rem,1.6vw,1.4rem)', lineHeight: 1.5, color: 'rgba(243,239,230,0.88)', maxWidth: 620 }}>
            Real reviews from real clients across every practice area we handle.
          </p>
        </div>
      </section>

      {/* TRUST STRIP */}
      <section style={{ background: 'var(--bg-base)', padding: '60px 32px', borderBottom: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 1140, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px,1fr))', gap: 32, textAlign: 'center' }}>
          {[
            { n: '20+', l: 'Years of experience' },
            { n: '1,000+', l: 'Cases handled' },
            { n: '98%', l: 'Client satisfaction' },
            { n: '★★★★★', l: 'Across review platforms' },
          ].map((s) => (
            <div key={s.l}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '2.4rem', color: 'var(--navy-800)', lineHeight: 1 }}>{s.n}</div>
              <div className="eyebrow" style={{ marginTop: 10 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* TESTIMONIALS GRID */}
      <section style={{ background: 'var(--bg-subtle)', padding: '90px 32px' }}>
        <div style={{ maxWidth: 1140, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 50 }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Client Testimonials</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(2rem,3.2vw,2.8rem)', color: 'var(--navy-800)', lineHeight: 1.1, maxWidth: 720, margin: '0 auto' }}>
              Hear directly from the people Alex has represented.
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 22 }}>
            {REVIEWS.map((r, i) => (
              <article key={i} style={{ background: '#fff', border: '1px solid var(--line)', borderTop: '2px solid var(--brass-500)', borderRadius: 'var(--radius-sm)', padding: '32px 28px', boxShadow: 'var(--shadow-sm)', display: 'flex', flexDirection: 'column' }}>
                <div style={{ color: 'var(--brass-500)', fontSize: '0.9rem', letterSpacing: '0.25em', marginBottom: 16 }}>★★★★★</div>
                <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: '1.05rem', lineHeight: 1.6, color: 'var(--ink)', marginBottom: 24, flex: 1 }}>
                  "{r.quote}"
                </p>
                <div style={{ borderTop: '1px solid var(--line)', paddingTop: 16 }}>
                  <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '0.95rem', color: 'var(--navy-800)' }}>{r.name}</div>
                  <div className="eyebrow" style={{ marginTop: 4 }}>{r.case}</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* RESULTS NOTE */}
      <section style={{ background: 'var(--navy-800)', padding: '90px 32px', color: '#fff' }}>
        <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
          <div className="eyebrow" style={{ color: 'var(--brass-400)', marginBottom: 16 }}>A Note on Case Results</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(1.8rem,2.8vw,2.4rem)', lineHeight: 1.15, marginBottom: 22 }}>
            Every case is different. Past results never guarantee future ones.
          </h2>
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: '1.1rem', lineHeight: 1.7, color: 'rgba(243,239,230,0.88)', marginBottom: 32 }}>
            The testimonials above describe individual client experiences. They are not predictions of how your case will resolve. The value of a case depends on its specific facts, the injuries involved, the available insurance coverage, and many other variables. The best way to understand your case is a direct conversation with Alex.
          </p>
          <a href="/#contact" style={{ display: 'inline-block', background: 'var(--crimson-600)', color: '#fff', padding: '15px 28px', borderRadius: 'var(--radius-sm)', textDecoration: 'none', fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '0.92rem', letterSpacing: '0.04em' }}>
            Talk to Alex about your case
          </a>
        </div>
      </section>

      <ConsultationForm />
      <Footer />
    </div>
  );
}