"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import TeamCardTen from '@/components/sections/team/TeamCardTen';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="mediumSizeLargeTitles"
        background="grid"
        cardStyle="layered-gradient"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        { name: "Home", id: "hero" },
        { name: "About", id: "about" },
        { name: "Approach", id: "approach" },
        { name: "Team", id: "team" },
        { name: "Contact", id: "contact" },
      ]}
      brandName="Calamvale Physiotherapy"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDualMedia
      background={{ variant: "radial-gradient" }}
      title="Expert Physiotherapy in a Calm, Modern Clinic"
      description="At Calamvale Physiotherapy, we help you recover from pain, restore movement, and return to the things you love — with personalised, hands-on treatment in a welcoming environment."
      tag="Friendly care | Thorough assessments | Evidence-based treatment"
      buttons={[
        { text: "Book an Appointment", href: "https://calamvale-physiotherapy.au4.cliniko.com/bookings" },
        { text: "Contact Our Team", href: "#contact" },
      ]}
      mediaItems={[
        { imageSrc: "http://img.b2bpic.net/free-photo/patient-doing-physical-rehabilitation-helped-by-therapists_23-2149227805.jpg?_wi=1", imageAlt: "Modern physiotherapy clinic" },
        { imageSrc: "http://img.b2bpic.net/free-photo/empty-hospital-corridor-with-glass-doors_181624-19954.jpg", imageAlt: "Physiotherapy treatment space" }
      ]}
      mediaAnimation="slide-up"
      rating={5}
      ratingText="Trusted by our Brisbane community"
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="About Our Clinic"
      description="Calamvale Physiotherapy is a modern, patient-focused clinic in Brisbane known for its clean, organised, and calming environment. We focus on more than just symptoms by building a clear recovery plan tailored to you."
      metrics={[
        { value: "100%", title: "Focused Care" },
        { value: "Personal", title: "Recovery Plan" },
        { value: "Evidence", title: "Based Approach" },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/close-up-surgeon-doctor-wearing-medical-uniform-typing-recovery-treatment_482257-10574.jpg?_wi=1"
      imageAlt="Clinic interior design"
      mediaAnimation="blur-reveal"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="approach" data-section="approach">
      <FeatureCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="two-columns-alternating-heights"
      useInvertedBackground={true}
      features={[
        {
          title: "Detailed Assessment",          description: "We identify the true cause of your pain through thorough physical assessment and movement analysis.",          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-young-woman-talking-nurse_23-2149341522.jpg",          imageAlt: "Full shot young woman talking to nurse"},
        {
          title: "Hands-On Treatment",          description: "Manual therapy, dry needling, soft tissue release, and joint mobilisation to reduce pain.",          imageSrc: "http://img.b2bpic.net/free-photo/patient-doing-physical-rehabilitation-helped-by-therapists_23-2149227805.jpg?_wi=2",          imageAlt: "Full shot young woman talking to nurse"},
        {
          title: "Individual Exercise Plan",          description: "A structured program designed to rebuild strength, stability, and confidence.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-surgeon-doctor-wearing-medical-uniform-typing-recovery-treatment_482257-10574.jpg?_wi=2",          imageAlt: "Full shot young woman talking to nurse"},
        {
          title: "Long-Term Results",          description: "Our goal is not just short-term relief, but long-term recovery and prevention of recurrence.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-female-doctor_23-2148962392.jpg?_wi=1",          imageAlt: "Full shot young woman talking to nurse"},
      ]}
      title="Our Treatment Approach"
      description="We take the time to understand your condition, identify contributing factors, and build a recovery plan designed to rebuild strength, stability, and confidence."
    />
  </div>

  <div id="conditions" data-section="conditions">
      <FeatureCardOne
      animationType="depth-3d"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      features={[
        {
          title: "Back & Neck Pain",          description: "Lower back pain, sciatica, and neck/shoulder pain.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-desk-with-computer-hospital-ward-clinic-check-patient-information-files-space-with-monitor-used-online-medical-documents-healthcare-system-emergency-room_482257-34892.jpg",          imageAlt: "Close up of desk with computer in hospital ward clinic to check patient information and files. Space with monitor used for online medical documents and healthcare system. Emergency room"},
        {
          title: "Joint & Sports",          description: "Knee/hip pain and sports injury rehabilitation.",          imageSrc: "http://img.b2bpic.net/free-photo/patient-doing-physical-rehabilitation-helped-by-therapists_23-2149227805.jpg?_wi=3",          imageAlt: "Close up of desk with computer in hospital ward clinic to check patient information and files. Space with monitor used for online medical documents and healthcare system. Emergency room"},
        {
          title: "Post-Surgical Care",          description: "Structured plans for full recovery after your operation.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-surgeon-doctor-wearing-medical-uniform-typing-recovery-treatment_482257-10574.jpg?_wi=3",          imageAlt: "Close up of desk with computer in hospital ward clinic to check patient information and files. Space with monitor used for online medical documents and healthcare system. Emergency room"},
        {
          title: "Chronic Pain",          description: "Headaches, postural issues, and nerve-related pain.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-female-doctor_23-2148962392.jpg?_wi=2",          imageAlt: "Close up of desk with computer in hospital ward clinic to check patient information and files. Space with monitor used for online medical documents and healthcare system. Emergency room"},
      ]}
      title="Conditions We Treat"
      description="From sports injuries to post-surgical rehabilitation, our team provides evidence-based care tailored to your specific needs."
    />
  </div>

  <div id="expectations" data-section="expectations">
      <FaqBase
      textboxLayout="split"
      useInvertedBackground={true}
      faqs={[
        { id: "1", title: "Is the environment welcoming?", content: "Yes, our clinic offers a calm, professional, and clean environment to help you focus on recovery." },
        { id: "2", title: "Will I get one-on-one time?", content: "Absolutely. We pride ourselves on one-on-one physiotherapy care tailored to your goals." },
        { id: "3", title: "How do you explain my condition?", content: "We use simple, clear language to explain your diagnosis so you fully understand your recovery journey." },
        { id: "4", title: "What about my first visit?", content: "Your first visit involves a detailed history taking, physical assessment, and clear diagnosis with a plan forward." },
      ]}
      title="What You Can Expect"
      description="We are committed to providing high-quality care in a supportive and respectful environment."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardTen
      useInvertedBackground={false}
      title="Our Dedicated Team"
      tag="Qualified & Friendly"
      membersAnimation="slide-up"
      members={[
        { id: "1", name: "Sarah Miller", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-female-doctor_23-2148962392.jpg?_wi=3" },
        { id: "2", name: "David Chen", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-female-doctor-checking-patient-condition_23-2148328401.jpg" },
        { id: "3", name: "Emma Wright", imageSrc: "http://img.b2bpic.net/free-photo/successful-cheerful-young-diverse-business-people_1262-1185.jpg" },
      ]}
      memberVariant="card"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="scale-rotate"
      textboxLayout="split"
      useInvertedBackground={true}
      testimonials={[
        { id: "1", name: "Anna S.", handle: "@anna", testimonial: "The hands-on treatment helped my back pain tremendously.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-holding-book-close-up_23-2148396302.jpg" },
        { id: "2", name: "Mark L.", handle: "@mark", testimonial: "Clear recovery plan and friendly team. Very supportive.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-man-holding-cup_23-2149392123.jpg" },
        { id: "3", name: "Sophie B.", handle: "@sophie", testimonial: "Excellent physiotherapy care. I'm back running again!", imageSrc: "http://img.b2bpic.net/free-photo/two-relaxed-women-hugging-looking-each-other_1262-16529.jpg" },
        { id: "4", name: "John R.", handle: "@john", testimonial: "Finally, a clinic that focuses on long-term results.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-athlete-doing-physiotherapy_23-2149866136.jpg" },
        { id: "5", name: "Grace P.", handle: "@grace", testimonial: "The personalized care made all the difference.", imageSrc: "http://img.b2bpic.net/free-photo/group-happy-businesswomen-working-office_23-2147955078.jpg" },
      ]}
      title="Patient Stories"
      description="See why our Brisbane community trusts us with their recovery."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        { id: "faq-1", title: "Do I need a doctor's referral?", content: "You do not need a doctor's referral to see our physiotherapists unless you are claiming through WorkCover or DVA." },
        { id: "faq-2", title: "Is private health cover accepted?", content: "Yes, we accept all major private health funds with HICAPS available for on-the-spot claiming." },
        { id: "faq-3", title: "What should I bring?", content: "Please bring any recent scans, relevant medical documents, and wear comfortable clothing that allows us to assess the injured area." },
      ]}
      title="Frequently Asked Questions"
      description="Common answers for our new patients."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={true}
      background={{ variant: "plain" }}
      tag="Get Started Today"
      title="Book Your Appointment"
      description="Pain doesn’t need to be permanent — let’s work together to help you move better again."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Calamvale Physiotherapy",          items: [
            { label: "About Us", href: "#about" },
            { label: "Our Team", href: "#team" },
            { label: "Contact Us", href: "#contact" },
          ],
        },
        {
          title: "Treatments",          items: [
            { label: "Back & Neck Pain", href: "#conditions" },
            { label: "Sports Injuries", href: "#conditions" },
            { label: "Post-Surgical", href: "#conditions" },
          ],
        },
        {
          title: "Legal",          items: [
            { label: "Privacy Policy", href: "#" },
            { label: "Terms & Conditions", href: "#" },
          ],
        },
      ]}
      bottomLeftText="© 2024 Calamvale Physiotherapy. All rights reserved."
      bottomRightText="Brisbane South physiotherapy excellence."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}