"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { AlertCircle, BarChart2, Camera, CheckCircle, Clock, Facebook, Image, Instagram, Linkedin, ListChecks, MapPin, Settings, Share2, ThumbsUp, Twitter, User, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="medium"
        sizing="largeSmallSizeMediumTitles"
        background="noiseDiagonalGradient"
        cardStyle="subtle-shadow"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "Features",          id: "#features"},
        {
          name: "Impact",          id: "#impact"},
        {
          name: "FAQs",          id: "#faqs"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="AquaWatch"
      button={{
        text: "Report Issue",        href: "#contact"}}
    />
  </div>

  <div id="home" data-section="home">
      <HeroSplitDoubleCarousel
      background={{
        variant: "radial-gradient"}}
      title="Empower Change. Ensure Clean Water."
      description="AquaWatch is a citizen-driven platform dedicated to monitoring and reporting water quality issues. Together, we can hold authorities accountable and ensure a healthier, cleaner environment for everyone."
      leftCarouselItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-clear-ocean-water-texture_23-2149132349.jpg",          imageAlt: "Pristine clear water flowing"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/lake-with-plants-branches_1127-359.jpg",          imageAlt: "Dirty murky water with contaminants"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-s-hand-holding-map-cell-phone-outdoors_23-2148203105.jpg",          imageAlt: "Citizen using smartphone to report water issue"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/front-close-view-young-male-chemist-white-special-suit-holding-little-flasks-with-solutions-cream-wall-science-experiment-chemistry-scientific-lab_140725-37431.jpg",          imageAlt: "Scientist analyzing water sample"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-businessman-analyzing-annual-report_1098-3061.jpg",          imageAlt: "Government official reviewing water quality dashboard"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-kids-cleaning-ground_23-2148472394.jpg",          imageAlt: "Community group participating in river clean-up"},
      ]}
      rightCarouselItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/pouring-water-into-empty-glass_114579-5375.jpg",          imageAlt: "Clean drinking water pouring into a glass"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-environmental-engineer-getting-water-sample_23-2149354044.jpg",          imageAlt: "AquaWatch app interface on a phone"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/macro-green-leaf_23-2148211978.jpg",          imageAlt: "Digital map with red and green water quality markers"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/crop-unrecognizable-worker-with-tablet_23-2147717388.jpg",          imageAlt: "Bar chart showing increasing resolved reports"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/coworkers-brainstorming-solutions-with-mockup-display-solar-plant_482257-126042.jpg",          imageAlt: "Hands shaking over tablet with AquaWatch logo"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/kids-spending-time-outdoors-rural-area-enjoying-childhood_23-2149614747.jpg",          imageAlt: "Family enjoying clean water in a park"},
      ]}
      tag="Civic Impact Platform"
      buttons={[
        {
          text: "Report an Issue",          href: "#contact"},
        {
          text: "Explore Reports",          href: "#features"},
      ]}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-work_23-2149304143.jpg",          alt: "Community Member"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg",          alt: "Local Activist"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-beautiful-afro-american-woman_23-2148332136.jpg",          alt: "Concerned Citizen"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg",          alt: "Volunteer"},
        {
          src: "http://img.b2bpic.net/free-photo/bearded-grey-haired-elderly-man-wearing-formal-suit_273609-5596.jpg",          alt: "Environmental Advocate"},
      ]}
      avatarText="Join 15,000+ citizens ensuring clean water"
      marqueeItems={[
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/closeup-shot-water-droplet-blue-water_181624-34280.jpg",          alt: "Water Quality Authority Logo"},
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/go-green-think-green-act-green_53876-74636.jpg",          alt: "Environmental NGO Logo"},
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/top-view-statistics-presentation-with-arrow_23-2149023749.jpg",          alt: "Data Analytics Partner Logo"},
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/top-view-diversity-assortment-with-different-colored-paper-hands_23-2148642211.jpg",          alt: "Community Action Network Logo"},
        {
          type: "image",          src: "http://img.b2bpic.net/free-vector/cityscape-factory_1017-520.jpg",          alt: "Urban Development Partner Logo"},
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={false}
      title="Driving Transparency & Accountability"
      metrics={[
        {
          icon: CheckCircle,
          label: "Reports Resolved",          value: "1200+"},
        {
          icon: MapPin,
          label: "Areas Monitored",          value: "500+"},
        {
          icon: Clock,
          label: "Avg. Resolution Time",          value: "7 Days"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="reporting-features" data-section="reporting-features">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Photo-based Reporting",          description: "Capture visual evidence of contaminated water with your smartphone camera.",          bentoComponent: "phone",          statusIcon: Camera,
          alertIcon: AlertCircle,
          alertTitle: "New Report",          alertMessage: "Contaminated water detected in Sector 7.",          apps: [
            {
              name: "Report",              icon: Share2,
            },
            {
              name: "Location",              icon: MapPin,
            },
            {
              name: "Status",              icon: ListChecks,
            },
            {
              name: "Gallery",              icon: Image,
            },
            {
              name: "Profile",              icon: User,
            },
            {
              name: "Settings",              icon: Settings,
            },
            {
              name: "Analytics",              icon: BarChart2,
            },
            {
              name: "Community",              icon: Users,
            },
          ],
        },
        {
          title: "Auto Location Detection",          description: "Automatically pinpoint the exact location of the reported issue using GPS.",          bentoComponent: "reveal-icon",          icon: MapPin,
        },
        {
          title: "Complaint Status Tracking",          description: "Monitor the progress of your report from 'Pending' to 'Resolved' in real-time.",          bentoComponent: "3d-task-list",          heading: "Report ID: AQ-2023-1234",          items: [
            {
              label: "Report Submitted",              time: "Just now",              icon: CheckCircle,
            },
            {
              label: "Under Review",              time: "1 hour ago",              icon: Clock,
            },
            {
              label: "Action Initiated",              time: "3 days ago",              icon: Clock,
            },
          ],
          completedLabel: "Resolved"},
      ]}
      title="Seamless Reporting & Tracking"
      description="Our intuitive platform makes it easy for citizens to report water quality concerns and for authorities to track and resolve them efficiently."
    />
  </div>

  <div id="public-impact" data-section="public-impact">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Interactive Map Dashboard",          description: "Visualize water quality issues across your city with real-time markers and status updates.",          bentoComponent: "map"},
        {
          title: "Upvote & Support System",          description: "Amplify critical reports by upvoting them, generating more public pressure for action.",          bentoComponent: "reveal-icon",          icon: ThumbsUp,
        },
        {
          title: "Report Analytics & Trends",          description: "Access detailed analytics to identify polluted areas and track resolution trends over time.",          bentoComponent: "animated-bar-chart"},
      ]}
      title="See the Impact, Drive the Change"
      description="Our public dashboard transforms raw data into actionable insights, fostering transparency and citizen engagement."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        {
          id: "1",          value: "15,000+",          title: "Total Reports",          items: [
            "Submitted by citizens",            "Growing daily"],
        },
        {
          id: "2",          value: "9,000+",          title: "Reports Resolved",          items: [
            "Verified by authorities",            "Positive outcomes"],
        },
        {
          id: "3",          value: "150+",          title: "Active Areas",          items: [
            "Regions with ongoing monitoring",            "Expanding coverage"],
        },
        {
          id: "4",          value: "75%",          title: "Community Engagement",          items: [
            "Citizen participation rate",            "Higher civic impact"],
        },
      ]}
      title="Our Impact in Numbers"
      description="See how AquaWatch is making a tangible difference in water quality and community engagement."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "City Water Authority",        "Green Earth Foundation",        "Data Insights Corp",        "Community Action Network",        "Urban Development Dept.",        "Public Health Services",        "Hydrology Research"]}
      title="Supported by Leading Organizations"
      description="We partner with local authorities, environmental NGOs, and research institutions to ensure our data drives real change."
    />
  </div>

  <div id="faqs" data-section="faqs">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "1",          title: "How do I report a water quality issue?",          content: "Simply open the AquaWatch app or website, upload a photo of the contaminated water, your location will be auto-detected, and add a brief description. Then submit!"},
        {
          id: "2",          title: "Is my report anonymous?",          content: "Yes, you have the option to submit reports anonymously. Your personal details will not be shared with authorities or the public if you choose this option."},
        {
          id: "3",          title: "How long does it take for an issue to be resolved?",          content: "Resolution times vary based on the nature and severity of the issue, and the response time of local authorities. You can track the status of your report in real-time."},
        {
          id: "4",          title: "What happens after I report an issue?",          content: "Once submitted, your report is stored in our system, assigned a status (Pending, Under Review, Resolved), and relevant authorities/NGOs are notified to take action."},
        {
          id: "5",          title: "Can I see other people's reports?",          content: "Yes, our Public Dashboard allows everyone to view reports, their locations, and resolution statuses, fostering transparency and community awareness."},
        {
          id: "6",          title: "How do you prevent fake reports?",          content: "We require photo evidence and have an admin panel for verification. Additionally, our upvote system helps prioritize reports with broader community support."},
      ]}
      title="Frequently Asked Questions"
      description="Find answers to common questions about reporting, data privacy, and how AquaWatch ensures real impact."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Sarah Johnson",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-asian-woman-posing-office-window_1098-20807.jpg",          imageAlt: "Professional headshot of Sarah Johnson"
        },
        {
          id: "2",          name: "Michael Chen",          imageSrc: "http://img.b2bpic.net/free-photo/best-friends-having-fun-together-outside_23-2148784230.jpg",          imageAlt: "Professional headshot of Michael Chen"
        },
        {
          id: "3",          name: "Emily Rodriguez",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-working_23-2149271738.jpg",          imageAlt: "Professional headshot of Emily Rodriguez"
        },
        {
          id: "4",          name: "David Kim",          imageSrc: "http://img.b2bpic.net/free-photo/you-got-it-closeup-portrait-smiling-cute-young-hispanic-man-saying-good-luck-pointing-fingers_1258-111343.jpg",          imageAlt: "Professional headshot of David Kim"
        },
        {
          id: "5",          name: "Priya Sharma",          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-senior-man-sitting-rock_23-2149292921.jpg",          imageAlt: "Professional headshot of Priya Sharma"
        },
        {
          id: "6",          name: "John Doe",          imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-woman-working-scientist-laboratory-smiling-looking-confident-camera-with-crossed-arms-hand-chin-thinking-positive_839833-27538.jpg",          imageAlt: "Professional headshot of John Doe"
        }
      ]}
      cardTitle="Voices of Change"
      cardTag="What Our Community Says"
      cardAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={true}
      title="Get in Touch with AquaWatch"
      description="Have questions, suggestions, or want to partner with us? Reach out and let's make a difference together."
      inputs={[
        {
          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
        },
        {
          name: "email",          type: "email",          placeholder: "Your Email",          required: true,
        },
      ]}
      textarea={{
        name: "message",        placeholder: "Your Message",        rows: 4,
        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/natural-background-water-texture-lake_169016-24722.jpg"
      imageAlt="Hand holding a clear glass of water reflecting the sky"
      mediaAnimation="slide-up"
      mediaPosition="right"
      buttonText="Send Message"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="AquaWatch"
      copyrightText="© 2024 AquaWatch. All rights reserved."
      socialLinks={[
        {
          icon: Twitter,
          href: "https://twitter.com/aquawatch",          ariaLabel: "Twitter"},
        {
          icon: Facebook,
          href: "https://facebook.com/aquawatch",          ariaLabel: "Facebook"},
        {
          icon: Instagram,
          href: "https://instagram.com/aquawatch",          ariaLabel: "Instagram"},
        {
          icon: Linkedin,
          href: "https://linkedin.com/company/aquawatch",          ariaLabel: "LinkedIn"},
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
