import React from 'react';

interface Benefit {
  image: string;
  headline: string;
  description: string;
  imageAlt: string;
}

const WhyPennyzoSection: React.FC = () => {
  const benefits: Benefit[] = [
    {
      image: '/api/placeholder/600/400',
      imageAlt: 'Time savings dashboard showing automated processes',
      headline: 'Save 10+ Hours Every Week',
      description: 'Stop wasting time on manual data entry and repetitive tasks. Our intelligent automation handles routine operations, invoice processing, and report generation automatically. Focus on strategy and growth while Pennyzo takes care of the busy work that used to consume your valuable time.'
    },
    {
      image: '/api/placeholder/600/400',
      imageAlt: 'Real-time business analytics and insights dashboard',
      headline: 'Make Smarter Decisions with Real-Time Insights',
      description: 'Transform your raw business data into actionable intelligence with our advanced analytics suite. Get instant visibility into cash flow, sales performance, and operational metrics. Our predictive analytics help you spot trends early and make confident decisions that drive growth.'
    },
    {
      image: '/api/placeholder/600/400',
      imageAlt: 'Unified business platform showing all tools integrated',
      headline: 'Eliminate Tool Juggling Forever',
      description: 'Say goodbye to switching between dozens of disconnected apps and losing data in translation. Our unified platform brings together accounting, CRM, HR, inventory, and analytics in one seamless experience. Reduce software costs while improving team productivity and data accuracy.'
    },
    {
      image: '/api/placeholder/600/400',
      imageAlt: 'Scalable business growth visualization',
      headline: 'Scale Without the Growing Pains',
      description: 'Whether you\'re a startup or enterprise, our platform grows with you. Add new users, locations, and features effortlessly. Our robust architecture handles increased transaction volumes and complex workflows without compromising performance or requiring costly migrations.'
    }
  ];

  return (
    <section id="why-pennyzo" className="py-20 lg:py-32 relative">
      {/* Background overlay */}
      <div className="absolute inset-0 bg-deep-forest bg-opacity-10"></div>
      
      <div className="container mx-auto px-6 relative z-10">
        {/* Section Header */}
        <div className="text-center mb-20">
          <div className="flex items-center justify-center mb-8">
            <div className="w-20 h-0.5 bg-luxury-gold mr-6"></div>
            <div className="w-3 h-3 bg-luxury-gold rounded-full"></div>
            <div className="w-20 h-0.5 bg-luxury-gold ml-6"></div>
          </div>
          <h2 className="text-4xl md:text-5xl lg:text-6xl font-luxury-serif font-bold text-luxury-gold mb-8 tracking-wide">
            Why Businesses
            <span className="block text-cream mt-2">Love Pennyzo</span>
          </h2>
          <p className="text-xl text-cream max-w-4xl mx-auto font-elegant-sans font-light leading-relaxed">
            Discover the tangible benefits that thousands of businesses experience 
            when they choose Pennyzo as their growth partner.
          </p>
        </div>

        {/* Benefits List */}
        <div className="space-y-24 lg:space-y-32">
          {benefits.map((benefit, index) => (
            <div
              key={index}
              className={`flex flex-col lg:flex-row items-center gap-12 lg:gap-16 ${
                index % 2 === 1 ? 'lg:flex-row-reverse' : ''
              }`}
            >
              {/* Image */}
              <div className="flex-1 relative group">
                <div className="absolute inset-0 bg-luxury-gold opacity-0 group-hover:opacity-10 rounded-2xl blur-xl transition-all duration-500"></div>
                <div className="relative overflow-hidden rounded-2xl border border-luxury-gold border-opacity-20 group-hover:border-opacity-40 transition-all duration-300">
                  <img
                    src={benefit.image}
                    alt={benefit.imageAlt}
                    className="w-full h-80 lg:h-96 object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-deep-forest/20 to-transparent"></div>
                </div>
              </div>

              {/* Text Content */}
              <div className="flex-1 text-center lg:text-left">
                <h3 className="text-3xl lg:text-4xl xl:text-5xl font-luxury-serif font-bold text-luxury-gold mb-6 leading-tight">
                  {benefit.headline}
                </h3>
                <p className="text-cream text-lg lg:text-xl leading-relaxed font-elegant-sans opacity-90">
                  {benefit.description}
                </p>
                
                {/* Decorative element */}
                <div className={`mt-8 w-20 h-0.5 bg-luxury-gold opacity-60 ${
                  index % 2 === 1 ? 'lg:ml-0' : 'lg:mr-0'
                } mx-auto lg:mx-0`}></div>
              </div>
            </div>
          ))}
        </div>

        {/* Call to Action */}
        <div className="text-center mt-24">
          <div className="max-w-2xl mx-auto mb-10">
            <p className="text-cream text-xl font-elegant-sans font-light mb-8 leading-relaxed">
              Ready to experience these benefits for your business?
            </p>
          </div>
          
          <div className="flex flex-col sm:flex-row gap-6 items-center justify-center">
            <button className="bg-luxury-gold hover:bg-opacity-90 text-deep-forest px-12 py-4 rounded-xl font-elegant-sans font-semibold text-lg tracking-wide transition-all duration-300 transform hover:scale-105 hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-luxury-gold focus:ring-opacity-50 min-w-[220px]">
              Start Free Trial
            </button>
            <button className="border-2 border-luxury-gold text-luxury-gold hover:bg-luxury-gold hover:text-deep-forest px-12 py-4 rounded-xl font-elegant-sans font-semibold text-lg tracking-wide transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-luxury-gold focus:ring-opacity-50 min-w-[220px]">
              See Live Demo
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

export default WhyPennyzoSection;