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

export default function IndustrySolutions() {
  return (
    <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" data-id="c8162c4" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default" style={{paddingLeft: "50px"}}>
                  <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"
                  style={{marginLeft: "50px"}}
                >
                  <div className="elementor-widget-container" style={{ margin: "30px 0 0 0"}}>
                    <style dangerouslySetInnerHTML={{ __html: `
                      @media (min-width: 1024px) {
                        .industry-title-single-line {
                          white-space: nowrap !important;
                        }
                      }
                    `}} />
                    <h3 className="logico-title industry-title-single-line" style={{ fontSize: "clamp(28px, 3.5vw, 48px)", lineHeight: "1.1", fontWeight: 800, textTransform: "uppercase" }}>
                      <ScrollReveal delay={0.05} duration={0.8} yOffset={25}>
                        Smart solutions built exclusively for your <span style={{ color: "#c01227" }}>industry</span>
                      </ScrollReveal>
                    </h3>
                  </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.jpeg" 
                      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.jpeg" 
                      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.jpeg" 
                      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>
  );
}