type QuienesSomosProps = {
  nombreEmpresa: string;
  fotoUrl: string | null;
  texto: string;
  aniosExperiencia: number | null;
};

export default function QuienesSomos({
  nombreEmpresa,
  fotoUrl,
  texto,
  aniosExperiencia,
}: QuienesSomosProps) {
  return (
    <section className="section" id="quienes-somos" aria-labelledby="quienes-somos-heading">
      <div className="container">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-10 lg:gap-16 items-center">
          {fotoUrl && (
            <div className="order-1 md:order-none">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={fotoUrl}
                alt={nombreEmpresa}
                className="w-full aspect-[4/3] object-cover rounded-2xl border border-gray-200 shadow-sm"
              />
            </div>
          )}
          <div className="flex flex-col gap-5">
            <span className="badge badge-dark self-start">Quiénes somos</span>
            <h2
              id="quienes-somos-heading"
              className="text-[clamp(1.875rem,5vw,3rem)] font-black tracking-[-0.04em] leading-[1.1] text-black"
            >
              {nombreEmpresa}
            </h2>
            {aniosExperiencia != null && aniosExperiencia > 0 && (
              <div className="flex items-baseline gap-2">
                <span className="text-4xl font-black text-black">{aniosExperiencia}</span>
                <span className="text-lg text-gray-600">
                  año{aniosExperiencia === 1 ? '' : 's'} de experiencia
                </span>
              </div>
            )}
            <p className="text-lg text-gray-700 leading-relaxed whitespace-pre-line">{texto}</p>
          </div>
        </div>
      </div>
    </section>
  );
}
