import Navbar from '@/components/common/Navbar';
import Footer from '@/components/common/Footer';
import { getAbout } from '@/services/cmsService';


export default async function AboutPage() {
  let aboutData = null;

  try {
    const response = await getAbout();
    aboutData = response?.data;
  } catch (error) {
    console.error('Error fetching about data:', error);
  }

  return (
    <>


      <Navbar />

      <section className="abouthcontainer">
        <div className="abouthinner">
          <div className="container">
            <div
              dangerouslySetInnerHTML={{
                __html: aboutData?.content || '',
              }}
            />
            {/* <div class="row">
              <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-sm-12 col-12 align-self-center">
                <div class="abouthcontent">
                  <div class="section-heading mb-2" data-aos="fade-down" data-aos-delay="{1000}" data-aos-duration="{500}">
                    <div class="subheading">Who We Are</div>

                    <h2>Our Story</h2>
                  </div>

                  <div class="row">
                    <div class="col-xxl-8 col-xl-8" data-aos="fade-down" data-aos-delay="{1000}" data-aos-duration="{700}">
                      <h6>Where Deep Expertise Meets Practical Technology</h6>

                      <p>Jury Intel wasn&#39;t born in a tech incubator. It was built in courtrooms, during real trials, by people who understand what&#39;s actually at stake when jury selection begins.</p>

                      <p>Katherine Mayer founded Mayer Consulting in 2012 after recognizing a gap in the criminal defense landscape&mdash;a need for holistic support that combined fact investigation, mitigation strategy, and jury consulting under one roof. Over a decade of high-stakes casework followed, including capital defense, complex civil matters, and everything in between.</p>

                      <p>Through hundreds of engagements, one challenge kept surfacing: jury research was fragmented, time-consuming, and too often left to instinct rather than insight. The tools available were either too generic or too cumbersome for the realities of trial prep.</p>

                      <p>Jury Intel is the solution we built for ourselves and now offer to legal teams who share our commitment to rigorous, data-informed jury selection.</p>
                    </div>

                    <div class="col-xxl-4 col-xl-4" data-aos="zoom-in" data-aos-delay="{1000}" data-aos-duration="{800}">
                      <div class="aboutimgbx">
                        <div class="ownername">Katherine Mayer, M.A., CLI, CCDI</div>
                        <img alt="Katherine Mayer, M.A., CLI, CCDI" src="https://juryapi.wgi-it.com/media/about/katherine-mayer.jpeg" /></div>
                    </div>
                  </div>

                  <h3 data-aos="fade-in-left" data-aos-delay="{1000}" data-aos-duration="{500}">What Makes Us Different</h3>

                  <div class="row gx-3 gx-md-4">
                    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 mt-md-2 mb-2 mb-md-3" data-aos="fade-up" data-aos-delay="{1000}" data-aos-duration="{1000}">
                      <div class="d-flex gap-2 gap-md-3 abouticonbx">
                        <div class="abouticon"><img alt="Practitioner-Built, Not Consultant-Sol" src="https://juryapi.wgi-it.com/media/about/medical.png" /></div>

                        <div class="w-100 align-self-center">
                          <h6>Practitioner-Built, Not Consultant-Sol</h6>

                          <p>We don&#39;t just advise on jury selection&mdash;we do it. Jury Intel reflects thousands of hours in voir dire, not theoretical best practices from a distance.</p>
                        </div>
                      </div>
                    </div>

                    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 mt-md-2 mb-2 mb-md-3" data-aos="fade-up" data-aos-delay="{1000}" data-aos-duration="{1200}">
                      <div class="d-flex gap-2 gap-md-3 abouticonbx">
                        <div class="abouticon"><img alt="Insight Engine, Not AI Hype" src="https://juryapi.wgi-it.com/media/about/technology.png" /></div>

                        <div class="w-100 align-self-center">
                          <h6>Insight Engine, Not AI Hype</h6>

                          <p>We&#39;re not chasing buzzwords. Jury Intel connects platforms, organizes data, and surfaces intelligence. It&#39;s technology in service of expertise&mdash;not a replacement for it.</p>
                        </div>
                      </div>
                    </div>

                    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 mt-md-2 mb-2 mb-md-3" data-aos="fade-up" data-aos-delay="{1000}" data-aos-duration="{1500}">
                      <div class="d-flex gap-2 gap-md-3 abouticonbx">
                        <div class="abouticon"><img alt="Security and Discretion First" src="https://juryapi.wgi-it.com/media/about/cyber-security.png" /></div>

                        <div class="w-100 align-self-center">
                          <h6>Security and Discretion First</h6>

                          <p>Your case data is sensitive. Our platform is designed with privacy, auditability, and clear data sourcing as foundational principles.</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <h3 data-aos="fade-down" data-aos-delay="{1000}" data-aos-duration="{500}">Our Approach</h3>

                  <p data-aos="fade-down" data-aos-delay="{1000}" data-aos-duration="{700}">We believe the best jury research happens when experienced judgment meets organized information. Jury Intel doesn&#39;t tell you who to strike&mdash;it equips you to make those calls with clarity and confidence.</p>

                  <p data-aos="fade-down" data-aos-delay="{1000}" data-aos-duration="{900}">Our platform handles the repetitive work&mdash;data collection, profile organization, report generation&mdash;so your team can focus on the strategic decisions that win cases</p>
                </div>
              </div>
            </div> */}

          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}