"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import { BarChart, Bell, Building2, Facebook, LineChart, MessageSquare, Newspaper, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="large"
        background="grid"
        cardStyle="gradient-radial"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "หน้าแรก",
          id: "#home",
        },
        {
          name: "เกี่ยวกับเรา",
          id: "#about",
        },
        {
          name: "บริการ",
          id: "#services",
        },
        {
          name: "ข้อมูลสถิติ",
          id: "#metrics",
        },
        {
          name: "ข่าวสาร",
          id: "#news",
        },
        {
          name: "ติดต่อ",
          id: "#contact",
        },
      ]}
      logoSrc="http://img.b2bpic.net/free-photo/buddhist-temple-buildings-along-chao-phraya-river-bangkok-thailand_1308-189612.jpg"
      logoAlt="Pa Maet Subdistrict Municipality Office Logo"
      brandName="เทศบาลตำบลป่าแมต"
    />
  </div>

  <div id="home" data-section="home">
      <HeroCarouselLogo
      logoText="สำนักงานเทศบาลตำบลป่าแมต"
      description="มุ่งมั่นพัฒนา สร้างสรรค์คุณภาพชีวิต เพื่อประชาชนในตำบลป่าแมต"
      buttons={[
        {
          text: "สำรวจบริการ",
          href: "#services",
        },
        {
          text: "ติดต่อเรา",
          href: "#contact",
        },
      ]}
      slides={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-rice-terrace-ban-pa-bong-piang-chiang-mai-thailand_335224-1061.jpg",
          imageAlt: "Scenic view of Pa Maet rice fields",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/group-young-children-running-playing-park_1150-3891.jpg",
          imageAlt: "Community activities in Pa Maet",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/ancient-buddha-statues-sitting-peacefully-sacred-temple-complex_482257-123940.jpg",
          imageAlt: "Modern Thai government building",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/asian-doctor-team-examine-xray-film-patient-analysis-find-bext-solution-operation-treat-health-ideas-concept_609648-2378.jpg",
          imageAlt: "Pa Maet health center interior",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/park-with-city_1127-3590.jpg",
          imageAlt: "Waste management and recycling initiatives",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/young-students-working-project-together_23-2147656328.jpg",
          imageAlt: "Local Thai artisans showcasing craftsmanship",
        },
      ]}
      autoplayDelay={4000}
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={true}
      tag="เกี่ยวกับเรา"
      tagIcon={Building2}
      title="เทศบาลตำบลป่าแมต"
      description="สำนักงานเทศบาลตำบลป่าแมต มุ่งมั่นพัฒนาชุมชนและส่งเสริมคุณภาพชีวิตของประชาชนในพื้นที่อย่างยั่งยืน เราดำเนินงานด้วยความโปร่งใสและเป็นธรรม เพื่อสร้างสังคมที่เข้มแข็งและน่าอยู่"
      subdescription="เรามีบทบาทสำคัญในการให้บริการสาธารณะ วางแผนพัฒนาท้องถิ่น และส่งเสริมเศรษฐกิจชุมชน โดยเน้นการมีส่วนร่วมของประชาชนเป็นหลัก"
      icon={Users}
      imageSrc="http://img.b2bpic.net/free-photo/detail-shot-modern-architecture-facade_1359-359.jpg"
      imageAlt="Pa Maet Subdistrict Municipality Office Building"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardEight
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "งานทะเบียนและบัตร",
          description: "บริการเกี่ยวกับทะเบียนบ้าน บัตรประจำตัวประชาชน และเอกสารราชการต่างๆ",
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-visa-application-composition_23-2149117769.jpg",
          imageAlt: "Government service desk",
        },
        {
          title: "สาธารณสุขและสิ่งแวดล้อม",
          description: "ดูแลสุขภาพประชาชน จัดการขยะและสิ่งปฏิกูล ควบคุมมลภาวะ",
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-stethoscope-injector-family-icons_181624-37195.jpg",
          imageAlt: "Public health checkup",
        },
        {
          title: "การศึกษาและพัฒนาชุมชน",
          description: "สนับสนุนการศึกษา จัดกิจกรรมพัฒนาทักษะ และส่งเสริมอาชีพชุมชน",
          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-kids-playing-outside_23-2150120970.jpg",
          imageAlt: "Children in a computer class",
        },
      ]}
      title="บริการสาธารณะเพื่อประชาชน"
      description="เราให้บริการที่หลากหลาย เพื่อตอบสนองความต้องการและพัฒนาคุณภาพชีวิตของชาวป่าแมต"
      tag="บริการของเรา"
      tagIcon={Bell}
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          value: "15,000+",
          title: "จำนวนประชากร",
          description: "ประชากรในตำบลป่าแมต",
          imageSrc: "http://img.b2bpic.net/free-photo/group-diverse-tourists-sitting-wooden-floor-planning-using-map_53876-13998.jpg",
          imageAlt: "Population map",
        },
        {
          id: "m2",
          value: "120 กม.",
          title: "ถนนที่ได้รับการบำรุง",
          description: "ปรับปรุงและซ่อมแซมถนนเพื่อการเดินทางที่ดีขึ้น",
          imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-gold-coast-urban-infrastructure-residential-buildings_1308-189651.jpg",
          imageAlt: "Road infrastructure",
        },
        {
          id: "m3",
          value: "70%",
          title: "อัตราการรีไซเคิล",
          description: "โครงการรีไซเคิลขยะในชุมชน",
          imageSrc: "http://img.b2bpic.net/free-photo/electric-farm-with-panels-producing-clean-ecologic-energy_169016-17846.jpg",
          imageAlt: "Green energy solar panels",
        },
      ]}
      title="ผลงานและความสำเร็จ"
      description="สถิติสำคัญที่สะท้อนถึงการพัฒนาและความมุ่งมั่นของเรา"
      tag="ข้อมูลสถิติ"
      tagIcon={BarChart}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "คุณสมศรี ใจดี",
          role: "ชาวบ้าน",
          company: "ป่าแมต",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-people-playing-bingo-together_23-2149193835.jpg",
          imageAlt: "Smiling senior citizen",
        },
        {
          id: "2",
          name: "คุณชาติชาย พัฒนา",
          role: "ผู้ประกอบการ",
          company: "ป่าแมต",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-female-gardener-uniform-wearing-holding-gardening-hat_141793-71215.jpg",
          imageAlt: "Small business owner",
        },
        {
          id: "3",
          name: "คุณนารี สุขสันต์",
          role: "ผู้ปกครอง",
          company: "ป่าแมต",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/people-watching-soccer-game_23-2149015578.jpg",
          imageAlt: "Happy young family",
        },
        {
          id: "4",
          name: "คุณมานะ เกษตรกร",
          role: "เกษตรกร",
          company: "ป่าแมต",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/hydroponics-system-planting-vegetables-herbs-without-using-soil-health_1150-8143.jpg",
          imageAlt: "Smiling farmer in rice field",
        },
        {
          id: "5",
          name: "คุณครูอรอนงค์",
          role: "คุณครู",
          company: "โรงเรียนป่าแมต",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/girl-photographing-page-book-pensive-woman_259150-58191.jpg",
          imageAlt: "Teacher helping student",
        },
      ]}
      kpiItems={[
        {
          value: "95%",
          label: "ความพึงพอใจ",
        },
        {
          value: "4.9",
          label: "คะแนนเฉลี่ย",
        },
        {
          value: "500+",
          label: "ข้อเสนอแนะ",
        },
      ]}
      title="เสียงจากประชาชน"
      description="ความพึงพอใจและความคิดเห็นจากผู้ใช้บริการของเรา"
      tag="คำบอกเล่า"
      tagIcon={MessageSquare}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq1",
          title: "จะติดต่อขอรับบริการต่างๆ ได้ที่ไหน?",
          content: "ท่านสามารถติดต่อขอรับบริการได้ที่สำนักงานเทศบาลตำบลป่าแมต ในวันและเวลาราชการ หรือผ่านช่องทางการติดต่อที่ระบุในหน้าติดต่อเรา",
        },
        {
          id: "faq2",
          title: "ต้องการแจ้งเรื่องร้องเรียนหรือเสนอแนะ ต้องทำอย่างไร?",
          content: "ท่านสามารถแจ้งเรื่องร้องเรียนหรือเสนอแนะได้ผ่านระบบรับเรื่องร้องเรียนบนเว็บไซต์ หรือติดต่อเจ้าหน้าที่โดยตรงที่สำนักงานเทศบาลฯ",
        },
        {
          id: "faq3",
          title: "มีข้อมูลเกี่ยวกับโครงการพัฒนาชุมชนหรือไม่?",
          content: "เรามีข้อมูลและรายละเอียดโครงการพัฒนาชุมชนต่างๆ บนเว็บไซต์ในส่วนของ 'ข่าวสารและกิจกรรม' หรือติดต่อสอบถามได้ที่ฝ่ายพัฒนาชุมชน",
        },
      ]}
      sideTitle="คำถามที่พบบ่อย"
      sideDescription="รวบรวมคำถามและคำตอบที่ประชาชนสอบถามเข้ามามากที่สุด เพื่อความสะดวกในการค้นหาข้อมูล"
      faqsAnimation="slide-up"
      textPosition="left"
    />
  </div>

  <div id="news" data-section="news">
      <BlogCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      title="ข่าวสารและกิจกรรม"
      description="อัปเดตข้อมูลข่าวสารล่าสุดและกิจกรรมสำคัญของเทศบาลตำบลป่าแมต"
      tag="ข่าวประชาสัมพันธ์"
      tagIcon={Newspaper}
      blogs={[
        {
          id: "blog1",
          category: "สิ่งแวดล้อม",
          title: "โครงการรณรงค์ลดปริมาณขยะในชุมชน",
          excerpt: "เทศบาลตำบลป่าแมตจัดกิจกรรมรณรงค์และให้ความรู้เกี่ยวกับการแยกขยะ...",
          imageSrc: "http://img.b2bpic.net/free-photo/group-activists-friends-collecting-plastic-waste-beach-guys-show-thumb-up_1153-4483.jpg",
          imageAlt: "Community clean-up event",
          authorName: "งานประชาสัมพันธ์",
          authorAvatar: "http://img.b2bpic.net/free-photo/buddhist-temple-buildings-along-chao-phraya-river-bangkok-thailand_1308-189612.jpg",
          date: "2024-07-20",
        },
        {
          id: "blog2",
          category: "วัฒนธรรม",
          title: "ประเพณีสงกรานต์ตำบลป่าแมต",
          excerpt: "เทศบาลฯ จัดงานประเพณีสงกรานต์ยิ่งใหญ่ เชิญชวนประชาชนร่วมสืบสานวัฒนธรรม...",
          imageSrc: "http://img.b2bpic.net/free-photo/diverse-artists-using-oil-paints-create-beautiful-masterpiece_482257-118466.jpg",
          imageAlt: "Thai traditional dance performance",
          authorName: "งานประชาสัมพันธ์",
          authorAvatar: "http://img.b2bpic.net/free-photo/georgia-flag-with-banner_187299-35482.jpg",
          date: "2024-04-15",
        },
        {
          id: "blog3",
          category: "การประชุม",
          title: "ประชุมคณะกรรมการพัฒนาเทศบาลตำบลป่าแมต",
          excerpt: "สรุปผลการประชุมเพื่อขับเคลื่อนแผนพัฒนาท้องถิ่น ระยะ 5 ปี...",
          imageSrc: "http://img.b2bpic.net/free-photo/concentrated-young-multiethnic-friends-students-studying_171337-18250.jpg",
          imageAlt: "Public meeting town hall discussion",
          authorName: "งานประชาสัมพันธ์",
          authorAvatar: "http://img.b2bpic.net/free-vector/labor-day-badges-collection-flat-style_23-2147868038.jpg",
          date: "2024-06-01",
        },
      ]}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={true}
      title="ติดต่อเทศบาลตำบลป่าแมต"
      description="เรายินดีรับฟังทุกข้อเสนอแนะและพร้อมให้บริการแก่ประชาชนทุกท่าน"
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "ชื่อ-นามสกุล",
          required: true,
        },
        {
          name: "email",
          type: "email",
          placeholder: "อีเมล",
          required: true,
        },
        {
          name: "phone",
          type: "tel",
          placeholder: "เบอร์โทรศัพท์",
          required: false,
        },
      ]}
      textarea={{
        name: "message",
        placeholder: "ข้อความ/รายละเอียด",
        rows: 5,
        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-woman-working-office-travel-agency_23-2150433325.jpg"
      imageAlt="Thai municipal office lobby with friendly staff"
      mediaAnimation="slide-up"
      mediaPosition="right"
      buttonText="ส่งข้อความ"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoSrc="http://img.b2bpic.net/free-vector/labels-collection-us-memorial-day-celebration_23-2150246398.jpg"
      logoAlt="Pa Maet Subdistrict Municipality Office Logo"
      logoText="เทศบาลตำบลป่าแมต"
      copyrightText="© 2024 เทศบาลตำบลป่าแมต. สงวนลิขสิทธิ์."
      socialLinks={[
        {
          icon: Facebook,
          href: "https://facebook.com/Pamaet",
          ariaLabel: "Facebook link",
        },
        {
          icon: LineChart,
          href: "#",
          ariaLabel: "Line account link",
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
