"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
import FooterMedia from "@/components/sections/footer/FooterMedia";

export default function HomePage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "About", id: "/about" },
    { name: "Services", id: "/services" },
    { name: "Location", id: "location" },
    { name: "FAQ", id: "faq" },
  ];

  const handleNavClick = (id: string) => {
    if (id.startsWith("/")) {
      // This is handled by Link in navbar
      return;
    }
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
    }
  };

  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={navItems}
          button={{
            text: "Book Your Session",
            href: "https://vagaro.com",
          }}
          brandName="Janjao Thai Spa"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="Janjao Thai Spa & Wellness"
          description="Authentic Thai Massage in San Ramon - Traditional Thai healing, herbal rituals, and expert therapists designed for deep restoration and modern comfort."
          buttons={[
            {
              text: "Book Your Session",
              href: "https://vagaro.com",
            },
            {
              text: "View Services",
              href: "/services",
            },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/woman-salon-having-therapy_23-2148824064.jpg"
          imageAlt="Serene Thai spa environment with warm lighting"
          showDimOverlay={true}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="Where Tradition Meets Modern Comfort"
          description={[
            "At Janjao Thai Spa & Wellness, we bring the art of authentic Thai massage to San Ramon. Our treatments combine ancient Thai techniques with modern therapeutic comfort — creating a deeply restorative experience for body and mind.",
            "Every session is personalized to your comfort level, tension areas, and wellness goals. Our expert therapists are dedicated to delivering professional, authentic care in calm, private luxury suites.",
          ]}
          buttons={[
            {
              text: "Learn More",
              href: "/services",
            },
          ]}
          showBorder={false}
          useInvertedBackground={false}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentyFour
          title="Signature Therapies"
          description="Choose from our authentic Thai massage and therapeutic bodywork services, each designed to address your specific wellness needs."
          features={[
            {
              id: "1",
              title: "Traditional Thai Massage",
              author: "60-120 min sessions",
              description:
                "Deep stretching, acupressure, and rhythmic compression to improve flexibility and relieve tension. Perfect for stiffness, athletes, and chronic tightness.",
              tags: ["Starting at $92"],
              imageSrc: "http://img.b2bpic.net/free-photo/deep-thumb-massage-calf-spa-trigger-release_169016-69390.jpg",
              imageAlt: "Traditional Thai massage technique",
            },
            {
              id: "2",
              title: "Swedish Serenity Massage",
              author: "60-120 min sessions",
              description:
                "Gentle flowing strokes to reduce stress and promote total relaxation. Ideal for stress relief and first-time clients seeking a calming experience.",
              tags: ["Starting at $92"],
              imageSrc: "http://img.b2bpic.net/free-photo/female-getting-professional-massage-beauty-spa-salon_181624-54510.jpg",
              imageAlt: "Swedish massage therapy session",
            },
            {
              id: "3",
              title: "Herbal Oil Blend Massage",
              author: "60-120 min sessions",
              description:
                "Warm botanical oils combined with therapeutic techniques for muscle recovery and relaxation. Best for muscle soreness and full-body renewal.",
              tags: ["Starting at $97"],
              imageSrc: "http://img.b2bpic.net/free-photo/healthy-drink-organic-blue-pea-flower-tea-with-lemon-lime_1150-25465.jpg",
              imageAlt: "Herbal oil massage with botanical ingredients",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            {
              text: "View All Services",
              href: "/services",
            },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="what-to-expect" data-section="what-to-expect">
        <MetricCardSeven
          title="Your First Visit at Janjao"
          description="We've designed every step of your experience to ensure maximum relaxation and restoration from the moment you arrive."
          metrics={[
            {
              id: "1",
              value: "10 min",
              title: "Arrive Early to Relax",
              items: [
                "Settle into our calm environment",
                "Enjoy complimentary tea or water",
                "Complete comfort preferences form",
              ],
            },
            {
              id: "2",
              value: "100%",
              title: "Personalized Care",
              items: [
                "Communicate your pressure preference",
                "Discuss any tension or pain areas",
                "Customize treatment to your goals",
              ],
            },
            {
              id: "3",
              value: "Private",
              title: "Luxury Treatment Suites",
              items: [
                "Individual suites for privacy",
                "Peaceful, quiet atmosphere",
                "Professional draping standards",
              ],
            },
            {
              id: "4",
              value: "Restored",
              title: "Leave Feeling Rebalanced",
              items: [
                "Deep restoration and renewal",
                "Improved flexibility and energy flow",
                "Lasting relief from tension",
              ],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          uniformGridCustomHeightClasses="min-h-80"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="What Our Guests Say"
          description="Real experiences from clients who've discovered restoration and renewal at Janjao Thai Spa."
          tag="Client Testimonials"
          testimonials={[
            {
              id: "1",
              name: "Sarah Martinez, Yoga Instructor",
              date: "Date: 15 February 2025",
              title: "The most authentic Thai massage experience",
              quote:
                "I've had Thai massages all over the world, and Janjao's therapists bring genuine expertise and cultural authenticity. The herbal compress ritual was incredible. I'm already booking my next session!",
              tag: "5-Star Experience",
              avatarSrc: "http://img.b2bpic.net/free-photo/vertical-shot-young-smiling-woman-with-book-reading-cafe-enjoying-morning-breakfast-coffee_1258-199215.jpg",
              imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-young-smiling-woman-with-book-reading-cafe-enjoying-morning-breakfast-coffee_1258-199215.jpg",
            },
            {
              id: "2",
              name: "Michael Chen, Executive",
              date: "Date: 10 February 2025",
              title: "Perfect remedy for work-related tension",
              quote:
                "After sitting at a desk all day, the traditional Thai massage completely relieved my tension. The therapists really knew exactly where to focus. I feel like a new person.",
              tag: "Highly Recommended",
              avatarSrc: "http://img.b2bpic.net/free-photo/young-happy-woman-having-back-massage-while-spending-day-beauty-spa_637285-7424.jpg",
              imageSrc: "http://img.b2bpic.net/free-photo/young-happy-woman-having-back-massage-while-spending-day-beauty-spa_637285-7424.jpg",
            },
            {
              id: "3",
              name: "Jennifer Rodriguez, First-Time Client",
              date: "Date: 5 February 2025",
              title: "Welcoming and professional",
              quote:
                "I was nervous for my first massage, but the staff made me feel completely comfortable. The Swedish massage was exactly what I needed, and the private suite felt like a sanctuary.",
              tag: "New Client",
              avatarSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-bride-before-event_23-2149860780.jpg",
              imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-bride-before-event_23-2149860780.jpg",
            },
            {
              id: "4",
              name: "David Kim, Athlete",
              date: "Date: 1 February 2025",
              title: "Essential for recovery",
              quote:
                "As a runner, I'm always looking for ways to improve flexibility and prevent injury. The Thai massage at Janjao is now a crucial part of my training routine.",
              tag: "Regular Client",
              avatarSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67053.jpg",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67053.jpg",
            },
            {
              id: "5",
              name: "Emily Watson, Wellness Coach",
              date: "Date: 28 January 2025",
              title: "Outstanding therapeutic care",
              quote:
                "Janjao offers the perfect blend of traditional healing and modern comfort. I recommend their services to all my clients seeking authentic wellness experiences.",
              tag: "Professional Referral",
              avatarSrc: "http://img.b2bpic.net/free-photo/young-woman-holding-tea-cup-relaxing-spa-salon_176420-7548.jpg",
              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-holding-tea-cup-relaxing-spa-salon_176420-7548.jpg",
            },
            {
              id: "6",
              name: "Patricia Lee, Retiree",
              date: "Date: 24 January 2025",
              title: "A sanctuary for relaxation",
              quote:
                "The herbal oil massage is pure bliss. The serene environment and caring therapists make me feel valued and completely at ease. I look forward to my monthly visits.",
              tag: "Loyal Client",
              avatarSrc: "http://img.b2bpic.net/free-photo/young-woman-holding-tea-cup-relaxing-spa-salon_176420-7548.jpg",
              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-holding-tea-cup-relaxing-spa-salon_176420-7548.jpg",
            },
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-photo/spring-background-with-yellow-tulips-candles-knitted-element_169016-51151.jpg"
          imageAlt="Serene spa wellness environment"
          logoText="Janjao Thai Spa & Wellness"
          copyrightText="© 2025 Janjao Thai Spa & Wellness. All rights reserved."
          columns={[
            {
              title: "Services",
              items: [
                { label: "Traditional Thai Massage", href: "/services" },
                { label: "Swedish Massage", href: "/services" },
                { label: "Herbal Oil Massage", href: "/services" },
                { label: "Prenatal Massage", href: "/services" },
              ],
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Mission", href: "/about" },
                { label: "Contact", href: "#location" },
                { label: "Gift Certificates", href: "#" },
              ],
            },
            {
              title: "Connect",
              items: [
                { label: "Book Online", href: "https://vagaro.com" },
                { label: "Call Us", href: "tel:(925)804-6917" },
                { label: "Email", href: "mailto:info@janjao.local" },
                { label: "Privacy Policy", href: "#" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}