import React, { useEffect } from "react";
import styled from "styled-components";
import { gsap } from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import { useNavigate } from "react-router-dom";

// Register ScrollTrigger plugin with GSAP
gsap.registerPlugin(ScrollTrigger);

// Styled Components for Styling
const Section = styled.section`
  padding: 5rem 0;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 50vh; /* Full viewport height */

  @media(max-width:768px){
  height: 60vh;
  }
`;

const Container = styled.div`
  text-align: center;
`;

const Title = styled.h1`
  font-size: 2.5rem;
  color: #3f3f3f;
  opacity: 0; /* Initially hidden */
  transform: translateY(50px); /* Initially moved down */
`;

const Button = styled.button`
  margin-top: 2rem;
  padding: 1rem 2rem;
  font-weight: bold;
  background: #3267B9;
  color: white;
  border-radius: 30px;
  border: none;
  font-size: 1.125rem;
  cursor: pointer;
  transform: scale(0.9); /* Initially scaled down */
  opacity: 0; /* Initially hidden */
  transition: opacity 1s ease-out, transform 1s ease-out 0.5s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  &:hover {
    background:  #3f7ad3;
  }
`;

const BookDemo = () => {
  const navigate = useNavigate(); // For page navigation

  useEffect(() => {
    // GSAP ScrollTrigger for animating the title
    gsap.fromTo(
      "#demo-title",
      {
        opacity: 0,
        y: 50, // Initially moved down
      },
      {
        opacity: 1,
        y: 0, // Final position
        duration: 1,
        ease: "power4.out",
        scrollTrigger: {
          trigger: "#demo-title",
          start: "top 80%", // Start the animation when the title hits 80% of the viewport
          end: "top 30%",   // End the animation when the title hits 30% of the viewport
          scrub: true,      // Smooth scrolling effect
        },
      }
    );

    // GSAP ScrollTrigger for animating the button
    gsap.fromTo(
      "#demo-button",
      {
        opacity: 0,
        scale: 0.9, // Initially scaled down
      },
      {
        opacity: 1,
        scale: 1, // Final scale
        duration: 1,
        delay: 0.5, // Delay button animation after the title
        ease: "power4.out",
        scrollTrigger: {
          trigger: "#demo-button",
          start: "top 80%", // Start the animation when the button hits 80% of the viewport
          end: "top 30%",   // End the animation when the button hits 30% of the viewport
          scrub: true,      // Smooth scrolling effect
        },
      }
    );
  }, []);

  // Button click handler: Redirecting to the contact page
  const handleBookDemo = () => {
    // Here we use navigate to redirect to the contact page
    navigate("/contact", {
      state: {
        formType: "demo", // Pass some state to pre-select form type
        product: "VarDiG SaaS", // Pre-select product
      },
    });
  };

  return (
    <Section>
      <Container>
        <Title id="demo-title">
          Seems interesting? Book a Demo
        </Title>
        <Button id="demo-button" onClick={handleBookDemo} data-testid='demo-button'>
          Book Demo
        </Button>
      </Container>
    </Section>
  );
};

export default BookDemo;