import { Button } from "@/components/ui/button";
import { Mail, MessageCircle, Phone } from "lucide-react";

/**
 * Lima e Lopes - Página Principal
 * Design: Modernismo Corporativo Minimalista
 * Paleta: Vermelho Bordo (#84132B), Cinza (#E9EAEC), Azul Escuro (#1F628E)
 * Tipografia: Playfair Display (títulos), Inter (corpo)
 */

export default function Home() {
  const whatsappDra1 = "https://wa.me/5511999999999?text=Olá%2C%20gostaria%20de%20agendar%20uma%20consulta";
  const whatsappDra2 = "https://wa.me/5511988888888?text=Olá%2C%20gostaria%20de%20agendar%20uma%20consulta";

  return (
    <div className="min-h-screen bg-background">
      {/* Hero Section - Foto das Doutoras */}
      <section className="w-full overflow-hidden">
        <img
          src="https://d2xsxph8kpxj0f.cloudfront.net/310519663686736096/cu3dUt6bodkViKYZrE8f6E/lima-lopes-header-Lhzxpx4wTBhSdw4KRiB8XJ.webp"
          alt="Dra. Lima e Dra. Lopes - Escritório de Advocacia"
          className="w-full h-auto object-cover aspect-video"
        />
      </section>

      {/* Main Content Container */}
      <div className="max-w-2xl mx-auto px-6 md:px-8 py-12 md:py-16">
        {/* Divider Line */}
        <div className="h-1 w-20 bg-gradient-to-r from-primary to-secondary mb-8" />

        {/* Título do Escritório */}
        <h1
          className="mb-2 font-bold tracking-tight text-foreground"
          style={{
            fontSize: "3rem",
            fontFamily: "'Playfair Display', serif",
          }}
        >
          Lima e Lopes
        </h1>

        {/* Subtítulo */}
        <p className="text-sm font-semibold text-primary mb-6 tracking-wide">
          ESCRITÓRIO JURÍDICO
        </p>

        {/* Apresentação Institucional */}
        <div className="mb-12">
          <p className="text-lg text-muted-foreground leading-relaxed mb-4">
            Somos um escritório de advocacia moderno e tecnológico, dedicado a oferecer soluções jurídicas de excelência com foco em atendimento personalizado e resultados efetivos.
          </p>
          <p className="text-lg text-muted-foreground leading-relaxed">
            Com expertise em diversas áreas do direito, trabalhamos com profissionalismo, confiança e proximidade, transformando desafios jurídicos em oportunidades de sucesso para nossos clientes.
          </p>
        </div>

        {/* Divider */}
        <div className="h-px bg-border my-10" />

        {/* CTA Section */}
        <div className="mb-8">
          <p className="text-sm font-semibold text-muted-foreground mb-8 tracking-wide">
            AGENDE SUA CONSULTA
          </p>

          {/* Buttons Container */}
          <div className="space-y-4 md:space-y-0 md:flex md:gap-4">
            {/* Botão Dra. 1 */}
            <a
              href={whatsappDra1}
              target="_blank"
              rel="noopener noreferrer"
              className="flex-1"
            >
              <button
                className="w-full px-8 py-4 rounded-lg font-semibold text-white bg-primary transition-all duration-200 ease-out hover:shadow-lg hover:opacity-90 active:scale-95 flex items-center justify-center gap-3"
              >
                <MessageCircle className="w-5 h-5" />
                Falar com Dra. Alessandra Lima
              </button>
            </a>

            {/* Botão Dra. 2 */}
            <a
              href={whatsappDra2}
              target="_blank"
              rel="noopener noreferrer"
              className="flex-1"
            >
              <button
                className="w-full px-8 py-4 rounded-lg font-semibold text-white bg-secondary transition-all duration-200 ease-out hover:shadow-lg hover:opacity-90 active:scale-95 flex items-center justify-center gap-3"
              >
                <MessageCircle className="w-5 h-5" />
                Falar com Dra. Ana Flávia Lopes
              </button>
            </a>
          </div>
        </div>

        {/* Footer Contact Info */}
        <div className="mt-12 pt-8 border-t border-border">
          <p className="text-xs text-muted-foreground mb-4 tracking-wide">
            OUTRAS FORMAS DE CONTATO
          </p>

          <div className="space-y-3">
            <a
              href="mailto:contato@limalopes.com.br"
              className="flex items-center gap-3 text-sm text-foreground hover:text-primary transition-colors"
            >
              <Mail className="w-4 h-4 text-primary" />
              contato@limalopes.com.br
            </a>

            <a
              href="tel:+551133334444"
              className="flex items-center gap-3 text-sm text-foreground hover:text-primary transition-colors"
            >
              <Phone className="w-4 h-4 text-primary" />
              (11) 3333-4444
            </a>
          </div>
        </div>
      </div>

      {/* Background Pattern - Subtle */}
      <div
        className="fixed inset-0 -z-10 opacity-5"
        style={{
          backgroundImage: url('https://d2xsxph8kpxj0f.cloudfront.net/310519663686736096/cu3dUt6bodkViKYZrE8f6E/lima-lopes-pattern-a9reo5NzPgUtRhNWfLDfXF.webp'),
          backgroundSize: "400px 400px",
          backgroundRepeat: "repeat",
        }}
      />
    </div>
  );
}