"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Award, Binoculars, Compass, Eye, Heart, Leaf, MapPin, Users, Waves } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="compact"
      sizing="medium"
      background="noiseDiagonalGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Experience", id: "experience" },
            { name: "Gallery", id: "gallery" },
            { name: "Journey", id: "journey" },
            { name: "Reserve", id: "reserve" }
          ]}
          brandName="Kalametiya Eco"
          bottomLeftText="Lagoon Safari & Birdwatching"
          bottomRightText="info@kalametiyabirds.lk"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="Kalametiya Eco Birdwatching & Lagoon Safari"
          description="Immerse yourself in Sri Lanka's most pristine natural sanctuary. Experience the tranquility of our lagoon, the majesty of endemic birds, and the profound beauty of untouched ecosystems."
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Book Your Eco Experience", href: "#reserve" }
          ]}
          buttonAnimation="slide-up"
          layoutOrder="default"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=11omym"
          imageAlt="Kalametiya Lagoon Sunrise"
          mediaAnimation="opacity"
        />
      </div>

      <div id="highlights" data-section="highlights">
        <FeatureCardTen
          title="Curated Eco Experiences"
          description="Each carefully designed journey reconnects you with nature's rhythms while preserving the delicate balance of our sanctuary."
          tag="Premium Eco-Tourism"
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          features={[
            {
              id: "birdwatching",              title: "Birdwatching Experience",              description: "Guided observations of endemic and migratory species in their natural habitat.",              media: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xte2au",                imageAlt: "Birdwatching Experience"
              },
              items: [
                { icon: Binoculars, text: "Professional guides & equipment" },
                { icon: Eye, text: "Rare species encounters" }
              ],
              reverse: false
            },
            {
              id: "lagoon-safari",              title: "Lagoon Safari (Eco Catamaran)",              description: "Serene waterway exploration through pristine ecosystems and mangrove corridors.",              media: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=re8wo1",                imageAlt: "Lagoon Safari"
              },
              items: [
                { icon: Waves, text: "Sustainable eco-boats" },
                { icon: MapPin, text: "Hidden lagoon passages" }
              ],
              reverse: true
            },
            {
              id: "expert-guide",              title: "Expert Local Guides",              description: "Deep knowledge of ecology, wildlife behavior, and conservation practices.",              media: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ljm29p&_wi=1",                imageAlt: "Expert Local Guides"
              },
              items: [
                { icon: Users, text: "Community-trained naturalists" },
                { icon: Award, text: "Conservation certified" }
              ],
              reverse: false
            },
            {
              id: "nature-escape",              title: "Peaceful Nature Escape",              description: "Disconnect from the ordinary and reconnect with your authentic self.",              media: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=81kmnx&_wi=1",                imageAlt: "Peaceful Nature Escape"
              },
              items: [
                { icon: Leaf, text: "Zero-impact tourism" },
                { icon: Heart, text: "Wellness in nature" }
              ],
              reverse: true
            }
          ]}
        />
      </div>

      <div id="story" data-section="story">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Reconnect With Nature's Purest Expression" }
          ]}
          buttons={[
            { text: "Learn More About Our Mission", href: "#" }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="gallery" data-section="gallery">
        <ProductCardFour
          title="Featured Moments from the Sanctuary"
          description="Each frame captures the raw beauty and authentic spirit of Kalametiya's ecosystem."
          tag="Gallery"
          tagAnimation="slide-up"
          gridVariant="bento-grid"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
          products={[
            {
              id: "moment-1",              name: "Golden Hour Reflections",              price: "Nature's Canvas",              variant: "Lagoon Sunset",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=81kmnx&_wi=2",              imageAlt: "Golden Hour Reflections"
            },
            {
              id: "moment-2",              name: "Wings in Flight",              price: "Wildlife Wonder",              variant: "Bird Species",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bb0yrs",              imageAlt: "Wings in Flight"
            },
            {
              id: "moment-3",              name: "Mangrove Sanctuary",              price: "Ecosystem Depth",              variant: "Dense Forest",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ljm29p&_wi=2",              imageAlt: "Mangrove Sanctuary"
            },
            {
              id: "moment-4",              name: "Species Discovery",              price: "Rare Encounters",              variant: "Wildlife Detail",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lov46y",              imageAlt: "Species Discovery"
            }
          ]}
        />
      </div>

      <div id="journey" data-section="journey">
        <MetricCardThree
          title="Your Eco-Journey Unfolds"
          description="A carefully orchestrated experience that honors both your desire for adventure and nature's need for respect."
          tag="Experience Flow"
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
          metrics={[
            { id: "arrival", icon: Compass, title: "Arrival & Orientation", value: "Welcome" },
            { id: "journey", icon: Waves, title: "Lagoon Journey Begins", value: "Explore" },
            { id: "moments", icon: Eye, title: "Birdwatching Moments", value: "Discover" },
            { id: "return", icon: Leaf, title: "Relax & Return", value: "Reflect" }
          ]}
        />
      </div>

      <div id="cta" data-section="cta">
        <ContactCTA
          tag="Reserve Your Experience"
          tagIcon={Heart}
          tagAnimation="slide-up"
          title="Begin Your Transformation"
          description="Step into Kalametiya's embrace. Every moment here is an opportunity to reconnect, discover, and contribute to conservation."
          buttons={[
            { text: "Reserve Your Tour Now", href: "mailto:info@kalametiyabirds.lk" },
            { text: "Call Us: +94 123 456 789", href: "tel:+94123456789" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Kalametiya Eco"
          columns={[
            {
              items: [
                { label: "Experience", href: "#experience" },
                { label: "Gallery", href: "#gallery" },
                { label: "Journey", href: "#journey" }
              ]
            },
            {
              items: [
                { label: "Conservation", href: "#" },
                { label: "Community", href: "#" },
                { label: "Sustainability", href: "#" }
              ]
            },
            {
              items: [
                { label: "Contact", href: "#" },
                { label: "Bookings", href: "#" },
                { label: "FAQ", href: "#" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Eco Guidelines", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
