
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Mail, Phone, MapPin, Clock, Headphones } from "lucide-react";
import { useTranslation } from "react-i18next";

const Contact = () => {
  const { t } = useTranslation();

  const contactInfo = [
    {
      icon: Mail,
      title: t('contact.contactInfo.email.title'),
      description: t('contact.contactInfo.email.description'),
      details: t('contact.contactInfo.email.details'),
      link: "mailto:support@shopcall.ai"
    },
    {
      icon: Phone,
      title: t('contact.contactInfo.phone.title'),
      description: t('contact.contactInfo.phone.description'),
      details: t('contact.contactInfo.phone.details'),
      link: "tel:+15551234567"
    },
    {
      icon: MapPin,
      title: t('contact.contactInfo.location.title'),
      description: t('contact.contactInfo.location.description'),
      details: t('contact.contactInfo.location.details'),
      link: "#"
    },
    {
      icon: Clock,
      title: t('contact.contactInfo.hours.title'),
      description: t('contact.contactInfo.hours.description'),
      details: t('contact.contactInfo.hours.details'),
      link: "#"
    }
  ];

  return (
    <div className="min-h-screen bg-slate-900 text-white">
      {/* Header */}
      <header className="border-b border-slate-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center gap-3">
              <img src="/uploads/e0ddbf09-622c-426a-851f-149776e300c0.png" alt="ShopCall.ai" className="w-8 h-8" />
              <span className="text-xl font-bold text-white">ShopCall.ai</span>
            </div>
            <Button variant="outline" className="border-slate-600 text-slate-300 hover:bg-slate-800" asChild>
              <a href="/">{t('contact.backHome')}</a>
            </Button>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="py-20">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h1 className="text-5xl font-bold mb-6">{t('contact.title')}</h1>
          <p className="text-xl text-slate-300 mb-8">
            {t('contact.hero.subtitle')}
          </p>
        </div>
      </section>

      {/* Contact Options */}
      <section className="py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-center mb-16">
            <Card className="bg-slate-800/50 border-slate-700 hover:bg-slate-800/70 transition-colors max-w-md">
              <CardHeader className="text-center">
                <div className="w-12 h-12 bg-[#52b3d0]/20 rounded-lg flex items-center justify-center mb-4 mx-auto">
                  <Headphones className="h-6 w-6 text-[#52b3d0]" />
                </div>
                <CardTitle className="text-white text-xl">{t('contact.scheduleDemo.title')}</CardTitle>
              </CardHeader>
              <CardContent className="text-center">
                <p className="text-slate-300 mb-6">{t('contact.scheduleDemo.description')}</p>
                <Button className="bg-[#52b3d0] hover:bg-[#4a9fbc] text-white">
                  {t('contact.scheduleDemo.button')}
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Contact Information */}
      <section className="py-16 bg-slate-800/30">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-12">
              <h3 className="text-3xl font-bold text-white mb-6">{t('contact.getInTouch.title')}</h3>
              <p className="text-slate-300 text-lg">
                {t('contact.getInTouch.description')}
              </p>
            </div>

            <div className="grid md:grid-cols-2 gap-6">
              {contactInfo.map((info, index) => (
                <Card key={index} className="bg-slate-700/50 border-slate-600">
                  <CardContent className="p-6">
                    <div className="flex items-start gap-4">
                      <div className="w-10 h-10 bg-[#52b3d0]/20 rounded-lg flex items-center justify-center flex-shrink-0">
                        <info.icon className="h-5 w-5 text-[#52b3d0]" />
                      </div>
                      <div>
                        <h4 className="text-white font-semibold mb-1">{info.title}</h4>
                        <p className="text-slate-400 text-sm mb-2">{info.description}</p>
                        {info.link !== "#" ? (
                          <a href={info.link} className="text-[#52b3d0] hover:text-[#4a9fbc]">
                            {info.details}
                          </a>
                        ) : (
                          <span className="text-slate-300">{info.details}</span>
                        )}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-900 border-t border-slate-800 py-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="flex justify-center items-center gap-4 text-sm text-slate-500">
            <span>{t('contact.footer.copyright')}</span>
            <span>•</span>
            <a href="/about" className="hover:text-slate-300">{t('contact.footer.about')}</a>
            <span>•</span>
            <a href="/privacy" className="hover:text-slate-300">{t('contact.footer.privacy')}</a>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default Contact;
