import { Mail, MessageCircle, Phone } from "lucide-react";
import { company, mailtoUrl, whatsappUrl } from "./data";
import carlosAsset from "@/assets/carlos-martins.jpg.asset.json";

export function Contact() {
  return (
    <section id="contato" className="py-20 sm:py-24">
      <div className="mx-auto max-w-6xl px-5">
        <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
          <div className="rounded-2xl border border-border bg-card p-8 shadow-elevated sm:p-12">
            <h2 className="max-w-2xl font-display text-3xl font-bold sm:text-4xl">
              Vamos conversar sobre o seu desafio?
            </h2>
            <p className="mt-4 max-w-xl text-sm leading-relaxed text-muted-foreground">
              Conte o que sua empresa precisa. Avaliamos o cenário e indicamos os próximos passos.
            </p>

            <div className="mt-8">
              <a
                href={whatsappUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 rounded-md bg-primary px-8 py-4 text-base font-semibold text-primary-foreground transition-opacity hover:opacity-90"
              >
                <MessageCircle size={20} />
                Falar no WhatsApp
              </a>
            </div>

            <div className="mt-6 flex flex-wrap items-center gap-x-6 gap-y-3 text-sm text-muted-foreground">
              <a
                href={mailtoUrl}
                className="inline-flex items-center gap-2 transition-colors hover:text-foreground"
              >
                <Mail size={16} />
                {company.email}
              </a>
              <a
                href={`tel:+${company.whatsapp}`}
                className="inline-flex items-center gap-2 transition-colors hover:text-foreground"
              >
                <Phone size={16} />
                {company.phoneDisplay}
              </a>
            </div>
          </div>

          <div className="flex flex-col items-center lg:items-start">
            <div className="relative h-64 w-64 overflow-hidden rounded-2xl border-4 border-white shadow-xl sm:h-80 sm:w-80 lg:h-96 lg:w-96 bg-muted flex items-center justify-center">
              <img
                src="/mnt/user-uploads/Inove_-244.jpg"
                alt="Carlos Martins"
                className="h-full w-full object-cover grayscale transition-all hover:grayscale-0"
                onError={(e) => {
                  const target = e.target as HTMLImageElement;
                  if (!target.dataset['triedFallback']) {
                    target.dataset['triedFallback'] = 'true';
                    target.src = 'https://id-preview--8dcaf14e-4210-462e-abc0-fa3313256a9c.lovableproject.com/mnt/user-uploads/Inove_-244.jpg';
                  }
                }}
              />
            </div>
            <div className="mt-6 text-center lg:text-left">
              <p className="font-display text-xl font-bold text-foreground">Carlos Martins</p>
              <p className="text-sm font-medium text-primary">Arquiteto de Soluções</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}