"use client"; import Link from "next/link"; import { useState, useEffect } from "react"; import { Button } from "@/components/ui/button"; import { ShieldCheck, Calendar, Briefcase, Users } from "lucide-react"; import { openEnquiryModal } from "@/lib/utils"; const WhatsAppIcon = (props: any) => ( ); const InstagramIcon = (props: any) => ( ); interface HeroProps { settings?: { heroBadge?: string; heroTitle?: string; heroSubtitle?: string; urgencyText?: string; heroImages?: string[]; heroTitleSize?: string; heroSubtitleSize?: string; pill1Badge?: string; pill1Title?: string; pill1Desc?: string; pill2Badge?: string; pill2Title?: string; pill2Desc?: string; }; } const isVideo = (url: string) => /\.(mp4|webm|ogg)($|\?)/i.test(url); const defaultHeroBadge = "Women-Only Travel Experience"; const defaultHeroTitle = "Solo on Paper.
\nTogether in Spirit."; const defaultHeroSubtitle = "Discover safety-first small group trips for women. Experience local cultures, form lifetime friendships, and explore the world with our experienced Trip Leaders."; const defaultUrgencyText = "⚡ {count} Naaris enquired last hour"; const defaultHeroImages = [ "https://images.unsplash.com/photo-1523906834658-6e24ef2386f9?w=1600&q=80", "https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=1600&q=80", "https://images.unsplash.com/photo-1527631746610-bca00a040d60?w=1600&q=80" ]; const titleSizeMap: Record = { "Small": "text-[18px] sm:text-[22px] md:text-[26px] xl:text-[30px] 2xl:text-[36px]", "Medium": "text-[20px] sm:text-[25px] md:text-[30px] xl:text-[34px] 2xl:text-[40px]", "Large": "text-[22px] sm:text-[28px] md:text-[32px] xl:text-[36px] 2xl:text-[42px]", "Extra Large": "text-[26px] sm:text-[32px] md:text-[38px] xl:text-[42px] 2xl:text-[50px]" }; const subtitleSizeMap: Record = { "Small": "text-[11px] xl:text-[12px]", "Medium": "text-[12px] xl:text-[13px]", "Large": "text-[13px] xl:text-[15px]" }; export default function Hero({ settings }: HeroProps) { // Initialize to a random start count (e.g. between 34 and 48) const [enquiryCount, setEnquiryCount] = useState(() => Math.floor(Math.random() * 15) + 34); const [currentImageIndex, setCurrentImageIndex] = useState(0); const heroImages = settings?.heroImages || defaultHeroImages; const badgeText = settings?.heroBadge || defaultHeroBadge; const titleHtml = settings?.heroTitle || defaultHeroTitle; const subtitleText = settings?.heroSubtitle || defaultHeroSubtitle; const urgencyTemplate = settings?.urgencyText || defaultUrgencyText; const titleSizeClass = titleSizeMap[settings?.heroTitleSize || "Large"] || titleSizeMap["Large"]; const subtitleSizeClass = subtitleSizeMap[settings?.heroSubtitleSize || "Medium"] || subtitleSizeMap["Medium"]; const pill1Badge = settings?.pill1Badge || "Most Loved"; const pill1Title = settings?.pill1Title || "Kashmir Tulip • 5D"; const pill1Desc = settings?.pill1Desc || "₹21,999 • 8 seats"; const pill2Badge = settings?.pill2Badge || "Weekend"; const pill2Title = settings?.pill2Title || "Tirthan 3D • Solo"; const pill2Desc = settings?.pill2Desc || "₹9,999 • Fri"; useEffect(() => { const interval = setInterval(() => { setEnquiryCount((prev) => { // Slow natural live fluctuation: randomly adjust by -2, -1, 0, 1, or 2 const change = Math.floor(Math.random() * 5) - 2; const nextVal = prev + change; // Keep inside a realistic range (25 - 55) if (nextVal < 25) return 25 + Math.floor(Math.random() * 5); if (nextVal > 55) return 55 - Math.floor(Math.random() * 5); return nextVal; }); }, 25000); // Updates slowly every 25 seconds return () => clearInterval(interval); }, []); useEffect(() => { if (heroImages.length <= 1) return; const interval = setInterval(() => { setCurrentImageIndex((prev) => (prev + 1) % heroImages.length); }, 5000); return () => clearInterval(interval); }, [heroImages]); const formattedUrgency = urgencyTemplate.replace("{count}", enquiryCount.toString()); return (
{/* Dark maroon/burgundy hero background container */}
{heroImages.map((imgUrl, idx) => ( isVideo(imgUrl) ? (
); }