"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Check, CheckCircle, Eye, Glasses, Heart, HelpCircle, Shield, Sparkles, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="compact"
      sizing="mediumLarge"
      background="none"
      cardStyle="glass-depth"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Kochi Eye Care"
          navItems={[
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Book Appointment",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="Clear Vision for a Better Tomorrow"
          description="Comprehensive eye care services delivered with precision and compassion. From routine eye exams to advanced surgical procedures, Kochi Eye Care Center is committed to preserving and enhancing your vision."
          background="radial-gradient"
          avatars={[
            {
              src: "http://img.b2bpic.net/free-photo/doctor-using-stethoscope-female-patient_23-2148757400.jpg",              alt: "professional eye care clinic interior"
            }
          ]}
          avatarText="Trusted by thousands of satisfied patients"
          buttons={[
            { text: "Book Your Appointment", href: "#contact" },
            { text: "Learn More", href: "#about" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "About Kochi Eye Care Center" },
            {
              type: "image",              src: "http://img.b2bpic.net/free-photo/professional-female-optician-pointing-eye-chart-timely-diagnosis-vision-portrait-optician-asking-patient-eye-exam-test-with-eye-chart-monitor-his-clinic_657921-173.jpg",              alt: "experienced eye specialist doctor portrait"
            }
          ]}
          useInvertedBackground={false}
          buttons={[
            { text: "Schedule a Consultation", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureBorderGlow
          title="Comprehensive Eye Care Services"
          description="We offer a full range of eye care solutions tailored to your individual needs, from preventive care to advanced treatments."
          tag="Our Services"
          tagIcon={Eye}
          tagAnimation="slide-up"
          features={[
            {
              icon: Glasses,
              title: "Refraction & Glasses Fitting",              description: "Advanced refraction technology to determine your precise prescription for optimal vision correction."
            },
            {
              icon: Zap,
              title: "Cataract Surgery",              description: "Minimally invasive surgical procedures using cutting-edge technology for quick recovery."
            },
            {
              icon: Shield,
              title: "Diabetic Retinopathy Screening",              description: "Specialized screening and management for patients with diabetes to prevent vision loss."
            },
            {
              icon: Heart,
              title: "Comprehensive Eye Exams",              description: "Thorough evaluations to detect eye diseases early and maintain long-term eye health."
            },
            {
              icon: CheckCircle,
              title: "Contact Lens Fitting",              description: "Professional fitting and consultation for comfortable and safe contact lens wear."
            },
            {
              icon: Sparkles,
              title: "Vision Correction Surgery",              description: "LASIK and other refractive surgery options to reduce your dependence on glasses."
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          buttons={[
            { text: "Explore All Services", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="Why Choose Kochi Eye Care Center"
          tag="Our Impact"
          tagAnimation="slide-up"
          metrics={[
            { id: "patients", value: "15,000+", description: "Satisfied Patients Treated" },
            { id: "experience", value: "20+", description: "Years of Experience" },
            { id: "surgeries", value: "5,000+", description: "Successful Surgeries" },
            { id: "staff", value: "50+", description: "Qualified Medical Staff" }
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Patient Testimonials"
          description="Hear from our patients about their positive experiences and life-changing results with our eye care services."
          tag="Real Stories"
          tagIcon={Heart}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",              name: "Rajesh Kumar",              role: "Business Owner",              company: "Tech Solutions",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-patient-doctor-chatting_23-2149856220.jpg?_wi=1"
            },
            {
              id: "2",              name: "Priya Sharma",              role: "Teacher",              company: "International School",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-african-american-doctor-nursing-home_637285-11403.jpg?_wi=1"
            },
            {
              id: "3",              name: "Amit Patel",              role: "Retired Professional",              company: "Community Leader",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/side-view-patient-undergoing-physical-evaluation_23-2150165417.jpg"
            },
            {
              id: "4",              name: "Anjali Nair",              role: "Software Engineer",              company: "Tech Startup",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/couple-suffering-from-infertility_23-2149430773.jpg"
            },
            {
              id: "5",              name: "Vikram Singh",              role: "Accountant",              company: "Finance Corp",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-patient-doctor-chatting_23-2149856220.jpg?_wi=2"
            },
            {
              id: "6",              name: "Deepa Menon",              role: "Consultant",              company: "Business Advisory",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-african-american-doctor-nursing-home_637285-11403.jpg?_wi=2"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          buttons={[
            { text: "Read More Stories", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Find answers to common questions about our services, procedures, and patient care."
          tag="Support"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/empty-hospital-reception-counter-hallway-waiting-room-seats-medical-examination-appointment-with-physician-registration-desk-with-waiting-area-help-patients-with-disease-diagnosis_482257-51632.jpg?_wi=1"
          imageAlt="eye clinic comfortable reception area"
          mediaAnimation="slide-up"
          mediaPosition="right"
          faqs={[
            {
              id: "1",              title: "How often should I get an eye exam?",              content: "We recommend a comprehensive eye exam every 1-2 years for adults. Patients with existing eye conditions or those over 60 should have exams more frequently. Contact us to determine the best schedule for your needs."
            },
            {
              id: "2",              title: "Are your surgical procedures safe?",              content: "Yes, all our procedures are performed by experienced ophthalmologists using state-of-the-art equipment. We follow stringent safety protocols and maintain an excellent safety record."
            },
            {
              id: "3",              title: "Do you accept insurance?",              content: "We accept most major insurance plans. Please call our office with your insurance details, and our staff will verify your coverage and answer any billing questions."
            },
            {
              id: "4",              title: "What is the recovery time after cataract surgery?",              content: "Most patients experience improved vision within a few days. Full recovery typically takes 4-6 weeks. We provide detailed post-operative care instructions to ensure optimal healing."
            },
            {
              id: "5",              title: "Can I get contact lenses if I have astigmatism?",              content: "Yes, we offer specialized contact lenses for astigmatism called toric lenses. Our experts will ensure a perfect fit for your comfort and clear vision."
            },
            {
              id: "6",              title: "How do I schedule an appointment?",              content: "You can book an appointment through our website contact form, call us directly, or visit our clinic. We offer flexible scheduling to accommodate your busy lifestyle."
            }
          ]}
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="smooth"
          showCard={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Schedule Your Appointment Today"
          description="Book a consultation with our expert eye care professionals. Fill out the form below, and our team will contact you within 24 hours."
          imageSrc="http://img.b2bpic.net/free-photo/empty-hospital-reception-counter-hallway-waiting-room-seats-medical-examination-appointment-with-physician-registration-desk-with-waiting-area-help-patients-with-disease-diagnosis_482257-51632.jpg?_wi=2"
          imageAlt="Kochi Eye Care Center"
          mediaAnimation="slide-up"
          mediaPosition="left"
          useInvertedBackground={true}
          inputs={[
            { name: "fullName", type: "text", placeholder: "Your Full Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email Address", required: true },
            { name: "phone", type: "tel", placeholder: "Your Phone Number", required: true },
            { name: "service", type: "text", placeholder: "Service Interested In", required: false }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your eye care needs or any questions...",            rows: 5,
            required: false
          }}
          buttonText="Book Appointment"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Kochi Eye Care Center"
          columns={[
            {
              items: [
                { label: "Home", href: "#" },
                { label: "About Us", href: "#about" },
                { label: "Services", href: "#services" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              items: [
                { label: "Eye Exams", href: "#services" },
                { label: "Cataract Surgery", href: "#services" },
                { label: "Vision Correction", href: "#services" },
                { label: "Contact Lenses", href: "#services" }
              ]
            },
            {
              items: [
                { label: "Patient Portal", href: "#" },
                { label: "Insurance", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              items: [
                { label: "Phone", href: "tel:+918xx-xxx-xxxx" },
                { label: "Email", href: "mailto:info@kochieye.com" },
                { label: "Address", href: "#" },
                { label: "Hours", href: "#" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Contact Us", href: "#contact" },
                { label: "Sitemap", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}