"use client";
import React from "react";
import Link from "next/link";
import { UserRound, Heart, Share2 } from "lucide-react";
import { useDispatch } from "react-redux";
import { setJoinState } from "@/src/redux/appActions";
import Benefits from "./benefits";
import Faq from "./faq";
import Image from "next/image";
import AboutProductSection from "./about_product";

export default function MainSection() {
  const dispatch = useDispatch();

  return (
    <main className="flex min-h-screen flex-col items-center font-inter">
      {/* Header */}
      <h1 className="text-[22px] font-[600] mt-8 mb-12">
        Perfect matching Website
      </h1>

      <div className="flex flex-col md:flex-row justify-center items-center w-full max-w-6xl px-4 gap-8 md:gap-12">
        <div className="flex flex-col items-center text-center max-w-xs">
          <div className="w-20 h-20 rounded-full border border-gray-200 flex items-center justify-center mb-4">
            <UserRound className="w-10 h-10 text-[#EF2424]" />
          </div>
          <h2 className="text-[24px] font-[600] mb-2">Add your Profile</h2>
          <p className="text-[16px] font-[600]">
            You can add and edit your basic personal information (e.g Bio,
            gender, contact info, work etc)
          </p>
        </div>

        <div className="flex flex-col items-center text-center max-w-xs font-[600]">
          <div className="w-20 h-20 rounded-full border border-gray-200 flex items-center justify-center mb-4">
            <img src='/images/hearts.svg' className="w-10 h-10" />
          </div>
          <h2 className="text-lg mb-2 text-[24px]">Find Your Match</h2>
          <p className="text-[16px] font-[600]">
            Explore our website and find yourself the perfect partner and
            explore the world with them
          </p>
        </div>

        <div className="flex flex-col items-center text-center max-w-xs font-[600]">
          <div className="w-20 h-20 rounded-full border border-gray-200 flex items-center justify-center mb-4">
            <Share2 className="w-10 h-10 text-[#EF2424]" />
          </div>
          <h2 className="text-lg mb-2 text-[24px]">Connect</h2>
          <p className="text-[16px] font-[600]">
            View potential match profile and match for possible connection
          </p>
        </div>
      </div>

      <div className="my-12">
        <Link
          href="#join_now"
          className="text-white bg-[#EF2424] hover:text-[#EF2424] rounded-[8px] hover:bg-white border border-[#EF2424] p-3 text-base font-[600]"
          onClick={() => dispatch(setJoinState(true))}
        >
          Click here to register
        </Link>
      </div>

      {/* Benefits section */}
      <Benefits />

      <AboutProductSection />

      <div className="mb-12">
        <Link
          href="#join_now"
          className="text-white bg-[#EF2424] hover:text-[#EF2424] rounded-[8px] hover:bg-white border border-[#EF2424] p-3 text-base font-[600]"
          onClick={() => dispatch(setJoinState(true))}
        >
          Click here to register
        </Link>
      </div>

      {/* FAQ Section */}
      <Faq />

      {/* Footer */}
      <footer className="w-full py-8 text-center text-sm px-4">
        <p className="max-w-4xl mx-auto mb-4 font-medium text-[14px] text-[#000000B2]">
          Hello and welcome to HappyHomes! Here you can take your social
          exploration even further by exploring a membership of singles from
          around the world. We bring you far more high-quality matching matches
          to your own local area! On Happyhomes.com, you have the chance to find
          love and romance with members from across the world. You can create
          your own profile and start browsing through thousands of singles
          looking for love, friendship, and a range of cultures. <br />
          <span className="mb-4">Can I register free? Yes!</span>
        </p>

        <div className="flex justify-center items-center mb-2">
          <div className="w-6 h-6 flex items-center justify-center rounded-full">
            <span className="text-white text-xs">!</span>
          </div>
          <span className="ml-2 font-[600] flex gap-x-2 items-center text-[8px]">
            <Image src={"/logo.svg"} width={25} height={25} alt="logo" />
            HappyHomes
          </span>
        </div>

        <p className="text-[12px] text-black font-[600]">
          © {new Date().getFullYear()}. All rights reserved
        </p>
      </footer>
    </main>
  );
}
