import React from 'react';
import { ArrowRight, Settings } from 'lucide-react';
import { Link } from 'react-router-dom';
import { Button, Container } from './Shared';
import { useData } from '../contexts/DataContext';

export const Hero: React.FC = () => {
  const { data } = useData();
  const { hero, texts } = data;

  return (
    <section id="home" className="relative min-h-screen flex items-center justify-center pt-20 overflow-hidden">
      {/* Background Image with Overlay */}
      <div className="absolute inset-0 z-0">
        <img 
          src={hero.bgImage} 
          alt="Oficina Mecânica" 
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-black via-black/80 to-transparent" />
      </div>

      <Container className="relative z-10 w-full">
        <div className="max-w-2xl">
          {/* Badge atualizado com border-primary sólido */}
          <div className="inline-flex items-center gap-2 bg-primary/10 border border-primary rounded-full px-4 py-1 mb-6 backdrop-blur-sm">
            <Settings size={16} className="text-primary" />
            <span className="text-primary text-sm font-semibold uppercase tracking-wider">Centro Automotivo Premium</span>
          </div>
          
          <h1 className="text-5xl md:text-7xl font-black text-white leading-tight mb-6">
            <span dangerouslySetInnerHTML={{ __html: hero.title.replace(/\n/g, '<br/>') }} />
          </h1>
          
          <p className="text-xl text-gray-300 mb-8 border-l-4 border-primary pl-4">
            {hero.subtitle}
          </p>

          <div className="flex flex-col sm:flex-row gap-4">
            <Button size="lg" className="shadow-[0_0_30px_-5px_rgba(var(--primary-color),0.4)]" onClick={() => window.open(`https://wa.me/${data.settings.whatsappNumber}`, '_blank')}>
              {hero.buttonText} <ArrowRight size={20} />
            </Button>
            <Link to="/servicos">
              <Button size="lg" variant="white" className="w-full sm:w-auto">
                Ver Serviços
              </Button>
            </Link>
          </div>

          <div className="mt-12 flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-8 text-gray-400 text-sm font-medium">
            <div className="flex items-center gap-2">
              <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
              {texts.hero.feature1}
            </div>
            <div className="hidden sm:block">|</div>
            <div>{texts.hero.feature2}</div>
            <div className="hidden sm:block">|</div>
            <div>{texts.hero.feature3}</div>
          </div>
        </div>
      </Container>
    </section>
  );
};