import React from 'react';
import { motion } from 'framer-motion';
import { offerings } from '../data/content';
import { ChevronRight } from 'lucide-react';

const OfferingCard = ({ offering, index }: { offering: any, index: number }) => {
  const Icon = offering.icon;
  
  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5, delay: index * 0.1 }}
      className="glass-card p-8 group hover:border-primary/30 transition-all duration-500"
    >
      <div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center text-primary mb-6 group-hover:scale-110 transition-transform duration-500">
        <Icon size={28} />
      </div>
      <h3 className="text-2xl font-bold mb-4">{offering.title}</h3>
      <p className="text-muted mb-8 leading-relaxed">
        {offering.description}
      </p>
      <ul className="space-y-3">
        {offering.points.map((point: string, i: number) => (
          <li key={i} className="flex items-center text-sm text-foreground/80">
            <ChevronRight className="text-primary mr-2" size={16} />
            {point}
          </li>
        ))}
      </ul>
    </motion.div>
  );
};

const Offerings = () => {
  return (
    <section id="offerings" className="py-24 relative bg-surface/30">
      <div className="container mx-auto px-6">
        <div className="mb-16">
          <h2 className="text-3xl md:text-5xl font-bold mb-6">Nasza Oferta</h2>
          <p className="text-xl text-muted max-w-2xl">
            Budujemy kompleksowe rozwiązania, które przekładają potencjał sztucznej inteligencji na realne wyniki biznesowe.
          </p>
        </div>
        
        <div className="grid md:grid-cols-2 gap-8">
          {offerings.map((offering, index) => (
            <OfferingCard key={offering.id} offering={offering} index={index} />
          ))}
        </div>
      </div>
    </section>
  );
};

export default Offerings;