import Image from "next/image";
import Link from "next/link";
import type { Metadata } from "next";
import { SITE_URL, COMPANY_NAME } from "@/data/services";
import ValuesSection from "@/components/ValuesSection";

export const metadata: Metadata = {
  title: "Quem Somos",
  description: `Conheça a ${COMPANY_NAME}. Empresa com descendência japonesa, mais de 20 anos de experiência e atuação em soluções elétricas, hidráulicas e contra incêndio em São Paulo.`,
  alternates: { canonical: "/quem-somos" },
  openGraph: {
    title: `Quem Somos | ${COMPANY_NAME}`,
    description:
      "Conheça a Kontec Engenharia, empresa especializada em soluções elétricas, hidráulicas e contra incêndio em São Paulo.",
    url: `${SITE_URL}/quem-somos`,
  },
};

export default function QuemSomosPage() {
  return (
    <>
      {/* Hero */}
      <section
        className="bg-black text-white py-12 px-4"
        aria-label="Quem Somos">
        <div className="max-w-5xl mx-auto">
          <nav aria-label="Breadcrumb" className="mb-4">
            <ol className="flex items-center gap-2 text-sm text-gray-300">
              <li>
                <Link href="/" className="hover:text-white">
                  Home
                </Link>
              </li>
              <li aria-hidden="true">❱</li>
              <li className="text-white">Quem Somos</li>
            </ol>
          </nav>
          <h1 className="text-3xl md:text-4xl font-bold">Quem Somos</h1>
        </div>
      </section>

      {/* About */}
      <section className="py-16 px-4" aria-label="Sobre a Kontec">
        <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 items-center">
          <div className="relative aspect-[4/3] rounded-xl overflow-hidden shadow-xl">
            <Image
              src={`/images/about.webp`}
              alt="Kontec Engenharia"
              fill
              sizes="(max-width: 768px) 100vw, 50vw"
              className="object-cover"
              loading="lazy"
            />
          </div>
          <div>
            <h2 className="text-3xl font-bold text-primary mb-6">
              Kontec Engenharia
            </h2>
            <p className="text-text leading-relaxed mb-4">
              A Kontec Engenharia nasce de uma trajetória técnica sólida e de
              uma cultura de trabalho influenciada pela descendência japonesa da
              empresa. Esse legado se traduz em disciplina de execução,
              organização de processos e atenção rigorosa aos detalhes em cada
              etapa do projeto.
            </p>
            <p className="text-text leading-relaxed mb-4">
              Atuamos em projetos elétricos, hidráulicos e de sistemas contra
              incêndio para empreendimentos residenciais, comerciais,
              industriais e corporativos, sempre com foco em segurança,
              conformidade técnica e previsibilidade de entrega.
            </p>
            <p className="text-text leading-relaxed">
              Com base em São Paulo, atendemos clientes que buscam um parceiro
              técnico confiável para planejar, executar e acompanhar soluções de
              engenharia com padrão elevado de qualidade.
            </p>
          </div>
        </div>
      </section>

      <section
        className="py-12 px-4 bg-primary text-white"
        aria-label="Valores da cultura japonesa na Kontec">
        <div className="max-w-5xl mx-auto">
          <h2 className="text-2xl md:text-3xl font-bold !text-white mb-3">
            Valores que orientam nossa forma de trabalhar
          </h2>
          <div className="flex flex-col-reverse lg:flex-col lg:grid lg:grid-cols-2 gap-6 lg:gap-8 items-start">
            <div>
              <div className="space-y-3">
                <article className="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
                  <h3 className="text-base font-bold text-primary mb-2">
                    Disciplina e padronização
                  </h3>
                  <p className="text-sm text-text leading-relaxed">
                    Processos claros, checklists e execução consistente para
                    reduzir falhas e garantir estabilidade técnica.
                  </p>
                </article>

                <article className="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
                  <h3 className="text-base font-bold text-primary mb-2">
                    Kaizen (melhoria contínua)
                  </h3>
                  <p className="text-sm text-text leading-relaxed">
                    Revisamos continuamente métodos e resultados para elevar o
                    desempenho da equipe e a eficiência dos projetos.
                  </p>
                </article>

                <article className="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
                  <h3 className="text-base font-bold text-primary mb-2">
                    Respeito e compromisso
                  </h3>
                  <p className="text-sm text-text leading-relaxed">
                    Relacionamento transparente com clientes, equipes e
                    parceiros, com responsabilidade sobre prazos, escopo e
                    qualidade entregue.
                  </p>
                </article>

                <article className="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
                  <h3 className="text-base font-bold text-primary mb-2">
                    Visão de longo prazo
                  </h3>
                  <p className="text-sm text-text leading-relaxed">
                    Priorizamos soluções duráveis e tecnicamente corretas,
                    pensando na operação futura do cliente e não apenas na
                    entrega imediata.
                  </p>
                </article>
              </div>
            </div>

            <div className="w-full mx-auto">
              <div className="relative w-full aspect-[3/2] rounded-xl overflow-hidden">
                <Image
                  src="/images/brasil-japao.png?v=3"
                  alt="Composição visual representando a conexão cultural entre Brasil e Japão"
                  fill
                  sizes="(max-width: 1024px) 100vw, 42vw"
                  className="object-contain"
                  loading="lazy"
                />
              </div>

              <p className="text-gray-200 leading-relaxed mb-5 text-sm md:text-base">
                A influência da cultura japonesa está presente na forma como
                estruturamos rotinas, lideramos equipes e tomamos decisões
                técnicas. Esses princípios fazem diferença prática no resultado
                de cada obra.
              </p>
            </div>
          </div>
        </div>
      </section>

      <ValuesSection />
    </>
  );
}