"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { Activity, AlertCircle, Award, BarChart2, BookOpen, CheckCircle, Circle, Droplets, Eye, Heart, History, Info, Leaf, Smile, Users, Book } 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">
          <HeroCentered
            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."
            avatars={[
              { src: "http://img.b2bpic.net/free-photo/portrait-male-working-nurse_23-2150829903.jpg", alt: "Doctor" },
              { src: "http://img.b2bpic.net/free-photo/man-relaxing-sofa_329181-12161.jpg", alt: "Patient" },
              { src: "http://img.b2bpic.net/free-photo/pleased-dark-skinned-pretty-girl-has-toothy-smile-keeps-eyes-shut-embraces-her-old-friend-have-good-relationship_273609-18714.jpg", alt: "Supporter" },
            ]}
            buttons={[{ text: "Get Started", href: "#about" }]}
            marqueeItems={[
              { type: "text", text: "Early Detection" },
              { type: "text", text: "Medical Guidance" },
              { type: "text", text: "Survivor Support" },
              { type: "text", text: "Treatment Options" },
            ]}
          />
        </div>

        <div id="about" data-section="about">
          <AboutMetric
            useInvertedBackground={false}
            title="Testicular Cancer Overview"
            metrics={[
              { icon: CheckCircle, label: "Early Detection", value: "95%+" },
              { icon: Award, label: "Curability Rate", value: "High" },
              { icon: Users, label: "Survivor Network", value: "Growing" },
            ]}
            metricsAnimation="slide-up"
          />
        </div>

        <div id="diagrams" data-section="diagrams">
          <FeatureBorderGlow
            animationType="slide-up"
            textboxLayout="split"
            useInvertedBackground={false}
            features={[
              { icon: Book, title: "Reproductive Anatomy", description: "Understand the structure of the male reproductive system." },
              { icon: Eye, title: "Testicle Diagram", description: "Detailed visualization of testicle anatomy for awareness." },
              { icon: Activity, title: "Staging Diagram", description: "Clear breakdown of cancer staging levels." },
              { icon: BarChart2, title: "Treatment Flowchart", description: "Standard process from diagnosis to recovery 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">
          <FeatureBorderGlow
            animationType="slide-up"
            textboxLayout="split"
            useInvertedBackground={true}
            features={[
              { icon: AlertCircle, title: "Undescended Testicle", description: "A testicle that did not move down into the scrotum early on." },
              { icon: BookOpen, title: "Family History", description: "Having a close relative with a history of the disease." },
              { icon: History, title: "Personal History", description: "Having had testicular cancer in one testicle previously." },
            ]}
            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">
          <FeatureBorderGlow
            animationType="opacity"
            textboxLayout="split"
            useInvertedBackground={false}
            features={[
              { icon: Eye, title: "Self-Examination", description: "Regularly check for any lumps or firm areas." },
              { icon: Activity, title: "Regular Checkups", description: "Discuss any concerns with your primary healthcare provider." },
              { icon: Info, title: "Seek Medical Advice", description: "See a doctor promptly if you notice persistent changes." },
            ]}
            title="Finding Early Signs"
            description="Recognizing physical changes early is the best way to ensure timely treatment."
          />
        </div>

        <div id="symptoms" data-section="symptoms">
          <FeatureBorderGlow
            animationType="scale-rotate"
            textboxLayout="split"
            useInvertedBackground={true}
            features={[
              { icon: Circle, title: "Painless Lump", description: "A lump or enlargement in one testicle." },
              { icon: BarChart2, title: "Heaviness", description: "A feeling of heaviness in the scrotum area." },
              { icon: Droplets, title: "Fluid Swelling", description: "Sudden collection of fluid in the scrotum." },
            ]}
            title="Common Symptoms"
            description="Pay attention to these physical indicators that warrant a doctor's visit."
          />
        </div>

        <div id="support" data-section="support">
          <FeatureBorderGlow
            animationType="opacity"
            textboxLayout="split"
            useInvertedBackground={false}
            features={[
              { icon: Heart, title: "Emotional Wellbeing", description: "Access support for body image and self-esteem." },
              { icon: Smile, title: "Sexuality", description: "Information and guidance on relationships." },
              { icon: Leaf, title: "Fertility Resources", description: "Learn about fertility preservation options available." },
            ]}
            title="Supportive Care"
            description="Resources to help navigate the physical and emotional aspects of the journey."
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardSix
            animationType="slide-up"
            textboxLayout="split"
            useInvertedBackground={true}
            testimonials={[
              { id: "1", name: "Mark S.", handle: "@survivor", testimonial: "The resources were invaluable during my treatment phase.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-smling-man-with-beard-pointing-left-advertisement-suggest-click-banner_176420-33735.jpg" },
              { id: "2", name: "James L.", handle: "@patient", testimonial: "Early detection made a huge difference in my journey.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-young-man-model-dressed-jeans-clothes-fashion-man-posing_158538-4982.jpg" },
            ]}
            title="Patient Perspectives"
            description="Stories and insights from those who have navigated the diagnosis."
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqSplitText
            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." }
            ]}
            sideTitle="Frequently Asked Questions"
            sideDescription="Answers to common queries about testicular health."
            faqsAnimation="blur-reveal"
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactText
            useInvertedBackground={true}
            background={{ variant: "gradient-bars" }}
            text="Reach out to professional support services in Canada, including BC Cancer and the Canadian Cancer Society."
            buttons={[{ text: "Contact CCS", href: "https://cancer.ca" }]}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            columns={[
              { items: [{ label: "Home", href: "#hero" }, { label: "Diagrams", href: "#diagrams" }] },
              { items: [{ label: "Support", href: "#support" }] },
            ]}
            logoText="Cancer Info Canada"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}