"use client";

import { CheckCircle, Zap } from "react-feather";

import LandingForm from "../LandingForm";

type FreeShippingHeroSectionProps = {
  signup_bonus_amount: number;
  shipping_price_amount?: number;
};

export default function FreeShippingHeroSection({
  signup_bonus_amount,
  shipping_price_amount = 0,
}: FreeShippingHeroSectionProps) {
  const scrollToSignup = () => {
    document.getElementById("signup")?.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <section className="hero-section">
      <div className="container">
        <div className="row g-5">
          <div className="col-lg-6">
            <span className="badge hero-badge rounded-pill mb-3 mt-md-5 d-inline-flex align-items-center gap-1">
              <Zap size={14} fill="#1f5fd0" color="#1f5fd0" />
              Free Shipping Member Benefit
            </span>
            <h1 className="display-4 fw-bold hero-title mb-3">
              Never pay for <span className="text-gradient">shipping</span>{" "}
              again.
            </h1>
            <p className="lead hero-sub mb-2">
              Get your shipping costs reimbursed on eligible orders at over{" "}
              <strong>10,000 stores</strong> — plus cash back on everything you
              buy.
            </p>
            <p className="hero-sub-2 mb-4">
              Shop the way you already do. We track your eligible orders and put
              the shipping fees back in your pocket.
            </p>
            <div className="d-flex align-items-baseline gap-2 mb-4">
              <span className="price-old">$19/mo</span>
              <span className="price-new">
                $
                {shipping_price_amount > 0
                  ? shipping_price_amount.toFixed(2)
                  : "3"}
              </span>
              <span className="price-unit">for your first 3 days</span>
            </div>
            <div className="d-flex flex-column flex-sm-row gap-3 mb-4">
              <button
                type="button"
                className="btn btn-cta btn-lg rounded-pill px-xl-4 px-lg-3 px-4"
                onClick={scrollToSignup}
              >
                Join Free &amp; Start Saving
              </button>
              <a
                href="#how"
                className="btn btn-light btn-lg rounded-pill px-xl-4 px-lg-3 px-4 btn-ghost"
              >
                See How It Works
              </a>
            </div>
            <ul className="list-unstyled hero-trust d-flex flex-wrap gap-4 mb-0">
              <li className="d-flex align-items-center gap-2">
                <CheckCircle size={16} />
                No special links or portals
              </li>
              <li className="d-flex align-items-center gap-2">
                <CheckCircle size={16} />
                Cancel anytime
              </li>
            </ul>
          </div>

          <div className="col-lg-6" id="signup">
            <LandingForm
              signup_bonus_amount={signup_bonus_amount}
              singleStep
              formVariant="free-shipping"
            />
          </div>
        </div>
      </div>
      <div className="hero-blob hero-blob-1" aria-hidden />
      <div className="hero-blob hero-blob-2" aria-hidden />
    </section>
  );
}