import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";

const STEPS = [
  { step: "01", title: "Apply", desc: "Submit your venture idea and tell us about your entrepreneurial vision." },
  { step: "02", title: "Discovery", desc: "Identify the right market opportunity and validate your business model." },
  { step: "03", title: "Build", desc: "Develop your enterprise with ecosystem support, mentorship, and partnerships." },
  { step: "04", title: "Launch", desc: "Go to market with strategic backing, industry connections, and operational infrastructure." },
  { step: "05", title: "Scale", desc: "Grow your team, expand operations, and lead your enterprise to sustainable impact." },
];

export default function EmpowermentHowItWorks() {
  return (
    <>
      <style
        dangerouslySetInnerHTML={{
          __html: `
        .ehw-section {
          background: #ffffff;
          padding: var(--space-section-lg, 80px) 0 calc(var(--space-section-lg, 80px) + 32px) 0;
          overflow: hidden;
        }

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

        .ehw-head {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          margin-bottom: clamp(126px, calc(7vw + 60px), 172px);
        }

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

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

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

        .ehw-title {
          max-width: 820px;
          font-size: clamp(32px, 4vw, 54px) !important;
          font-weight: 800 !important;
          letter-spacing: -0.03em !important;
          line-height: 1.08 !important;
          text-transform: none !important;
          color: #111111 !important;
          margin: 0 !important;
        }

        /* ----------------------------------------------------------------
           Premium editorial process row: five milestones in a single
           sequence, separated by thin hairline dividers (no cards, no
           shadows, no boxed containers). One flex-wrap sequence with
           responsive flex-basis handles the composition at every size —
           5-across on desktop, 3 + 2 (centered) on tablet, a single
           vertical column on mobile — from one shared markup.
           ---------------------------------------------------------------- */
        .ehw-sequence {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          --ehw-gap: clamp(24px, 2.6vw, 48px);
          column-gap: var(--ehw-gap);
          row-gap: clamp(48px, 6vw, 84px);
        }

        .ehw-step {
          position: relative;
          flex: 0 1 calc((100% - 4 * var(--ehw-gap)) / 5);
          min-width: 168px;
          padding-left: clamp(20px, 2vw, 32px);
          border-left: 1px solid rgba(17, 17, 17, 0.14);
          transition: border-color 0.3s ease;
        }

        .ehw-step:first-child {
          border-left: none;
          padding-left: 0;
        }

        .ehw-step:hover {
          border-left-color: rgba(200, 16, 46, 0.4);
        }

        .ehw-step-num {
          font-size: clamp(48px, 4.6vw, 78px);
          font-weight: 900;
          line-height: 0.84;
          letter-spacing: -0.03em;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(17, 17, 17, 0.24);
          margin: 0 0 18px 0;
          transition: -webkit-text-stroke-color 0.3s ease;
        }

        .ehw-step.is-accent .ehw-step-num {
          -webkit-text-stroke: 1.5px rgba(200, 16, 46, 0.58);
        }

        .ehw-step-kicker {
          display: flex;
          align-items: center;
          gap: 7px;
          margin-bottom: 18px;
        }

        .ehw-step-kicker svg {
          width: 13px;
          height: 13px;
          color: rgba(17, 17, 17, 0.36);
          flex-shrink: 0;
        }

        .ehw-step-kicker span {
          font-size: 11px;
          font-weight: 800;
          letter-spacing: 2px;
          text-transform: uppercase;
          color: rgba(17, 17, 17, 0.4);
        }

        .ehw-step.is-accent .ehw-step-kicker svg,
        .ehw-step.is-accent .ehw-step-kicker span {
          color: #c8102e;
        }

        .ehw-step-title {
          font-size: clamp(18px, 1.4vw, 22px) !important;
          font-weight: 800 !important;
          letter-spacing: -0.02em !important;
          line-height: 1.2 !important;
          text-transform: none !important;
          color: #111111 !important;
          margin: 0 0 22px 0;
        }

        .ehw-step-desc {
          max-width: 27ch;
          font-size: 14px;
          line-height: 1.6;
          color: rgba(17, 17, 17, 0.55);
          margin: 0;
        }

        /* Tablet: 3 + 2, centered — sever the divider at the start of each row. */
        @media (max-width: 1100px) {
          .ehw-step {
            flex-basis: calc((100% - 2 * var(--ehw-gap)) / 3);
          }
          .ehw-step:nth-child(4) {
            border-left: none;
            padding-left: 0;
          }
        }

        /* Mobile: compact numbered editorial index — number in a narrow
           left column, title/description/divider sharing one right
           content column, laid out on the existing milestone markup via
           CSS Grid (no duplicated JSX, no new step markup). */
        @media (max-width: 640px) {
          .ehw-head {
            margin-bottom: clamp(40px, 10vw, 56px);
          }

          .ehw-sequence {
            row-gap: 0;
          }

          .ehw-step {
            display: grid;
            grid-template-columns: 48px minmax(0, 1fr);
            column-gap: 14px;
            flex-basis: 100%;
            padding-left: 0;
            padding-top: clamp(28px, 8vw, 36px);
            border-left: none;
            border-top: none;
          }

          .ehw-step:first-child {
            padding-top: 0;
          }

          /* Compact solid index number — replaces the oversized pale
             outline treatment used on desktop/tablet. */
          .ehw-step-num {
            grid-column: 1;
            grid-row: 1;
            align-self: start;
            font-size: clamp(32px, 9vw, 40px);
            line-height: 1;
            color: #c8102e;
            -webkit-text-stroke: 0;
            margin: 0;
          }

          /* Hidden completely — no reserved gap left in its place since a
             display:none grid item takes no track space. */
          .ehw-step-kicker {
            display: none;
          }

          .ehw-step-title {
            grid-column: 2;
            grid-row: 1;
            font-size: clamp(22px, 6vw, 26px) !important;
          }

          .ehw-step-desc {
            grid-column: 2;
            grid-row: 2;
            max-width: none;
            font-size: 16px;
          }

          /* Divider lives inside the description box (content column
             only), so it never runs underneath the number column. */
          .ehw-step-desc::after {
            content: "";
            display: block;
            margin-top: clamp(24px, 6vw, 28px);
            height: 1px;
            background-color: rgba(17, 17, 17, 0.14);
          }

          .ehw-step:last-child .ehw-step-desc::after {
            display: none;
          }
        }

        /* ---- Mobile title-to-description gap fix ----
           .ehw-step-title is an <h3>, so it's matched by a global,
           unscoped site.css rule (.logico-front-end h3:not(...) { margin:
           0 0 30px }) that outranks this component's own single-class
           ".ehw-step-title { margin: 0 0 22px }" by specificity — bumping
           the real margin-bottom to 30px everywhere, not just here. There
           is no min-height, space-between, or fixed row height anywhere in
           this component; the gap is purely that extra 8px of margin
           reading as oversized once every other element around it (kicker,
           description line-height) is tightly spaced. Overridden with
           !important, matching how every other property on this selector
           already has to defeat the same global rule. Scoped to mobile
           only, per spec — desktop/tablet are left exactly as they were
           (still resolving to the global 30px; out of scope here). */
        @media (max-width: 767px) {
          .ehw-step-title {
            margin-bottom: 16px !important;
          }
        }

        @media (max-width: 480px) {
          .ehw-section { padding-top: 48px; padding-bottom: 68px; }
        }
      `,
        }}
      />

      <section className="ehw-section" id="wings-empowerment-how-it-works">
        <div className="dm-section-container">
          <div className="ehw-inner">
            <div className="ehw-head">
              <ScrollReveal delay={0.05} duration={0.75} yOffset={20} className="ehw-head-reveal">
                <div className="ehw-eyebrow">/ The Founder Journey /</div>
                <hr className="ehw-divider" />
              </ScrollReveal>
              <ScrollReveal delay={0.1} duration={0.85} yOffset={24}>
                <h2 className="ehw-title">A clear path, from idea to enterprise</h2>
              </ScrollReveal>
            </div>

            <StaggerChildren className="ehw-sequence" stagger={0.12} duration={0.7} yOffset={30} triggerOnce>
              {STEPS.map((s, i) => (
                <div className={`ehw-step${i === 2 ? " is-accent" : ""}`} key={s.step}>
                  <div className="ehw-step-num">{s.step}</div>
                  <div className="ehw-step-kicker" aria-hidden="true">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M7 17 17 7M9 7h8v8" />
                    </svg>
                    <span>Step</span>
                  </div>
                  <h3 className="ehw-step-title">{s.title}</h3>
                  <p className="ehw-step-desc">{s.desc}</p>
                </div>
              ))}
            </StaggerChildren>
          </div>
        </div>
      </section>
    </>
  );
}