import React from 'react';
import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import { Home, UtensilsCrossed, Ship, TreePine, Compass, Users, Car, Waves, ArrowRight } from 'lucide-react';
import SectionHeader from '../components/shared/SectionHeader';

const services = [
  { icon: Home, title: 'Accommodation & Guest Services', desc: 'Premium rooms with lake views, daily housekeeping, concierge service, and personalized guest care that makes your stay feel like home.', link: '/rooms' },
  { icon: UtensilsCrossed, title: 'Restaurant & Local Cuisine', desc: 'Savor authentic Rwandan dishes, fresh lake fish, and international cuisine in our lakeside restaurant with panoramic views.', link: '/restaurant' },
  { icon: Ship, title: 'Lake Kivu Boat Tours', desc: 'Glide across the calm waters of Lake Kivu on traditional wooden boats, discovering hidden coves and stunning shorelines.', link: '/tours' },
  { icon: TreePine, title: 'Island Visits & Exploration', desc: 'Embark on guided excursions to the beautiful islands of Lake Kivu, each with its own unique character and natural beauty.', link: '/tours' },
  { icon: Compass, title: 'Karongi Sightseeing & Nature Tours', desc: 'Discover the rolling hills, tea plantations, and breathtaking viewpoints that make the Karongi district truly special.', link: '/tours' },
  { icon: Users, title: 'Cultural & Community Experiences', desc: 'Engage with local Rwandan culture through village visits, traditional dance performances, and artisan workshops.', link: '/tours' },
  { icon: Car, title: 'Transport & Tour Guidance', desc: 'Seamless airport transfers, local transportation, and experienced guides to make your journey effortless and enriching.' },
  { icon: Waves, title: 'Lakeside Relaxation Packages', desc: 'Unwind with curated wellness packages that combine waterfront yoga, traditional treatments, and peaceful lake meditation.' },
];

export default function Services() {
  return (
    <div>
      {/* Hero */}
      <section className="relative h-[50vh] min-h-[350px] overflow-hidden">
        <img
          src="https://media.base44.com/images/public/69e8d5d1baf758e32e99aa0f/12368af7b_generated_ec7f6c89.png"
          alt="Services at Kivu Lake Breeze"
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-[#0A1A2F]/60 to-[#0A1A2F]/80" />
        <div className="absolute inset-0 flex items-center justify-center text-center px-6">
          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8 }}>
            <p className="text-[#F4D58D] text-xs uppercase tracking-[0.3em] font-body font-medium mb-4">Hospitality & Tourism</p>
            <h1 className="font-heading text-4xl md:text-5xl lg:text-6xl font-semibold text-[#F9FBFB]">Our Services</h1>
          </motion.div>
        </div>
      </section>

      {/* Services Grid */}
      <section className="py-24 px-6 lg:px-8 bg-[#F9FBFB]">
        <div className="max-w-7xl mx-auto">
          <SectionHeader
            eyebrow="What We Offer"
            title="Complete Hospitality Experience"
            description="From accommodation to adventure, dining to discovery — everything you need for an unforgettable Lake Kivu stay."
          />

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {services.map((svc, i) => (
              <motion.div
                key={svc.title}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1, duration: 0.6 }}
                className="group p-8 bg-white rounded-2xl border border-[#0A1A2F]/5 hover:border-[#F4D58D]/30 
                         hover:shadow-lg transition-all duration-500"
              >
                <div className="flex items-start gap-5">
                  <div className="w-12 h-12 rounded-xl bg-[#0A1A2F]/5 flex items-center justify-center flex-shrink-0
                                group-hover:bg-[#F4D58D]/20 transition-colors duration-500">
                    <svc.icon size={22} className="text-[#0A1A2F] group-hover:text-[#F4D58D] transition-colors" strokeWidth={1.5} />
                  </div>
                  <div className="flex-1">
                    <h3 className="font-heading text-lg font-semibold text-[#0A1A2F] mb-2">{svc.title}</h3>
                    <p className="text-sm text-[#4A5568] font-body leading-relaxed mb-4">{svc.desc}</p>
                    {svc.link && (
                      <Link
                        to={svc.link}
                        className="inline-flex items-center gap-2 text-[#0A1A2F] text-xs font-body font-semibold uppercase tracking-wider
                                 hover:text-[#F4D58D] transition-colors group-hover:gap-3 duration-300"
                      >
                        Learn More <ArrowRight size={12} />
                      </Link>
                    )}
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}