frontend/src/pages/Contact.jsx

import React, { useState, useEffect } from 'react';
import { useLocation } from "react-router-dom";
import styled from 'styled-components'

import ContactForm from '../sections/contact/Forms';
import CompanyInfo from '../sections/contact/Info';

import { createGlobalStyle } from 'styled-components';

import {Hero_video} from "../utils/index";

// Styled components for the Hero section
const HeroContainer = styled.div`
  position: relative;
  width: 100%;
  height: 30vh; /* Compact height for a professional look */

  @media(max-width:480px){
    height:50vh;
  }
`;

const HeroVideo = styled.video`
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
`;

const Overlay = styled.div`
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  flex-direction: column;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6); /* Darker overlay for a more refined feel */
  padding: 1.5rem;
`;

const HeroTitle = styled.h1`
  font-size: 3.2rem;
  font-weight: bold;
  color: #3267B9;
  margin-bottom: 1rem;
`;

const HeroSubtitle = styled.p`
  font-size: 1.4rem;
  color: white;
  max-width: 70%;
  margin-top: 0.5rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.6; /* Better readability */
`;


const GlobalStyle = createGlobalStyle`
  /* Ensure text inside the phone input is visible */


  .iti__tel-input {
    width: 100% !important;
    color: black !important; /* Sets the text color to black */
    background-color: white !important; /* Sets the background color to white */
    border: 1px solid #ccc !important; /* Optional: Sets a border color for better visibility */
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 3px solid #3f7ad3 !important; /* Transparent border initially */
    border-radius: 0.375rem;
    color: black;

    &:focus {
      outline: none;
      box-shadow: 0 0 8px rgba(14, 168, 182, 0.5); /* Subtle glow effect */
    }
  }
  .iti__country-list, .iti__a11y-text, .iti__search-input{
    color:black;
  }
`

// Styled Components
const Main = styled.main`
  min-height: 100vh; /* Ensure it covers full viewport height */
  background-color: black;
  color: white;
  padding: 2rem 1rem;
  box-sizing: border-box;}
`

const Container = styled.div`
  max-width: 100vw;
  margin: 0 auto;
  padding: 2rem 1rem;
  background-color: transparent;
  color: white;
  width: 100%; /* Ensure full width */
  box-sizing: border-box;
`

// const Title = styled.h1`
//   font-size: 2.5rem;
//   font-weight: bold;
//   text-align: center;
//   margin-bottom: 2rem;
// `

const Grid = styled.div`
  display: grid;
  grid-template-columns: 1fr; /* Default to single column for smaller screens */
  gap: 2rem;
  margin-top: 2rem;

  @media (min-width: 768px) {
    grid-template-columns: 50% 50%; 
  }
`

const ButtonGroupContainer = styled.div`
  display: flex;
  justify-content: center;
`

const ButtonWrapper = styled.div`
  position: relative;
  display: inline-flex;
  border-radius: 9999px;
  background-color: #e5e7eb;
  overflow: hidden;
`

const Button = styled.button`
  padding: 0.5rem 1.5rem;
  border-radius: ${(props) =>
    props.$position === 'left' ? '9999px 0 0 9999px' : '0 9999px 9999px 0'};
  color: ${(props) => (props.$active ? 'white' : '#4b5563')};
  position: relative;
  z-index: 10;
`;

const GradientBackground = styled.div`
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: #3f7ad3;
  border-radius: 9999px;
  transition: all 0.3s ease-in-out;
  left: ${props => props.position === 'left' ? '0' : '50%'};
`



// ButtonGroup Component
const ButtonGroup = ({ formType, setFormType }) => {
  const [gradientPosition, setGradientPosition] = useState('left')

  useEffect(() => {
    setGradientPosition(formType === 'general' ? 'left' : 'right')
  }, [formType])

  return (
    <ButtonGroupContainer>
      <ButtonWrapper>
        <Button
          $position="left"
          $active={formType === 'general'}
          onClick={() => setFormType('general')}
        >
          General Enquiry
        </Button>
        <Button
          $position="right"
          $active={formType === 'demo'}
          onClick={() => setFormType('demo')}
        >
          Demo Request
        </Button>
        <GradientBackground position={gradientPosition} />
      </ButtonWrapper>
    </ButtonGroupContainer>
  )
}

// ContactPage Component
const ContactPage = () => {
  const [formType, setFormType] = useState("general");
  const [product, setProduct] = useState("VarDiG AI");
  const location = useLocation();

  useEffect(() => {
    if (location.state) {
      const { formType: passedFormType, product:product } = location.state;
      if (passedFormType) setFormType(passedFormType); // Update form type
      if (product && passedFormType === "demo") {
        setFormType("demo"); // Ensure it's set to demo
      }
      if (product==="VarDiG SaaS"){
        setProduct("VarDiG SaaS");
      }
    }
  }, [location.state]);

  return (
    <>
    <HeroContainer>
      {/* Video Background */}
      <HeroVideo autoPlay loop muted>
        <source
          src={Hero_video}
          type="video/webm"
        />
        Your browser does not support the video tag.
      </HeroVideo>

      {/* Overlaying Text */}
      <Overlay>
        <HeroTitle>Contact</HeroTitle>
        <HeroSubtitle>Let us know the best way to cater</HeroSubtitle>
      </Overlay>
    </HeroContainer>
    <Main className='flex justify-center items-center' style={{ maxWidth: "100vw" }}>
      <Container>
        <GlobalStyle />
        <ButtonGroup formType={formType} setFormType={setFormType} />
        <Grid data-testid="contact-page-grid">
          <ContactForm formType={formType} demoProduct={product}/>
          <CompanyInfo />
        </Grid>
      </Container>
    </Main>
    </>
  );
};

export default ContactPage;