import Image from "next/image";
import Link from "@/app/components/LocaleLink";
interface Props {
    banners:any[];
}

export default function HomeBanner({banners}:Props){

    return (
        <section className="hero">
            <div className="container">
                <div className="row align-items-center">
                <div className="col-lg-6">
                    <h1>
                    Talk to Astrologers<br />
                    right now.
                    </h1>

                    <p>
                    India's most-loved astrology platform.
                    <span>48,726+ verified</span> astrologers in 13 languages. Instant
                    chat, free kundli, honest answers — average reply under 12
                    seconds.
                    </p>

                    <div className="mt-5 d-flex flex-wrap gap-3">
                    <Link href="/chat-with-astrologer" className="btn-chat read-more">
                        <svg
                        width="19"
                        height="19"
                        viewBox="0 0 19 19"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                        >
                        <path
                            d="M3.74998 11.2499H11.2499V9.74998H3.74998V11.2499ZM3.74998 8.24994H15.2499V6.74998H3.74998V8.24994ZM3.74998 5.24995H15.2499V3.74998H3.74998V5.24995ZM0 18.5384V1.80768C0 1.30255 0.174998 0.874992 0.524995 0.524995C0.874992 0.174998 1.30255 0 1.80768 0H17.1922C17.6974 0 18.1249 0.174998 18.4749 0.524995C18.8249 0.874992 18.9999 1.30255 18.9999 1.80768V13.1922C18.9999 13.6974 18.8249 14.1249 18.4749 14.4749C18.1249 14.8249 17.6974 14.9999 17.1922 14.9999H3.53843L0 18.5384ZM2.89998 13.5H17.1922C17.2692 13.5 17.3397 13.4679 17.4038 13.4038C17.4679 13.3397 17.5 13.2692 17.5 13.1922V1.80768C17.5 1.73075 17.4679 1.66023 17.4038 1.59612C17.3397 1.53202 17.2692 1.49996 17.1922 1.49996H1.80768C1.73075 1.49996 1.66023 1.53202 1.59612 1.59612C1.53202 1.66023 1.49996 1.73075 1.49996 1.80768V14.8846L2.89998 13.5ZM1.49996 13.5V1.80768C1.49996 1.73075 1.49996 1.66023 1.49996 1.59612C1.49996 1.53202 1.49996 1.49996 1.49996 1.49996C1.49996 1.49996 1.49996 1.53202 1.49996 1.59612C1.49996 1.66023 1.49996 1.73075 1.49996 1.80768V13.1922C1.49996 13.2692 1.49996 13.3397 1.49996 13.4038C1.49996 13.4679 1.49996 13.5 1.49996 13.5Z"
                            fill="#020135"
                        ></path>
                        </svg>
                        Get free chat
                    </Link>

                    <Link href="#" className="btn-app read-more">
                        <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24px"
                        height="24px"
                        viewBox="0 0 24 24"
                        >
                        <path d="M0 0h24v24H0z" fill="none" />
                        <path
                            fill="currentColor"
                            d="M11.625 15.513q-.175-.063-.325-.213l-3.6-3.6q-.3-.3-.288-.7t.288-.7q.3-.3.713-.312t.712.287L11 12.15V5q0-.425.288-.712T12 4t.713.288T13 5v7.15l1.875-1.875q.3-.3.713-.288t.712.313q.275.3.288.7t-.288.7l-3.6 3.6q-.15.15-.325.213t-.375.062t-.375-.062M6 20q-.825 0-1.412-.587T4 18v-2q0-.425.288-.712T5 15t.713.288T6 16v2h12v-2q0-.425.288-.712T19 15t.713.288T20 16v2q0 .825-.587 1.413T18 20z"
                        />
                        </svg>

                        Download the app
                    </Link>
                    </div>
                </div>

                <div className="col-lg-6 text-center">
                    {banners.map((item)=>(
                        <Image
                            key={item.id}
                            alt={item.title}
                            src={`${item.bannerImage}`}
                            className="w-100 h-100 img-fluid hero-image"
                            unoptimized
                            priority
                            width={500}
                            height={500}
                        />
                    ))}
                </div>
                </div>
            </div>
        </section>

    );
}