"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function IlNostroTeamPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="medium"
      background="fluid"
      cardStyle="solid"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            navItems={[
              {
                name: "Home",                id: "/#hero"},
              {
                name: "Corsi",                id: "/#corsi"},
              {
                name: "Chi Siamo",                id: "/#chisiamo"},
              {
                name: "Il Nostro Team",                id: "/il-nostro-team"
              },
              {
                name: "Lo Spot",                id: "/#spot"},
              {
                name: "Community",                id: "/#community"},
              {
                name: "FAQ",                id: "/#faq"},
              {
                name: "Contatti",                id: "/#contatti"},
            ]}
            brandName="40 Nodi ASD"
            button={{
              text: "Prenota Ora",              href: "/#contatti"}}
          />
        </div>

        <div id="team-intro" data-section="team-intro" className="py-20 bg-background text-center">
          <div className="container mx-auto px-4 max-w-[var(--width-content-width)]">
            <h1 className="text-5xl font-extrabold text-foreground mb-4">
              Le guide del tuo divertimento in sicurezza
            </h1>
            <p className="text-lg text-foreground/80 max-w-2xl mx-auto">
              Il nostro team è composto da istruttori certificati e appassionati, pronti a condividere con te la magia del kitesurf.
              Ogni membro porta esperienza, professionalità e un tocco di allegria per rendere ogni lezione un'esperienza indimenticabile.
            </p>
          </div>
        </div>

        <div id="team-members" data-section="team-members">
          <TeamCardOne
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            gridVariant="three-columns-all-equal-width"
            title="Incontra i Nostri Istruttori"
            description="Professionisti qualificati e sempre pronti a farti volare in sicurezza. Ogni membro del team è un kiters esperto e un formatore eccezionale."
            members={[
              {
                id: "member-1",                name: "Emilio",                role: "Istruttore IKO Level 2 | Guida escursionistica \"Il vento è il mio migliore amico, e ora lo sarà anche il tuo!\"",                imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-wearing-casual-clothing-smiling-confident-pointing-side_176420-137.jpg"
              },
              {
                id: "member-2",                name: "Diego",                role: "Istruttrice FIV | Specialista principianti \"Ti farò planare prima che tu possa dire 'kitesurf'!\"",                imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-young-woman-curly-hair_171337-14285.jpg"
              },
              {
                id: "member-3",                name: "Valerio",                role: "Head Coach | Esperto di freestyle \"Se non c'è vento, c'è sempre un modo per divertirsi... ma con il vento è meglio!\"",                imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-man_171337-23429.jpg"
              },
              {
                id: "member-4",                name: "Osiris",                role: "Assistente Istruttrice | Regina del downwind \"Il mare mi chiama, e io rispondo... in kite!\"",                imageSrc: "http://img.b2bpic.net/free-photo/happy-young-pretty-woman-with-long-hair_171337-37731.jpg"
              }
            ]}
          />
        </div>

        <div id="certificazioni" data-section="certificazioni" className="py-20 bg-background-accent text-center">
          <div className="container mx-auto px-4 max-w-[var(--width-content-width)]">
            <h2 className="text-4xl font-extrabold text-foreground mb-4">
              Certificazioni Ufficiali
            </h2>
            <p className="text-lg text-foreground/80 max-w-2xl mx-auto">
              La sicurezza è la nostra priorità. Tutti i nostri istruttori sono certificati IKO (International Kiteboarding Organization) e FIV (Federazione Italiana Vela),
              garantendo il massimo standard di insegnamento e sicurezza. Siamo anche qualificati per il primo soccorso e il salvataggio in acqua.
            </p>
          </div>
        </div>

        <div id="cta" data-section="cta">
          <ContactCTA
            useInvertedBackground={false}
            background={{
              variant: "radial-gradient"}}
            tag="Pronto a unirti?"
            title="Vieni a conoscerci in spiaggia"
            description="Siamo certi che la nostra passione e professionalità ti contageranno! Prenota una lezione o semplicemente passa a trovarci per un saluto."
            buttons={[
              {
                text: "Prenota una lezione con noi",                href: "/#contatti"},
            ]}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            columns={[
              {
                items: [
                  {
                    label: "Home",                    href: "/#hero"},
                  {
                    label: "Corsi",                    href: "/#corsi"},
                  {
                    label: "Chi Siamo",                    href: "/#chisiamo"},
                ],
              },
              {
                items: [
                  {
                    label: "Lo Spot",                    href: "/#spot"},
                  {
                    label: "Community",                    href: "/#community"},
                  {
                    label: "FAQ",                    href: "/#faq"},
                ],
              },
              {
                items: [
                  {
                    label: "Contatti",                    href: "/#contatti"},
                  {
                    label: "Privacy Policy",                    href: "#"},
                  {
                    label: "Termini e Condizioni",                    href: "#"},
                ],
              },
              {
                items: [
                  {
                    label: "Facebook",                    href: "https://www.facebook.com/40nodiasd"},
                  {
                    label: "Instagram",                    href: "https://www.instagram.com/40nodiasd"},
                  {
                    label: "WhatsApp",                    href: "https://wa.me/XXXXXXXXXX"},
                ],
              },
            ]}
            logoText="40 Nodi ASD"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}