import React from "react";
import Link from "next/link";

export default function AboutCTA() {
  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: `
        @media (max-width: 768px) {
          .we-container {
            margin-top: 40px !important;
            margin-bottom: 40px !important;
            padding: 0 10px !important;
          }
          .we-cta {
            padding: 48px 20px !important;
            border-radius: 22px !important;
          }
          .we-cta-title {
            font-size: clamp(28px, 6vw, 38px) !important;
            line-height: 1.25 !important;
            margin-bottom: 16px !important;
          }
          .we-cta-sub {
            font-size: 15px !important;
            line-height: 1.5 !important;
            margin-bottom: 24px !important;
          }
        }
      `}} />
      <div className="we-container">
      <div className="we-cta reveal">
        <div className="we-cta-inner">
          <h2 className="we-cta-title">
            Ready to Start<br />
            <em>Your Journey?</em>
          </h2>
          <p className="we-cta-sub">
            Join our Women Entrepreneurship program and become part of <br />
            India&apos;s fastest-growing logistics network.
          </p>
          <div className="we-cta-btns">
            <Link href="/contact" className="btn-we-primary" style={{ textDecoration: "none" }}>
              Apply Now
              <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>
    </>
  );
}
