import Link from "next/link";
import { ScrollReveal } from "@/animations/Reveal";

const PARTNER_TYPES = [
  {
    title: "Industry Partners",
    desc: "Strategic alliances with logistics operators, supply chain leaders, and distribution networks that open doors for women-led enterprises.",
  },
  {
    title: "Technology Partners",
    desc: "Platforms, tools, and infrastructure that give founders the operational edge to compete and scale efficiently.",
  },
  {
    title: "Community Networks",
    desc: "Founder communities, women's business networks, and ecosystem builders who extend reach and amplify impact.",
  },
  {
    title: "Investment Partners",
    desc: "Funding access, grant programs, angel networks, and capital partners aligned with women-led enterprise growth.",
  },
];

export default function EmpowermentPartners() {
  return (
    <>
      <style
        dangerouslySetInnerHTML={{
          __html: `
        .epn-section {
          position: relative;
          width: calc(100% - 40px);
          margin: clamp(24px, 4vw, 40px) auto;
          border-radius: 28px;
          overflow: hidden;
          box-sizing: border-box;
          background: #09090b;
          padding: clamp(68px, 8vw, 112px) 0;
        }

        .epn-section::before {
          content: "";
          position: absolute;
          inset: 0;
          background:
            linear-gradient(120deg, rgba(9, 9, 11, 0.98) 0%, rgba(9, 9, 11, 0.88) 54%, rgba(192, 18, 39, 0.18) 100%),
            url("/images/wings-heroslider3.png");
          background-size: cover;
          background-position: center 70%;
          opacity: 1;
        }

        .epn-inner {
          position: relative;
          z-index: 1;
          max-width: 1380px;
          margin: 0 auto;
        }

        .epn-head {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          margin-bottom: clamp(50px, 7vw, 84px);
        }

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

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

        .epn-eyebrow {
          font-size: 13px;
          font-weight: 800;
          letter-spacing: 2.5px;
          text-transform: uppercase;
          color: rgba(255, 255, 255, 0.52);
        }

        .epn-title {
          max-width: 930px;
          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: #ffffff !important;
          margin: 0;
        }

        .epn-title em {
          color: #ff5470;
          font-style: normal;
        }

        .epn-body {
          display: grid;
          grid-template-columns: minmax(280px, 0.46fr) minmax(0, 1fr);
          gap: clamp(32px, 5vw, 72px);
          align-items: stretch;
        }

        .epn-manifesto {
          border-left: 4px solid #c8102e;
          padding-left: clamp(22px, 3vw, 36px);
          align-self: start;
        }

        .epn-intro {
          font-size: clamp(22px, 2.5vw, 36px);
          font-weight: 800;
          line-height: 1.12;
          letter-spacing: -0.035em;
          color: #ffffff;
          margin: 0 0 22px;
        }

        .epn-note {
          font-size: 15.5px;
          line-height: 1.68;
          color: rgba(255, 255, 255, 0.62);
          margin: 0;
          max-width: 38ch;
        }

        .epn-grid {
          display: flex;
          flex-direction: column;
          border-top: 1px solid rgba(255, 255, 255, 0.16);
        }

        .epn-card {
          position: relative;
          display: grid;
          grid-template-columns: 70px minmax(0, 1fr) 32px;
          align-items: center;
          gap: clamp(18px, 3vw, 40px);
          padding: clamp(22px, 2.6vw, 32px) clamp(4px, 1vw, 16px);
          border-bottom: 1px solid rgba(255, 255, 255, 0.16);
          border-left: 2px solid transparent;
          transition: border-color 0.3s ease, padding-left 0.3s ease, background-color 0.3s ease;
        }

        .epn-card:hover {
          border-left-color: #c8102e;
          background: rgba(200, 16, 46, 0.06);
          padding-left: clamp(20px, 2.5vw, 32px);
        }

        .epn-card-index {
          font-size: 15px;
          font-weight: 900;
          color: rgba(255, 255, 255, 0.35);
        }

        .epn-card-title {
          font-size: clamp(22px, 2.2vw, 30px) !important;
          font-weight: 900 !important;
          line-height: 1.1 !important;
          letter-spacing: -0.03em !important;
          text-transform: none !important;
          color: #ffffff !important;
          margin: 0 0 8px;
        }

        .epn-card-desc {
          max-width: 46ch;
          font-size: 14.5px;
          line-height: 1.6;
          color: rgba(255, 255, 255, 0.58);
          margin: 0;
        }

        .epn-card-arrow {
          display: flex;
          color: rgba(255, 255, 255, 0.3);
          transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
        }

        .epn-card:hover .epn-card-arrow {
          transform: translateX(4px);
          color: #ff5470;
        }

        .epn-cta {
          margin-top: clamp(42px, 5vw, 64px);
        }

        .epn-cta-btn {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          padding: 16px 36px;
          border-radius: 100px;
          background: #c01227;
          color: #ffffff !important;
          font-weight: 800;
          font-size: 15px;
          text-decoration: none !important;
          transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
        }

        .epn-cta-btn:hover {
          transform: translateY(-3px);
          box-shadow: 0 14px 30px rgba(192, 18, 39, 0.35);
        }

        @media (max-width: 1024px) {
          .epn-section { width: calc(100% - 24px); border-radius: 22px; }
        }

        @media (max-width: 900px) {
          .epn-head,
          .epn-body { grid-template-columns: 1fr; }
        }

        @media (max-width: 700px) {
          .epn-title {
            font-size: clamp(34px, 10vw, 40px) !important;
            letter-spacing: -0.045em !important;
            overflow-wrap: anywhere;
          }
          .epn-card {
            grid-template-columns: 44px minmax(0, 1fr);
          }
          .epn-card-arrow { display: none; }
        }

        @media (max-width: 460px) {
          .epn-section { padding-top: 54px; padding-bottom: 54px; }
        }
      `,
        }}
      />

      <section className="epn-section" id="wings-empowerment-partners">
        <div className="dm-section-container">
          <div className="epn-inner">
            <div className="epn-head">
              <ScrollReveal delay={0.05} duration={0.75} yOffset={20} className="epn-head-reveal">
                <div className="epn-eyebrow">/ Collaboration /</div>
                <hr className="epn-divider" />
              </ScrollReveal>
              <ScrollReveal delay={0.1} duration={0.85} yOffset={24}>
                <h2 className="epn-title">Partnership is how <em>ecosystems grow.</em></h2>
              </ScrollReveal>
            </div>

            <div className="epn-body">
              <ScrollReveal delay={0.08} duration={0.8} yOffset={22} className="epn-manifesto">
                <p className="epn-intro">The strongest ecosystems are built by many hands.</p>
                <p className="epn-note">
                  Wings partners bring industry access, strategic infrastructure, capital, and networks. Together, we build the foundation women-led enterprises need to thrive.
                </p>
                {/* <div className="epn-cta">
                  <Link href="/contact" className="epn-cta-btn">Become a Partner</Link>
                </div> */}
              </ScrollReveal>

              <ScrollReveal delay={0.12} duration={0.8} yOffset={22}>
                <div className="epn-grid">
                  {PARTNER_TYPES.map((p, i) => (
                    <article className="epn-card" key={p.title}>
                      <span className="epn-card-index">{String(i + 1).padStart(2, "0")}</span>
                      <div>
                        <h3 className="epn-card-title">{p.title}</h3>
                        <p className="epn-card-desc">{p.desc}</p>
                      </div>
                      <span className="epn-card-arrow" aria-hidden="true">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
                          <path d="M5 12h14M13 6l6 6-6 6" />
                        </svg>
                      </span>
                    </article>
                  ))}
                </div>
              </ScrollReveal>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}