"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import Link from 'next/link';
import { Sparkles, Award, Zap, TrendingUp, Star } from 'lucide-react';

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="MADRID AGENCY"
          navItems={[
            { name: "Inicio", id: "/" },
            { name: "Servicios", id: "/servicios" },
            { name: "Equipo", id: "/equipo" },
            { name: "Contacto", id: "/contacto" }
          ]}
          bottomLeftText="Madrid, España"
          bottomRightText="hello@madridagency.es"
        />
      </div>

      {/* Hero Section */}
      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Marketing que marca la diferencia"
          description="Estrategia digital y creatividad que impulsa el crecimiento de tu marca en Madrid y más allá."
          tag="Agencia de Marketing"
          tagIcon={Sparkles}
          background={{ variant: "plain" }}
          buttons={[
            { text: "Iniciar proyecto", href: "/contacto" },
            { text: "Ver casos", href: "/servicios" }
          ]}
          carouselItems={[
            {
              id: "1",
              imageSrc: "https://img.b2bpic.net/free-vector/creative-bauhaus-lines-organic-shape-template-earth-tone-color_1017-61387.jpg",
              imageAlt: "Diseño abstracto minimalista"
            },
            {
              id: "2",
              imageSrc: "https://img.b2bpic.net/free-vector/flat-abstract-art-cover-collection_23-2148984356.jpg",
              imageAlt: "Composición geométrica moderna"
            },
            {
              id: "3",
              imageSrc: "https://img.b2bpic.net/free-vector/collection-geometric-shape-poster-backdrop-decor_1017-50277.jpg",
              imageAlt: "Espacio blanco elegante"
            },
            {
              id: "4",
              imageSrc: "https://img.b2bpic.net/free-vector/bauhaus-art-contemporary-lines-pattern-layout-set_1017-61386.jpg",
              imageAlt: "Gradiente sutil profesional"
            },
            {
              id: "5",
              imageSrc: "https://img.b2bpic.net/free-vector/abstract-bauhaus-linear-figure-element-template-set_1017-62401.jpg",
              imageAlt: "Arte minimalista líneas"
            },
            {
              id: "6",
              imageSrc: "https://img.b2bpic.net/free-vector/flat-abstract-art-cover-collection_23-2148984357.jpg",
              imageAlt: "Diseño contemporáneo sofisticado"
            }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>

      {/* About Section */}
      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Sobre nosotros"
          tagIcon={Award}
          title="Transformamos visiones en resultados medibles"
          description="Somos una agencia de marketing estratégica basada en Madrid, especializada en crear campañas digitales que generan impacto real. Con más de una década de experiencia, combinamos creatividad innovadora con análisis de datos profundos para impulsar el crecimiento de nuestros clientes."
          metrics={[
            { value: "150+", title: "Proyectos completados exitosamente" },
            { value: "200%", title: "Aumento promedio en ROI de clientes" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/colleagues-discussing-their-work-laptop_53876-105333.jpg"
          imageAlt="Equipo creativo trabajando"
          useInvertedBackground="invertDefault"
        />
      </div>

      {/* Services Section */}
      <div id="services" data-section="services">
        <FeatureCardTwentyOne
          tag="Servicios"
          tagIcon={Zap}
          title="Soluciones marketing a medida"
          description="Ofrecemos un rango completo de servicios diseñados para llevar tu marca al siguiente nivel."
          accordionItems={[
            {
              id: "1",
              title: "Estrategia Digital",
              content: "Desarrollamos estrategias integrales de marketing digital basadas en análisis profundo de tu mercado, competencia y audiencia objetivo. Cada estrategia es personalizada para maximizar resultados."
            },
            {
              id: "2",
              title: "Diseño & Branding",
              content: "Creamos identidades visuales poderosas que reflejan la esencia de tu marca. Desde logos hasta sistemas de diseño completos, garantizamos coherencia y impacto visual."
            },
            {
              id: "3",
              title: "Campañas Publicitarias",
              content: "Ejecutamos campañas multi-canal en redes sociales, Google Ads, y plataformas programáticas. Cada campaña es optimizada en tiempo real para máxima conversión."
            },
            {
              id: "4",
              title: "Content Marketing",
              content: "Producimos contenido estratégico que atrae, engage y convierte. Desde blogs hasta vídeos, creamos narrativas que resuenan con tu audiencia."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/colleagues-discussing-their-work-laptop_53876-105333.jpg"
          imageAlt="Proceso de estrategia marketing"
          useInvertedBackground="noInvert"
          mediaPosition="right"
          buttons={[
            { text: "Explorar servicios", href: "/contacto" }
          ]}
        />
      </div>

      {/* Portfolio Section */}
      <div id="portfolio" data-section="portfolio">
        <BlogCardThree
          tag="Casos de éxito"
          tagIcon={TrendingUp}
          title="Nuestros casos de estudio"
          description="Descubre cómo hemos transformado marcas y multiplicado resultados para nuestros clientes."
          animationType="slide-up"
          blogs={[
            {
              id: "1",
              category: "E-commerce",
              title: "Aumento de ventas 180% en 6 meses",
              excerpt: "Cómo una tienda online incrementó dramáticamente sus conversiones mediante estrategia integrada de marketing digital.",
              imageSrc: "https://img.b2bpic.net/free-photo/digital-marketing-with-icons-business-people_53876-94833.jpg",
              imageAlt: "Caso de éxito e-commerce",
              authorName: "Agencia Madrid"
            },
            {
              id: "2",
              category: "SaaS",
              title: "Escalando startup B2B de 0 a 10K clientes",
              excerpt: "Estrategia de posicionamiento y adquisición que llevó a esta SaaS a convertirse en líder del mercado.",
              imageSrc: "https://img.b2bpic.net/free-photo/map-lying-wooden-table_53876-105723.jpg",
              imageAlt: "Caso de éxito SaaS",
              authorName: "Agencia Madrid"
            },
            {
              id: "3",
              category: "Retail",
              title: "Rebranding que triplicó la presencia digital",
              excerpt: "Transformación completa de marca que resultó en mayor engagement y posicionamiento en el mercado.",
              imageSrc: "https://img.b2bpic.net/free-photo/high-angle-people-working-with-laptop_23-2149636255.jpg",
              imageAlt: "Caso de éxito retail",
              authorName: "Agencia Madrid"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      {/* Testimonials Section */}
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          tag="Testimonios"
          tagIcon={Star}
          title="Lo que dicen nuestros clientes"
          description="Historias de éxito y transformación digital de empresas que confiaron en nosotros."
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          testimonials={[
            {
              id: "1",
              name: "Elena Fernández",
              role: "CEO",
              company: "TechStart Madrid",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-66975.jpg",
              imageAlt: "Elena Fernández"
            },
            {
              id: "2",
              name: "Juan Moreno",
              role: "Founder",
              company: "DigitalLabs",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/businesswoman-happy-be-back-work_23-2148727621.jpg",
              imageAlt: "Juan Moreno"
            },
            {
              id: "3",
              name: "Patricia Sánchez",
              role: "Marketing Director",
              company: "Fashion Boutique Madrid",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-grey-background_613910-3695.jpg",
              imageAlt: "Patricia Sánchez"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      {/* Contact Section */}
      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Newsletter"
          title="Mantente al día con nuestras insights"
          description="Recibe estrategias, casos de éxito y tendencias de marketing digital directamente en tu inbox. Contenido exclusivo diseñado para emprendedores y marketers."
          useInvertedBackground="invertDefault"
          imageSrc="https://img.b2bpic.net/free-photo/desk-arrangement-with-laptop-high-angle_23-2149073071.jpg"
          imageAlt="Espacio de trabajo creativo"
          mediaPosition="right"
          inputPlaceholder="Tu correo electrónico"
          buttonText="Suscribirse"
          termsText="Respetamos tu privacidad. Te enviamos contenido exclusivo sin spam. Puedes desuscribirte en cualquier momento."
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="MADRID AGENCY"
          columns={[
            {
              items: [
                { label: "Inicio", href: "/" },
                { label: "Servicios", href: "/servicios" },
                { label: "Equipo", href: "/equipo" }
              ]
            },
            {
              items: [
                { label: "Contacto", href: "/contacto" },
                { label: "Blog", href: "#" },
                { label: "Casos", href: "/servicios" }
              ]
            },
            {
              items: [
                { label: "hello@madridagency.es", href: "mailto:hello@madridagency.es" },
                { label: "+34 91 XXXX XXXX", href: "tel:+34911234567" },
                { label: "Madrid, España", href: "#" }
              ]
            },
            {
              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Twitter", href: "https://twitter.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}