import Navbar from "../components/common/Navbar";
import Footer from "../components/common/Footer";

import { gethowWorks } from "@/services/cmsService";
import { sanitizeCmsHtml } from "@/utils/safeHtml";

export default async function HowItWorksPage() {
  let worksData = [];

  try {
    const response = await gethowWorks();
    worksData = response?.data || [];
  } catch (error) {
    console.error("Error fetching how it works data:", error);
  }

  return (
    <>
      <div>
        <Navbar />

        <section className="abouthcontainer">
          <div className="abouthinner">
            <div className="container">
              <div className="row">
                <div className="col-12">
                  {/* <div className="abouthcontent">


                    <div className="section-heading mb-2" data-aos="fade-down" data-aos-delay={1000} data-aos-duration={500}>
                      <div className="subheading">How It Works</div>
                      <h2>From Panel to Verdict: The Jury Intel Workflow</h2>
                    </div>

         
                    <div className="row gx-3 gx-md-4">
                      <div className="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 mt-0 mb-3 mb-md-4" data-aos="fade-down" data-aos-delay={1000} data-aos-duration={500}>
                        <div className="d-flex gap-2 gap-md-3 abouticonbx">
                          <div className="abouticon">
                            <img src="https://juryapi.wgi-it.com/media/how-it-works/case.png" alt="Case Setup" />
                          </div>
                          <div className="w-100 align-self-center">
                            <h6>Step 1: Case Setup</h6>
                            <p>Create a new matter in Jury Intel. Define your jurisdiction, trial type, and key case themes. The platform configures itself to your specific needs.</p>
                          </div>
                        </div>
                      </div>
                      <div className="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 mt-0 mb-3 mb-md-4" data-aos="fade-down" data-aos-delay={1000} data-aos-duration={700}>
                        <div className="d-flex gap-2 gap-md-3 abouticonbx">
                          <div className="abouticon">
                            <img src="https://juryapi.wgi-it.com/media/how-it-works/jury.png" alt="Panel Import" />
                          </div>
                          <div className="w-100 align-self-center">
                            <h6>Step 2: Panel Import</h6>
                            <p>Upload your jury list as soon as it's available. Jury Intel accepts standard formats and begins organizing profiles immediately.</p>
                          </div>
                        </div>
                      </div>
                      <div className="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 mt-0 mb-3 mb-md-4" data-aos="fade-down" data-aos-delay={1000} data-aos-duration={900}>
                        <div className="d-flex gap-2 gap-md-3 abouticonbx">
                          <div className="abouticon">
                            <img src="https://juryapi.wgi-it.com/media/how-it-works/ethics.png" alt="Research Integration" />
                          </div>
                          <div className="w-100 align-self-center">
                            <h6>Step 3: Research Integration</h6>
                            <p>Connect supplemental questionnaires, background checks, and social media findings. All data flows into unified juror profiles with clear source attribution</p>
                          </div>
                        </div>
                      </div>
                      <div className="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 mt-0 mb-3 mb-md-4" data-aos="fade-down" data-aos-delay={1000} data-aos-duration={1100}>
                        <div className="d-flex gap-2 gap-md-3 abouticonbx">
                          <div className="abouticon">
                            <img src="https://juryapi.wgi-it.com/media/how-it-works/advocacy.png" alt="Voir Dire Support" />
                          </div>
                          <div className="w-100 align-self-center">
                            <h6>Step 4: Voir Dire Support</h6>
                            <p>During jury selection, capture observations in real time. Tag jurors, add notes, and flag concerns as questioning unfolds.</p>
                          </div>
                        </div>
                      </div>
                      <div className="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 mt-0 mb-3 mb-md-4" data-aos="fade-down" data-aos-delay={1000} data-aos-duration={1300}>
                        <div className="d-flex gap-2 gap-md-3 abouticonbx">
                          <div className="abouticon">
                            <img src="https://juryapi.wgi-it.com/media/how-it-works/find.png" alt="Strike Analysis" />
                          </div>
                          <div className="w-100 align-self-center">
                            <h6>Step 5: Strike Analysis</h6>
                            <p>Review organized intelligence for each juror. Access pattern recognition across your research to inform strike decisions.</p>
                          </div>
                        </div>
                      </div>
                      <div className="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 mt-0 mb-3 mb-md-4" data-aos="fade-down" data-aos-delay={1000} data-aos-duration={1500}>
                        <div className="d-flex gap-2 gap-md-3 abouticonbx">
                          <div className="abouticon">
                            <img src="https://juryapi.wgi-it.com/media/how-it-works/chart.png" alt="Report & Archive" />
                          </div>
                          <div className="w-100 align-self-center">
                            <h6>Step 6: Report & Archive</h6>
                            <p>Generate reports for your file. Case data remains available for future reference—building your institutional knowledge base.</p>
                          </div>
                        </div>
                      </div>
                    </div>

                  
                    <div className="section-heading mb-2" data-aos="fade-down" data-aos-delay={500} data-aos-duration={500}>
                      <h2>Integration Capabilities</h2>
                    </div>
                    <p data-aos="fade-down" data-aos-delay={500} data-aos-duration={500}>Jury Intel connects with the data sources your team already uses:</p>
                    <div className="ctinfobx mb-3" data-aos="fade-down" data-aos-delay={500} data-aos-duration={500}>
                      <div className="ctinfoicon">
                        <i className="icon"><img src="https://juryapi.wgi-it.com/media/how-it-works/research-providers.png"alt="Background research providers" /></i>
                      </div>
                      <div className="ctinfocontent">
                        <h5>Background research providers</h5>
                      </div>
                    </div>
                    <div className="ctinfobx mb-3" data-aos="fade-down" data-aos-delay={500} data-aos-duration={500}>
                      <div className="ctinfoicon">
                        <i className="icon"><img src="https://juryapi.wgi-it.com/media/how-it-works/document-storage.png" alt="Questionnaire platforms" /></i>
                      </div>
                      <div className="ctinfocontent">
                        <h5>Questionnaire platforms</h5>
                      </div>
                    </div>
                    <div className="ctinfobx mb-3" data-aos="fade-down" data-aos-delay={500} data-aos-duration={500}>
                      <div className="ctinfoicon">
                        <i className="icon"><img src="https://juryapi.wgi-it.com/media/how-it-works/questionnaire.png" alt="Case management systems" /></i>
                      </div>
                      <div className="ctinfocontent">
                        <h5>Case management systems</h5>
                      </div>
                    </div>
                    <div className="ctinfobx mb-3" data-aos="fade-down" data-aos-delay={500} data-aos-duration={500}>
                      <div className="ctinfoicon">
                        <i className="icon"><img src="https://juryapi.wgi-it.com/media/how-it-works/case-management.png" alt="Document storage solutions" /></i>
                      </div>
                      <div className="ctinfocontent">
                        <h5>Document storage solutions</h5>
                      </div>
                    </div>
                    <p data-aos="fade-down" data-aos-delay={500} data-aos-duration={500}>Our API architecture allows for custom integrations based on your workflow requirements.</p>
                  </div> */}
                  <div
                    dangerouslySetInnerHTML={{
                      __html: sanitizeCmsHtml(worksData[0]?.description || ""),
                    }}
                  />
                </div>
              </div>
            </div>
          </div>
        </section>

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