"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import { CheckCircle, Heart, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="compact"
        sizing="medium"
        background="blurBottom"
        cardStyle="soft-shadow"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "หน้าแรก",
          id: "#hero",
        },
        {
          name: "เกี่ยวกับ",
          id: "#about",
        },
        {
          name: "บริการ",
          id: "#features",
        },
        {
          name: "โครงการ",
          id: "#projects",
        },
        {
          name: "ทีมงาน",
          id: "#team",
        },
        {
          name: "คำถามที่พบบ่อย",
          id: "#faq",
        },
        {
          name: "ติดต่อเรา",
          id: "#contact",
        },
      ]}
      logoSrc="http://img.b2bpic.net/free-photo/white-pagodas-temples-thailand_1308-189417.jpg"
      logoAlt="เทศบาลตำบลป่าแมต Logo"
      brandName="เทศบาลตำบลป่าแมต"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "rotated-rays-static",
      }}
      title="สำนักงานเทศบาลตำบลป่าแมต"
      description="มุ่งมั่นพัฒนาท้องถิ่น สร้างสรรค์คุณภาพชีวิตที่ดี เพื่อชุมชนที่เข้มแข็งและยั่งยืน"
      carouselItems={[
        {
          id: "1",
          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-mother-playing-having-fun-with-her-little-baby-son-park-sunny-summer-day_1150-8880.jpg",
          imageAlt: "Community park with children playing",
        },
        {
          id: "2",
          imageSrc: "http://img.b2bpic.net/free-photo/bangkok-thailand-november-11-2024-glimpse-into-bangkok-urban-landscape_482257-123954.jpg",
          imageAlt: "Modern municipal office building",
        },
        {
          id: "3",
          imageSrc: "http://img.b2bpic.net/free-photo/children-group-playing-tug-war-park_1150-3896.jpg",
          imageAlt: "Local market with fresh produce",
        },
        {
          id: "4",
          imageSrc: "http://img.b2bpic.net/free-photo/kids-having-fun-jungle-party_23-2149499049.jpg",
          imageAlt: "Community event with people gathering",
        },
        {
          id: "5",
          imageSrc: "http://img.b2bpic.net/free-photo/building-colonial-style_1150-12906.jpg",
          imageAlt: "Clean and green public area",
        },
        {
          id: "6",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-man-woman-wearing-beautiful-traditional-costume-pose-nature-thailand_1150-48648.jpg",
          imageAlt: "Infrastructure development project",
        },
      ]}
      autoPlay={true}
      autoPlayInterval={4000}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={true}
      title="เกี่ยวกับเทศบาลตำบลป่าแมต"
      description="เทศบาลตำบลป่าแมตเป็นองค์กรปกครองส่วนท้องถิ่นที่มุ่งมั่นในการบริหารจัดการเพื่อประโยชน์สูงสุดของประชาชนในพื้นที่ เราดำเนินงานด้วยความโปร่งใส ยึดหลักธรรมาภิบาล และพร้อมรับฟังความคิดเห็นจากทุกภาคส่วน"
      metrics={[
        {
          value: "15,000+",
          title: "ประชากร",
        },
        {
          value: "20+",
          title: "โครงการพัฒนา",
        },
        {
          value: "95%",
          title: "ความพึงพอใจ",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/grandson-teaching-his-elderly-female-use-laptop_1150-14432.jpg"
      imageAlt="Thai government building exterior"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",
          title: "บริการทะเบียนราษฎร",
          subtitle: "สะดวก รวดเร็ว โปร่งใส",
          category: "บริการภาครัฐ",
          value: "ข้อมูลครบถ้วน",
        },
        {
          id: "f2",
          title: "การสาธารณสุขชุมชน",
          subtitle: "สร้างเสริมสุขภาพที่ดี",
          category: "สุขภาพ",
          value: "เข้าถึงง่าย",
        },
        {
          id: "f3",
          title: "การพัฒนาโครงสร้างพื้นฐาน",
          subtitle: "ถนน ไฟฟ้า น้ำประปา",
          category: "สาธารณูปโภค",
          value: "คุณภาพชีวิตดีขึ้น",
        },
        {
          id: "f4",
          title: "การส่งเสริมการศึกษา",
          subtitle: "พัฒนาเยาวชนในท้องถิ่น",
          category: "การศึกษา",
          value: "อนาคตสดใส",
        },
      ]}
      title="บริการและภารกิจหลัก"
      description="เทศบาลตำบลป่าแมตให้บริการและดำเนินภารกิจที่หลากหลาย เพื่อตอบสนองความต้องการของประชาชนและขับเคลื่อนการพัฒนาท้องถิ่นอย่างรอบด้าน"
    />
  </div>

  <div id="projects" data-section="projects">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",
          name: "โครงการปรับปรุงถนนในชุมชน",
          price: "ปี 2567",
          variant: "โครงสร้างพื้นฐาน",
          imageSrc: "http://img.b2bpic.net/free-photo/bicycle-parked-side-road-rice-terraces-ninh-binh-northern-vietnam_181624-35484.jpg",
          imageAlt: "Road construction",
        },
        {
          id: "p2",
          name: "โครงการส่งเสริมอาชีพเกษตรกรรม",
          price: "ต่อเนื่อง",
          variant: "เศรษฐกิจชุมชน",
          imageSrc: "http://img.b2bpic.net/free-photo/gardening_23-2148020429.jpg",
          imageAlt: "Farmers market",
        },
        {
          id: "p3",
          name: "โครงการโรงพยาบาลส่งเสริมสุขภาพประจำตำบล",
          price: "สำเร็จ",
          variant: "สาธารณสุข",
          imageSrc: "http://img.b2bpic.net/free-photo/young-lesbian-lgbtq-asian-women-couple-hug-kiss-home_7861-1815.jpg",
          imageAlt: "Health clinic",
        },
        {
          id: "p4",
          name: "โครงการจัดการขยะอย่างยั่งยืน",
          price: "ทุกปี",
          variant: "สิ่งแวดล้อม",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-volunteer-environment-conservation-help-keep-clean-up-plastic-foam-garbage-beach-park-areavolunteering-world-environment-day_640221-283.jpg",
          imageAlt: "Waste management",
        },
        {
          id: "p5",
          name: "โครงการพัฒนาศูนย์การเรียนรู้ชุมชน",
          price: "ปี 2568",
          variant: "การศึกษา",
          imageSrc: "http://img.b2bpic.net/free-photo/startup-project-team-working-office-organise-company_1098-18605.jpg",
          imageAlt: "Community learning center",
        },
        {
          id: "p6",
          name: "โครงการส่งเสริมการท่องเที่ยวเชิงวัฒนธรรม",
          price: "ต่อเนื่อง",
          variant: "วัฒนธรรม",
          imageSrc: "http://img.b2bpic.net/free-photo/female-tourists-hold-map-find-places_1150-5812.jpg",
          imageAlt: "Cultural festival",
        },
      ]}
      title="โครงการและแผนงานสำคัญ"
      description="เรามุ่งมั่นขับเคลื่อนโครงการต่างๆ เพื่อพัฒนาคุณภาพชีวิตและโครงสร้างพื้นฐานของชุมชนอย่างต่อเนื่อง"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          icon: Users,
          title: "ผู้รับบริการ",
          value: "15,000+",
        },
        {
          id: "m2",
          icon: CheckCircle,
          title: "โครงการสำเร็จ",
          value: "120+",
        },
        {
          id: "m3",
          icon: Heart,
          title: "ความร่วมมือชุมชน",
          value: "50+",
        },
      ]}
      title="ผลการดำเนินงาน"
      description="ข้อมูลและสถิติสำคัญที่สะท้อนถึงความสำเร็จและความก้าวหน้าในการพัฒนาท้องถิ่นของเรา"
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      team={[
        {
          id: "t1",
          name: "นายสมชาย ใจดี",
          role: "นายกเทศมนตรี",
          imageSrc: "http://img.b2bpic.net/free-photo/confident-asian-man-working-with-strong-team_1262-4869.jpg",
          imageAlt: "นายกเทศมนตรี สมชาย ใจดี",
        },
        {
          id: "t2",
          name: "นางสาววิไลลักษณ์ อรุณ",
          role: "ปลัดเทศบาล",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-korean-businesswoman-shirt-smiles-camera-concept-corporate-people-business_1258-169457.jpg",
          imageAlt: "ปลัดเทศบาล วิไลลักษณ์ อรุณ",
        },
        {
          id: "t3",
          name: "นายประทีป แสงสุข",
          role: "รองนายกเทศมนตรี",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-beautiful-thai-costumes-standing-with-water-bowl-standing-temple-songkran-festival-thai-new-year-family-day-april_1150-61685.jpg",
          imageAlt: "รองนายกเทศมนตรี ประทีป แสงสุข",
        },
        {
          id: "t4",
          name: "นางนภา พิทักษ์",
          role: "หัวหน้าสำนักปลัด",
          imageSrc: "http://img.b2bpic.net/free-photo/business-woman_1098-17042.jpg",
          imageAlt: "หัวหน้าสำนักปลัด นภา พิทักษ์",
        },
      ]}
      title="คณะผู้บริหารและบุคลากร"
      description="ทีมงานคุณภาพที่พร้อมทุ่มเทเพื่อการพัฒนาท้องถิ่นและบริการประชาชนด้วยความจริงใจ"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "test1",
          name: "นางสมศรี สุขสบาย",
          role: "ชาวบ้าน",
          testimonial: "เทศบาลตำบลป่าแมตดูแลเอาใจใส่ประชาชนดีมากค่ะ มีโครงการดีๆ ที่ช่วยให้ชีวิตเราสะดวกสบายขึ้นเยอะเลย",
          imageSrc: "http://img.b2bpic.net/free-photo/side-view-friends-eating-seaweed-snacks_23-2150670828.jpg",
          imageAlt: "นางสมศรี สุขสบาย",
        },
        {
          id: "test2",
          name: "นายมานะ พากเพียร",
          role: "ผู้ประกอบการ",
          testimonial: "ได้รับความช่วยเหลือและคำแนะนำในการดำเนินธุรกิจจากเทศบาลอย่างดีเยี่ยม ทำให้เรามั่นใจในการลงทุน",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-braless-woman-outdoors-cafe_23-2150501203.jpg",
          imageAlt: "นายมานะ พากเพียร",
        },
        {
          id: "test3",
          name: "คุณยายทองใบ มีสุข",
          role: "ผู้สูงอายุ",
          testimonial: "รู้สึกอบอุ่นใจที่มีเจ้าหน้าที่คอยสอบถามความเป็นอยู่ และมีกิจกรรมสำหรับผู้สูงอายุให้เข้าร่วมเสมอ",
          imageSrc: "http://img.b2bpic.net/free-photo/senior-man-waving-while-taking-walk-outdoors_23-2150579716.jpg",
          imageAlt: "คุณยายทองใบ มีสุข",
        },
        {
          id: "test4",
          name: "เด็กชายปัญญา เรียนดี",
          role: "นักเรียน",
          testimonial: "โรงเรียนมีสื่อการเรียนรู้ใหม่ๆ และสนามกีฬาที่สะอาดครับ ขอบคุณเทศบาลครับ",
          imageSrc: "http://img.b2bpic.net/free-photo/young-stylish-woman-walking-with-smartphone-listening-music-headphones-summer-vacation_285396-3747.jpg",
          imageAlt: "เด็กชายปัญญา เรียนดี",
        },
        {
          id: "test5",
          name: "ครอบครัวสุขสันต์",
          role: "ประชาชน",
          testimonial: "พวกเราดีใจที่มีสวนสาธารณะที่สวยงามและปลอดภัย ทำให้ได้ใช้เวลาร่วมกันอย่างมีความสุขค่ะ",
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-happy-family-outdoors_23-2150348474.jpg",
          imageAlt: "ครอบครัวสุขสันต์",
        },
      ]}
      title="เสียงจากประชาชน"
      description="ความประทับใจและความคิดเห็นจากผู้ใช้บริการและผู้มีส่วนร่วมในการพัฒนาชุมชน"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq1",
          title: "เทศบาลเปิดทำการวันใดบ้าง?",
          content: "เทศบาลตำบลป่าแมตเปิดทำการวันจันทร์ถึงวันศุกร์ ตั้งแต่เวลา 08:30 น. ถึง 16:30 น. ยกเว้นวันหยุดราชการ",
        },
        {
          id: "faq2",
          title: "สามารถชำระภาษีบำรุงท้องที่ได้ที่ไหน?",
          content: "ประชาชนสามารถชำระภาษีบำรุงท้องที่ได้ที่สำนักงานเทศบาล หรือผ่านช่องทางออนไลน์ที่เว็บไซต์ของเทศบาล",
        },
        {
          id: "faq3",
          title: "มีบริการขอใบอนุญาตก่อสร้างหรือไม่?",
          content: "มีค่ะ สามารถติดต่อขอรับแบบฟอร์มและยื่นเอกสารได้ที่ฝ่ายโยธาของเทศบาล",
        },
      ]}
      title="คำถามที่พบบ่อย"
      description="รวมคำถามที่ประชาชนสอบถามเข้ามาบ่อยครั้ง พร้อมคำตอบที่ชัดเจนและเป็นประโยชน์"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient",
      }}
      text="ติดต่อเรา"
      buttons={[
        {
          text: "ส่งข้อเสนอแนะ",
          href: "mailto:info@pamaet.go.th",
        },
        {
          text: "แผนที่สำนักงาน",
          href: "https://maps.app.goo.gl/example",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      logoSrc="http://img.b2bpic.net/free-photo/cambodia-heart-banner_187299-34032.jpg"
      logoAlt="เทศบาลตำบลป่าแมต Logo"
      columns={[
        {
          items: [
            {
              label: "หน้าแรก",
              href: "#hero",
            },
            {
              label: "เกี่ยวกับเรา",
              href: "#about",
            },
            {
              label: "บริการ",
              href: "#features",
            },
          ],
        },
        {
          items: [
            {
              label: "โครงการ",
              href: "#projects",
            },
            {
              label: "บุคลากร",
              href: "#team",
            },
            {
              label: "ติดต่อ",
              href: "#contact",
            },
          ],
        },
        {
          items: [
            {
              label: "นโยบายความเป็นส่วนตัว",
              href: "#",
            },
            {
              label: "ข้อกำหนดและเงื่อนไข",
              href: "#",
            },
            {
              label: "แผนที่",
              href: "https://maps.app.goo.gl/example",
            },
          ],
        },
      ]}
      logoText="เทศบาลตำบลป่าแมต"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
