"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FooterSimple from '@/components/sections/footer/FooterSimple';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import MetricSplitMediaSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';

export default function AboutPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="medium"
        background="circleGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleCentered
            navItems={[
              { name: "Home", id: "/" },
              { name: "How It Works", id: "/how-it-works" },
              { name: "Services", id: "/services" },
              { name: "About", id: "/about" },
              { name: "Resources", id: "/blog" },
              { name: "Contact", id: "/contact" }
            ]}
            brandName="Palante STS"
            button={{ text: "Contact Us", href: "/contact" }}
          />
        </div>

        <div id="about-header" data-section="about-header">
          <TextSplitAbout
            title="Ronnie Konishi"
            description={[
              "Founder & Principal Senior Transition Specialist · California Licensed Realtor · 20 Years Experience",              "'I remember wishing there was just one person who could guide us through everything — with both expertise and compassion.'"
            ]}
            useInvertedBackground={false}
          />
        </div>

        <div id="about-story" data-section="about-story">
          <TextSplitAbout
            title="The Story"
            description={[
              "When my mother needed to move from our family home into assisted living, I thought my 20 years as a licensed California Realtor would make it easier. I knew real estate. I knew contracts and timelines and negotiations.",              "I was not prepared for the rest of it.",              "The endless phone calls to senior communities — none of whom seemed to have availability when we needed it. The contradictory advice from well-meaning friends. The sheer weight of deciding what happened to 40 years of furniture, photographs, and memories. And underneath all of it, the emotional toll on every member of our family — the guilt, the grief, the exhaustion of making enormous decisions while also trying to just be a present, loving son.",              "I remember standing in my mother's living room one afternoon, surrounded by decades of her life, thinking: there has to be a better way to do this."
            ]}
            useInvertedBackground={true}
          />
        </div>

        <div id="bring-to-family" data-section="bring-to-family">
          <MetricSplitMediaAbout
            title="What I Bring to Your Family"
            description="My role is to be your anchor. I combine professional real estate strategy with deep senior care knowledge to ensure you never have to navigate this journey alone."
            metrics={[
              { value: "20 Years", title: "Real Estate Expertise" },
              { value: "Compassion", title: "Personalized Guidance" },
              { value: "Complete", title: "End-to-End Transition" }
            ]}
            useInvertedBackground={false}
            mediaAnimation="slide-up"
            metricsAnimation="slide-up"
          />
        </div>

        <div id="who-i-serve" data-section="who-i-serve">
          <FeatureCardTwentyOne
            title="Who I Serve"
            description="I partner with families in Southern California seeking professional guidance during senior transitions."
            accordionItems={[
              { id: "s1", title: "Families in Transition", content: "Supporting adult children caring for aging parents." },
              { id: "s2", title: "Seniors Moving Forward", content: "Helping seniors find the right community and downsizing comfortably." },
              { id: "s3", title: "Real Estate Needs", content: "Those needing expert home sale management as part of their transition." }
            ]}
            useInvertedBackground={true}
            mediaPosition="right"
            videoSrc="https://www.w3schools.com/html/mov_bbb.mp4"
          />
        </div>

        <div id="about-mission" data-section="about-mission">
          <TextSplitAbout
            title="Why I Founded Palante STS"
            description={[
              "After my family's experience, I couldn't stop thinking about the thousands of Southern California families going through the same thing every single day — without a roadmap, without a guide, without anyone who could hold the whole picture at once.",              "I founded Palante Senior Transition Specialists to be the service I wished my family had. One person. One point of contact. Someone who could sell the home with genuine expertise, identify and personally vet the right senior communities, and manage the downsizing and move — all while actually understanding what the family was going through emotionally.",              "The name says it all. Pa'lante — from the Puerto Rican expression para adelante — means forward. It's what we say when we're facing something hard and we choose to keep moving. That's what every family I work with is doing. And that's the energy I bring to every engagement."
            ]}
            useInvertedBackground={false}
            buttons={[{ text: "Schedule a Call with Ronnie", href: "/contact" }]}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterSimple
            columns={[
              { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] },
              { title: "Contact", items: [{ label: "Email: hello@gopalante.com", href: "mailto:hello@gopalante.com" }] }
            ]}
            bottomLeftText="© 2026 Palante Senior Transition Specialists LLC"
            bottomRightText="All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}