"use client";

import React, { useState } from 'react'
import smillingmen from '@/assets/smiling-happy-young-man-using-mobile-phone-messaging-with-smartphone_ccexpress 2.png'
import Image from 'next/image'
import { addSubscription } from './actions';

const SectionSix = () => {
  interface inputType {
    name: string;
    email: string;
  }
  const [inputValue, setInputValue] = useState<inputType>({
    name: "",
    email: "",
  });

  const handleChange = (e) => {
    setInputValue({ ...inputValue, [e.target.name]: e.target.value });
  }

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      await addSubscription(inputValue)
    } catch (error) {
      console.log(error)
    }
  }

  return (
    <div
      className="w-3/4 max-w-full lg:h-[350px] h-auto
        bg-gradient-to-r from-sky-700 to-sky-600 rounded-3xl 3xl:max-w-[60%]
          flex flex-col lg:flex-row items-center  p-5 py-10 lg:p-0 gap-5 lg:gap-0"
    >
      {/* 1 St div */}
      <div className=" w-full   lg:w-[587px] lg:h-[221px]  flex-col  justify-center lg:justify-start items-center lg:items-start gap-5 inline-flex lg:pl-12 pl-0">
        <div className="flex-col justify-center lg:justify-start items-start gap-3 lg:gap-6 flex">
          <div className="w-full lg:w-[495px] text-white text-center lg:text-start text-4xl lg:text-[40px] font-bold font-['Inter'] capitalize leading-[56px]">
            Get in touch
          </div>
          <div className="w-[453px] text-white  font-normal font-['Montserrat'] text-center lg:text-start lg:text-base text-sm max-w-[300px]  leading-relaxed">
            Why struggle for months or years when you can learn faster with your
            private mentor? Subscribe now.
          </div>
        </div>

        <div className=" hidden lg:flex w-[587px] lg:justify-start lg:items-center gap-2   items-start flex-col justify-center lg:flex-row ">
          <div className="grow shrink basis-0 h-[49px] py-2 px-4 lg:px-6 lg:py-4 bg-white rounded-[55px] border-r border-white justify-start items-center gap-2.5 flex">
            <input
              onChange={handleChange}
              value={inputValue.name}
              name='name'
              className="text-neutral-400 text-sm font-normal font-['Montserrat'] capitalize outline-none "
              placeholder="Full Name"
            />
          </div>
          <div
            className="grow shrink basis-0 h-[49px]
                    py-2 px-4 lg:px-6 lg:py-4 bg-white rounded-[55px] border-l border-white justify-start items-center gap-2.5 flex"
          >
            <input
              onChange={handleChange}
              value={inputValue.email}
              name='email'
              className="text-neutral-400 text-sm font-normal font-['Montserrat'] capitalize outline-none "
              placeholder="Your Email"
            />
          </div>
          <div className="w-[121px] py-2 px-4 lg:px-6 lg:py-4 bg-yellow-500 rounded-[55px] justify-center items-center gap-2.5 flex">
            <button onClick={handleSubmit} className="text-slate-800 text-sm font-bold font-['Montserrat'] capitalize">
              Subscribe
            </button>
          </div>
        </div>
      </div>

      {/* 2nd div */}
      <div className="flex w-full h-[350px] lg:h-[452px]  flex-col lg:flex-row justify-center  items-center relative mt-4 lg:-bottom-[49px]">
        <div className="w-[262px] h-[366px]  lg:w-[300px] lg:h-[489px] mb-[50px] rounded-full lg:rounded-none lg:block ">
          <Image
            className="w-full rounded-full lg:rounded-none "
            src={smillingmen}
            alt="smiling men"
          />
        </div>
      </div>

      <div className=" lg:hidden w-full flex gap-4 items-center flex-col justify-center ">
        <div className="grow shrink basis-0 w-[80%] h-[49px] py-2 px-4  bg-white rounded-[55px] border-r border-white justify-start items-center gap-2.5 flex">
          <input
            onChange={handleChange}
            value={inputValue.name}
            name='name'
            className="text-neutral-400 text-sm font-normal font-['Montserrat'] capitalize outline-none "
            placeholder="Full Name"
          />
        </div>
        <div
          className="grow shrink basis-0 h-[49px]  w-[80%]
                    py-2 px-4  bg-white rounded-[55px] border-l border-white justify-start items-center gap-2.5 flex"
        >
          <input
            onChange={handleChange}
            value={inputValue.email}
            name='email'
            className="text-neutral-400 text-sm font-normal font-['Montserrat'] capitalize outline-none "
            placeholder="Your Email"
          />
        </div>

        <div className="w-[80%] py-2 px-4  bg-yellow-500 rounded-[55px] justify-center items-center gap-2.5 flex">
          <button onClick={handleSubmit} className="text-slate-800 text-sm font-bold font-['Montserrat'] capitalize">
            Subscribe
          </button>
        </div>
      </div>
    </div>
  )
}

export default SectionSix