"use client";

import { useSearchParams } from "next/navigation";
import Script from "next/script";

import CashbackIntroSection from "@/components/landing-page/CashbackIntroSection";
import FavoriteStoresSection from "@/components/landing-page/FavoriteStoresSection";
import MembershipOfferSection from "@/components/landing-page/MembershipOfferSection";
import OfferSection from "@/components/landing-page/OfferSection";
import PerksSection from "@/components/landing-page/PerksSection";

export default function Landing10Page() {
  const searchParams = useSearchParams();

  const signup_bonus_amount = 20;
  const landing_page = 10;

  const publisher_domain = searchParams.get("publisher_domain") || "";
  const shipping_price_amount =
    Number(searchParams.get("shipping_price_amount")) || 0;

  return (
    <>
      {/* Rokt Referral Tag */}
      <Script
        src="https://apps.rokt.com/integrations/referral-tag/referral-tag.js"
        strategy="afterInteractive"
      />

      {/* Google Tag Manager */}
      <Script id="gtm-landing10" strategy="afterInteractive">
        {`
          (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
          'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
          })(window,document,'script','dataLayer','GTM-T7QLFD2');
        `}
      </Script>

      {/* GTM noscript */}
      <noscript>
        <iframe
          src="https://www.googletagmanager.com/ns.html?id=GTM-T7QLFD2"
          height="0"
          width="0"
          style={{ display: "none", visibility: "hidden" }}
          title="GTM"
        />
      </noscript>

      {/* Drop off users script */}
      <Script
        src="https://s3.us-west-2.amazonaws.com/jsma/VPd3nxE/ma.js"
        data-tag="dropoffs"
        strategy="afterInteractive"
      />

      <main className="landing10">
        {/* Top Banner Section */}
        <OfferSection
          offerPanel="offer-panel2"
          signup_bonus_amount={signup_bonus_amount}
          showPerks={false}
          publisher_domain={publisher_domain}
          shipping_price_amount={shipping_price_amount}
        />

        <CashbackIntroSection />

        {/* Perks Section */}
        <PerksSection
          signup_bonus_amount={signup_bonus_amount}
          landing_page={landing_page}
        />

        <MembershipOfferSection />
        <FavoriteStoresSection />
      </main>
    </>
  );
}