"use client";

import { MapPin, Star, ArrowRight, TrendingUp, BookOpen, Heart, HelpCircle, Twitter, Instagram, Facebook } from "lucide-react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactText from '@/components/sections/contact/ContactText';
import FooterCard from '@/components/sections/footer/FooterCard';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="largeSmall"
      background="blurBottom"
      cardStyle="elevated"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="San Francisco"
          navItems={[
            { name: "About", id: "about" },
            { name: "Attractions", id: "attractions" },
            { name: "Neighborhoods", id: "neighborhoods" },
            { name: "Blog", id: "blog" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Explore the Bay"
          bottomRightText="hello@sf-guide.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Discover the Magic of San Francisco"
          description="Explore iconic landmarks, vibrant neighborhoods, and unforgettable experiences in America's most dynamic city"
          tag="Explore Now"
          tagIcon={MapPin}
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Start Your Journey", href: "#attractions" },
            { text: "Learn More", href: "#about" }
          ]}
          carouselItems={[
            { id: "1", imageSrc: "https://img.b2bpic.net/free-photo/golden-gate-bridge-body-water-near-rock-formations-sunset-san-francisco-california_181624-3228.jpg", imageAlt: "golden gate bridge san francisco landmark iconic bridge" },
            { id: "2", imageSrc: "https://img.b2bpic.net/free-photo/san-francisco-city-skyline-with-urban-architectures_649448-237.jpg", imageAlt: "san francisco bay waterfront city view skyline panorama" },
            { id: "3", imageSrc: "https://img.b2bpic.net/free-photo/famous-view-chicago-morning-usa_268835-3589.jpg", imageAlt: "san francisco downtown urban skyscrapers city center architecture" },
            { id: "4", imageSrc: "https://img.b2bpic.net/free-photo/aerial-shot-san-francisco-golden-gate-bridge_181624-52537.jpg", imageAlt: "cable car san francisco transport historic street" },
            { id: "5", imageSrc: "https://img.b2bpic.net/free-photo/low-angle-shot-ferry-building-san-francisco-near-green-trees-beautiful-sky_181624-8322.jpg", imageAlt: "san francisco beach ocean coast waves sunset" },
            { id: "6", imageSrc: "https://img.b2bpic.net/free-photo/beautiful-view-beach-san-francisco-with-baker-bridge-visible_181624-3165.jpg", imageAlt: "embarcadero pier waterfront san francisco dock" }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="About SF"
          title="A City Like No Other"
          description="San Francisco is a vibrant hub of innovation, culture, and natural beauty. Perched on a peninsula surrounded by the Pacific Ocean and San Francisco Bay, the city captivates millions of visitors annually with its iconic Golden Gate Bridge, rolling hills, diverse neighborhoods, and world-class dining and arts scenes. From the tech-forward Mission District to historic Chinatown, SF offers endless exploration opportunities."
          metrics={[
            { value: "873,965", title: "Population" },
            { value: "49 sq mi", title: "Area" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/medium-shot-women-taking-selfies-outdoors_23-2148941144.jpg"
          imageAlt="san francisco culture city life urban community diverse"
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="attractions" data-section="attractions">
        <FeatureCardTwentySix
          title="Must-See Attractions"
          description="Experience San Francisco's most iconic and beloved landmarks that define the city's character"
          tag="Top Destinations"
          tagIcon={Star}
          features={[
            {
              title: "Golden Gate Bridge",              description: "The iconic suspension bridge spanning the Golden Gate Strait, offering breathtaking views and photo opportunities",              imageSrc: "https://img.b2bpic.net/free-photo/golden-gate-bridge-body-water-near-rock-formations-sunset-san-francisco-california_181624-3228.jpg",              imageAlt: "Golden Gate Bridge",              buttonIcon: ArrowRight
            },
            {
              title: "Alcatraz Island",              description: "Historic former federal penitentiary offering guided tours and fascinating insights into American criminal history",              imageSrc: "https://img.b2bpic.net/free-photo/vertical-shot-empty-golden-gate-bridge-san-francisco-california_181624-10163.jpg",              imageAlt: "Alcatraz Island",              buttonIcon: ArrowRight
            },
            {
              title: "Transamerica Pyramid",              description: "The tallest building in San Francisco with an observation deck featuring 360-degree city views",              imageSrc: "https://img.b2bpic.net/free-photo/golden-gate-bridge-fog-san-francisco_649448-61.jpg",              imageAlt: "Transamerica Pyramid",              buttonIcon: ArrowRight
            },
            {
              title: "Twin Peaks",              description: "Twin mountain peaks offering panoramic views of the entire city, bay, and beyond",              imageSrc: "https://img.b2bpic.net/free-vector/golden-gate-bridge-poster_98292-4651.jpg",              imageAlt: "Twin Peaks viewpoint",              buttonIcon: ArrowRight
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="neighborhoods" data-section="neighborhoods">
        <ProductCardFour
          title="Explore Neighborhoods"
          description="Discover the unique character and charm of San Francisco's most distinctive neighborhoods"
          tag="Local Guide"
          tagIcon={MapPin}
          products={[
            {
              id: "chinatown",              name: "Chinatown",              price: "Historic District",              variant: "Culture & Cuisine",              imageSrc: "https://img.b2bpic.net/free-photo/san-francisco-ca-may-11-chinatown-street-view-may-11-2014-san-francisco-it-is-most-densely-settled-large-city-california-second-most-us_649448-2626.jpg",              imageAlt: "Chinatown neighborhood"
            },
            {
              id: "mission",              name: "Mission District",              price: "Trendy Hub",              variant: "Art & Dining",              imageSrc: "https://img.b2bpic.net/free-photo/chinese-new-year-celebration_23-2151913335.jpg",              imageAlt: "Mission District street art"
            },
            {
              id: "haight",              name: "Haight-Ashbury",              price: "Iconic Area",              variant: "Bohemian Spirit",              imageSrc: "https://img.b2bpic.net/free-photo/shop-sidewalk-afternoon-businessman-advertisement_1206-58.jpg",              imageAlt: "Haight-Ashbury historic street"
            },
            {
              id: "marina",              name: "Marina District",              price: "Upscale Neighborhood",              variant: "Waterfront Living",              imageSrc: "https://img.b2bpic.net/free-photo/asian-city-with-chinese-lanterns-river_1137-276.jpg",              imageAlt: "Marina District waterfront"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="San Francisco by the Numbers"
          description="Key statistics showcasing what makes San Francisco a world-class destination"
          tag="Quick Facts"
          tagIcon={TrendingUp}
          metrics={[
            { id: "1", value: "25M+", description: "Annual Visitors" },
            { id: "2", value: "900+", description: "Restaurants" },
            { id: "3", value: "50+", description: "Neighborhoods" },
            { id: "4", value: "16", description: "Hills" }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="blog" data-section="blog">
        <BlogCardTwo
          title="Travel Blog & Insights"
          description="Stories, tips, and guides to make the most of your San Francisco adventure"
          tag="Travel"
          tagIcon={BookOpen}
          blogs={[
            {
              id: "1",              category: ["Attractions", "Guide"],
              title: "Hidden Gems Beyond the Golden Gate",              excerpt: "Discover lesser-known spots and secret viewpoints that locals love and tourists often miss",              imageSrc: "https://img.b2bpic.net/free-photo/sideways-woman-man-waving-each-other-coast_23-2148699842.jpg",              imageAlt: "san francisco hidden gems secret spots local discover explore",              authorName: "Alex Chen",              authorAvatar: "https://img.b2bpic.net/free-photo/studio-portrait-successful-young-businesswoman_1262-5844.jpg",              date: "15 Jan 2025"
            },
            {
              id: "2",              category: ["Food", "Culture"],
              title: "The Ultimate SF Food Guide",              excerpt: "From dim sum in Chinatown to Mission burritos, explore the flavors that define San Francisco",              imageSrc: "https://img.b2bpic.net/free-photo/woman-taking-shots-hill_23-2147770317.jpg",              imageAlt: "san francisco food cuisine restaurants dining culinary",              authorName: "Maria Garcia",              authorAvatar: "https://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg",              date: "10 Jan 2025"
            },
            {
              id: "3",              category: ["History", "Culture"],
              title: "San Francisco's Rich History & Heritage",              excerpt: "Learn about the Gold Rush, the 1906 earthquake, and the events that shaped this iconic city",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-woman-with-hat-looking-away_23-2148588480.jpg",              imageAlt: "san francisco history historic heritage culture past",              authorName: "James Wilson",              authorAvatar: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",              date: "05 Jan 2025"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          carouselMode="buttons"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              imageSrc: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emma Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/studio-portrait-successful-young-businesswoman_1262-5844.jpg",              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",              name: "David Kim",              imageSrc: "https://img.b2bpic.net/free-photo/happy-smiling-businesswoman-looking-camera-with-arms-crossed-portrait_1163-4337.jpg",              imageAlt: "David Kim"
            },
            {
              id: "5",              name: "Jessica Martinez",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-beautiful-young-businesswoman_329181-11388.jpg",              imageAlt: "Jessica Martinez"
            },
            {
              id: "6",              name: "Robert Thompson",              imageSrc: "https://img.b2bpic.net/free-photo/content-beautiful-businesswoman-standing-window_1262-1778.jpg",              imageAlt: "Robert Thompson"
            }
          ]}
          cardTitle="Over 25 million visitors discover San Francisco's magic every year"
          cardTag="Trusted by travelers worldwide"
          cardTagIcon={Heart}
          cardAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about visiting San Francisco"
          tag="Help"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",              title: "When is the best time to visit San Francisco?",              content: "September through November offers the warmest, driest weather with stunning clear skies. Summer can be cool and foggy, while winter brings occasional rain. Avoid peak tourist season in July and August for shorter lines and better prices."
            },
            {
              id: "2",              title: "How do I get around San Francisco?",              content: "The city is best explored using BART (Bay Area Rapid Transit), buses, historic cable cars, and on foot. A VISITOR PASSPORT offers unlimited 1, 3, or 7-day passes. Uber and Lyft are also readily available throughout the city."
            },
            {
              id: "3",              title: "How much does it cost to visit the Golden Gate Bridge?",              content: "Walking or biking across the Golden Gate Bridge is completely free! You can enjoy the views from the bridge walkway anytime. Nearby attractions like Alcatraz Island require separate paid tickets ($41.25 for adults)."
            },
            {
              id: "4",              title: "What neighborhoods should I visit?",              content: "Start with iconic areas like Chinatown and North Beach, then explore the Mission District for street art and dining, Haight-Ashbury for bohemian vibes, and the Marina for waterfront beauty. Each neighborhood has its own unique character and attractions."
            },
            {
              id: "5",              title: "Is San Francisco expensive?",              content: "San Francisco is one of the more expensive US cities. Budget $100-200+ per day for accommodations, $20-50 for meals, and activities range from free (Golden Gate Bridge walk) to $50+ (Alcatraz tours). Look for deals on visitor passes and free walking tours."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to explore the City by the Bay? Get insider tips, travel guides, and exclusive recommendations delivered to your inbox."
          animationType="background-highlight"
          buttons={[
            { text: "Subscribe Now", href: "#newsletter" },
            { text: "Contact Us", href: "mailto:hello@sf-guide.com" }
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="San Francisco Guide"
          copyrightText="© 2025 San Francisco Travel Guide. All rights reserved. Exploring the magic of SF."
          socialLinks={[
            {
              icon: Twitter,
              href: "https://twitter.com/sfguide",              ariaLabel: "Twitter"
            },
            {
              icon: Instagram,
              href: "https://instagram.com/sfguide",              ariaLabel: "Instagram"
            },
            {
              icon: Facebook,
              href: "https://facebook.com/sfguide",              ariaLabel: "Facebook"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}