"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
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">
          <TeamCardTwo
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            gridVariant="two-columns-alternating-heights"
            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: "emilio",                name: "Emilio",                role: "Istruttore IKO Level 2 | Guida Escursionistica",                description: "Fondatore e anima della scuola. Con oltre 20 anni di esperienza, Emilio è il pilastro della sicurezza e della progressione. La sua calma e la sua meticolosità sono perfette per trasformare ogni studente in un kiters indipendente e sicuro.",                imageSrc: "https://images.unsplash.com/photo-1560250097-f5000a6e026c?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",                imageAlt: "Portrait of Emilio"
              },
              {
                id: "diego",                name: "Diego",                role: "Istruttore FIV | Specialista Principianti",                description: "Sempre sorridente e paziente, Diego è la guida ideale per chi si approccia al kitesurf per la prima volta. La sua capacità di semplificare anche i concetti più complessi rende l'apprendimento un percorso fluido e divertente.",                imageSrc: "https://images.unsplash.com/photo-1507003211169-e69fe254be2f?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",                imageAlt: "Portrait of Diego"
              },
              {
                id: "valerio",                name: "Valerio",                role: "Head Coach | Esperto di Freestyle",                description: "Conosciuto per la sua energia contagiosa e la sua maestria nel freestyle, Valerio spinge i limiti e ispira i nostri allievi più esperti. Se cerchi di migliorare i tuoi salti o imparare nuove manovre, lui è la persona giusta.",                imageSrc: "https://images.unsplash.com/photo-1544723795-3fb6469e380f?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",                imageAlt: "Portrait of Valerio"
              },
              {
                id: "osiris",                name: "Osiris",                role: "Assistente Istruttrice | Regina del Downwind",                description: "La nostra esperta di downwind e sicurezza, Osiris ha un occhio attento per i dettagli e assicura che ogni sessione si svolga in totale tranquillità. La sua presenza è una garanzia di divertimento e supporto.",                imageSrc: "https://images.unsplash.com/photo-1560281692-a1b7e61b7f94?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",                imageAlt: "Portrait of Osiris"
              }
            ]}
          />
        </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>
  );
}
