"use client";

import Link from "next/link";
import { usePageContent } from "@/hooks/usePageContent";
import { useTranslatedContent, T } from "@/components/TranslatedText";

export default function Home() {
  const { content, loading } = usePageContent('home');
  
  // Traduzir conteúdo do banco automaticamente
  const { translatedContent } = useTranslatedContent(content);

  // Usar conteúdo traduzido ou fallback
  const hero = translatedContent?.hero || {
    title: 'Engenharia de Excelência para Seus Projetos',
    subtitle: 'Soluções completas em engenharia veicular, mecânica e segurança do trabalho com mais de 15 anos de experiência.',
    buttonText: 'Conheça Nossos Serviços'
  };

  const features = translatedContent?.features || {
    pretitle: 'Por que nos escolher',
    title: 'Nossos Diferenciais',
    items: [
      { icon: 'ri-shield-star-line', title: 'Qualidade Garantida', description: 'Processos certificados e equipe altamente qualificada.' },
      { icon: 'ri-settings-4-line', title: 'Soluções Personalizadas', description: 'Atendimento sob medida para suas necessidades.' },
      { icon: 'ri-truck-line', title: 'Especialização Veicular', description: 'Expertise em engenharia automotiva.' }
    ] as Array<{ icon: string; title: string; description: string }>
  };

  const services = translatedContent?.services || {
    pretitle: 'Nossos Serviços',
    title: 'O Que Fazemos',
    items: [
      { icon: 'ri-draft-line', title: 'Projetos Técnicos', description: 'Desenvolvimento de projetos de engenharia.' },
      { icon: 'ri-file-paper-2-line', title: 'Laudos e Perícias', description: 'Emissão de laudos técnicos.' },
      { icon: 'ri-alert-line', title: 'Segurança do Trabalho', description: 'Implementação de normas de segurança.' },
      { icon: 'ri-truck-fill', title: 'Engenharia Veicular', description: 'Modificações e adaptações de veículos.' }
    ] as Array<{ icon: string; title: string; description: string }>
  };

  const about = translatedContent?.about || {
    pretitle: 'Conheça a OCCTO',
    title: 'Sobre Nós',
    description: 'Com mais de 15 anos de experiência, a OCCTO Engenharia se consolidou como referência em soluções de engenharia.',
    highlights: [
      'Mais de 500 clientes atendidos',
      'Equipe técnica qualificada',
      'Parceiro oficial de grandes empresas'
    ] as string[]
  };

  const testimonials = translatedContent?.testimonials || {
    pretitle: 'Depoimentos',
    title: 'O Que Dizem Nossos Clientes',
    items: [
      { name: 'Ricardo Mendes', role: 'Gerente de Frota', text: 'Excelente trabalho!' },
      { name: 'Fernanda Costa', role: 'Diretora de Operações', text: 'Parceria de confiança.' },
      { name: 'Paulo Oliveira', role: 'Engenheiro Chefe', text: 'Conhecimento técnico incomparável.' }
    ] as Array<{ name: string; role: string; text: string }>
  };

  const stats = translatedContent?.stats || {
    clients: '500+',
    projects: '1200+',
    years: '15'
  };

  const cta = translatedContent?.cta || {
    title: 'Pronto para tirar seu projeto do papel?',
    text: 'Entre em contato com nossa equipe de especialistas.',
    button: 'Fale Conosco'
  };

  return (
    <main className="bg-white dark:bg-secondary transition-colors duration-300">
      {/* Hero Section */}
      <section className="relative h-[600px] flex items-center bg-secondary text-white overflow-hidden">
        <div className="absolute inset-0 bg-black/60 z-10"></div>
        {/* Placeholder for Hero Image - Industrial/Truck context */}
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1581094288338-2314dddb7ece?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center"></div>
        
        <div className="container mx-auto px-4 relative z-20">
          <div className="max-w-3xl">
            <div className="inline-flex items-center gap-3 bg-white/10 backdrop-blur-md border border-white/20 rounded-full px-5 py-2 mb-8 hover:bg-white/20 transition-colors cursor-default">
              <i className="ri-verified-badge-fill text-primary text-xl"></i>
              <span className="text-sm font-bold tracking-wider uppercase text-white"><T>Prestador de Serviço Oficial</T> <span className="text-primary">Coca-Cola</span></span>
            </div>

            <h1 className="text-5xl md:text-6xl font-bold font-headline mb-6 leading-tight">
              {hero.title}
            </h1>
            <p className="text-xl text-gray-300 mb-8 max-w-2xl">
              {hero.subtitle}
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <Link href="/contato" className="px-8 py-4 bg-primary text-white rounded-lg font-bold hover-primary transition-colors text-center">
                {hero.buttonText}
              </Link>
              <Link href="/projetos" className="px-8 py-4 border-2 border-white text-white rounded-lg font-bold hover:bg-white hover:text-secondary transition-colors text-center">
                <T>Ver Soluções</T>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section - Por que nos escolher */}
      <section className="py-20 bg-white dark:bg-secondary">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-primary font-bold tracking-wider uppercase mb-2">{features.pretitle}</h2>
            <h3 className="text-4xl font-bold font-headline text-secondary dark:text-white">{features.title}</h3>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {features.items.map((feature, index) => (
              <div key={index} className="p-8 bg-gray-50 dark:bg-white/5 rounded-xl hover:shadow-lg transition-shadow border border-gray-100 dark:border-white/10 group">
                <div className="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center text-primary mb-6 group-hover:bg-primary group-hover:text-white transition-colors">
                  <i className={`${feature.icon} text-3xl`}></i>
                </div>
                <h3 className="text-2xl font-bold font-headline mb-4 text-secondary dark:text-white">{feature.title}</h3>
                <p className="text-gray-600 dark:text-gray-400">
                  {feature.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section className="py-20 bg-gray-50 dark:bg-[#121212]">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-primary font-bold tracking-wider uppercase mb-2">{services.pretitle}</h2>
            <h3 className="text-4xl font-bold font-headline text-secondary dark:text-white">{services.title}</h3>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {services.items.map((service, index) => (
              <div key={index} className="bg-white dark:bg-secondary p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow border-b-4 border-transparent hover:border-primary">
                <i className={`${service.icon} text-4xl text-primary mb-4 block`}></i>
                <h4 className="text-xl font-bold font-headline mb-2 text-secondary dark:text-white">{service.title}</h4>
                <p className="text-gray-600 dark:text-gray-400 text-sm">{service.description}</p>
              </div>
            ))}
          </div>
          <div className="text-center mt-12">
            <Link href="/servicos" className="text-primary font-bold hover:text-secondary dark:hover:text-white transition-colors inline-flex items-center gap-2">
              <T>Ver todos os serviços</T> <i className="ri-arrow-right-line"></i>
            </Link>
          </div>
        </div>
      </section>

      {/* About Preview */}
      <section className="py-20 bg-secondary text-white">
        <div className="container mx-auto px-4 flex flex-col md:flex-row items-center gap-12">
          <div className="w-full md:w-1/2 hidden md:block">
            <div className="relative h-[400px] w-full rounded-xl overflow-hidden">
               {/* Placeholder for About Image - Engineer inspecting */}
               <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1581092160562-40aa08e78837?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center"></div>
            </div>
          </div>
          <div className="w-full md:w-1/2">
            <h2 className="text-primary font-bold tracking-wider uppercase mb-2">{about.pretitle}</h2>
            <h3 className="text-4xl font-bold font-headline mb-6">{about.title}</h3>
            <p className="text-gray-400 mb-6 text-lg">
              {about.description}
            </p>
            <ul className="space-y-4 mb-8">
              {about.highlights.map((highlight, index) => (
                <li key={index} className="flex items-center gap-3">
                  <i className="ri-check-double-line text-primary text-xl"></i>
                  <span>{highlight}</span>
                </li>
              ))}
            </ul>
            <Link href="/sobre" className="text-primary font-bold hover:text-white transition-colors flex items-center gap-2">
              <T>Conheça nossa expertise</T> <i className="ri-arrow-right-line"></i>
            </Link>
          </div>
        </div>
      </section>

      {/* Latest Projects Section */}
      <section className="py-20 bg-white dark:bg-secondary">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 gap-4">
            <div>
              <h2 className="text-primary font-bold tracking-wider uppercase mb-2"><T>Portfólio</T></h2>
              <h3 className="text-4xl font-bold font-headline text-secondary dark:text-white"><T>Projetos Recentes</T></h3>
            </div>
            <Link href="/projetos" className="px-6 py-3 border border-secondary dark:border-white text-secondary dark:text-white rounded-lg font-bold hover:bg-secondary hover:text-white dark:hover:bg-white dark:hover:text-secondary transition-colors">
              <T>Ver todos os projetos</T>
            </Link>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              { img: "https://images.unsplash.com/photo-1616401784845-180882ba9ba8?q=80&w=2070&auto=format&fit=crop", title: "Projeto de Adequação - Coca-Cola", cat: "Engenharia Veicular" },
              { img: "https://images.unsplash.com/photo-1581092335397-9583eb92d232?q=80&w=2070&auto=format&fit=crop", title: "Laudo de Guindaste Articulado", cat: "Inspeção Técnica" },
              { img: "https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?q=80&w=2070&auto=format&fit=crop", title: "Dispositivo de Içamento Especial", cat: "Projeto Mecânico" }
            ].map((project, index) => (
              <div key={index} className="group relative overflow-hidden rounded-xl h-[400px] cursor-pointer">
                <div className="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-110" style={{ backgroundImage: `url('${project.img}')` }}></div>
                <div className="absolute inset-0 bg-linear-to-t from-black/90 via-black/20 to-transparent opacity-80 group-hover:opacity-90 transition-opacity"></div>
                <div className="absolute bottom-0 left-0 p-8 w-full transform translate-y-4 group-hover:translate-y-0 transition-transform">
                  <span className="text-primary font-bold text-sm uppercase tracking-wider mb-2 block"><T>{project.cat}</T></span>
                  <h3 className="text-2xl font-bold font-headline text-white mb-2"><T>{project.title}</T></h3>
                  <div className="h-0 group-hover:h-auto overflow-hidden transition-all">
                    <span className="text-white/80 text-sm flex items-center gap-2 mt-4">
                      <T>Ver detalhes</T> <i className="ri-arrow-right-line"></i>
                    </span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section className="py-20 bg-gray-50 dark:bg-[#121212]">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-primary font-bold tracking-wider uppercase mb-2">{testimonials.pretitle}</h2>
            <h3 className="text-4xl font-bold font-headline text-secondary dark:text-white">{testimonials.title}</h3>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {testimonials.items.map((testimonial, index) => (
              <div key={index} className="bg-white dark:bg-secondary p-8 rounded-xl shadow-sm border border-gray-100 dark:border-white/10 relative">
                <i className="ri-double-quotes-l text-4xl text-primary/20 absolute top-6 left-6"></i>
                <p className="text-gray-600 dark:text-gray-300 mb-6 relative z-10 pt-6 italic">"{testimonial.text}"</p>
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-gray-200 dark:bg-white/10 rounded-full flex items-center justify-center text-gray-400">
                    <i className="ri-user-line text-xl"></i>
                  </div>
                  <div>
                    <h4 className="font-bold font-headline text-secondary dark:text-white">{testimonial.name}</h4>
                    <p className="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">{testimonial.role}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-24 bg-primary">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-4xl font-bold font-headline text-white mb-6">{cta.title}</h2>
          <p className="text-white/90 text-xl mb-8 max-w-2xl mx-auto">
            {cta.text}
          </p>
          <Link href="/contato" className="inline-block px-10 py-4 bg-white text-primary rounded-lg font-bold hover:bg-gray-100 transition-colors shadow-lg">
            {cta.button}
          </Link>
        </div>
      </section>
    </main>
  );
}