import Link from "next/link";

export default function WingsFinalCTA() {
  return (
    <>
      <style
        dangerouslySetInnerHTML={{
          __html: `
        /* dm-section-container replaces the vendor .we-container class here
           (which is otherwise reused verbatim on the About page CTA), so this
           section's edges line up with the Footer's shared container instead
           of that widget's own 1320px width. It carries no vertical margin,
           so restore the same top spacing .we-container provided. */
        .wfcta-container {
          margin-top: 50px;
        }

        .wfcta-box {
          position: relative;
          overflow: hidden;
          /* Placeholder — swap for a sourced photo/illustration with a dark
             overlay once real Doormile Wings imagery exists. */
          background: linear-gradient(150deg, #0b0b0d 0%, #1f1f1f 60%, #0b0b0d 100%) !important;
          padding: clamp(72px, 9vw, 120px) clamp(24px, 5vw, 48px) !important;
        }

        .wfcta-box::before {
          content: '';
          position: absolute;
          inset: 0;
          z-index: 0;
          background: radial-gradient(60% 80% at 50% 0%, rgba(200,16,46,0.18) 0%, transparent 70%);
          pointer-events: none;
        }

        .wfcta-box .we-cta-inner {
          position: relative;
          z-index: 1;
        }

        .wfcta-title {
          font-size: clamp(32px, 4.5vw, 60px) !important;
          color: #ffffff !important;
        }

        .wfcta-title em {
          color: #ffffff !important;
        }

        .wfcta-sub {
          max-width: 640px;
          margin-left: auto !important;
          margin-right: auto !important;
        }

        @media (max-width: 768px) {
          .wfcta-container {
            /* Raised to dominate the collapsed margin with the previous
               section (Roadmap's own 24px bottom margin) so the gap above
               the CTA card reads the same as the gap below it. */
            margin-top: 14px !important;
            /* There's ~110px of unexplained extra space rendered between this
               container and the Footer that follows on mobile (verified with
               Playwright — no element/padding/margin in the DOM accounts for
               it, so it isn't coming from either section's own box). Pulling
               the CTA up with a negative bottom margin closes most of that
               gap directly instead of chasing the underlying cause, without
               touching the shared Footer component (used on every page) or
               either card's internal padding. Tuned so the resulting visible
               gap below the card matches the ~44px gap above it. */
            margin-bottom: -96px !important;
            padding: 0 10px !important;
          }
          .wfcta-box {
            /* Vertical padding cut ~25% (48px -> 36px) to close the excessive
               gap above the heading and below the button on mobile — the
               card felt loose relative to the rest of the Wings page.
               Horizontal padding/border-radius/width untouched. */
            padding: 36px 20px !important;
            border-radius: 22px !important;
          }
          .wfcta-title {
            font-size: clamp(28px, 6vw, 38px) !important;
            line-height: 1.25 !important;
            margin-bottom: 16px !important;
          }
          .wfcta-sub {
            font-size: 15px !important;
            line-height: 1.5 !important;
            margin-bottom: 24px !important;
          }
        }
      `,
        }}
      />
      <div className="dm-section-container wfcta-container" id="wings-final-cta">
        <div className="we-cta wfcta-box">
          <div className="we-cta-inner">
            <h2 className="we-cta-title wfcta-title">
              Ready to move at<br />
              <em>the speed of now?</em>
            </h2>
            <p className="we-cta-sub wfcta-sub">
              Partner with Doormile Wings for same-day air logistics across India&rsquo;s major
              regional capitals.
            </p>
            <div className="we-cta-btns">
              <Link href="/contact" className="btn-we-primary" style={{ textDecoration: "none" }}>
                Get Started
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: "8px", display: "inline-block", verticalAlign: "middle" }}>
                  <line x1="5" y1="12" x2="19" y2="12" />
                  <polyline points="12 5 19 12 12 19" />
                </svg>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}