octto-engenharia/frontend/src/app/(public)/sobre/page.tsx

"use client";

import Image from "next/image";
import { T } from "@/components/TranslatedText";

export default function SobrePage() {
  return (
    <main className="bg-white dark:bg-secondary transition-colors duration-300">
      {/* Hero Section */}
      <section className="relative h-[400px] flex items-center bg-secondary text-white overflow-hidden">
        <div className="absolute inset-0 bg-black/60 z-10"></div>
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center"></div>
        <div className="container mx-auto px-4 relative z-20">
          <h1 className="text-5xl font-bold font-headline mb-4"><T>Sobre a OCCTO</T></h1>
          <p className="text-xl text-gray-300 max-w-2xl">
            <T>Conheça nossa história, missão e valores que nos guiam na entrega de excelência em engenharia</T>
          </p>
        </div>
      </section>

      {/* História e Missão */}
      <section className="py-20 bg-white dark:bg-secondary">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row gap-12 items-center">
            <div className="w-full md:w-1/2">
              <h2 className="text-primary font-bold tracking-wider uppercase mb-2"><T>Nossa História</T></h2>
              <h3 className="text-3xl font-bold font-headline text-secondary dark:text-white mb-6"><T>Mais de 15 anos de experiência em engenharia</T></h3>
              <p className="text-gray-600 dark:text-gray-300 mb-4 leading-relaxed">
                <T>A OCCTO Engenharia foi fundada com o objetivo de oferecer soluções completas em engenharia mecânica, veicular e segurança do trabalho. Ao longo de mais de 15 anos, construímos uma trajetória sólida baseada na excelência técnica e no compromisso com a satisfação dos nossos clientes.</T>
              </p>
              <p className="text-gray-600 dark:text-gray-300 mb-4 leading-relaxed">
                <T>Nossa equipe é formada por engenheiros altamente qualificados e especializados, que trabalham com as mais modernas ferramentas e metodologias para garantir resultados precisos e confiáveis em cada projeto.</T>
              </p>
            </div>
            <div className="w-full md:w-1/2 grid grid-cols-2 gap-4">
              <div className="h-64 rounded-xl bg-gray-200 dark:bg-white/10 overflow-hidden relative">
                 <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1581092160562-40aa08e78837?q=80&w=1000&auto=format&fit=crop')] bg-cover bg-center"></div>
              </div>
              <div className="h-64 rounded-xl bg-gray-200 dark:bg-white/10 overflow-hidden relative mt-8">
                 <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?q=80&w=1000&auto=format&fit=crop')] bg-cover bg-center"></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Valores */}
      <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"><T>Nossos Valores</T></h2>
            <h3 className="text-3xl font-bold font-headline text-secondary dark:text-white"><T>O que nos move</T></h3>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white dark:bg-secondary p-8 rounded-xl shadow-sm border-t-4 border-primary">
              <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary mb-6">
                <i className="ri-medal-line text-2xl"></i>
              </div>
              <h4 className="text-xl font-bold font-headline text-secondary dark:text-white mb-3"><T>Qualidade</T></h4>
              <p className="text-gray-600 dark:text-gray-400"><T>Comprometimento com a excelência em cada projeto, garantindo precisão e conformidade em todas as entregas.</T></p>
            </div>
            <div className="bg-white dark:bg-secondary p-8 rounded-xl shadow-sm border-t-4 border-primary">
              <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary mb-6">
                <i className="ri-shake-hands-line text-2xl"></i>
              </div>
              <h4 className="text-xl font-bold font-headline text-secondary dark:text-white mb-3"><T>Transparência</T></h4>
              <p className="text-gray-600 dark:text-gray-400"><T>Relações baseadas na honestidade e comunicação clara, mantendo nossos clientes sempre informados.</T></p>
            </div>
            <div className="bg-white dark:bg-secondary p-8 rounded-xl shadow-sm border-t-4 border-primary">
              <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary mb-6">
                <i className="ri-leaf-line text-2xl"></i>
              </div>
              <h4 className="text-xl font-bold font-headline text-secondary dark:text-white mb-3"><T>Sustentabilidade</T></h4>
              <p className="text-gray-600 dark:text-gray-400"><T>Compromisso com práticas responsáveis e soluções que minimizam impactos ambientais.</T></p>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}