"use client";

import Link from "next/link";
import CompFooter from "./footer.jsx";
import Image from "next/image";
import { useState, useEffect } from "react";

// Images and Icons
import heroBg from "../../assets/img/contable.webp";
import calculatorImg from "../../assets/img/contabilidad.jpg";

function Inicio({ darkMode, onToggleDarkMode }) {

  return (
    <div className={`${darkMode ? 'bg-background-dark' : 'bg-background-light'} font-display ${darkMode ? 'text-text-dark' : 'text-text-light'}`}>


      {/* Hero Section - CORREGIDO */}
      <div className="relative isolate overflow-hidden pt-14">
        <div className="absolute inset-0 -z-10 h-full w-full">
          <Image
            src={heroBg}
            alt="People working on documents at a desk"
            fill
            className="object-cover"
            priority
          />
        </div>
        {/* Overlay que cambia con el tema - CORREGIDO */}
        <div className={`absolute inset-0 ${darkMode ? 'bg-gray-900/70' : 'bg-gray-900/50'}`}></div>
        <div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56 relative z-10">
          <div className="text-center">
            <h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl">SEMPREG</h1>
            <p className="mt-6 text-lg leading-8 text-gray-200">Asesorías Contables y Financieras</p>
            <div className="mt-10 flex items-center justify-center gap-x-6">
              <Link href="#services" className="rounded-md bg-primary px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">Ver servicios</Link>
              <Link href="#about" className="text-sm font-semibold leading-6 text-white hover:text-gray-200 transition-colors">Saber más <span aria-hidden="true">→</span></Link>
            </div>
          </div>
        </div>
      </div>

      <main>
        {/* About Section - CORREGIDO */}
        <section id="about" className="py-24 sm:py-32">
          <div className="mx-auto max-w-7xl px-6 lg:px-8">
            <div className="lg:grid lg:grid-cols-2 lg:gap-24 lg:items-center">
              <div>
                <h2 className="text-base font-semibold leading-7 text-primary">Sobre nosotros</h2>
                <p className={`mt-2 text-3xl font-bold tracking-tight ${darkMode ? 'text-text-dark' : 'text-text-light'} sm:text-4xl`}>Expertos en soluciones contables y financieras</p>
                <p className={`mt-6 text-lg leading-8 ${darkMode ? 'text-text-secondary-dark' : 'text-text-secondary-light'}`}>
                  Sempreg se dedica a prestar servicios de consultoría, asesoría y outsourcing, en las áreas administrativa, contable, tributaria y financiera para empresas.
                </p>
                <p className={`mt-4 text-lg leading-8 ${darkMode ? 'text-text-secondary-dark' : 'text-text-secondary-light'}`}>
                  Nuestros servicios están dirigidos a minimizar su riesgo, optimizar sus costos y lograr una mayor eficiencia en sus operaciones.
                </p>
                <div className="mt-8 flex gap-x-8">
                  <div className="flex items-center gap-x-2">
                    <span className="material-icons text-primary text-2xl">workspace_premium</span>
                    <span className="font-semibold">Talento Profesional</span>
                  </div>
                  <div className="flex items-center gap-x-2">
                    <span className="material-icons text-primary text-2xl">verified</span>
                    <span className="font-semibold">Calidad Certificada</span>
                  </div>
                </div>
              </div>
              <div className="mt-12 lg:mt-0 relative">
                <div className="rounded-xl shadow-2xl w-full overflow-hidden">
                  <Image
                    src={calculatorImg}
                    alt="Calculator and financial documents"
                    width={600}
                    height={400}
                    className="w-full h-auto"
                  />
                </div>
                <div className={`absolute bottom-4 left-4 ${darkMode ? 'bg-black/70' : 'bg-white/80'} backdrop-blur-sm p-4 rounded-lg shadow-lg`}>
                  <p className={`font-bold text-lg ${darkMode ? 'text-text-dark' : 'text-text-light'}`}>Desde 2015</p>
                  <p className={`text-sm ${darkMode ? 'text-text-secondary-dark' : 'text-text-secondary-light'}`}>10 años de experiencia</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Stats Section - CORREGIDO */}
        <section className={`py-20 sm:py-24 ${darkMode ? 'bg-card-dark' : 'bg-card-light'}`}>
          <div className="mx-auto max-w-7xl px-6 lg:px-8">
            <div className="grid grid-cols-1 gap-y-16 text-center lg:grid-cols-3">
              <div className="mx-auto flex max-w-xs flex-col gap-y-4">
                <dt className={`text-base leading-7 ${darkMode ? 'text-text-secondary-dark' : 'text-text-secondary-light'}`}>Clientes satisfechos</dt>
                <dd className={`order-first text-3xl font-semibold tracking-tight ${darkMode ? 'text-text-dark' : 'text-text-light'} sm:text-5xl`}>100+</dd>
              </div>
              <div className="mx-auto flex max-w-xs flex-col gap-y-4">
                <dt className={`text-base leading-7 ${darkMode ? 'text-text-secondary-dark' : 'text-text-secondary-light'}`}>Proyectos completados</dt>
                <dd className={`order-first text-3xl font-semibold tracking-tight ${darkMode ? 'text-text-dark' : 'text-text-light'} sm:text-5xl`}>1500+</dd>
              </div>
              <div className="mx-auto flex max-w-xs flex-col gap-y-4">
                <dt className={`text-base leading-7 ${darkMode ? 'text-text-secondary-dark' : 'text-text-secondary-light'}`}>Años de experiencia</dt>
                <dd className={`order-first text-3xl font-semibold tracking-tight ${darkMode ? 'text-text-dark' : 'text-text-light'} sm:text-5xl`}>10+</dd>
              </div>
            </div>
          </div>
        </section>

        {/* Services Section - CORREGIDO */}
        <section id="services" className="py-24 sm:py-32">
          <div className="mx-auto max-w-7xl px-6 lg:px-8">
            <div className="mx-auto max-w-2xl text-center">
              <h2 className="text-base font-semibold leading-7 text-primary">Servicios</h2>
              <p className={`mt-2 text-3xl font-bold tracking-tight ${darkMode ? 'text-text-dark' : 'text-text-light'} sm:text-4xl`}>Servicios Destacados</p>
            </div>
            <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
              {services.map((service, index) => (
                <div key={index} className={`flex flex-col items-start justify-between rounded-xl ${darkMode ? 'bg-card-dark' : 'bg-card-light'} p-8 shadow-lg hover:shadow-2xl transition-shadow duration-300`}>
                  <div className="flex items-center gap-x-4">
                    <div className="flex-none rounded-lg bg-primary/10 p-3">
                      <span className="material-icons text-primary text-3xl">{service.icon}</span>
                    </div>
                    <h3 className={`text-xl font-semibold leading-6 ${darkMode ? 'text-text-dark' : 'text-text-light'}`}>{service.title}</h3>
                  </div>
                  <p className={`mt-4 text-base leading-7 ${darkMode ? 'text-text-secondary-dark' : 'text-text-secondary-light'}`}>{service.description}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* CTA Section - MEJORADA */}
        <section className="relative bg-gradient-to-r from-primary via-blue-600 to-blue-700 overflow-hidden">
          {/* Elementos decorativos de fondo */}
          <div className="absolute inset-0">
            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-blue-500/20 to-transparent"></div>
            <div className="absolute top-0 left-0 w-72 h-72 bg-white/5 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
            <div className="absolute bottom-0 right-0 w-96 h-96 bg-white/5 rounded-full translate-x-1/3 translate-y-1/3"></div>
            <div className="absolute top-1/2 left-1/4 w-32 h-32 bg-white/10 rounded-full blur-xl"></div>
          </div>

          <div className="relative mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8">
            <div className="lg:grid lg:grid-cols-2 lg:gap-12 lg:items-center">
              {/* Contenido principal */}
              <div className="relative z-10">
                <div className="flex items-center gap-2 mb-4">
                  <div className="w-3 h-8 bg-white rounded-full"></div>
                  <span className="text-white/80 font-semibold text-sm uppercase tracking-wider">¿Listo para comenzar?</span>
                </div>

                <h2 className="text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl leading-tight">
                  Transformemos juntos
                  <span className="block bg-gradient-to-r from-white to-blue-100 bg-clip-text text-transparent">
                    tu visión financiera
                  </span>
                </h2>

                <p className="mt-6 text-lg leading-8 text-blue-100 max-w-lg">
                  Más de 100 empresas han confiado en nosotros para optimizar sus procesos
                  contables y alcanzar sus objetivos financieros.
                </p>

                {/* Stats en línea */}
                <div className="mt-8 flex flex-wrap gap-8">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center">
                      <span className="material-icons text-white text-lg">verified</span>
                    </div>
                    <div>
                      <p className="text-white font-bold text-xl">10+</p>
                      <p className="text-blue-100 text-sm">Años de experiencia</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center">
                      <span className="material-icons text-white text-lg">groups</span>
                    </div>
                    <div>
                      <p className="text-white font-bold text-xl">100+</p>
                      <p className="text-blue-100 text-sm">Clientes satisfechos</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Lado derecho - Botones y acciones */}
              <div className="relative z-10 mt-12 lg:mt-0">
                <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-white/20 shadow-2xl">
                  <h3 className="text-2xl font-bold text-white mb-4">Comienza hoy mismo</h3>
                  <p className="text-blue-100 mb-6">
                    Pregunta por nuestros servicios y descubre cómo podemos ayudarte a alcanzar tus metas.
                  </p>

                  <div className="space-y-4">
                    <Link
                      href="/contacto"
                      className="w-full bg-white text-primary hover:bg-gray-50 px-6 py-4 rounded-xl font-semibold text-center flex items-center justify-center gap-2 transition-all duration-200 transform hover:scale-105 hover:shadow-lg shadow-md"
                    >
                      <span className="material-icons">email</span>
                      Contactanos
                    </Link>


                    <div className="flex items-center justify-center gap-4 pt-4">
                      <Link
                        href="#services"
                        className="text-white hover:text-blue-100 font-medium flex items-center gap-1 transition-colors"
                      >
                        Ver servicios
                        <span className="material-icons text-sm">arrow_forward</span>
                      </Link>
                      <span className="text-white/40">•</span>
                      <Link
                        href="/nosotros"
                        className="text-white hover:text-blue-100 font-medium flex items-center gap-1 transition-colors"
                      >
                        Conocer más
                        <span className="material-icons text-sm">arrow_forward</span>
                      </Link>
                    </div>
                  </div>

                  {/* Garantía */}
                  <div className="mt-6 p-4 bg-white/5 rounded-xl border border-white/10">
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0">
                        <span className="material-icons text-white text-sm">check</span>
                      </div>
                      <div>
                        <p className="text-white text-sm font-medium">Sin compromisos • 100% confidencial</p>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Elementos flotantes decorativos */}
                <div className="absolute -top-4 -right-4 w-20 h-20 bg-yellow-400 rounded-full opacity-20 blur-xl animate-pulse"></div>
                <div className="absolute -bottom-4 -left-4 w-16 h-16 bg-cyan-400 rounded-full opacity-30 blur-lg animate-pulse delay-1000"></div>
              </div>
            </div>

            {/* Ola decorativa en la parte inferior */}
            <div className="absolute bottom-0 left-0 right-0">
              <svg
                viewBox="0 0 1200 120"
                preserveAspectRatio="none"
                className="w-full h-12 text-white"
              >
                <path
                  d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
                  opacity=".25"
                  fill="currentColor"
                ></path>
                <path
                  d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z"
                  opacity=".5"
                  fill="currentColor"
                ></path>
                <path
                  d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"
                  fill="currentColor"
                ></path>
              </svg>
            </div>
          </div>
        </section>

        {/* Solutions Section - CORREGIDO */}
        <section className="py-24 sm:py-32" id="servicios">
          <div className="mx-auto max-w-7xl px-6 lg:px-8">
            <div className="mx-auto max-w-2xl lg:text-center">
              <h2 className="text-base font-semibold leading-7 text-primary">Soluciones a tu medida</h2>
              <p className={`mt-2 text-3xl font-bold tracking-tight ${darkMode ? 'text-text-dark' : 'text-text-light'} sm:text-4xl`}>Damos Soluciones a tu Negocio</p>
            </div>
            <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
              <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
                {solutions.map((solution, index) => (
                  <div key={index} className="flex flex-col">
                    <dt className={`flex items-center gap-x-3 text-base font-semibold leading-7 ${darkMode ? 'text-text-dark' : 'text-text-light'}`}>
                      <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary">
                        <span className="material-icons text-white">{solution.icon}</span>
                      </div>
                      {solution.title}
                    </dt>
                    <dd className={`mt-4 flex flex-auto flex-col text-base leading-7 ${darkMode ? 'text-text-secondary-dark' : 'text-text-secondary-light'}`}>
                      <p className="flex-auto">{solution.description}</p>
                    </dd>
                  </div>
                ))}
              </dl>
            </div>
          </div>
        </section>

        {/* Final CTA Section - CORREGIDO */}
        <section className={`py-20 ${darkMode ? 'bg-background-dark' : 'bg-background-light'}`}>
          <div className="mx-auto max-w-2xl text-center px-6">
            <h2 className={`text-2xl font-bold tracking-tight ${darkMode ? 'text-text-dark' : 'text-text-light'} sm:text-3xl`}>Asesorías contables y financieras</h2>
            <p className={`mt-6 text-lg leading-8 ${darkMode ? 'text-text-secondary-dark' : 'text-text-secondary-light'}`}>
              Servicios de consultoría financiera para empresas que buscan optimizar su gestión, mediante la definición de estrategias, la evaluación de riesgos y mejora de resultados financieros.
            </p>
            <div className="mt-10">
              <Link href="#about" className="rounded-md bg-primary px-4 py-3 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">Ver más</Link>
            </div>
          </div>
        </section>
      </main>

      <CompFooter darkMode={darkMode} />
    </div>
  );
}

// Services data
const services = [
  {
    icon: "account_balance",
    title: "Asesoría Contable",
    description: "Apoyo profesional integral en el área contable para optimizar los recursos y proporcionar información de calidad para la toma de decisiones."
  },
  {
    icon: "insights",
    title: "Consultoría Financiera",
    description: "Análisis financiero y evaluación de su negocio para identificar oportunidades de mejora, reducir riesgos y aumentar su rentabilidad."
  },
  {
    icon: "trending_up",
    title: "Planeación Estratégica",
    description: "Desarrollo de planes estratégicos que alinean los objetivos financieros con la visión de la empresa para maximizar resultados."
  },
  {
    icon: "dns",
    title: "Software Contable",
    description: "Implementación de tecnologías de la información para la automatización de procesos contables, mejorando la eficiencia y productividad."
  },
  {
    icon: "policy",
    title: "Auditoría Interna",
    description: "Organización para descubrir riesgos u oportunidades de mejora. Incluye las revisiones de control interno y de los procesos."
  },
  {
    icon: "corporate_fare",
    title: "Finanzas Corporativas",
    description: "Asesoramiento integral y estrategias personalizadas para la gestión financiera, la optimización de capital y el crecimiento."
  }
];

// Solutions data
const solutions = [
  {
    icon: "calculate",
    title: "Asesoría Contable y Tributaria",
    description: "Le ayudamos con un servicio de soporte contable en forma de outsourcing para que su negocio tenga una operación eficiente en el manejo de la contabilidad, presentación de libros electrónicos, liquidación de impuestos mensuales y declaraciones juradas anuales."
  },
  {
    icon: "business_center",
    title: "Outsourcing contable",
    description: "Tercerización de la contabilidad de su negocio, incluyendo el registro de sus operaciones, preparación y presentación de libros, estados financieros y declaraciones juradas."
  },
  {
    icon: "real_estate_agent",
    title: "Asesoría inmobiliaria",
    description: "Asesoramos y realizamos el ciclo contable de la actividad, que incluye la determinación del costo, contabilidad, control de ingresos y egresos, y otros aspectos para el adecuado control de la gestión y de impuestos."
  },
  {
    icon: "fact_check",
    title: "Revisoría Fiscal",
    description: "Realizamos una revisoría fiscal independiente que ofrece a los inversionistas la seguridad en la autenticidad y el debido cumplimiento de sus obligaciones de una manera precisa."
  },
  {
    icon: "storefront",
    title: "Creación De Empresa y Reorganización Societaria",
    description: "Si eres un inversor extranjero o nacional y deseas abrir una nueva empresa o expandirte, te ayudamos a hacerlo con rapidez y eficiencia. Asesoramos en la elección del tipo societario y estructura más adecuada, además de guiarte en el proceso de constitución para que puedas iniciar operaciones."
  },
  {
    icon: "person",
    title: "Renta Persona Natural",
    description: "Le ayudamos a planificar con anticipación sus impuestos, en coherencia con sus objetivos personales y familiares, para que no tenga sorpresas al final. También le asesoramos en las deducciones que maximizan su beneficio en estas áreas."
  }
];

export default Inicio;