'use client';

import React, { useRef } from "react";
import { motion } from "framer-motion";
import { Container, Row, Col } from 'react-bootstrap';

import HeaderTop from "@/components/HeaderTop";
import HeaderSticky from "@/components/HeaderSticky";

import CareerForm from "@/section/CareerForm";
import CareerOne from "@/section/CareerOne";
import CareerTwo from "@/section/CareerTwo";
import CareerThree from "@/section/CareerThree";

export default function CareerPage() {
  const careerTwoRef = useRef<HTMLDivElement>(null);
  const formRef = useRef<HTMLDivElement>(null);

  const handleExploreClick = () => {
    if (careerTwoRef.current) {
      careerTwoRef.current.scrollIntoView({
        behavior: 'smooth',
      });
    }
  };

  const handleJobClick = () => {
    if (formRef.current) {
      formRef.current.scrollIntoView({
        behavior: "smooth",
        block: "center",
      });
    }
  };

  return (
    <React.Fragment>
      <section className="section-main overflow-visible">
        <video
          className="position-absolute top-0 start-0 w-100 h-100 object-fit-cover"
          poster="https://media.vensysco.com/contact-video.webp"
          preload="metadata"
          autoPlay
          loop
          muted
          playsInline
        >
          <source
            src="https://media.vensysco.com/contact-video.mp4"
            type="video/mp4"
          />
          Your browser does not support the video tag.
        </video>

        <Container className="min-vh-100 py-3 py-md-5 d-flex flex-column position-relative">
          <HeaderTop />
          <HeaderSticky />

          <Row className='my-auto justify-content-between g-3 g-md-5 text-center text-md-start'>
            <Col xl={5}>
              <motion.h1
                className="display-3 fw-bold mb-3"
                whileInView={{ y: [-30, 0] }}
                transition={{ duration: 1.8 }}
              >
                Shape the future with new technologies
              </motion.h1>

              <motion.button
                className="btn btn-lg btn-outline-light rounded-pill"
                onClick={handleExploreClick}
                whileInView={{ y: [30, 0] }}
                transition={{ duration: 2 }}
              >
                Explore Opportunities
              </motion.button>
            </Col>

            <Col xl={6} className="position-relative">
              <div ref={formRef} className="career-form text-start">
                <CareerForm />
              </div>
            </Col>
          </Row>
        </Container>
      </section>

      <CareerOne />

      <div ref={careerTwoRef}>
        <CareerTwo onJobClick={handleJobClick} />
      </div>

      <CareerThree />
    </React.Fragment>
  );
}