import React from "react";
import Image from "next/image";
import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
import IndustryWorldMap from "./IndustryWorldMap";

const WS_STATS = [
  { value: "500", plus: "+", label: "Women Partners" },
  { value: "35", plus: "+", label: "Cities" },
  { value: "10K", plus: "+", label: "Deliveries" },
];

const WS_CARDS = [
  {
    title: "Women Leadership",
    desc: "Women shaping strategy and driving excellence across logistics operations.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="9" r="5" />
        <path d="M9 13.5 7.5 21 12 18l4.5 3-1.5-7.5" />
      </svg>
    ),
  },
  {
    title: "Entrepreneurship",
    desc: "Women building sustainable businesses within the logistics ecosystem.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="7" width="18" height="13" rx="2" />
        <path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18" />
      </svg>
    ),
  },
  {
    title: "Innovation",
    desc: "Women advancing logistics through practical ideas and operational insight.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <path d="M9 18h6M10 21h4" />
        <path d="M12 3a6 6 0 0 0-3.8 10.6c.5.5.8 1.2.8 1.9v.5h6v-.5c0-.7.3-1.4.8-1.9A6 6 0 0 0 12 3Z" />
      </svg>
    ),
  },
  {
    title: "Community Growth",
    desc: "Creating local opportunities through training, employment, and empowerment.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="9" cy="8" r="3" />
        <path d="M3.5 20c0-3 2.5-5 5.5-5s5.5 2 5.5 5M16 5.5a3 3 0 0 1 0 5.8M20.5 20c0-2.3-1.4-3.9-3.3-4.6" />
      </svg>
    ),
  },
];

export default function WomenSection() {
  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: `
        /* ============================================================
           Success Stories — redesigned right column (stats + 2x2 cards)
           Dark section · red accent #dc2626 / #ef4444 · Manrope
           ============================================================ */
        /* Neutralise the right column's asymmetric 140px left padding so the
           box group can be centered instead of pushed to one side. */
        .elementor-element.elementor-element-b2c956f { padding: 0 !important; }

        /* Vertically center the two columns so the right content lines up with
           the image instead of needing a big top gap; tighten row gap. */
        .elementor-element.elementor-element-2ed47f3 { align-items: center !important; }

        /* Animated map background behind the Success Stories content */
        .elementor-element.elementor-element-b6e14bd { position: relative; overflow: hidden; }
        .elementor-element.elementor-element-b6e14bd > .e-con-inner { position: relative; z-index: 1; }
        .ws-map { position: absolute; inset: 0; z-index: 0; opacity: 0.5; pointer-events: none; }
        .ws-map canvas { display: block; }

        #ws-stories {
            display: flex;
            flex-direction: column;
            gap: 16px;
            width: 100%;
            max-width: 620px;
            margin: 0 auto; /* center the 7 boxes as a group — no negative margins */
        }

        #ws-stories .ws__stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }
        #ws-stories .ws__stat {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 14px;
            padding: 20px 16px;
            transition: border-color 0.3s ease, background-color 0.3s ease;
        }
        #ws-stories .ws__stat:hover { border-color: rgba(220,38,38,0.28); background: rgba(220,38,38,0.05); }
        #ws-stories .ws__stat-num {
            color: #fff !important;
            font-weight: 900;
            font-size: clamp(28px, 3vw, 38px);
            line-height: 1;
            letter-spacing: -0.01em;
        }
        #ws-stories .ws__stat-num span { color: #dc2626 !important; }
        #ws-stories .ws__stat-label {
            margin-top: 9px;
            color: rgba(255,255,255,0.7) !important;
            font-size: 14px !important;
            font-weight: 700;
            letter-spacing: 0.03em;
            text-transform: uppercase;
        }

        #ws-stories .ws__cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
            align-items: stretch;
        }
        #ws-stories .ws__card {
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            min-height: 168px;
            background: rgba(255,255,255,0.035);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 14px;
            padding: 20px;
            transition: transform 0.35s cubic-bezier(.25,1,.5,1), border-color 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
        }
        #ws-stories .ws__card::after {
            content: '';
            position: absolute;
            top: -45%; left: -25%;
            width: 150px; height: 150px;
            background: radial-gradient(circle, rgba(220,38,38,0.2), transparent 70%);
            opacity: 0;
            transition: opacity 0.35s ease;
            pointer-events: none;
        }
        #ws-stories .ws__card:hover {
            transform: translateY(-4px);
            border-color: rgba(220,38,38,0.3);
            background: rgba(220,38,38,0.05);
            box-shadow: 0 18px 44px -20px rgba(0,0,0,0.7);
        }
        #ws-stories .ws__card:hover::after { opacity: 1; }
        #ws-stories .ws__card-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px; height: 40px;
            border-radius: 11px;
            background: rgba(220,38,38,0.12);
            border: 1px solid rgba(220,38,38,0.25);
            color: #ef4444;
            margin-bottom: 16px;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        #ws-stories .ws__card:hover .ws__card-icon { background: #dc2626; color: #fff; }
        #ws-stories .ws__card-icon svg { width: 21px; height: 21px; }
        #ws-stories .ws__card-title {
            color: #fff !important;
            font-weight: 800;
            font-size: 19px;
            line-height: 1.2;
            letter-spacing: 0;
            margin-bottom: 9px;
        }
        #ws-stories .ws__card-desc {
            max-width: 28ch;
            color: rgba(255,255,255,0.66) !important;
            font-size: 15px;
            line-height: 1.52;
            margin: 0;
            font-weight: 500;
        }

        /* ---- Floating card sizing: content-driven, not container-driven ----
           Matches the EV Logistics card height proportions exactly by trimming
           red content padding and white footer min-height. */
        .elementor-element.elementor-element-3b61435 {
            --padding-top: 46px;
            --padding-bottom: 38px;
        }
        .elementor-element.elementor-element-5aea22e {
            --min-height: 38px;
            --padding-top: 14px;
            --padding-bottom: 14px;
        }
        @media (max-width: 1020px) {
            .elementor-element.elementor-element-3b61435 {
                --padding-top: 34px;
                --padding-bottom: 28px;
            }
            .elementor-element.elementor-element-5aea22e {
                --min-height: 32px;
                --padding-top: 12px;
                --padding-bottom: 12px;
            }
        }
        @media (max-width: 660px) {
            .elementor-element.elementor-element-3b61435 {
                --padding-top: 26px;
                --padding-bottom: 22px;
            }
            .elementor-element.elementor-element-5aea22e {
                --min-height: 24px;
                --padding-top: 10px;
                --padding-bottom: 10px;
            }
        }

        .elementor-element-778840d .logico-title {
            white-space: nowrap !important;
        }

        /* The banner image (bg-header-women.png) is very wide (≈2.48:1) and the
           woman — the subject of this section — sits on the right. On narrow
           screens "cover" center-crops her out, so shift the focal point right
           to keep her face in frame. */
        @media (max-width: 1024px) {
            .elementor-element.elementor-element-7da6646:not(.elementor-motion-effects-element-type-background) {
                background-position: 78% center !important;
            }
        }
        @media (max-width: 767px) {
            .elementor-element.elementor-element-7da6646:not(.elementor-motion-effects-element-type-background) {
                background-position: 82% 25% !important;
            }
        }

        /* Stack the two columns below the desktop breakpoint so the box group
           always gets full width and stays centered — never clipped. */
        @media (max-width: 1024px) {
            .elementor-element-778840d .logico-title {
                white-space: normal !important;
            }
            .elementor-element.elementor-element-2ed47f3 { grid-template-columns: 1fr !important; }
            #ws-stories { max-width: 640px; margin: 0 auto; }
            /* Align the heading, image and stats/cards to one shared left/right
               edge — the heading + image widgets carried extra inset that left
               them staggered (80px / 70px / 60px) against the stats column. */
            #women-entrepreneurship .elementor-element-36efec7,
            #women-entrepreneurship .elementor-element-b2c956f {
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
            #women-entrepreneurship .elementor-element-778840d,
            #women-entrepreneurship .elementor-element-bbfb67f,
            #women-entrepreneurship .elementor-element-778840d > .elementor-widget-container,
            #women-entrepreneurship .elementor-element-bbfb67f > .elementor-widget-container {
                padding-left: 0 !important;
                padding-right: 0 !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
            }
        }

        @media (max-width: 767px) {
            #women-entrepreneurship {
                width: calc(100% - 20px) !important;
                margin-left: 10px !important;
                margin-right: 10px !important;
                border-radius: 22px !important;
                padding-left: 0px !important;
                padding-right: 0px !important;
            }
            #women-entrepreneurship .e-con-boxed > .e-con-inner {
                padding-top: 32px !important;
                padding-bottom: 32px !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
            #women-entrepreneurship .elementor-element-8b5d6e6,
            #women-entrepreneurship .elementor-element-b6e14bd,
            #women-entrepreneurship .elementor-element-90cc867,
            #women-entrepreneurship .elementor-element-36efec7,
            #women-entrepreneurship .elementor-element-b2c956f {
                padding-left: 0 !important;
                padding-right: 0 !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
            }
            #women-entrepreneurship .elementor-element-1f766ea {
                width: 100% !important;
                max-width: 100% !important;
                margin-left: auto !important;
                margin-right: auto !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
            #women-entrepreneurship .elementor-element.elementor-element-2ed47f3 {
                padding-left: 0 !important;
                padding-right: 0 !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                margin-top: 0 !important;
                padding-top: 0 !important;
                gap: 24px !important;
            }
            #women-entrepreneurship .elementor-element-36efec7 {
                margin-top: 0px !important;
                padding-top: 0px !important;
                gap: 0px !important;
            }
            #women-entrepreneurship .elementor-element-24c0280 {
                margin-bottom: 0px !important;
                padding-left: 14px !important;
                padding-right: 14px !important;
                box-sizing: border-box !important;
            }
            #women-entrepreneurship .elementor-element-778840d {
                margin-top: 14px !important;
                margin-bottom: 14px !important;
                padding-top: 0px !important;
                padding-bottom: 0px !important;
                padding-left: 14px !important;
                padding-right: 14px !important;
                box-sizing: border-box !important;
            }
            #women-entrepreneurship .elementor-element-778840d h3.logico-title,
            #women-entrepreneurship .elementor-element-778840d > .elementor-widget-container {
                margin: 0px !important;
                padding: 0px !important;
            }
            #women-entrepreneurship .elementor-element-7da6646 {
                width: calc(100% - 28px) !important;
                margin-left: 14px !important;
                margin-right: 14px !important;
                border-radius: 18px !important;
                min-height: 240px !important;
                margin-top: 15px !important;
                margin-bottom: -50px !important;
                box-sizing: border-box !important;
            }
            #women-entrepreneurship .elementor-element-8b5d6e6 {
                padding-left: 14px !important;
                padding-right: 14px !important;
                margin-left: 0px !important;
                margin-right: 0px !important;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
            #women-entrepreneurship .elementor-element-bbfb67f img {
                width: 100% !important;
            }
            #women-entrepreneurship .elementor-element-bbfb67f {
                margin-top: 0px !important;
                margin-bottom: 16px !important;
                padding-left: 14px !important;
                padding-right: 14px !important;
                box-sizing: border-box !important;
            }
            #ws-stories {
                padding-left: 14px !important;
                padding-right: 14px !important;
                box-sizing: border-box !important;
            }
            /* KPI stat cards stack one-per-row on mobile. Inside each card the big
               number sits on the left and the label on the right, vertically
               centered, so every stat reads as a clean full-width row instead of
               three cramped columns. */
            #ws-stories .ws__stats { grid-template-columns: 1fr; gap: 12px; }
            #ws-stories .ws__stat {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 16px;
                padding: 16px 20px;
                min-width: 0;
            }
            #ws-stories .ws__stat-num { font-size: clamp(30px, 9vw, 40px); }
            #ws-stories .ws__stat-label {
                margin-top: 0;
                font-size: 13px !important;
                letter-spacing: 0.02em;
                text-align: right;
                min-height: 0;
            }
            #ws-stories .ws__cards { grid-template-columns: 1fr; gap: 12px; }
        }
      `}} />

      <div id="women-entrepreneurship" 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" style={{ backgroundColor: "#1f1f1f", width: "calc(100% - 40px)", marginLeft: "20px", marginRight: "20px", borderRadius: "25px" }}>
      <div
        className="elementor-element elementor-element-13a7637 elementor-widget__width-auto elementor-absolute elementor-widget elementor-widget-logico_decorative_block" 
        data-id="13a7637" 
        data-element_type="widget" 
        data-e-type="widget" 
        style={{ position: "absolute" }}
      >
        <div className="elementor-widget-container">
          <div className="block-decoration animation-enable block-decoration-style-1">
            <div className="block-decoration-item"></div>
          </div>
        </div>
      </div>

      <div 
        style={{ backgroundImage: "url(/images/bg-header-women.webp)" }} 
        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"
      />

      <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='{"background_background":"classic"}'>
            <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">Empowering Women</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>Doormile empowers women to lead the future of logistics.</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='{"background_background":"classic"}'>
            <div className="elementor-element elementor-element-46b9ffa elementor-widget elementor-widget-logico_button" data-id="46b9ffa" 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">
                    <a href="#" className="logico-small-button">
                      Explore more
                      <svg viewBox="0 0 13 20">
                        <polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5"></polyline>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </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='{"background_background":"classic"}'>
        <div className="ws-map" aria-hidden="true">
          <IndustryWorldMap />
        </div>
        <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">/ Women Empowerment /</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">
                <ScrollReveal duration={0.8} yOffset={28} triggerOnce>
                  <div className="elementor-element elementor-element-778840d elementor-widget elementor-widget-logico_heading" 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">Women Leading the Way</h3>
                    </div>
                  </div>
                </ScrollReveal>
                <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">
                    <Image 
                      src="/images/bg-map-women.webp" 
                      alt="Women Map" 
                      width={626} 
                      height={692} 
                      style={{ maxWidth: "100%", height: "auto" }}
                    />
                  </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 id="ws-stories">
                  <StaggerChildren className="ws__stats" stagger={0.1} duration={0.6} yOffset={20} triggerOnce>
                    {WS_STATS.map((s) => (
                      <div className="ws__stat" key={s.label}>
                        <div className="ws__stat-num">{s.value}<span>{s.plus}</span></div>
                        <div className="ws__stat-label">{s.label}</div>
                      </div>
                    ))}
                  </StaggerChildren>

                  <StaggerChildren className="ws__cards" stagger={0.08} duration={0.6} yOffset={24} triggerOnce>
                    {WS_CARDS.map((c) => (
                      <div className="ws__card" key={c.title}>
                        <span className="ws__card-icon" aria-hidden="true">{c.icon}</span>
                        <div className="ws__card-title">{c.title}</div>
                        <p className="ws__card-desc">{c.desc}</p>
                      </div>
                    ))}
                  </StaggerChildren>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </>
  );
}
