function About() {
  return (
    <section id="about" className="py-20 bg-background">
      <div className="container mx-auto px-4">
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center max-w-6xl mx-auto">
          <div className="relative">
            <div className="relative rounded-lg overflow-hidden shadow-elegant aspect-[4/5]">
              <img src={window.ASSETS.lateral} alt="Bobcat E10 — vista lateral" className="w-full h-full object-cover" />
              <div className="absolute inset-0 bg-gradient-to-t from-primary/40 to-transparent"></div>
            </div>
            <div className="absolute -bottom-6 -right-4 md:right-auto md:-left-6 bg-white rounded-lg shadow-elegant p-5 max-w-[200px] hidden sm:block">
              <div className="text-4xl font-extrabold text-primary leading-none">1988</div>
              <div className="text-xs text-muted-foreground mt-1.5 leading-snug">
                Fundação · 37+ anos atendendo Uberlândia e região
              </div>
            </div>
          </div>

          <div>
            <div className="text-xs font-semibold tracking-[0.12em] uppercase text-accent mb-3">
              Sobre a Casa Bella
            </div>
            <h2 className="text-3xl md:text-4xl font-bold text-primary leading-tight mb-5">
              Uma equipe que conhece Uberlândia obra por obra.
            </h2>
            <p className="text-muted-foreground text-base leading-relaxed mb-4">
              A Casa Bella Construtora foi fundada em <strong className="text-primary">1988</strong>.
              Trabalhamos em obras residenciais, comerciais e industriais com a mesma atenção ao detalhe — da
              perfuração de um único poste à fundação completa de um edifício.
            </p>
            <p className="text-muted-foreground text-base leading-relaxed mb-8">
              Já executamos serviços para clientes como <strong className="text-primary">Urca</strong>,{' '}
              <strong className="text-primary">Construtora Perplan</strong>,{' '}
              <strong className="text-primary">Brasfigo</strong> e{' '}
              <strong className="text-primary">Centro Empresarial Leste</strong>.
            </p>

            <div className="grid grid-cols-3 gap-4 border-t border-border pt-6">
              {[
                { v: '37+', l: 'Anos de mercado' },
                { v: '4', l: 'Clientes recorrentes' },
                { v: '1.180 kg', l: 'Peso da Bobcat E10' },
              ].map((s) => (
                <div key={s.l}>
                  <div className="text-2xl md:text-3xl font-bold text-primary leading-none">{s.v}</div>
                  <div className="text-xs text-muted-foreground mt-1.5">{s.l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.About = About;