// app/components/HomeClientContent.tsx

'use client';

import { useState } from 'react';
import HeroButton from './HeroButton';
import InfoCard from './InfoCard';
import SocialIcon from './SocialIcon';
import MemberModal from './Modals/Member';
import SubscribeModal from './Modals/Subscribe';
import { FaFacebookSquare, FaInstagram } from "react-icons/fa";
import { IoIosMail } from "react-icons/io";
import Image from 'next/image';
import player from "../../public/images/player.svg";
import laget from "../../public/images/laget.se.svg";

export default function HomeClientContent() {
    const [activeModal, setActiveModal] = useState<'member' | 'subscribe' | null>(null);
    const closeModals = () => setActiveModal(null);

    return (
        <>
            {/* Hero / Info Section */}
            <section className="bg-[#406185] flex justify-center text-white">
                <div className="flex flex-col md:flex-row max-w-300 my-12.5 mx-5 w-full">
                    <div className="flex flex-col justify-center flex-1">
                        <div className="w-fit">
                            {/* Combine the abbreviation and full name for the H1 */}
                            <h1 className="uppercase text-[2.5rem] font-bold leading-[1.1] mb-2.5">
                                LVS <span className="sr-only">Lerbergets Volleybollsällskap</span>
                            </h1>
                            <div className="bg-white w-full h-1.5" aria-hidden="true"></div>
                        </div>
                        <h2 className="italic text-xl my-2.5 font-bold">Lerbergets Volleybollsällskap</h2>
                        <p className="max-w-200 leading-[1.1]">
                            Klubben startade den 1 mars 2018 och har i snabb takt utvecklats med både <strong>kidsvolley</strong>, <strong>4-mannavolley</strong> och träning för alla nivåer. På sommaren flyttar vi ner till stranden för <strong>beachvolleyboll</strong> i Höganäs.
                        </p>
                        <div className="flex flex-col gap-2.5 mt-10">
                            <HeroButton onClick={() => setActiveModal('member')}>Bli Medlem</HeroButton>
                            <HeroButton href="#traningstider">Träningstider</HeroButton>
                            <HeroButton href="https://www.basesport.se/category/lerbergets-vbs">Klubbkollektion</HeroButton>
                        </div>
                    </div>
                    <div className="hidden md:flex md:relative w-64 md:w-75 player-animation">
                        <Image src={player} alt="Spelare" className="w-full h-auto" />
                    </div>
                </div>
            </section>

            {/* Träningstider Section */}
            <section id="traningstider" className="bg-white flex justify-center">
                <div className="flex flex-col items-center w-full my-7.5 gap-2">
                    <InfoCard
                        title="Träningstider"
                        description="Här hittar du alltid uppdaterade träningstider från Laget.se"
                        actionLabel="Se nästa träningstid"
                        href="https://www.laget.se/LVS/Event/Month"
                    />
                    <InfoCard
                        title="Prenumerera på träningstider"
                        description="Våra träningstider finns som en kalender man kan prenumerera på"
                        actionLabel="Prenumerera"
                        onClick={() => setActiveModal('subscribe')}
                    />
                </div>
            </section>

            <section className="bg-[#406185] flex justify-center text-white">
                <div className="flex flex-wrap-reverse justify-center gap-12 w-full max-w-300 my-16 px-5">

                    {/* Sociala Medier Ikoner */}
                    <div className="flex flex-wrap justify-center items-center gap-10">
                        <SocialIcon title="Instagram" href="https://www.instagram.com/lerbergets_volleyboll/" aria-label="Följ LVS på Instagram">
                            <FaInstagram className="h-20 w-20" />
                        </SocialIcon>

                        <SocialIcon title="Facebook" href="https://www.facebook.com/lerbergetsvolleyboll" aria-label="Följ LVS på Facebook">
                            <FaFacebookSquare className="h-20 w-20" />
                        </SocialIcon>

                        <SocialIcon title="Laget.se" href="https://www.laget.se/LVS" aria-label="Kolla träningstider på Laget.se">
                            <Image src={laget} alt="Laget.se" className="h-18 w-18" />
                        </SocialIcon>
                    </div>

                    {/* Kontaktinformation */}
                    <div className="text-center p-2.5 flex flex-col justify-center items-center">
                        <h3 className="uppercase font-bold text-[1.875rem] leading-[1.2] mb-4">Kontakta oss</h3>
                        <p className="text-[1rem] leading-[1.6] opacity-90">Vi finns på Instagram, Facebook och laget.se</p>

                        {/* Klickbar Adress - Länkar till Google Maps */}
                        <a
                            target="_blank"
                            rel="noreferrer"
                            href="https://maps.app.goo.gl/W81bT9X44Yfxsnoh7"
                            className="text-[1rem] leading-[1.6] my-2 hover:text-[#f1c50e] transition-colors duration-300"
                        >
                            Höganäs Sportcenter, Friluftsvägen 10, 263 54 Lerberget
                        </a>

                        {/* Levande E-postlänk med brand-gul färg */}
                        <a
                            href="mailto:info@lerbergetsvolleyboll.se?subject=Kontakta%20oss"
                            className="group flex justify-center items-center text-[#f1c50e] font-bold text-[1.1rem] mt-2 relative pb-1"
                        >
                            <IoIosMail className="h-7 w-7 mr-2" size={24} />
                            <span>info@lerbergetsvolleyboll.se</span>
                            {/* Underlinje som expanderar vid hovring */}
                            <span className="absolute bottom-0 left-0 w-full h-0.5 bg-[#f1c50e] transform scale-x-0 transition-transform duration-300 origin-left group-hover:scale-x-100" />
                        </a>
                    </div>

                </div>
            </section>

            {activeModal === 'member' && <MemberModal onClose={closeModals} />}
            {activeModal === 'subscribe' && <SubscribeModal onClose={closeModals} />}
        </>
    );
}