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 driving decisions across operations, routing, and last-mile delivery every day.",
    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: "Enabling women to build, own, and scale their own delivery businesses.",
    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: "Fresh thinking that reshapes how first and last-mile logistics actually work.",
    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: "Local hiring and training that lifts entire neighbourhoods, not just routes.",
    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;
        }
        #ws-stories .ws__card {
            position: relative;
            overflow: hidden;
            background: rgba(255,255,255,0.035);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 16px;
            padding: 22px 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: 44px; height: 44px;
            border-radius: 12px;
            background: rgba(220,38,38,0.12);
            border: 1px solid rgba(220,38,38,0.25);
            color: #ef4444;
            margin-bottom: 14px;
            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: 22px; height: 22px; }
        #ws-stories .ws__card-title {
            color: #fff !important;
            font-weight: 900;
            font-size: 17px;
            letter-spacing: -0.01em;
            margin-bottom: 8px;
        }
        #ws-stories .ws__card-desc {
            color: rgba(255,255,255,0.6) !important;
            font-size: 13.5px;
            line-height: 1.6;
            margin: 0;
            font-weight: 900;
            font-size: 16px;
            
        }

        .elementor-element-778840d .logico-title {
            white-space: nowrap !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; }
        }
        @media (max-width: 600px) {
            #ws-stories .ws__stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
            #ws-stories .ws__stat { padding: 14px 10px; }
            #ws-stories .ws__stat-label { font-size: 11px !important; letter-spacing: 0.02em; }
            #ws-stories .ws__cards { grid-template-columns: 1fr; }
        }
      `}} />

      <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.png)" }} 
        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 in last-mile delivery.</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.png" 
                      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>
    </>
  );
}