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

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

export default async function FeaturesPage() {
  let featuresData = {};

  try {
    const response = await getFeatures();
    featuresData = response?.data || {};
  } catch (error) {
    console.error("Error fetching features data:", error);
  }

  return (
    <>
      <style>
        {`
          body {
            font-family: "Host Grotesk", sans-serif;
            font-size: 14px;
            margin: 0;
            padding: 0;
            background: rgba(var(--primary-light), 1);
          }


        `}
      </style>

      <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">Platform Capabilities</div>
                      <h2>Jury Intel: The Insight Engine for Modern Voir Dire</h2>
                    </div>

                    <p data-aos="fade-down" data-aos-delay={1000} data-aos-duration={500}>Designed for trial teams who need depth, speed, and reliability in their jury research.</p> */}
                    <div
                      dangerouslySetInnerHTML={{
                        __html: sanitizeCmsHtml(featuresData?.content || ""),
                      }}
                    />

                    {/* <h3 data-aos="fade-down" data-aos-delay={1000} data-aos-duration={500}>Core Features</h3>
                    <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-up" 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/features/user.png" alt="Centralized Juror Profiles" />
                          </div>
                          <div className="w-100 align-self-center">
                            <h6>Centralized Juror Profiles</h6>
                            <p>Consolidate all panel data in one place. Names, questionnaire responses, supplemental forms, social media findings, and background research—organized and accessible.</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-up" 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/features/machine-learning.png" alt="Jurisdictional Intelligence" />
                          </div>
                          <div className="w-100 align-self-center">
                            <h6>Jurisdictional Intelligence</h6>
                            <p>Navigate local rules, typical panel compositions, and venue-specific considerations. Build institutional knowledge that compounds across cases.</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-up" 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/features/data-collection.png" alt="Voir Dire Data Collection" />
                          </div>
                          <div className="w-100 align-self-center">
                            <h6>Voir Dire Data Collection</h6>
                            <p>
                              Capture real-time observations during jury selection. Document verbal responses,
                              body language notes, and gut-level assessments in a structured format.
                            </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-up" data-aos-delay={1000} data-aos-duration={1200}>
                        <div className="d-flex gap-2 gap-md-3 abouticonbx">
                          <div className="abouticon">
                            <img src="https://juryapi.wgi-it.com/media/features/generation.png" alt="Automated Report Generation" />
                          </div>
                          <div className="w-100 align-self-center">
                            <h6>Automated Report Generation</h6>
                            <p>
                              Generate clean, professional reports for internal use or client presentation.
                              Eliminate the scramble of compiling notes after a long day in court.
                            </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-up" 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/features/people.png" alt="Multi-User Collaboration" />
                          </div>
                          <div className="w-100 align-self-center">
                            <h6>Multi-User Collaboration</h6>
                            <p>
                              Assign team members to specific panels or jurors. Admin controls ensure the right
                              people have the right access—nothing more, nothing less.
                            </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-up" data-aos-delay={1000} data-aos-duration={1400}>
                        <div className="d-flex gap-2 gap-md-3 abouticonbx">
                          <div className="abouticon">
                            <img src="https://juryapi.wgi-it.com/media/features/logistics-management.png" alt="Secure & Auditable" />
                          </div>
                          <div className="w-100 align-self-center">
                            <h6>Secure & Auditable</h6>
                            <p>
                              All data is clearly sourced and auditable. PII is protected. Your research is reusable
                              for future cases involving similar venues or juror profiles.
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="row mt-4 mt-md-5">
                      <div className="col-xl-5 col-lg-5 col-md-5 col-sm-12 col-12 mb-3 mb-md-0" data-aos="flip-left" data-aos-easing="ease-out-cubic" data-aos-duration={1400}>
                        <div className="teamsimg">
                          <img src="https://juryapi.wgi-it.com/media/features/teams.jpg" alt="" />
                        </div>
                      </div>
                      <div className="col-xl-7 col-lg-7 col-md-7 col-sm-12 col-12" data-aos="zoom-in" data-aos-delay={1000} data-aos-duration={1400}>
                        <div className="ps-md-4">

                          <div className="section-heading mb-3">
                            <h2>Designed for Real Trial Teams</h2>
                          </div>
                          <ul>
                            <li>
                              <h6>For Jury Consultants</h6>
                              <p>Systematize your methodology. Deliver more value to clients with less manual overhead.</p>
                            </li>
                            <li>
                              <h6>For Litigators</h6>
                              <p>Get the jury research depth you need without hiring a full-time consultant. Access institutional knowledge even on tight budgets.</p>
                            </li>
                            <li>
                              <h6>For Defense Teams</h6>
                              <p>Move faster and more confidently in high-stakes cases where jury composition can mean the difference between acquittal and conviction.</p>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div> */}
                    <div
                      dangerouslySetInnerHTML={{
                        __html: sanitizeCmsHtml(featuresData?.core_features || ""),
                      }}
                    />


                    {/* <div className="row mt-4 mt-md-5">
                      <div className="col-12">
                        <div className="section-heading mb-2" data-aos="fade-down" data-aos-delay={1000} data-aos-duration={700}>
                          <h2>Feature Comparison</h2>
                        </div>
                        <div className="table-responsive mb-4" data-aos="fade-up" data-aos-delay={1000} data-aos-duration={900}>
                          <table className="table table-bordered">
                            <thead>
                              <tr>
                                <th>
                                  <div className="d-flex align-items-center gap-2">
                                    <img src="https://juryapi.wgi-it.com/media/features/logical-thinking.png" alt="Secure & Auditable" />
                                    <span>Capability</span>
                                  </div>
                                </th>
                                <th>
                                  <div className="d-flex align-items-center gap-2">
                                    <img src="https://juryapi.wgi-it.com/media/features/thinking.png" alt="Manual Process" />
                                    <span>Manual Process</span>
                                  </div>
                                </th>
                                <th>
                                  <div className="d-flex align-items-center gap-2">
                                    <img src="https://juryapi.wgi-it.com/media/features/instructions.png" alt="Secure & Auditable" />
                                    <span>Jury Intel</span>
                                  </div>
                                </th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td>Data collection</td>
                                <td>Scattered spreadsheets</td>
                                <td>Unified platform</td>
                              </tr>
                              <tr>
                                <td>Juror profiles</td>
                                <td>Inconsistent formats</td>
                                <td>Standardized, searchable</td>
                              </tr>
                              <tr>
                                <td>Report generation</td>
                                <td>Hours of formatting</td>
                                <td>One-click export</td>
                              </tr>
                              <tr>
                                <td>Team collaboration</td>
                                <td>Email chains</td>
                                <td>Role-based access</td>
                              </tr>
                              <tr>
                                <td>Institutional knowledge</td>
                                <td>Lost between cases</td>
                                <td>Compounds over time</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div> */}

                    <div
                      dangerouslySetInnerHTML={{
                        __html: sanitizeCmsHtml(featuresData?.feature_comparison || ""),
                      }}
                    />
                    
                  </div>
                  
                </div>
              </div>
            </div>
          </div>
        </section>

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