"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import Link from 'next/link';
import { Zap, TrendingUp, HelpCircle } from 'lucide-react';

export default function ServiciosPage() {
  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>

      {/* Services Detail Section */}
      <div id="services-detail" data-section="services-detail">
        <FeatureCardTwentyOne
          tag="Nuestros Servicios"
          tagIcon={Zap}
          title="Transformación digital integral"
          description="Desarrollamos estrategias personalizadas que combinan creatividad, tecnología y análisis de datos para maximizar el impacto de tu marca en el entorno digital."
          accordionItems={[
            {
              id: "1",              title: "Estrategia Digital Integral",              content: "Análisis profundo del mercado, definición de objetivos, identificación de audiencias clave y desarrollo de un roadmap estratégico personalizado que incluye canales, mensajes y KPIs específicos para tu industria."
            },
            {
              id: "2",              title: "Diseño & Branding Avanzado",              content: "Creación de identidades visuales cohesivas desde la conceptualización hasta la implementación. Incluye diseño de logos, paletas de colores, tipografías, guidelines de marca y aplicaciones digitales y físicas."
            },
            {
              id: "3",              title: "Campañas Publicitarias Multi-canal",              content: "Gestión completa de campañas en Google Ads, Facebook, Instagram, LinkedIn y plataformas programáticas. Optimización continua basada en datos, A/B testing y reporting detallado de performance."
            },
            {
              id: "4",              title: "Content Marketing & SEO",              content: "Producción de contenido estratégico optimizado para SEO: blogs, videos, infografías, podcasts y contenido para redes sociales. Incluye keyword research, link building y optimización técnica."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/colleagues-discussing-their-work-laptop_53876-105333.jpg"
          imageAlt="Equipo desarrollando estrategia digital"
          useInvertedBackground="noInvert"
          mediaPosition="left"
          buttons={[
            { text: "Solicitar consultoría", href: "/contacto" }
          ]}
        />
      </div>

      {/* Portfolio Cases Section */}
      <div id="portfolio-cases" data-section="portfolio-cases">
        <BlogCardThree
          tag="Resultados Reales"
          tagIcon={TrendingUp}
          title="Casos de éxito detallados"
          description="Explora en profundidad cómo hemos ayudado a empresas de diferentes sectores a alcanzar y superar sus objetivos de marketing digital."
          animationType="slide-up"
          blogs={[
            {
              id: "1",              category: "E-commerce Fashion",              title: "De 50K a 500K en ventas anuales",              excerpt: "Transformación completa de una boutique online: rebranding, nueva web, estrategia SEO y campañas pagadas que multiplicaron las ventas por 10 en 18 meses.",              imageSrc: "https://img.b2bpic.net/free-photo/digital-marketing-with-icons-business-people_53876-94833.jpg",              imageAlt: "Caso de éxito fashion e-commerce",              authorName: "Madrid Agency Team"
            },
            {
              id: "2",              category: "SaaS B2B",              title: "Reducción de CAC en 60% con inbound",              excerpt: "Desarrollo de estrategia de content marketing y lead nurturing que redujo el costo de adquisición de clientes mientras aumentaba la calidad de leads.",              imageSrc: "https://img.b2bpic.net/free-photo/map-lying-wooden-table_53876-105723.jpg",              imageAlt: "Caso de éxito SaaS B2B",              authorName: "Madrid Agency Team"
            },
            {
              id: "3",              category: "Restauración",              title: "300% más reservas con marketing local",              excerpt: "Estrategia de marketing local, optimización de Google My Business y campañas geo-localizadas que triplicaron las reservas de un grupo de restaurantes.",              imageSrc: "https://img.b2bpic.net/free-photo/high-angle-people-working-with-laptop_23-2149636255.jpg",              imageAlt: "Caso de éxito restauración",              authorName: "Madrid Agency Team"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      {/* FAQ Section */}
      <div id="faq" data-section="faq">
        <FaqDouble
          tag="Preguntas frecuentes"
          tagIcon={HelpCircle}
          title="Todo lo que necesitas saber"
          description="Respuestas detalladas a las preguntas más importantes sobre nuestros servicios, procesos y metodología de trabajo."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          faqs={[
            {
              id: "1",              title: "¿Cómo es vuestro proceso de trabajo?",              content: "Iniciamos con una auditoría completa de tu situación actual, seguida de una estrategia personalizada. Implementamos en fases medibles con reportes semanales y revisiones mensuales para optimizar resultados continuamente."
            },
            {
              id: "2",              title: "¿Cuánto tiempo se tarda en ver resultados?",              content: "Los primeros indicadores aparecen en 4-6 semanas (tráfico, engagement). Resultados significativos de conversión se ven entre 3-6 meses. Para posicionamiento SEO, entre 6-12 meses dependiendo de la competencia."
            },
            {
              id: "3",              title: "¿Cuál es la inversión mínima requerida?",              content: "Nuestros proyectos inician desde 2,500€ mensuales para estrategias integrales. Ofrecemos auditorías desde 500€ y proyectos específicos desde 1,200€. La inversión siempre es proporcional a los objetivos."
            },
            {
              id: "4",              title: "¿Trabajáis con empresas de mi sector?",              content: "Tenemos experiencia en e-commerce, SaaS, servicios profesionales, retail, inmobiliaria, salud, educación y tecnología. Nuestra metodología se adapta a cualquier sector B2B o B2C."
            },
            {
              id: "5",              title: "¿Qué incluyen los reportes de resultados?",              content: "Reportes mensuales con KPIs específicos, análisis de ROI, recomendaciones de optimización, comparativas período anterior, y dashboards en tiempo real con acceso 24/7 para el cliente."
            },
            {
              id: "6",              title: "¿Ofrecéis garantías de resultados?",              content: "Garantizamos transparencia total, metodología probada y dedicación completa. Si en los primeros 90 días no ves mejoras medibles, revisamos la estrategia sin coste adicional."
            }
          ]}
        />
      </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>
  );
}