"use client";

import React, { useEffect, useState } from "react";
import Link from "next/link";

export default function EVSection() {
  const [hasMounted, setHasMounted] = useState(false);

  useEffect(() => {
    setHasMounted(true);
  }, []);

  const renderAnimatedText = () => {
    const lines = [
      { text: "Built for Electric.", highlight: true },
      { text: "Not Adapted.", highlight: false }
    ];

    return lines.map((line, lineIdx) => {
      const words = line.text.split(/\s+/);
      return (
        <div key={lineIdx} style={{ display: "block" }}>
          {words.map((word, wordIdx) => {
            const letters = word.split("");
            return (
              <span key={wordIdx} className="word" style={{ display: "inline-block", marginRight: "0.2em", whiteSpace: "nowrap" }}>
                {letters.map((letter, letterIdx) => {
                  const delay = (lineIdx * 0.2) + (wordIdx * 0.1) + (letterIdx * 0.03);
                  return (
                    <span
                      key={letterIdx}
                      className={`letter ${hasMounted ? "animated" : ""}`}
                      style={{
                        ["--delay" as any]: `${delay}s`,
                      }}
                    >
                      {letter}
                    </span>
                  );
                })}
                {/* Non-breaking space */}
                &nbsp;
              </span>
            );
          })}
        </div>
      );
    });
  };

  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: `
        .logico-title .word {
            display: inline-block;
            white-space: nowrap;
            margin-right: 0.1em;
        }
        .letter {
            display: inline-block;
            opacity: 0;
            transform: translateY(0.5em);
        }
        .letter.animated {
            animation: fadeInUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
            animation-delay: var(--delay);
        }
        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
      `}} />

      <div className="elementor-element elementor-element-bbc6760 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="bbc6760" data-element_type="container" data-e-type="container">
        
        {/* Parallax placeholder background */}
        <div 
          className="elementor-element elementor-element-7da6646 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" 
          data-id="7da6646" 
          data-element_type="container" 
          data-e-type="container" 
          data-settings="{&quot;background_background&quot;:&quot;classic&quot;}" 
          style={{ 
            backgroundPosition: "center center",
            backgroundImage: "url(/images/home4-banner-4.png)",
            backgroundSize: "cover"
          }}
        ></div>

        <div className="elementor-element elementor-element-8b5d6e6 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="8b5d6e6" data-element_type="container" data-e-type="container">
          <div className="elementor-element elementor-element-1f766ea e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="1f766ea" data-element_type="container" data-e-type="container">
            <div className="elementor-element elementor-element-3b61435 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="3b61435" data-element_type="container" data-e-type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
              <div className="elementor-element elementor-element-c364d1c elementor-widget elementor-widget-text-editor" data-id="c364d1c" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
                <div className="elementor-widget-container">
                  <p>01</p>
                </div>
              </div>
              <div className="elementor-element elementor-element-239afbb elementor-widget elementor-widget-logico_heading" data-id="239afbb" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                <div className="elementor-widget-container">
                  <h5 className="logico-title">EV Logistics</h5>
                </div>
              </div>
              <div className="elementor-element elementor-element-0d307dd elementor-widget elementor-widget-text-editor" data-id="0d307dd" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
                <div className="elementor-widget-container">
                  <p>Cleaner miles, lower costs</p>
                </div>
              </div>
            </div>
            <div className="elementor-element elementor-element-5aea22e e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5aea22e" data-element_type="container" data-e-type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}"></div>
          </div>
        </div>

        <div className="elementor-element elementor-element-b6e14bd e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="b6e14bd" data-element_type="container" data-e-type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
          <div className="e-con-inner">
            <div className="elementor-element elementor-element-90cc867 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="90cc867" data-element_type="container" data-e-type="container">
              
              <div className="elementor-element elementor-element-24c0280 elementor-widget__width-inherit elementor-widget elementor-widget-logico_heading" data-id="24c0280" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                <div className="elementor-widget-container">
                  <div className="logico-title">/ EV-Native Design /</div>
                </div>
              </div>

              <div className="elementor-element elementor-element-2ed47f3 e-con-full e-grid cut-corner-no sticky-container-off e-con e-child" data-id="2ed47f3" data-element_type="container" data-e-type="container">
                <div className="elementor-element elementor-element-36efec7 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="36efec7" data-element_type="container" data-e-type="container">
                  <div className="elementor-element elementor-element-778840d elementor-widget elementor-widget-logico_heading logico_heading_animation" data-id="778840d" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                    <div className="elementor-widget-container">
                      <h3 className="logico-title" data-animate="true">
                        {renderAnimatedText()}
                      </h3>
                    </div>
                  </div>
                  <div className="elementor-element elementor-element-bbfb67f elementor-widget elementor-widget-image" data-id="bbfb67f" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
                    <div className="elementor-widget-container">
                      <img decoding="async" width="626" height="692" src="/images/home4-pic-1.png" className="attachment-full size-full wp-image-6789" alt="EV Truck" />
                    </div>
                  </div>
                </div>

                <div className="elementor-element elementor-element-b2c956f e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="b2c956f" data-element_type="container" data-e-type="container">
                  <div className="elementor-element elementor-element-1a450c2 elementor-absolute elementor-widget elementor-widget-image" data-id="1a450c2" data-element_type="widget" data-e-type="widget" data-settings="{&quot;_position&quot;:&quot;absolute&quot;}" data-widget_type="image.default">
                    <div className="elementor-widget-container">
                      <img loading="lazy" decoding="async" width="965" height="474" src="/images/bg-map.png" className="attachment-full size-full wp-image-1148" alt="Map Grid" />
                    </div>
                  </div>

                  {/* Icon Boxes */}
                  <div className="elementor-element elementor-element-6b51278 elementor-view-stacked elementor-position-inline-start elementor-shape-circle elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="6b51278" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
                    <div className="elementor-widget-container">
                      <div className="elementor-icon-box-wrapper">
                        <div className="elementor-icon-box-icon">
                          <span className="elementor-icon">
                            <i aria-hidden="true" className="fontello icon-arrow-x-r-top"></i>
                          </span>
                        </div>
                        <div className="elementor-icon-box-content">
                          <div className="elementor-icon-box-title">
                            <span>Battery-Aware Routing</span>
                          </div>
                          <p className="elementor-icon-box-description">
                            Battery level, health, and degradation are first-class inputs to route optimization.
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="elementor-element elementor-element-e34beb2 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="e34beb2" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
                    <div className="elementor-widget-container">
                      <div className="elementor-divider">
                        <span className="elementor-divider-separator"></span>
                      </div>
                    </div>
                  </div>

                  <div className="elementor-element elementor-element-27ba815 elementor-view-stacked elementor-position-inline-start elementor-shape-circle elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="27ba815" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
                    <div className="elementor-widget-container">
                      <div className="elementor-icon-box-wrapper">
                        <div className="elementor-icon-box-icon">
                          <span className="elementor-icon">
                            <i aria-hidden="true" className="fontello icon-arrow-x-r-top"></i>
                          </span>
                        </div>
                        <div className="elementor-icon-box-content">
                          <div className="elementor-icon-box-title">
                            <span>Charging Integration</span>
                          </div>
                          <p className="elementor-icon-box-description">
                            Seamlessly integrate charging stops without compromising delivery windows.
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="elementor-element elementor-element-6895eb5 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="6895eb5" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
                    <div className="elementor-widget-container">
                      <div className="elementor-divider">
                        <span className="elementor-divider-separator"></span>
                      </div>
                    </div>
                  </div>

                  <div className="elementor-element elementor-element-332c78f elementor-view-stacked elementor-position-inline-start elementor-shape-circle elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="332c78f" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
                    <div className="elementor-widget-container">
                      <div className="elementor-icon-box-wrapper">
                        <div className="elementor-icon-box-icon">
                          <span className="elementor-icon">
                            <i aria-hidden="true" className="fontello icon-arrow-x-r-top"></i>
                          </span>
                        </div>
                        <div className="elementor-icon-box-content">
                          <div className="elementor-icon-box-title">
                            <span>Energy-Optimized Paths</span>
                          </div>
                          <p className="elementor-icon-box-description">
                            Factor in elevation, speed limits, and weather for maximum efficiency.
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="elementor-element elementor-element-6895eb5 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="6895eb5" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
                    <div className="elementor-widget-container">
                      <div className="elementor-divider">
                        <span className="elementor-divider-separator"></span>
                      </div>
                    </div>
                  </div>

                  <div className="elementor-element elementor-element-332c78f elementor-view-stacked elementor-position-inline-start elementor-shape-circle elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="332c78f" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
                    <div className="elementor-widget-container">
                      <div className="elementor-icon-box-wrapper">
                        <div className="elementor-icon-box-icon">
                          <span className="elementor-icon">
                            <i aria-hidden="true" className="fontello icon-arrow-x-r-top"></i>
                          </span>
                        </div>
                        <div className="elementor-icon-box-content">
                          <div className="elementor-icon-box-title">
                            <span>Predictable Operations</span>
                          </div>
                          <p className="elementor-icon-box-description">
                            EVs become predictable assets, not operational risks.
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="elementor-element elementor-element-e70d3b7 elementor-widget elementor-widget-logico_button" data-id="e70d3b7" data-element_type="widget" data-e-type="widget" data-widget_type="logico_button.default">
                    <div className="elementor-widget-container">
                      <div className="button-widget">
                        <div className="button-container">
                          <Link href="/solutions" className="logico-alter-button">Explore more</Link>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
              </div>

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

      </div>
    </>
  );
}