"use client";

import React, { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import { sendEmailAction } from "@/actions/sendEmail";
import { ScrollReveal } from "@/animations/Reveal";

export default function Footer() {
  const socialIconSpacing = {
    "--grid-column-gap": "52px",
    "--grid-row-gap": "18px",
    columnGap: "52px",
    rowGap: "18px",
  } as React.CSSProperties;

  const [showScrollTop, setShowScrollTop] = useState(false);
  const [formData, setFormData] = useState({
    fullName: "",
    email: "",
    subject: "",
    message: "",
  });
  const [formStatus, setFormStatus] = useState<"idle" | "submitting" | "success" | "error">("idle");

  // Handle scroll to top button visibility
  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 300) {
        setShowScrollTop(true);
      } else {
        setShowScrollTop(false);
      }
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
    // Clear any stale success/error message once the user resumes editing.
    if (formStatus === "success" || formStatus === "error") setFormStatus("idle");
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    setFormStatus("submitting");
    try {
      const res = await sendEmailAction(formData);

      if (res.success) {
        setFormStatus("success");
        setFormData({ fullName: "", email: "", subject: "", message: "" });
      } else {
        console.error("Failed to submit contact form:", res.error);
        setFormStatus("error");
      }
    } catch (err) {
      console.error("Error submitting contact form:", err);
      setFormStatus("error");
    }
  };

  return (
    <>
      {/* Floating-label fix: the theme only lifts the label on :focus-within, so a
          filled-but-blurred field drops its label back onto the typed value and the
          two overlap. Keep the label lifted (and the notch in the top border open)
          whenever the field carries a value, via the .dm-field-filled class below. */}
      <style dangerouslySetInnerHTML={{ __html: `
        .logico-form-field.dm-field-filled .logico-label-wrapper>label {
          font-size: 14px;
          top: -14px;
          color: var(--logico-dark-text-color);
        }
        .logico-form-field.dm-field-filled .logico-label-placeholder .logico-label-placeholder-text:before {
          right: 100%;
          left: initial;
        }
        .logico-form-field.dm-field-filled .logico-label-placeholder .logico-label-placeholder-text:after {
          left: 100%;
          right: initial;
        }
      ` }} />
      <footer
        data-rocket-location-hash="1eeca93394c4fc14089e9d12a2a92e22"
        itemScope
        itemType="https://schema.org/WPFooter"
        id="colophon"
        role="contentinfo"
      >
        <div className="footer-width-fixer">
          <div data-elementor-type="wp-post" data-elementor-id="6585" className="elementor elementor-6585">
            <div className="elementor-element elementor-element-3cd920c e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="3cd920c" data-element_type="container" data-e-type="container">
              <div className="elementor-element elementor-element-b29b8fc e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="b29b8fc" 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-ef6fa6d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="ef6fa6d" data-element_type="container" data-e-type="container">
                    <div className="elementor-element elementor-element-9990148 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9990148" data-element_type="container" data-e-type="container">
                      <div className="elementor-element elementor-element-8899bdf elementor-absolute elementor-widget elementor-widget-image" data-id="8899bdf" 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">
                          <Image width={965} height={474} src="/images/bg-map.png" className="attachment-full size-full wp-image-1148" alt="" />
                        </div>
                      </div>
                      <div className="elementor-element elementor-element-a0e7516 elementor-widget elementor-widget-logico_heading" data-id="a0e7516" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                        <div className="elementor-widget-container">
                          <div className="logico-title">/ get in touch /</div>
                        </div>
                      </div>
                      <div className="elementor-element elementor-element-687d944 elementor-widget elementor-widget-logico_heading" data-id="687d944" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                        <div className="elementor-widget-container">
                          <ScrollReveal delay={0.1} duration={0.8} yOffset={25}>
                            <h3 className="logico-title" style={{ color: "white" }}>
                              We are always ready to help you and answer your questions
                            </h3>
                          </ScrollReveal>
                        </div>
                      </div>
                      <div className="elementor-element elementor-element-670d1b2 elementor-widget elementor-widget-text-editor" data-id="670d1b2" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
                        <div className="elementor-widget-container">
                          <p>Connecting businesses with fast, secure, smart deliveries.</p>
                        </div>
                      </div>
                      <div className="elementor-element elementor-element-2631b42 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="2631b42" data-element_type="container" data-e-type="container">
                        <div className="e-con-inner">
                          <div className="elementor-element elementor-element-df89993 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="df89993" data-element_type="container" data-e-type="container">
                            <div className="elementor-element elementor-element-69b6892 elementor-widget elementor-widget-logico_heading" data-id="69b6892" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                              <div className="elementor-widget-container">
                                <div className="logico-title dm-foot-label">
                                  <svg className="dm-foot-ic" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" />
                                  </svg>
                                  <span>Contact</span>
                                </div>
                              </div>
                            </div>
                            <div className="elementor-element elementor-element-87be926 elementor-widget elementor-widget-text-editor" data-id="87be926" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
                              <div className="elementor-widget-container">
                                <p>Tel : +91 86886 97941</p>
                              </div>
                            </div>
                          </div>
                          <div className="elementor-element elementor-element-f5d8e63 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="f5d8e63" data-element_type="container" data-e-type="container">
                            <div className="elementor-element elementor-element-774e540 elementor-widget elementor-widget-logico_heading" data-id="774e540" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                              <div className="elementor-widget-container">
                                <div className="logico-title dm-foot-label">
                                  <svg className="dm-foot-ic" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                                    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
                                    <circle cx="12" cy="10" r="3" />
                                  </svg>
                                  <span>Address</span>
                                </div>
                              </div>
                            </div>
                            <div className="elementor-element elementor-element-9c1cf03 elementor-widget elementor-widget-text-editor" data-id="9c1cf03" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
                              <div className="elementor-widget-container">
                                <p>5th Floor, Vision Ultima, Street No.3, Jayabheri Enclave, Gachibowli, Hyderabad, Telangana 500032.</p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div className="elementor-element elementor-element-645be8d e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="645be8d" data-element_type="container" data-e-type="container">
                        <div className="e-con-inner">
                          <div className="elementor-element elementor-element-a96d151 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="a96d151" data-element_type="container" data-e-type="container">
                            <div className="elementor-element elementor-element-37e647f elementor-widget elementor-widget-logico_heading" data-id="37e647f" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                              <div className="elementor-widget-container">
                                <div className="logico-title dm-foot-label">
                                  <svg className="dm-foot-ic" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                                    <rect x="2" y="4" width="20" height="16" rx="2" />
                                    <path d="m22 7-10 5L2 7" />
                                  </svg>
                                  <span>Email</span>
                                </div>
                              </div>
                            </div>
                            <div className="elementor-element elementor-element-ba67644 elementor-widget elementor-widget-text-editor" data-id="ba67644" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
                              <div className="elementor-widget-container">
                                <p>
                                  <a href="mailto:care@doormile.com">care@doormile.com</a>
                                </p>
                              </div>
                            </div>
                          </div>
                          <div className="elementor-element elementor-element-9ba4b82 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9ba4b82" data-element_type="container" data-e-type="container">
                            <div className="elementor-element elementor-element-e9a5d79 elementor-widget elementor-widget-logico_heading" data-id="e9a5d79" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                              <div className="elementor-widget-container">
                                <div className="logico-title dm-foot-label">
                                  <svg className="dm-foot-ic" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                                    <circle cx="18" cy="5" r="3" />
                                    <circle cx="6" cy="12" r="3" />
                                    <circle cx="18" cy="19" r="3" />
                                    <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
                                    <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
                                  </svg>
                                  <span>Social</span>
                                </div>
                              </div>
                            </div>
                            <div className="elementor-element elementor-element-a6bccba elementor-shape-square elementor-grid-0 elementor-widget elementor-widget-social-icons" data-id="a6bccba" data-element_type="widget" data-e-type="widget" data-widget_type="social-icons.default">
                              <div className="elementor-widget-container">
                                <div className="elementor-social-icons-wrapper elementor-grid" role="list" style={socialIconSpacing}>
                                  {/* <span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
                                    <a className="elementor-icon elementor-social-icon elementor-social-icon-facebook-f elementor-repeater-item-3fbe893" href="https://www.facebook.com" target="_blank" rel="noopener noreferrer">
                                      <span className="elementor-screen-only">Facebook</span>
                                      <svg aria-hidden="true" className="e-font-icon-svg e-fab-facebook-f" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
                                      </svg>
                                    </a>
                                  </span>
                                  <span className="elementor-grid-item" role="listitem"style={{padding:"0 15px"}}>
                                    <a className="elementor-icon elementor-social-icon elementor-social-icon-x-twitter elementor-repeater-item-64ac94e" href="https://x.com" target="_blank" rel="noopener noreferrer">
                                      <span className="elementor-screen-only">X</span>
                                      <svg aria-hidden="true" className="e-font-icon-svg e-fab-x-twitter" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
                                      </svg>
                                    </a>
                                  </span> */}
                                  <span className="elementor-grid-item" role="listitem"style={{padding:"0 15px"}}>
                                    <a className="elementor-icon elementor-social-icon elementor-social-icon-linkedin-in elementor-repeater-item-38e1bcc" href="https://www.linkedin.com" target="_blank" rel="noopener noreferrer">
                                      <span className="elementor-screen-only">LinkedIn</span>
                                      <svg aria-hidden="true" className="e-font-icon-svg e-fab-linkedin-in" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
                                      </svg>
                                    </a>
                                  </span>
                                  <span className="elementor-grid-item" role="listitem"style={{padding:"0 15px"}}>
                                    <a className="elementor-icon elementor-social-icon elementor-social-icon-youtube elementor-repeater-item-b0d5e1f" href="https://www.youtube.com" target="_blank" rel="noopener noreferrer">
                                      <span className="elementor-screen-only">YouTube</span>
                                      <svg aria-hidden="true" className="e-font-icon-svg e-fab-youtube" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
                                      </svg>
                                    </a>
                                  </span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="elementor-element elementor-element-a5c503d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="a5c503d" data-element_type="container" data-e-type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
                      <div className="elementor-element elementor-element-535776a elementor-widget elementor-widget-logico_heading" data-id="535776a" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                        <div className="elementor-widget-container">
                          <div className="logico-title">Get in Touch</div>
                        </div>
                      </div>
                      <div className="elementor-element elementor-element-0e6fedf elementor-widget elementor-widget-logico_wpforms" data-id="0e6fedf" data-element_type="widget" data-e-type="widget" data-widget_type="logico_wpforms.default">
                        <div className="elementor-widget-container">
                          <div className="logico-wpforms-widget">
                            <div className="wpforms-container wpforms-render-modern" id="wpforms-369">
                              <form id="wpforms-form-369" className="wpforms-validate wpforms-form" onSubmit={handleSubmit}>
                                <div className="wpforms-field-container">
                                  <div className={`wpforms-field-wrapper logico-form-field${formData.fullName ? " dm-field-filled" : ""}`}>
                                    <div className="logico-label-wrapper" style={{marginBottom:"12px"}}>
                                      <div className="logico-label-placeholder">
                                        <div className="logico-label-placeholder-text">Full name</div>
                                      </div>
                                      <label className="wpforms-field-label" htmlFor="footer-field-name">Full name</label>
                                    </div>
                                    <input
                                      type="text"
                                      id="footer-field-name"
                                      className="wpforms-field-large"
                                      name="fullName"
                                      value={formData.fullName}
                                      onChange={handleInputChange}
                                      required
                                    />
                                  </div>
                                  <div className={`wpforms-field-wrapper logico-form-field${formData.email ? " dm-field-filled" : ""}`}>
                                    <div className="logico-label-wrapper" style={{marginBottom:"12px"}}>
                                      <div className="logico-label-placeholder">
                                        <div className="logico-label-placeholder-text">Email</div>
                                      </div>
                                      <label className="wpforms-field-label" htmlFor="footer-field-email">Email</label>
                                    </div>
                                    <input
                                      type="email"
                                      id="footer-field-email"
                                      className="wpforms-field-large"
                                      name="email"
                                      value={formData.email}
                                      onChange={handleInputChange}
                                      required
                                    />
                                  </div>
                                  <div className={`wpforms-field-wrapper logico-form-field${formData.subject ? " dm-field-filled" : ""}`}>
                                    <div className="logico-label-wrapper" style={{marginBottom:"12px"}}>
                                      <div className="logico-label-placeholder">
                                        <div className="logico-label-placeholder-text">Subject</div>
                                      </div>
                                      <label className="wpforms-field-label" htmlFor="footer-field-subject">Subject</label>
                                    </div>
                                    <input
                                      type="text"
                                      id="footer-field-subject"
                                      className="wpforms-field-large"
                                      name="subject"
                                      value={formData.subject}
                                      onChange={handleInputChange}
                                      required
                                    />
                                  </div>
                                  <div className={`wpforms-field-wrapper logico-form-field${formData.message ? " dm-field-filled" : ""}`}>
                                    <div className="logico-label-wrapper" style={{marginBottom:"12px"}}>
                                      <div className="logico-label-placeholder">
                                        <div className="logico-label-placeholder-text">Message</div>
                                      </div>
                                      <label className="wpforms-field-label" htmlFor="footer-field-message">Message</label>
                                    </div>
                                    <textarea
                                      id="footer-field-message"
                                      className="wpforms-field-large"
                                      name="message"
                                      value={formData.message}
                                      onChange={handleInputChange}
                                      required
                                    ></textarea>
                                  </div>
                                </div>
                                <div className="wpforms-submit-container">
                                  <button
                                    type="submit"
                                    id="wpforms-submit-369"
                                    className="logico-alter-button wpforms-submit"
                                    disabled={formStatus === "submitting"}
                                  >
                                    {formStatus === "submitting" ? "Sending..." : "Send a message"}
                                  </button>
                                  {formStatus === "success" && (
                                    <div style={{ marginTop: "16px", color: "#4CAF50", fontSize: "14px", fontWeight: "bold" }}>
                                      Message sent successfully!
                                    </div>
                                  )}
                                  {formStatus === "error" && (
                                    <div style={{ color: "#f44336", marginTop: "10px", fontSize: "14px" }}>
                                      Failed to send message. Please try again.
                                    </div>
                                  )}
                                </div>
                              </form>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="elementor-element elementor-element-e183a77 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="e183a77" data-element_type="container" data-e-type="container">
                    <div className="elementor-element elementor-element-5219697 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5219697" data-element_type="container" data-e-type="container">
                      <div className="elementor-element elementor-element-e6af8aa elementor-widget__width-initial elementor-widget elementor-widget-logico_heading" data-id="e6af8aa" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                        <div className="elementor-widget-container">
                          <ScrollReveal delay={0.1} duration={0.8} yOffset={25}>
                            <h2 className="logico-title">
                              Delivered <span style={{ color: "#c01227" }}>on time</span> with no hassle.
                            </h2>
                          </ScrollReveal>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="elementor-element elementor-element-ba22941 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="ba22941" data-element_type="container" data-e-type="container">
                    <div className="elementor-element elementor-element-54629ca elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="54629ca" 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>
                  <div className="elementor-element elementor-element-3f1ba7a e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="3f1ba7a" data-element_type="container" data-e-type="container">
                    <div className="elementor-element elementor-element-64e2e81 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="64e2e81" data-element_type="container" data-e-type="container">
                      <div className="elementor-element elementor-element-b5c897d elementor-widget elementor-widget-image" data-id="b5c897d" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
                        <div className="elementor-widget-container">
                          <Link href="/">
                            <Image width={748} height={184} src="/images/logo-slogan.png" style={{ width: "280px", height: "auto" }} className="attachment-full size-full wp-image-5851" alt="Doormile Tagline" />
                          </Link>
                        </div>
                      </div>
                      <div className="elementor-element elementor-element-e4e6486 elementor-shape-square elementor-grid-0 elementor-widget elementor-widget-social-icons" data-id="e4e6486" data-element_type="widget" data-e-type="widget" data-widget_type="social-icons.default">
                        <div className="elementor-widget-container">
                          <div className="elementor-social-icons-wrapper elementor-grid" role="list" style={socialIconSpacing}>
                            {/* <span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
                              <a className="elementor-icon elementor-social-icon elementor-social-icon-facebook-f" href="https://www.facebook.com" target="_blank" rel="noopener noreferrer">
                                <span className="elementor-screen-only">Facebook</span>
                                <svg aria-hidden="true" className="e-font-icon-svg e-fab-facebook-f" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
                                </svg>
                              </a>
                            </span>
                            <span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
                              <a className="elementor-icon elementor-social-icon elementor-social-icon-x-twitter" href="https://x.com" target="_blank" rel="noopener noreferrer">
                                <span className="elementor-screen-only">X</span>
                                <svg aria-hidden="true" className="e-font-icon-svg e-fab-x-twitter" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
                                </svg>
                              </a>
                            </span> */}
                            <span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
                              <a className="elementor-icon elementor-social-icon elementor-social-icon-linkedin-in" href="https://www.linkedin.com" target="_blank" rel="noopener noreferrer">
                                <span className="elementor-screen-only">LinkedIn</span>
                                <svg aria-hidden="true" className="e-font-icon-svg e-fab-linkedin-in" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
                                </svg>
                              </a>
                            </span>
                            <span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
                              <a className="elementor-icon elementor-social-icon elementor-social-icon-youtube" href="https://www.youtube.com" target="_blank" rel="noopener noreferrer">
                                <span className="elementor-screen-only">YouTube</span>
                                <svg aria-hidden="true" className="e-font-icon-svg e-fab-youtube" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
                                </svg>
                              </a>
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="elementor-element elementor-element-5b73dd3 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5b73dd3" data-element_type="container" data-e-type="container">
                      <div className="elementor-element elementor-element-b2507df elementor-widget elementor-widget-logico_custom_navigation_menu" data-id="b2507df" data-element_type="widget" data-e-type="widget" data-widget_type="logico_custom_navigation_menu.default">
                        <div className="elementor-widget-container">
                          <ul className="logico-custom-menu-widget">
                            <li>
                              <Link href="/miletruth">MileTruth™</Link>
                            </li>
                            <li>
                              <Link href="/how-it-works">How It Works</Link>
                            </li>
                            <li>
                              <Link href="/solutions">Use Cases</Link>
                            </li>
                            <li>
                              <Link href="/contact">Request Demo</Link>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <div className="elementor-element elementor-element-451f15c e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="451f15c" data-element_type="container" data-e-type="container">
                      <div className="elementor-element elementor-element-a219b7d elementor-widget elementor-widget-logico_custom_navigation_menu" data-id="a219b7d" data-element_type="widget" data-e-type="widget" data-widget_type="logico_custom_navigation_menu.default">
                        <div className="elementor-widget-container">
                          <ul className="logico-custom-menu-widget">
                            <li>
                              <Link href="/doormile-wings">Doormile Wings</Link>
                            </li>
                            <li>
                              <Link href="/about-us">About Us</Link>
                            </li>
                            <li>
                              <Link href="/about-us#women-entrepreneurship">Women entrepreneurship</Link>
                            </li>
                            <li>
                              <Link href="/blog">Blog</Link>
                            </li>
                            <li>
                              <Link href="/contact">Contact</Link>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <div className="elementor-element elementor-element-44a1f5d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="44a1f5d" data-element_type="container" data-e-type="container">
                      <div className="elementor-element elementor-element-189484a elementor-widget elementor-widget-logico_custom_navigation_menu" data-id="189484a" data-element_type="widget" data-e-type="widget" data-widget_type="logico_custom_navigation_menu.default">
                        <div className="elementor-widget-container">
                          <ul className="logico-custom-menu-widget">
                            <li>
                              <Link href="/privacy-policy">Privacy Policy</Link>
                            </li>
                            <li>
                              <Link href="/terms-of-service">Terms of Service</Link>
                            </li>
                            <li>
                              <Link href="/cookie-policy">Cookie Policy</Link>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </footer>

      {/* Scroll to Top Button */}
      <div
        className={`footer-scroll-top ${showScrollTop ? "active" : ""}`}
        onClick={scrollToTop}
        style={{ cursor: "pointer" }}
      ></div>

      {/* Vendor CSS hard-codes font-family: "Manrope" but next/font/google exposes the loaded
         font only through --font-manrope (it has a hashed internal name). Re-map the footer
         bottom-section titles to the loaded font and supply the base divider widget border. */}
      <style
        dangerouslySetInnerHTML={{
          __html: `
            .elementor-6585 .elementor-element.elementor-element-e6af8aa .logico-title,
            .elementor-6585 .elementor-element.elementor-element-3f1ba7a .logico-title,
            .elementor-6585 .elementor-element.elementor-element-3f1ba7a .logico-custom-menu-widget {
                font-family: var(--font-manrope), system-ui, -apple-system, "Segoe UI", sans-serif;
            }
            /* Prevent footer custom navigation menu items from wrapping on hover,
               which causes layout shifts, height changes, and cursor flickering loops. */
            .elementor-6585 .logico-custom-menu-widget li a {
                white-space: nowrap !important;
            }
            /* The divider widget is a flex child that should grow via Elementor's
               --container-widget-flex-grow variable, but the base rule wiring that
               variable to flex-grow lives in elementor-frontend.css (not loaded). */
            .elementor-6585 .elementor-element.elementor-element-54629ca {
                flex-grow: 1;
                width: 100%;
            }
            .elementor-6585 .elementor-element.elementor-element-54629ca .elementor-divider-separator {
                display: block;
                border-top: var(--divider-border-width, 1px) var(--divider-border-style, solid) var(--divider-color, #CBCBCB);
            }

            /* Production renders footer social icons at ~25px; ours default to 50px because the
               base Elementor icon-size rule (font-size + SVG width:1em) is in elementor-frontend.css
               which isn't loaded. Match prod for both upper (a6bccba) and lower (e4e6486) groups. */
            .elementor-6585 .elementor-element.elementor-element-a6bccba .elementor-social-icon,
            .elementor-6585 .elementor-element.elementor-element-e4e6486 .elementor-social-icon {
                font-size: 16px;
            }
            .elementor-6585 .elementor-element.elementor-element-a6bccba .elementor-social-icon svg,
            .elementor-6585 .elementor-element.elementor-element-e4e6486 .elementor-social-icon svg {
                width: 25px;
                height: 25px;
            }

            /* Compact footer link columns on phones (<=480px). The kit only sets
               column --width at min-width:481px, so below that all four blocks
               fall back to 100% and stack into one very tall column. Put the
               logo+social full-width on top, then lay the three link groups out
               in a 2-up grid (matching the tablet 47% intent) so the footer is
               roughly half as tall. */
            /* Inline icon beside each contact label (Call Center / Our Location /
               Email / Social network). */
            .elementor-6585 .dm-foot-label {
                display: inline-flex !important;
                align-items: center;
                gap: 8px;
            }
            .elementor-6585 .dm-foot-label .dm-foot-ic {
                flex: 0 0 auto;
                color: #C01227;
            }

            /* ── Compact mobile contact footer (<=600px) ──
               On phones the upper contact section stacked into one very tall
               column with 50px margins between every block. Tighten the heading,
               collapse those stack margins, and pair Email + Social side-by-side
               (both are short) so the footer is far shorter without losing the
               full-width address readability. */
            @media (max-width: 600px) {
                /* Trim the band's oversized top/bottom padding on phones. */
                .elementor-6585 .elementor-element.elementor-element-b29b8fc > .e-con-inner {
                    padding-top: 40px !important;
                    padding-bottom: 40px !important;
                }
                .elementor-6585 .elementor-element.elementor-element-687d944 .logico-title {
                    font-size: clamp(24px, 6.6vw, 32px) !important;
                    line-height: 1.2 !important;
                }
                .elementor-6585 .dm-foot-label .dm-foot-ic { width: 14px; height: 14px; }
                /* The Call Center / Our Location group carries a 10px side padding
                   the Email / Social group doesn't, leaving its labels indented
                   10px out of line with everything else — zero it so all four
                   contact blocks share the same left edge as the heading. */
                .elementor-6585 .elementor-element.elementor-element-2631b42 {
                    padding-left: 0 !important;
                    padding-right: 0 !important;
                }
                /* All four contact blocks stack in one left-aligned column with a
                   consistent gap (Social network sits below Email). */
                .elementor-6585 .elementor-element.elementor-element-2631b42,
                .elementor-6585 .elementor-element.elementor-element-f5d8e63,
                .elementor-6585 .elementor-element.elementor-element-645be8d,
                .elementor-6585 .elementor-element.elementor-element-9ba4b82 {
                    margin-top: 22px !important;
                }
                .elementor-6585 .elementor-element.elementor-element-645be8d > .e-con-inner {
                    flex-direction: column !important;
                    gap: 0 !important;
                    align-items: stretch !important;
                }
                .elementor-6585 .elementor-element.elementor-element-a96d151,
                .elementor-6585 .elementor-element.elementor-element-9ba4b82 {
                    width: 100% !important;
                }
            }

            @media (max-width: 480px) {
                .elementor-6585 .elementor-element.elementor-element-3f1ba7a {
                    display: flex !important;
                    flex-direction: row !important;
                    flex-wrap: wrap !important;
                    gap: 36px 16px !important;
                }
                .elementor-6585 .elementor-element.elementor-element-64e2e81 {
                    flex: 0 0 100% !important;
                    width: 100% !important;
                }
                .elementor-6585 .elementor-element.elementor-element-5b73dd3,
                .elementor-6585 .elementor-element.elementor-element-451f15c,
                .elementor-6585 .elementor-element.elementor-element-44a1f5d {
                    flex: 1 1 calc(50% - 8px) !important;
                    width: calc(50% - 8px) !important;
                    min-width: 0 !important;
                }
                /* Allow long links (e.g. "Women entrepreneurship") to wrap inside
                   the narrow columns instead of overflowing. */
                .elementor-6585 .logico-custom-menu-widget li a {
                    white-space: normal !important;
                }
                /* Trim the large social-icons top gap so the brand block stays tight. */
                .elementor-6585 .elementor-element.elementor-element-e4e6486 > .elementor-widget-container {
                    margin-top: 24px !important;
                }
            }
          `,
        }}
      />
    </>
  );
}