import React from 'react';
import { Link } from 'react-router-dom';
import { Calculator, BookOpen, Users } from 'lucide-react';
import { useIsMobile } from "@/hooks/use-mobile";
import { useLanguage } from "@/contexts/LanguageContext";
import { scrollToSection } from "@/utils/scrollToSection";

/**
 * Hero Component - Optimized for LCP
 * - No useState for visibility (removes re-render)
 * - Inline critical styles
 * - Simplified button handlers
 */
const Hero = () => {
  const isMobile = useIsMobile();
  const { t } = useLanguage();
  
  const handleCtaClick = () => {
    window.open('https://calendly.com/get-your-ivi-now', '_blank');
  };

  const handleSeePricingClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault();
    scrollToSection('pricing');
  };
  
  return (
    <main 
      id="main-content"
      className="pt-20 pb-16 md:pt-32 md:pb-24 bg-gradient-to-b from-background via-background to-muted/20 relative overflow-hidden"
      role="main"
      tabIndex={-1}
    >
      {/* Background decorations - hidden on mobile for performance */}
      <div className="hidden md:block absolute inset-0 bg-grid-pattern opacity-5" aria-hidden="true" />
      <div className="hidden md:block absolute top-20 left-10 w-72 h-72 bg-primary/5 rounded-full" aria-hidden="true" />
      <div className="hidden md:block absolute bottom-20 right-10 w-96 h-96 bg-accent/5 rounded-full" aria-hidden="true" />
      
      <div className="container mx-auto px-4 md:px-6 relative">
        <div className="flex flex-col items-center text-center">
          {/* ARC Logo - LCP Element - Inline for fastest render */}
          <div className="mb-4 md:mb-6">
            <img
              src="/lovable-uploads/f9f10bfd-e36a-48d8-a3c5-d4a7b313c943.png" 
              alt="ARC On Demand Revenue - Logo" 
              width={isMobile ? 280 : 384}
              height={isMobile ? 152 : 208}
              fetchPriority="high"
              loading="eager"
              decoding="sync"
              className="max-w-[280px] md:max-w-[384px] h-auto"
              style={{ 
                contentVisibility: 'auto',
                containIntrinsicSize: isMobile ? '280px 152px' : '384px 208px'
              }}
            />
          </div>

          <h1 className="hero-title text-wrap-improved -mt-4">
            {t('hero.title')}
          </h1>
          
          <p className="hero-subtitle text-wrap-improved" role="text">
            <span className="text-primary bg-gradient-to-r from-primary to-primary/80 bg-clip-text text-transparent">
              {t('hero.subtitle1')}
            </span>
            . 
            <span className="text-pink-500 bg-gradient-to-r from-pink-500 to-pink-600 bg-clip-text text-transparent">
              {t('hero.subtitle2')}
            </span>
          </p>
          
          <p className="text-sm md:text-base text-muted-foreground mb-4 max-w-2xl text-wrap-improved">
            {t('hero.description')}
          </p>

          {/* Internal pill links for SEO and crawlability */}
          <div className="flex flex-row flex-wrap gap-2 justify-center items-center mb-8 max-w-2xl">
            <Link
              to="/revenue-calculator"
              className="inline-flex items-center gap-1.5 rounded-full transition-colors hover:bg-[#DCE8FF]"
              style={{
                fontSize: '13px',
                padding: '6px 14px',
                backgroundColor: '#EBF2FF',
                border: '1px solid rgba(41, 121, 255, 0.2)',
                color: '#2979FF',
              }}
            >
              <Calculator size={14} aria-hidden="true" />
              <span>Revenue Calculator</span>
            </Link>
            <Link
              to="/blog"
              className="inline-flex items-center gap-1.5 rounded-full transition-colors hover:bg-[#DCE8FF]"
              style={{
                fontSize: '13px',
                padding: '6px 14px',
                backgroundColor: '#EBF2FF',
                border: '1px solid rgba(41, 121, 255, 0.2)',
                color: '#2979FF',
              }}
            >
              <BookOpen size={14} aria-hidden="true" />
              <span>Our Blog</span>
            </Link>
            <Link
              to="/about"
              className="inline-flex items-center gap-1.5 rounded-full transition-colors hover:bg-[#DCE8FF]"
              style={{
                fontSize: '13px',
                padding: '6px 14px',
                backgroundColor: '#EBF2FF',
                border: '1px solid rgba(41, 121, 255, 0.2)',
                color: '#2979FF',
              }}
            >
              <Users size={14} aria-hidden="true" />
              <span>Meet the Team</span>
            </Link>
          </div>

          <div 
            className="flex flex-col sm:flex-row gap-4 justify-center items-center w-full"
            role="group"
            aria-label={t('a11y.heroActions')}
          >
            {/* Simple buttons - no OptimizedButton wrapper for faster TTI */}
            <button 
              className="bg-blue-500 hover:bg-blue-600 text-white h-12 px-8 rounded-lg text-sm font-medium shadow-sm hover:shadow-md transition-colors w-[180px] flex items-center justify-center"
              onClick={handleCtaClick}
              aria-label={t('a11y.scheduleConsultation')}
              type="button"
            >
              <span>{t('nav.talkToUs')}</span>
            </button>
            
            <a 
              href="/#pricing"
              onClick={handleSeePricingClick}
              className="bg-transparent hover:bg-blue-50 text-gray-700 hover:text-blue-600 border border-blue-500 hover:border-blue-600 h-12 px-6 rounded-lg text-xs font-medium transition-colors w-[180px] flex items-center justify-center whitespace-nowrap"
              aria-label={t('a11y.viewPricing')}
            >
              <span className="truncate">{t('hero.seePricing')}</span>
            </a>
          </div>
        </div>
      </div>
    </main>
  );
};

export default Hero;