"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/MetricSplitMediaAbout';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { CheckCircle, Award, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="largeSmall"
        background="grid"
        cardStyle="glass-elevated"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingInline
            navItems={[
              { name: "Home", id: "hero" },
              { name: "About", id: "about" },
              { name: "Diagrams", id: "diagrams" },
              { name: "Detection", id: "detection" },
              { name: "Support", id: "support" },
            ]}
            brandName="Cancer Info"
            button={{ text: "Get Started", href: "#about" }}
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroBillboardGallery
            background={{ variant: "gradient-bars" }}
            title="Testicular Cancer Information"
            description="Understanding symptoms, diagnosis, treatment, and support is your first step towards health. Access trusted, accurate information for patients and families."
            mediaItems={[
              { imageSrc: "https://img.freepik.com/free-photo/doctor-explaining-medical-results-patient_23-2148753232.jpg", imageAlt: "Doctor discussing health" },
              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D0BY6YGjaH2FevfcX4Qru3wDep/uploaded-1778012613419-w2dugafv.jpg", imageAlt: "Testicular health awareness model" },
              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D0BY6YGjaH2FevfcX4Qru3wDep/uploaded-1778012554202-wiir7dx9.jpg", imageAlt: "Patient support and care" },
            ]}
            buttons={[{ text: "Get Started", href: "#about" }]}
          />
        </div>

        <div id="about" data-section="about">
          <AboutMetric
            useInvertedBackground={false}
            title="Testicular Cancer Overview"
            description="An overview of the high curability rates and importance of early detection in testicular health management."
            metrics={[
              { title: "Early Detection Success", value: "95%+" },
              { title: "Curability Rate", value: "High" },
              { title: "Survivor Network", value: "Growing" },
            ]}
            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D0BY6YGjaH2FevfcX4Qru3wDep/uploaded-1778012693115-goqipzbl.jpg"
            metricsAnimation="slide-up"
          />
        </div>

        <div id="diagrams" data-section="diagrams">
          <FeatureCardTwentyEight
            animationType="slide-up"
            textboxLayout="split"
            useInvertedBackground={false}
            features={[
              { id: "1", title: "Reproductive system", subtitle: "you may be asking if you are aloud to have kids or have a healthy system and the anwser is yes you can after surgical removal it is 95% proven that you can live a normal life", category: "Anatomy", value: "Details" },
              { id: "2", title: "Testicle Diagram", subtitle: "", category: "Visualization", value: "Detailed" },
              { id: "3", title: " Diagram", subtitle: "", category: "Staging", value: "Levels" },
              { id: "4", title: "Types of Treatment", subtitle: "there are different types of treaments the fastest being surgical removal of the infected testical,then there is chemotherepy and radiation ", category: "Treatment", value: "Protocols" },
            ]}
            title="Visual Medical Information"
            description="Review these illustrative diagrams to better understand testicular health, staging, and common medical pathways."
          />
        </div>

        <div id="risks" data-section="risks">
          <FeatureCardTwentyEight
            animationType="slide-up"
            textboxLayout="split"
            useInvertedBackground={true}
            features={[
              { id: "1", title: "Undescended Testicle", subtitle: "Structural factor", category: "Risk", value: "Factor" },
              { id: "2", title: "How do you get it you may ask? ", subtitle: "Testicular cancer occurs when germ cells in the testical undergo DNA changes causing them to multiply rapidly and form a tumer  ", category: "Risk", value: "Factor" },
              { id: "3", title: "How do doctors treat the cancer? ", subtitle: "testicaler cancer treatment is highly effective usually involving surgical removal of the affected testical.Docters would sugest chemotherapy or radition depending on the stage or type ", category: "Risk", value: "Factor" },
            ]}
            title="Know the Risks"
            description="Factors for testicular cancer include having an undescended testicle, family history, and personal history."
          />
        </div>

        <div id="detection" data-section="detection">
          <FeatureCardTwentyEight
            animationType="opacity"
            textboxLayout="split"
            useInvertedBackground={false}
            features={[
              { id: "1", title: "Self-Examination", subtitle: "Perform a monthly testicular self-exam, preferably in a warm shower, by gently rolling each testicle between your fingers to check for painless lumps, swelling, or changes in size, shape, or consistency ", category: "Method", value: "Weekly" },
              { id: "2", title: "Regular Checkups", subtitle: "", category: "Screening", value: "Annual" },
              { id: "3", title: "Seek Medical Advice", subtitle: "", category: "Action", value: "Urgent" },
            ]}
            title="Finding Early Signs"
            description="Recognizing physical changes early is the best way to ensure timely treatment."
          />
        </div>

        <div id="symptoms" data-section="symptoms">
          <FeatureCardTwentyEight
            animationType="scale-rotate"
            textboxLayout="split"
            useInvertedBackground={true}
            features={[
              { id: "1", title: "Painless Lump", subtitle: "Key indicator", category: "Symptom", value: "Notice" },
              { id: "2", title: "Heaviness", subtitle: "Common symptoms of testicular cancer include a painless lump or swelling in one testicle, a feeling of heaviness in the scrotum, and a dull ache in the lower abdomen or groin ", category: "Symptom", value: "Notice" },
              { id: "3", title: "Fluid Swelling", subtitle: "Sudden changes", category: "Symptom", value: "Urgent" },
            ]}
            title="Common Symptoms"
            description="Pay attention to these physical indicators that warrant a doctor's visit."
          />
        </div>

        <div id="support" data-section="support">
          <FeatureCardTwentyEight
            animationType="opacity"
            textboxLayout="split"
            useInvertedBackground={false}
            features={[
              { id: "1", title: "Emotional Wellbeing", subtitle: "If you are falling into depresion or feeling overwellmed reach out to someone you trust or a therapist or a loved one ", category: "Support", value: "Care" },
              { id: "2", title: "Sexuality", subtitle: "", category: "Support", value: "Resources" },
              { id: "3", title: "Fertility Resources", subtitle: "you be wondering can i have kids after having testicalur cancer the anwser is yes evan with one testical is possible", category: "Support", value: "Available" },
            ]}
            title="Supportive Care"
            description="Resources to help navigate the physical and emotional aspects of the journey."
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardOne
            animationType="slide-up"
            gridVariant="uniform-all-items-equal"
            textboxLayout="split"
            useInvertedBackground={true}
            testimonials={[
              { id: "1", name: "Mark S.", role: "Survivor", company: "Patient", rating: 5, imageSrc: "https://img.freepik.com/free-photo/close-up-portrait-happy-smiling-man-beard_23-2148443588.jpg" },
              { id: "2", name: "James L.", role: "Patient", company: "Recovering", rating: 5, imageSrc: "https://img.freepik.com/free-photo/portrait-handsome-smiling-young-man_23-2148753245.jpg" },
            ]}
            title="Patient Perspectives"
            description="Stories and insights from those who have navigated the diagnosis."
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqBase
            useInvertedBackground={false}
            faqs={[
              { id: "1", title: "Is testicular cancer common?", content: "It is the most common cancer in young people, but overall it remains rare." },
              { id: "2", title: "Can it be prevented?", content: "There is no guaranteed way to prevent it, but regular self-exams aid early discovery." },
              { id: "3", title: "What is the age range?", content: "While it can occur at any age, it is most frequently diagnosed in men between the ages of 15 and 35." },
              { id: "4", title: "Where can I find support?", content: "Many national cancer organizations provide dedicated support lines, peer mentorship, and wellness resources." }
            ]}
            title="Frequently Asked Questions"
            description="Answers to common queries about testicular health."
            faqsAnimation="blur-reveal"
            textboxLayout="split"
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactCenter
            tag="Contact"
            title="Get Professional Support"
            description="Reach out to professional support services in Canada, including BC Cancer and the Canadian Cancer Society."
            background={{ variant: "gradient-bars" }}
            buttonText="Contact CCS"
            useInvertedBackground={false}
            onSubmit={(email) => console.log(email)}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoReveal
            logoText="Cancer Info Canada"
            leftLink={{ text: "Home", href: "#hero" }}
            rightLink={{ text: "Support", href: "#support" }}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
