'use client'

import { useTranslations } from 'next-intl'

export default function AboutPage() {
  const t = useTranslations('About')

  return (
    <div className="font-montserrat text-sm">
      {/* Imagem de fundo fixa */}
      <div
        className="fixed inset-0 -z-10 bg-cover bg-center"
        style={{ backgroundImage: "url('/background1.png')" }}
      />

      {/* Bloco branco claro e texto suave */}
      <div className="relative z-10 bg-neutral-50 flex flex-col items-center justify-center px-6 py-12 text-neutral-700 text-center space-y-5">
        <h1 className="text-2xl md:text-4xl font-semibold mb-8 text-gray-600 mt-20 mb-15">
          {t('title')}
        </h1>
        <p className="max-w-2xl text-sm md:text-base text-gray-600 mb-15">
          {t('intro')}
        </p>
      </div>

      {/* Retângulo transparente */}
      <div className="relative z-10 w-full py-52 text-center text-white/90" />

      {/* Texto + imagem */}
      <div className="relative z-10 bg-neutral-50 flex flex-col md:flex-row items-center justify-center px-6 py-20 gap-12 text-neutral-700">
        <div className="max-w-2xl text-sm md:text-base leading-relaxed space-y-4">
          <p>{t('paragraph1')}</p>
          <p>{t('paragraph2')}</p>
        </div>

        <div className="w-full max-w-xs">
          <img
            src="/daniela1.JPG"
            alt="Daniela portrait"
            className="w-full h-auto object-cover rounded-lg shadow-md"
          />
        </div>
      </div>
    </div>
  )
}