import React from "react";
import Link from "next/link";
import Image from "next/image";
import { ScrollReveal } from "@/animations/Reveal";

export default function IndustrySolutions() {
  return (
    <>
    <style dangerouslySetInnerHTML={{ __html: `
      @media (max-width: 768px) {
        .elementor-element.elementor-element-3b4a7cc {
          --padding-left: 0px !important;
          --padding-right: 0px !important;
          padding-left: 0px !important;
          padding-right: 0px !important;
          box-sizing: border-box !important;
        }

        .elementor-element.elementor-element-3b4a7cc > .e-con-inner {
          width: 100% !important;
          max-width: 100% !important;
          margin-left: auto !important;
          margin-right: auto !important;
          padding-left: 0 !important;
          padding-right: 0 !important;
        }

        .elementor-element.elementor-element-d602f7f {
          --padding-left: 20px !important;
          --padding-right: 20px !important;
          padding-left: 20px !important;
          padding-right: 20px !important;
          width: 100% !important;
          max-width: 100% !important;
          margin-left: 0 !important;
          margin-right: 0 !important;
          box-sizing: border-box !important;
        }

        .elementor-element.elementor-element-f64bd88,
        .elementor-element.elementor-element-5ed2dbb,
        .elementor-element.elementor-element-6829276 {
          --padding-left: 0px !important;
          --padding-right: 0px !important;
          --margin-left: 0px !important;
          --margin-right: 0px !important;
          width: 100% !important;
          max-width: 100% !important;
          margin-left: 0 !important;
          margin-right: 0 !important;
          padding-left: 0 !important;
          padding-right: 0 !important;
          box-sizing: border-box !important;
        }

        .elementor-element.elementor-element-6829276 {
          --e-con-grid-template-columns: minmax(0, 1fr) !important;
          --grid-justify-content: stretch !important;
          --justify-items: stretch !important;
          grid-template-columns: minmax(0, 1fr) !important;
          justify-content: stretch !important;
          justify-items: stretch !important;
          min-width: 0 !important;
        }

        .industry-solutions-grid,
        .industry-card-link {
          width: 100% !important;
          max-width: 100% !important;
          min-width: 0 !important;
        }

        .industry-solutions-grid {
          margin-left: 0 !important;
          margin-right: 0 !important;
        }
      }
    `}} />
    <div className="elementor-element elementor-element-3b4a7cc e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="3b4a7cc" data-element_type="container" data-e-type="container">
        <div className="e-con-inner">
          <div className="elementor-element elementor-element-d602f7f e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="d602f7f" data-element_type="container" data-e-type="container">
            
            <div className="elementor-element elementor-element-f64bd88 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="f64bd88" data-element_type="container" data-e-type="container">
              <div className="elementor-element elementor-element-5ed2dbb e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5ed2dbb" data-element_type="container" data-e-type="container">
                <div className="elementor-element elementor-element-c8162c4 elementor-widget elementor-widget-logico_heading industry-section-label" data-id="c8162c4" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                  <style dangerouslySetInnerHTML={{ __html: `
                    /* Minimal section label — matches the "/ Doormile Approach /" pattern */
                    .industry-section-label {
                      width: 100%;
                    }
                    .industry-section-label > .elementor-widget-container {
                      max-width: 100%;
                      margin: 12px 0 50px 0;
                      padding: 0 0 14px 0;
                      border-style: solid;
                      border-width: 0 0 1px 0;
                      border-color: rgba(17, 17, 17, 0.15);
                    }
                    .industry-section-label .logico-title {
                      font-size: 14px;
                      font-weight: 500;
                      line-height: 2.1429em;
                      letter-spacing: 2px;
                      text-transform: uppercase;
                      color: #111111;
                    }
                    @media (max-width: 1024px) {
                      .industry-section-label > .elementor-widget-container {
                        margin-bottom: 36px;
                        padding-bottom: 12px;
                      }
                    }
                    @media (max-width: 767px) {
                      .industry-section-label > .elementor-widget-container {
                        margin-bottom: 28px;
                        padding-bottom: 10px;
                      }
                      .industry-section-label .logico-title {
                        font-size: 12px;
                        letter-spacing: 1.5px;
                      }
                    }
                  `}} />
                  <div className="elementor-widget-container">
                    <div className="logico-title">/ Industry Solutions /</div>
                  </div>
                </div>
                <div 
                  className="elementor-element elementor-element-1487241 elementor-widget__width-initial elementor-widget elementor-widget-logico_heading" 
                  data-id="1487241" 
                  data-element_type="widget" 
                  data-e-type="widget" 
                  data-widget_type="logico_heading.default"
                >
                  <div className="elementor-widget-container" style={{ margin: "30px 0 0 0"}}>
                    <h2 className="logico-title" style={{ fontSize: "clamp(28px, 3.5vw, 48px)", lineHeight: "1.1", fontWeight: 800, textTransform: "uppercase", maxWidth: "900px" }}>
                      <ScrollReveal delay={0.05} duration={0.8} yOffset={25}>
                        Smart solutions built exclusively for your <span style={{ color: "#c01227" }}>industry</span>
                      </ScrollReveal>
                    </h2>
                  </div>
                </div>
              </div>
              <div className="elementor-element elementor-element-4af73cb e-con-full elementor-hidden-tablet elementor-hidden-mobile_extra elementor-hidden-mobile e-flex cut-corner-no sticky-container-off e-con e-child" data-id="4af73cb" data-element_type="container" data-e-type="container">
                <div className="elementor-element elementor-element-46f2f7d elementor-widget__width-initial elementor-widget elementor-widget-logico_button" data-id="46f2f7d" data-element_type="widget" data-e-type="widget" data-widget_type="logico_button.default">
                  <div className="elementor-widget-container"></div>
                </div>
              </div>
            </div>

            <div className="elementor-element elementor-element-6829276 e-grid e-con-full cut-corner-no sticky-container-off e-con e-child" data-id="6829276" data-element_type="container" data-e-type="container">
              
              <div className="industry-solutions-grid">
                
                {/* Card 1: FMCG */}
                <Link href="/solutions" className="industry-card-link">
                  <div className="industry-card-bg">
                    <Image 
                      src="/images/tab-pic-1.webp" 
                      alt="FMCG Logistics" 
                      fill 
                      style={{ objectFit: "cover" }} 
                      sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                    />
                  </div>
                  <div className="industry-card-overlay" />
                  <div className="industry-card-hover-bg" />
                  
                  {/* Default state */}
                  <div className="industry-card-default-content">
                    <h4 className="industry-card-default-title">FMCG</h4>
                  </div>
                  
                  {/* Hover state */}
                  <div className="industry-card-hover-content">
                    <div className="industry-card-hover-top">
                      <p className="industry-card-description">
                        High volume, tight margins, zero tolerance for stockouts.
                      </p>
                      <div>
                        <h5 className="industry-card-section-title">Challenges</h5>
                        <ul className="industry-card-list">
                          <li className="industry-card-list-item bullet-1">Unpredictable demand spikes</li>
                          <li className="industry-card-list-item bullet-2">Fresh product expiry constraints</li>
                          <li className="industry-card-list-item bullet-3">Multi-stop route complexity</li>
                        </ul>
                      </div>
                      <div>
                        <h5 className="industry-card-section-title">Doormile Solutions</h5>
                        <ul className="industry-card-list">
                          <li className="industry-card-list-item bullet-4">AI-driven demand-responsive routing</li>
                          <li className="industry-card-list-item bullet-5">Freshness-aware delivery prioritization</li>
                          <li className="industry-card-list-item bullet-6">Dynamic batch optimization</li>
                        </ul>
                      </div>
                    </div>
                    
                    <div className="industry-card-hover-bottom">
                      <div className="industry-card-hover-icon">
                        <svg 
                          xmlns="http://www.w3.org/2000/svg" 
                          viewBox="0 0 24 24" 
                          fill="none" 
                          stroke="currentColor" 
                          strokeWidth="3" 
                          strokeLinecap="round" 
                          strokeLinejoin="round" 
                          style={{ width: "20px", height: "20px" }}
                        >
                          <line x1="7" y1="17" x2="17" y2="7"></line>
                          <polyline points="7 7 17 7 17 17"></polyline>
                        </svg>
                      </div>
                      <h4 className="industry-card-hover-title">FMCG</h4>
                    </div>
                  </div>
                </Link>

                {/* Card 2: Pharmaceutical */}
                <Link href="/solutions" className="industry-card-link">
                  <div className="industry-card-bg">
                    <Image 
                      src="/images/tab-pic-2.webp" 
                      alt="Pharma Logistics" 
                      fill 
                      style={{ objectFit: "cover" }} 
                      sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                    />
                  </div>
                  <div className="industry-card-overlay" />
                  <div className="industry-card-hover-bg" />
                  
                  {/* Default state */}
                  <div className="industry-card-default-content">
                    <h4 className="industry-card-default-title">Pharmaceutical</h4>
                  </div>
                  
                  {/* Hover state */}
                  <div className="industry-card-hover-content">
                    <div className="industry-card-hover-top">
                      <p className="industry-card-description">
                        Temperature-sensitive, compliance-critical, life-saving.
                      </p>
                      <div>
                        <h5 className="industry-card-section-title">Challenges</h5>
                        <ul className="industry-card-list">
                          <li className="industry-card-list-item bullet-1">Cold chain integrity requirements</li>
                          <li className="industry-card-list-item bullet-2">Regulatory compliance tracking</li>
                          <li className="industry-card-list-item bullet-3">Critical delivery time windows</li>
                        </ul>
                      </div>
                      <div>
                        <h5 className="industry-card-section-title">Doormile Solutions</h5>
                        <ul className="industry-card-list">
                          <li className="industry-card-list-item bullet-4">Real-time temperature monitoring</li>
                          <li className="industry-card-list-item bullet-5">Chain-of-custody documentation</li>
                          <li className="industry-card-list-item bullet-6">Priority override for critical shipments</li>
                        </ul>
                      </div>
                    </div>
                    
                    <div className="industry-card-hover-bottom">
                      <div className="industry-card-hover-icon">
                        <svg 
                          xmlns="http://www.w3.org/2000/svg" 
                          viewBox="0 0 24 24" 
                          fill="none" 
                          stroke="currentColor" 
                          strokeWidth="3" 
                          strokeLinecap="round" 
                          strokeLinejoin="round" 
                          style={{ width: "20px", height: "20px" }}
                        >
                          <line x1="7" y1="17" x2="17" y2="7"></line>
                          <polyline points="7 7 17 7 17 17"></polyline>
                        </svg>
                      </div>
                      <h4 className="industry-card-hover-title">Pharmaceutical</h4>
                    </div>
                  </div>
                </Link>

                {/* Card 3: Enterprise & B2B */}
                <Link href="/solutions" className="industry-card-link">
                  <div className="industry-card-bg">
                    <Image 
                      src="/images/tab-pic-3.webp" 
                      alt="Enterprise Logistics" 
                      fill 
                      style={{ objectFit: "cover" }} 
                      sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                    />
                  </div>
                  <div className="industry-card-overlay" />
                  <div className="industry-card-hover-bg" />
                  
                  {/* Default state */}
                  <div className="industry-card-default-content">
                    <h4 className="industry-card-default-title">Enterprise & B2B</h4>
                  </div>
                  
                  {/* Hover state */}
                  <div className="industry-card-hover-content">
                    <div className="industry-card-hover-top">
                      <p className="industry-card-description">
                        High-value shipments with complex delivery requirements.
                      </p>
                      <div>
                        <h5 className="industry-card-section-title">Challenges</h5>
                        <ul className="industry-card-list">
                          <li className="industry-card-list-item bullet-1">Appointment scheduling coordination</li>
                          <li className="industry-card-list-item bullet-2">White-glove delivery standards</li>
                          <li className="industry-card-list-item bullet-3">Multi-location routing complexity</li>
                        </ul>
                      </div>
                      <div>
                        <h5 className="industry-card-section-title">Doormile Solutions</h5>
                        <ul className="industry-card-list">
                          <li className="industry-card-list-item bullet-4">Automated appointment optimization</li>
                          <li className="industry-card-list-item bullet-5">Service level guarantee tracking</li>
                          <li className="industry-card-list-item bullet-6">Enterprise integration APIs</li>
                        </ul>
                      </div>
                    </div>
                    
                    <div className="industry-card-hover-bottom">
                      <div className="industry-card-hover-icon">
                        <svg 
                          xmlns="http://www.w3.org/2000/svg" 
                          viewBox="0 0 24 24" 
                          fill="none" 
                          stroke="currentColor" 
                          strokeWidth="3" 
                          strokeLinecap="round" 
                          strokeLinejoin="round" 
                          style={{ width: "20px", height: "20px" }}
                        >
                          <line x1="7" y1="17" x2="17" y2="7"></line>
                          <polyline points="7 7 17 7 17 17"></polyline>
                        </svg>
                      </div>
                      <h4 className="industry-card-hover-title">Enterprise & B2B</h4>
                    </div>
                  </div>
                </Link>

              </div>

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