import Image from "next/image";
import { ScrollReveal } from "@/animations/Reveal";



export default function EmpowermentStories() {
  return (
    <>
      <style
        dangerouslySetInnerHTML={{
          __html: `
        .est-section {
          position: relative;
          background: #ffffff;
          padding-top: clamp(24px, 3vw, 48px);
          padding-bottom: clamp(78px, 9vw, 132px);
          overflow: hidden;
        }

        .est-inner {
          max-width: 1380px;
          margin: 0 auto;
        }

        .est-head {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          margin-bottom: clamp(54px, 7vw, 86px);
        }

        .est-head-reveal {
          width: 100%;
        }

        .est-divider {
          width: 100%;
          height: 1px;
          margin: 18px 0 clamp(24px, 3.5vw, 40px) 0;
          border: none;
          background-color: rgba(17, 17, 17, 0.14);
        }

        .est-eyebrow {
          font-size: 13px;
          font-weight: 800;
          letter-spacing: 2.4px;
          text-transform: uppercase;
          color: rgba(17, 17, 17, 0.42);
        }

        .est-title {
          max-width: 940px;
          font-size: clamp(42px, 6.3vw, 90px) !important;
          font-weight: 800 !important;
          letter-spacing: -0.055em !important;
          line-height: 0.98 !important;
          text-transform: uppercase !important;
          color: #111111 !important;
          margin: 0;
        }

        .est-feature {
          display: grid;
          grid-template-columns: minmax(0, 0.94fr) minmax(340px, 0.64fr);
          gap: clamp(28px, 4vw, 62px);
          align-items: stretch;
          margin-bottom: clamp(44px, 6vw, 76px);
        }

        .est-photo {
          position: relative;
          min-height: clamp(460px, 48vw, 680px);
          border-radius: 26px;
          overflow: hidden;
          background: #09090b;
        }

        .est-photo img {
          object-fit: cover;
          object-position: center;
        }

        .est-photo::after {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(180deg, rgba(9, 9, 11, 0) 34%, rgba(9, 9, 11, 0.72) 100%);
          pointer-events: none;
        }

        .est-photo-caption {
          position: absolute;
          left: clamp(24px, 3vw, 42px);
          right: clamp(24px, 3vw, 42px);
          bottom: clamp(24px, 3vw, 42px);
          z-index: 1;
          color: #ffffff;
        }

        .est-photo-caption span {
          display: block;
          font-size: 12px;
          font-weight: 800;
          letter-spacing: 1.7px;
          text-transform: uppercase;
          color: rgba(255, 255, 255, 0.6);
          margin-bottom: 8px;
        }

        .est-photo-caption strong {
          display: block;
          font-size: clamp(24px, 3vw, 42px);
          font-weight: 900;
          line-height: 1.02;
          letter-spacing: -0.04em;
        }

        .est-copy {
          border-radius: 26px;
          background: #09090b;
          color: #ffffff;
          padding: clamp(34px, 5vw, 62px);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          overflow: hidden;
          position: relative;
        }

        .est-copy::before {
          content: "";
          position: absolute;
          width: 320px;
          height: 320px;
          right: -120px;
          top: -120px;
          background: radial-gradient(circle, rgba(200, 16, 46, 0.42), transparent 68%);
          pointer-events: none;
        }

        .est-quote-mark {
          position: relative;
          font-family: Georgia, serif;
          font-size: 92px;
          line-height: 0.8;
          color: #c8102e;
          display: block;
          margin-bottom: 20px;
        }

        .est-quote-text {
          position: relative;
          font-size: clamp(25px, 3vw, 44px);
          font-weight: 800;
          line-height: 1.12;
          letter-spacing: -0.04em;
          color: #ffffff;
          margin: 0 0 28px 0;
        }

        .est-narrative {
          position: relative;
          font-size: 15.5px;
          line-height: 1.68;
          color: rgba(255, 255, 255, 0.66);
          margin: 0;
          max-width: 46ch;
        }

        .est-person {
          position: relative;
          padding-top: clamp(38px, 5vw, 64px);
        }

        .est-person-name {
          font-size: 18px;
          font-weight: 900;
          color: #ffffff;
        }

        .est-person-role {
          font-size: 13.5px;
          color: rgba(255, 255, 255, 0.52);
          margin-top: 3px;
        }

        .est-list-label {
          font-size: 12px;
          font-weight: 800;
          letter-spacing: 1.8px;
          text-transform: uppercase;
          color: rgba(17, 17, 17, 0.42);
          padding-top: clamp(24px, 3vw, 38px);
          border-top: 1px solid rgba(17, 17, 17, 0.14);
          margin-bottom: clamp(20px, 3vw, 30px);
        }

        .est-list {
          display: flex;
          gap: 18px;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          padding-bottom: 12px;
          margin-bottom: clamp(6px, 1vw, 10px);
          -webkit-overflow-scrolling: touch;
        }

        .est-list::-webkit-scrollbar {
          height: 4px;
        }

        .est-list::-webkit-scrollbar-thumb {
          background: rgba(17, 17, 17, 0.18);
          border-radius: 100px;
        }

        .est-row {
          scroll-snap-align: start;
          flex: 0 0 clamp(260px, 30vw, 340px);
          min-height: 220px;
          padding: clamp(24px, 2.6vw, 32px);
          border: 1px solid rgba(17, 17, 17, 0.14);
          border-radius: 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          transition: border-color 0.3s ease, transform 0.3s ease;
        }

        .est-row:hover {
          border-color: rgba(200, 16, 46, 0.4);
          transform: translateY(-4px);
        }

        .est-row-name {
          font-size: 20px;
          font-weight: 900;
          color: #111111;
        }

        .est-row-role {
          font-size: 13px;
          font-weight: 800;
          letter-spacing: 1.4px;
          text-transform: uppercase;
          color: #c8102e;
          margin-top: 6px;
        }

        .est-row-line {
          font-size: 15px;
          line-height: 1.6;
          color: rgba(17, 17, 17, 0.62);
          margin: 28px 0 0;
        }

        @media (max-width: 1000px) {
          .est-head,
          .est-feature { grid-template-columns: 1fr; }
          .est-row {
            min-height: 0;
            flex-basis: 78vw;
          }
        }

        @media (max-width: 640px) {
          .est-section { padding-top: 54px; padding-bottom: 6px; }
          /* .est-feature's margin-bottom (clamp(44px, 6vw, 76px)) was sized
             to precede an .est-list testimonial row block that no longer
             exists in this component's JSX. Since .est-feature is now the
             section's last child, that margin was pure dead space stacking
             on top of .est-section's own padding-bottom above — the real
             source of the oversized mobile gap before the next section. */
          .est-feature { margin-bottom: 0; }
          .est-title {
            font-size: clamp(34px, 10vw, 40px) !important;
            letter-spacing: -0.045em !important;
            overflow-wrap: anywhere;
          }
          .est-quote-text {
            font-size: clamp(25px, 8vw, 34px);
            overflow-wrap: anywhere;
          }
          .est-photo,
          .est-copy { border-radius: 20px; }
          .est-photo { min-height: 420px; }
        }
      `,
        }}
      />

      <section className="est-section" id="wings-empowerment-stories">
        <div className="dm-section-container">
          <div className="est-inner">
            <div className="est-head">
              <ScrollReveal delay={0.05} duration={0.75} yOffset={20} className="est-head-reveal">
                <div className="est-eyebrow">/ Women in Motion /</div>
                <hr className="est-divider" />
              </ScrollReveal>
              <ScrollReveal delay={0.1} duration={0.85} yOffset={24}>
                <h2 className="est-title">Small steps. Lasting careers.</h2>
              </ScrollReveal>
            </div>

            <div className="est-feature">
              <ScrollReveal delay={0.05} duration={0.85} yOffset={24} className="est-photo">
                <Image
                  src="/images/women-hero-slider-3.png"
                  alt="A Wings program participant on the operations floor at a Doormile logistics hub"
                  fill
                  sizes="(max-width: 1000px) 100vw, 58vw"
                  style={{ objectPosition: "80% 22%" }}
                />
                <div className="est-photo-caption">
                  <span>Wings Participant</span>
                  <strong> building a career, one milestone at a time.</strong>
                </div>
              </ScrollReveal>

              <ScrollReveal delay={0.12} duration={0.85} yOffset={24} className="est-copy">
                <div>
                  <span className="est-quote-mark" aria-hidden="true">&ldquo;</span>
                  <p className="est-quote-text">I came in looking for a way forward. I found the confidence to lead.</p>
                  <p className="est-narrative">
                    She started with limited exposure to logistics. Through structured training, mentorship, and hands-on experience, she built real operational skills — and now supports other women stepping into the industry.
                  </p>
                </div>
                {/* <div className="est-person">
                  <div className="est-person-name">Kavya</div>
                  <div className="est-person-role">Logistics Coordinator, Wings Program</div>
                </div> */}
              </ScrollReveal>
            </div>


          </div>
        </div>
      </section>
    </>
  );
}