---
import "@/globals.css";
import "aos/dist/aos.css";

import MaxWidthWrapper from "@/components/other/max.width.wrapper";
import Navbar from "@/components/molecules/navbar";
import Footer from "@/components/molecules/footer.astro";
import Title from "@/components/atoms/title";
import GridPattern from "@/components/atoms/grid.pattern";
import { Button } from "@/components/ui/button";
import Stats from "@/components/Stats.astro";
import Testimonials from "@/components/Testimonials.astro";
import Packages from "@/components/Packages.astro";
import { cn } from "@/lib/utils";
import { getContactLink } from "@/lib/constants";
import {
    Wifi,
    Tv,
    Phone,
    DollarSign,
    Shield,
    Clock,
    HeartHandshake,
    Headphones,
} from "lucide-react";
import CallButton from "@/components/molecules/CallButton";
import StickySupportBanner from "@/components/molecules/StickySupportBanner";

const page = "default";
---

<html lang="en">
    <head>
        <script
            async
            src="https://www.googletagmanager.com/gtag/js?id=AW-17772291743"
            is:inline></script>
        <script is:inline>
            window.dataLayer = window.dataLayer || [];
            window.gtag = function () {
                dataLayer.push(arguments);
            };
            window.gtag("js", new Date());
            window.gtag("config", "AW-17772291743");
        </script>

        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
        />

        <meta
            name="description"
            content="Super Revive - Get the best deals on Spectrum Internet, TV, and Phone. We handle everything from setup to billing so you can enjoy hassle-free service."
        />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <title>Super Revive - Your Spectrum Connection Partner</title>
    </head>
    <body>
        <Navbar client:load variant="blue" page={page} />

        <!-- Hero Section with Animation -->
        <div class="flex flex-col gap-8 w-screen">
            <div
                class="min-h-screen h-full w-full bg-gradient-to-br from-blue-900 via-blue-800 to-blue-900 pt-32 grid place-items-center pb-32 md:pb-0 relative overflow-hidden"
            >
                <GridPattern
                    width={30}
                    height={30}
                    x={-1}
                    y={-1}
                    strokeDasharray={"4 2"}
                    className={cn(
                        "[mask-image:radial-gradient(80vw_circle_at_center,white,transparent)] absolute inset-0",
                    )}
                />
                <MaxWidthWrapper
                    className="grid h-full w-full grid-cols-1 place-items-center md:grid-cols-2 gap-20 lg:gap-8 pb-24 md:pb-0 z-10"
                >
                    <div
                        class="flex flex-col gap-8 w-full"
                        data-aos="zoom-in"
                        data-aos-duration="400"
                    >
                        <div
                            class="flex flex-col gap-2 self-center max-w-md md:max-w-none"
                        >
                            <h6 class="font-semibold text-blue-300 text-lg">
                                SPECTRUM MADE SIMPLE
                            </h6>
                            <Title
                                title="Great Deals on Spectrum. Zero Hassle."
                                color="white"
                                size="h1"
                            />
                            <p class="text-blue-100 mt-2 text-lg">
                                We get you the best prices on Spectrum Internet,
                                TV, and Phone—then handle all the billing and
                                paperwork so you don't have to. It's that easy.
                            </p>
                        </div>
                        <div class="flex flex-col sm:flex-row gap-4">
                            <a href={getContactLink(page)}>
                                <Button
                                    size={"lg"}
                                    className="w-full sm:w-max"
                                    variant="blue"
                                >
                                    Call for Your Deal
                                </Button>
                            </a>
                            <a href={"#packages"}>
                                <Button
                                    size={"lg"}
                                    className="w-full sm:w-max bg-white/10 text-white hover:bg-white/20 border border-white/30"
                                >
                                    View Packages
                                </Button>
                            </a>
                        </div>
                    </div>
                    <img
                        src="/assets/hero-image.png"
                        alt="Super Revive Spectrum services"
                        class="w-full h-full object-contain max-w-lg lg:max-w-none"
                        width={300}
                        height={500}
                        data-aos="fade-up"
                        data-aos-duration="500"
                    />
                </MaxWidthWrapper>

                <!-- Wave divider -->
                <div class="absolute bottom-0 left-0 w-full">
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 1440 320"
                        class="w-full h-auto"
                    >
                        <path
                            fill="#ffffff"
                            fill-opacity="1"
                            d="M0,128L48,144C96,160,192,192,288,197.3C384,203,480,181,576,170.7C672,160,768,160,864,170.7C960,181,1056,203,1152,197.3C1248,192,1344,160,1392,144L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
                        ></path>
                    </svg>
                </div>
            </div>
        </div>

        <!-- About Section -->
        <MaxWidthWrapper id="about" className="py-24">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
                <div data-aos="fade-right" data-aos-duration="500">
                    <img
                        src="/assets/about-image.png"
                        alt="About Super Revive"
                        class="rounded-lg w-full h-auto"
                    />
                </div>
                <div
                    class="flex flex-col gap-6"
                    data-aos="fade-left"
                    data-aos-duration="500"
                >
                    <span class="text-primary font-semibold">ABOUT US</span>
                    <Title
                        title="Your Spectrum Partner, Start to Finish"
                        size="h2"
                        color="primary"
                    />
                    <p class="text-gray-700 text-lg">
                        Getting Spectrum shouldn't be complicated. That's why
                        we're here.
                    </p>
                    <p class="text-gray-700">
                        Super Revive is your one-stop shop for Spectrum
                        services. We work directly with Spectrum to get you the
                        best deals on Internet, TV, and Phone packages. But we
                        don't stop there—we also handle all your billing,
                        payments, and account management so you can just enjoy
                        your services without the headaches.
                    </p>
                    <div class="grid grid-cols-2 gap-4 mt-4">
                        <div class="flex items-center gap-2">
                            <div class="bg-blue-100 p-2 rounded-full">
                                <DollarSign
                                    size={20}
                                    className="text-primary"
                                />
                            </div>
                            <span class="font-medium">Best Prices</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <div class="bg-blue-100 p-2 rounded-full">
                                <Headphones
                                    size={20}
                                    className="text-primary"
                                />
                            </div>
                            <span class="font-medium">Expert Support</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <div class="bg-blue-100 p-2 rounded-full">
                                <Shield size={20} className="text-primary" />
                            </div>
                            <span class="font-medium">Secure Billing</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <div class="bg-blue-100 p-2 rounded-full">
                                <Clock size={20} className="text-primary" />
                            </div>
                            <span class="font-medium">Always On Time</span>
                        </div>
                    </div>
                </div>
            </div>
        </MaxWidthWrapper>

        <!-- Services Section -->
        <div class="bg-gradient-to-b from-blue-50 to-white py-24">
            <MaxWidthWrapper id="services">
                <div class="text-center mb-16">
                    <span class="text-primary font-semibold">WHAT WE OFFER</span
                    >
                    <Title
                        title="Everything Spectrum, All in One Place"
                        size="h2"
                        color="primary"
                    />
                    <p class="max-w-2xl mx-auto mt-4 text-gray-700">
                        From finding the perfect package to handling your
                        monthly bills, we've got you covered.
                    </p>
                </div>

                <div
                    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
                >
                    <div
                        class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 flex flex-col items-center text-center hover:shadow-md transition-shadow"
                        data-aos="fade-up"
                        data-aos-duration="400"
                    >
                        <div class="bg-blue-100 p-4 rounded-full mb-4">
                            <Wifi className="h-8 w-8 text-primary" />
                        </div>
                        <h3 class="text-xl font-bold mb-2">
                            Spectrum Internet
                        </h3>
                        <p class="text-gray-600">
                            Lightning-fast speeds up to 1 Gbps with no data
                            caps. Perfect for streaming, gaming, and working
                            from home—all at the best price we can find for you.
                        </p>
                    </div>

                    <div
                        class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 flex flex-col items-center text-center hover:shadow-md transition-shadow"
                        data-aos="fade-up"
                        data-aos-duration="500"
                    >
                        <div class="bg-blue-100 p-4 rounded-full mb-4">
                            <Tv className="h-8 w-8 text-primary" />
                        </div>
                        <h3 class="text-xl font-bold mb-2">Spectrum TV</h3>
                        <p class="text-gray-600">
                            200+ HD channels with free DVR and the Spectrum TV
                            app. Watch what you want, when you want, on any
                            device.
                        </p>
                    </div>

                    <div
                        class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 flex flex-col items-center text-center hover:shadow-md transition-shadow"
                        data-aos="fade-up"
                        data-aos-duration="600"
                    >
                        <div class="bg-blue-100 p-4 rounded-full mb-4">
                            <Phone className="h-8 w-8 text-primary" />
                        </div>
                        <h3 class="text-xl font-bold mb-2">Spectrum Voice</h3>
                        <p class="text-gray-600">
                            Unlimited nationwide calling with crystal-clear
                            quality. Plus over 28 calling features like
                            voicemail and call blocking.
                        </p>
                    </div>
                </div>

                <div class="text-center mt-12">
                    <a href={getContactLink(page)}>
                        <Button variant="blue" size="lg">
                            Call Us Today
                        </Button>
                    </a>
                </div>
            </MaxWidthWrapper>
        </div>

        <!-- Why Choose Us -->
        <MaxWidthWrapper className="py-24">
            <div class="text-center mb-16">
                <span class="text-primary font-semibold">WHY SUPER REVIVE</span>
                <Title
                    title="We Handle Everything So You Don't Have To"
                    size="h2"
                    color="primary"
                />
                <p class="max-w-2xl mx-auto mt-4 text-gray-700">
                    Getting Spectrum is just the beginning. We're here for the
                    long haul.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div
                    class="bg-white p-8 rounded-xl shadow-sm border border-gray-100"
                    data-aos="fade-up"
                    data-aos-duration="400"
                >
                    <div class="flex items-start gap-4">
                        <div class="bg-blue-100 p-3 rounded-full flex-shrink-0">
                            <DollarSign className="h-6 w-6 text-primary" />
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">
                                Best Deals Guaranteed
                            </h3>
                            <p class="text-gray-600">
                                We work directly with Spectrum to get you the
                                lowest prices and exclusive promotions. You
                                won't find better deals anywhere else.
                            </p>
                        </div>
                    </div>
                </div>

                <div
                    class="bg-white p-8 rounded-xl shadow-sm border border-gray-100"
                    data-aos="fade-up"
                    data-aos-duration="500"
                >
                    <div class="flex items-start gap-4">
                        <div class="bg-blue-100 p-3 rounded-full flex-shrink-0">
                            <Clock className="h-6 w-6 text-primary" />
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">
                                Automatic Bill Payments
                            </h3>
                            <p class="text-gray-600">
                                We handle all your billing automatically. No
                                more remembering due dates or dealing with late
                                fees—just set it and forget it.
                            </p>
                        </div>
                    </div>
                </div>

                <div
                    class="bg-white p-8 rounded-xl shadow-sm border border-gray-100"
                    data-aos="fade-up"
                    data-aos-duration="600"
                >
                    <div class="flex items-start gap-4">
                        <div class="bg-blue-100 p-3 rounded-full flex-shrink-0">
                            <Shield className="h-6 w-6 text-primary" />
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">
                                Secure & Private
                            </h3>
                            <p class="text-gray-600">
                                Your payment information is protected with
                                bank-level encryption. We take your privacy and
                                security seriously.
                            </p>
                        </div>
                    </div>
                </div>

                <div
                    class="bg-white p-8 rounded-xl shadow-sm border border-gray-100"
                    data-aos="fade-up"
                    data-aos-duration="700"
                >
                    <div class="flex items-start gap-4">
                        <div class="bg-blue-100 p-3 rounded-full flex-shrink-0">
                            <HeartHandshake className="h-6 w-6 text-primary" />
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">
                                Personal Support
                            </h3>
                            <p class="text-gray-600">
                                Questions? Issues? We're here to help. Real
                                people, real support, whenever you need it.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </MaxWidthWrapper>

        <!-- Stats Section -->
        <div class="py-24 bg-gray-50">
            <Stats />
        </div>

        <!-- Packages Section -->
        <div class="py-24">
            <Packages variant="blue" page={page} />
        </div>

        <!-- Testimonials Section -->
        <div class="py-24 bg-gray-50">
            <Testimonials
                variant="blue"
                testimonials={[
                    {
                        name: "Jennifer M.",
                        image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=2787&auto=format&fit=crop",
                        stars: 5,
                        review: "Super Revive got me a better deal on Spectrum than I could find on my own, and they handle all the billing. I literally don't think about my internet bill anymore. It just works.",
                    },
                    {
                        name: "Carlos R.",
                        image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=2787&auto=format&fit=crop",
                        stars: 5,
                        review: "I was paying way too much for Spectrum before I found these guys. They got me on a better package, saved me money, and now they take care of the payments. No more late fees!",
                    },
                    {
                        name: "Amanda T.",
                        image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=3361&auto=format&fit=crop",
                        stars: 5,
                        review: "The whole process was so easy. They found me the perfect Spectrum package, got it set up, and now everything is on autopilot. Best decision I made this year.",
                    },
                ]}
            />
        </div>

        <!-- CTA Section -->
        <div
            class="bg-gradient-to-br from-blue-900 via-blue-800 to-blue-900 py-20"
        >
            <MaxWidthWrapper>
                <div class="text-center">
                    <Title
                        title="Ready for Better Spectrum Service?"
                        size="h2"
                        color="white"
                    />
                    <p
                        class="text-blue-100 mt-4 mb-8 max-w-2xl mx-auto text-lg"
                    >
                        Let us find you the best deal on Spectrum and handle all
                        the boring stuff. It takes 2 minutes to get started.
                    </p>

                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
                        <CallButton
                            client:load
                            variant="blue"
                            fullWidth={false}
                            text="Contact Us Now"
                            page={page}
                        />
                        <a href="#packages">
                            <Button
                                size="lg"
                                className="w-full sm:w-auto bg-white/10 text-white hover:bg-white/20 border border-white/30"
                            >
                                View Packages
                            </Button>
                        </a>
                    </div>

                    <p class="text-blue-200 mt-6">
                        Great deals • Automatic billing • Cancel anytime
                    </p>
                </div>
            </MaxWidthWrapper>
        </div>

        <!-- FAQ Section -->
        <MaxWidthWrapper className="py-24">
            <div class="text-center mb-16">
                <span class="text-primary font-semibold"
                    >FREQUENTLY ASKED QUESTIONS</span
                >
                <Title
                    title="Everything You Need to Know"
                    size="h2"
                    color="primary"
                />
            </div>

            <div class="max-w-3xl mx-auto divide-y divide-gray-200">
                <div class="py-6" data-aos="fade-up" data-aos-duration="300">
                    <h3 class="text-lg font-medium text-gray-900">
                        How does Super Revive work?
                    </h3>
                    <p class="mt-2 text-gray-600">
                        Simple! You reach out to us, we find the best Spectrum
                        deal for your needs, get everything set up, and then
                        handle all your billing going forward. You get great
                        service at a great price without any of the hassle.
                    </p>
                </div>
                <div class="py-6" data-aos="fade-up" data-aos-duration="400">
                    <h3 class="text-lg font-medium text-gray-900">
                        Can you really get me a better deal than Spectrum
                        directly?
                    </h3>
                    <p class="mt-2 text-gray-600">
                        Yes! We work with Spectrum as an authorized reseller,
                        which means we have access to exclusive promotions and
                        deals that aren't available to the general public. Plus,
                        we know all the tricks to get you the best pricing.
                    </p>
                </div>
                <div class="py-6" data-aos="fade-up" data-aos-duration="500">
                    <h3 class="text-lg font-medium text-gray-900">
                        How much do you charge for this service?
                    </h3>
                    <p class="mt-2 text-gray-600">
                        Contact us for details on our service fees. We keep
                        everything transparent and straightforward—no hidden
                        charges or surprises.
                    </p>
                </div>
                <div class="py-6" data-aos="fade-up" data-aos-duration="600">
                    <h3 class="text-lg font-medium text-gray-900">
                        What if I already have Spectrum?
                    </h3>
                    <p class="mt-2 text-gray-600">
                        No problem! We can review your current plan and see if
                        there's a better deal available. We can also take over
                        your billing management to make your life easier.
                    </p>
                </div>
                <div class="py-6" data-aos="fade-up" data-aos-duration="700">
                    <h3 class="text-lg font-medium text-gray-900">
                        Is my payment information secure?
                    </h3>
                    <p class="mt-2 text-gray-600">
                        Absolutely. We use bank-level encryption and follow
                        strict security protocols to protect your data. Your
                        privacy and security are our top priorities.
                    </p>
                </div>
                <div class="py-6" data-aos="fade-up" data-aos-duration="800">
                    <h3 class="text-lg font-medium text-gray-900">
                        Can I cancel anytime?
                    </h3>
                    <p class="mt-2 text-gray-600">
                        Yes! There are no long-term commitments with us. If you
                        ever want to manage your Spectrum account on your own,
                        just let us know and we'll make the transition smooth.
                    </p>
                </div>
            </div>
        </MaxWidthWrapper>

        <Footer variant="blue" page={page} />
        <StickySupportBanner client:load />
    </body>
</html>

<script>
    import AOS from "aos";

    AOS.init({
        duration: 800,
        easing: "ease-in-out",
        once: true,
        startEvent: "DOMContentLoaded",
        disableMutationObserver: false,
        disable: false,
        mirror: false,
        useClassNames: true,
        initClassName: "aos-init",
        animatedClassName: "aos-animate",
    });

    document.addEventListener("DOMContentLoaded", () => {
        document.body.style.width = "100vw";
        document.body.offsetHeight;
        document.body.style.width = "";
        AOS.refresh();
    });
</script>
