"use client"

import Image from "next/image"
import { AnimatedWrapper } from "@/components/animated-wrapper"
import { SectionTitle } from "@/components/section-title"

interface AboutUsContent {
    sectionId: string
    overline: string
    title: string
    image: {
        src: string
        alt: string
        width: number
        height: number
    }
    paragraphs: string[]
    objective: {
        title: string
        description: string
    }
}

interface AboutUsSectionProps {
    content?: AboutUsContent
    className?: string
}

// Dados da seção - separados da lógica de apresentação
const defaultContent: AboutUsContent = {
    sectionId: "quem-somos",
    overline: "Quem Somos",
    title: "Nossa História e Compromisso",
    image: {
        src: "/assets/images/index/aboutus.png",
        alt: "Equipe Ingasoft",
        width: 500,
        height: 600,
    },
    paragraphs: [
        "Somos uma empresa que atua desde 1990 com consultoria para vários ramos de atividade e que em 1999 também se consolida como empresa de tecnologia e sistemas de Gerenciamento, que tem o princípio do Comprometimento com clientes e colaboradores.",
        "A Inovação é um objetivo constante e acreditamos que para conquistar o sucesso nesta grande empreitada se faz necessário uma comunicação clara e transparente; e como estratégia usamos o trabalho em equipe e a ética como marcas do nosso desenvolvimento."
    ],
    objective: {
        title: "Objetivo Geral",
        description: "Proporcionar aos nossos clientes a utilização de um sistema gerenciador inovador que facilite seus processos e que garanta uma operação ágil e clara com informações precisas e confiáveis possibilitando aumento de lucratividade e tomadas de decisões em tempo real."
    }
}

// Componente para a imagem da equipe
interface TeamImageProps {
    image: AboutUsContent['image']
}

function TeamImage({ image }: TeamImageProps) {
    return (
        <AnimatedWrapper>
            <div className="relative group">
                {/* Efeito de sombra com gradiente corrigido */}
                <div className="absolute -inset-0.5 bg-gradient-to-r from-primary/30 to-accent/30 rounded-2xl blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-500 -z-10"></div>

                {/* Container da imagem com sombra suave */}
                <div className="relative bg-white dark:bg-gray-900 rounded-2xl p-1 shadow-2xl">
                    <Image
                        src={image.src}
                        alt={image.alt}
                        width={image.width}
                        height={image.height}
                        className="rounded-xl object-cover w-full h-auto transition-transform duration-500 group-hover:scale-[1.02]"
                    />
                </div>
            </div>
        </AnimatedWrapper>
    )
}

// Componente para o conteúdo textual
interface AboutContentProps {
    overline: string
    title: string
    paragraphs: string[]
    objective: AboutUsContent['objective']
}

function AboutContent({ overline, title, paragraphs, objective }: AboutContentProps) {
    return (
        <AnimatedWrapper delay={0.1}>
            <SectionTitle
                overline={overline}
                title={title}
                align="left"
            />

            <div className="space-y-6">
                {paragraphs.map((paragraph, index) => (
                    <p
                        key={index}
                        className="text-muted-foreground text-balance leading-relaxed"
                    >
                        {paragraph}
                    </p>
                ))}
            </div>

            <div className="mt-8 bg-primary/5 dark:bg-primary/10 p-6 rounded-xl border border-primary/20 dark:border-primary/30 hover:border-primary/40 dark:hover:border-primary/50 transition-colors duration-300">
                <h4 className="text-xl font-semibold text-primary mb-3 flex items-center gap-2">
                    <span className="w-2 h-2 bg-primary rounded-full"></span>
                    {objective.title}
                </h4>
                <p className="text-muted-foreground text-sm text-balance leading-relaxed">
                    {objective.description}
                </p>
            </div>
        </AnimatedWrapper>
    )
}

// Componente principal da seção
export function AboutUsSection({
    content = defaultContent,
    className = ""
}: AboutUsSectionProps) {
    return (
        <section
            id={content.sectionId}
            className={`py-20 lg:py-28 bg-secondary ${className}`}
        >
            <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
                    <TeamImage image={content.image} />
                    <AboutContent
                        overline={content.overline}
                        title={content.title}
                        paragraphs={content.paragraphs}
                        objective={content.objective}
                    />
                </div>
            </div>
        </section>
    )
}

// Export adicional para facilitar customização
export { type AboutUsContent }