import Image from 'next/image';
import Link from 'next/link';
import styles from './ServicesList.module.css';

const services = [
  {
    id: 'dine-in',
    tag: 'Service 01',
    title: 'Dine-In Experience',
    description:
      'Step into our cozy, family-friendly restaurant and experience authentic South Indian dining right here in Waterloo. Whether it\'s a quiet weekday lunch or a lively weekend family meal, our warm atmosphere and attentive team ensure every visit feels special.',
    highlights: [
      { icon: '🍽️', text: 'Comfortable seating for families and groups' },
      { icon: '🌿', text: '100% vegetarian menu, freshly prepared daily' },
      { icon: '💁', text: 'Friendly staff and quick, attentive service' },
      { icon: '🔓', text: 'Open 7 days — Mon–Fri 11AM to 9PM, Weekends 10AM to 10PM' },
    ],
    cta: { label: 'Reserve a Table', href: '/contact' },
    image: '/images/service-dine-in.jpg',
    imageAlt: 'Guests enjoying dosas in our Waterloo restaurant',
    flip: false,
    accent: '#2d6a4f',
  },
  {
    id: 'takeout',
    tag: 'Service 02',
    title: 'Takeout & Online Orders',
    description:
      'No time to dine in? Order your favourite dosas, idlis, and vadas online and enjoy them hot and fresh at home or on the go. Our takeout packaging is designed to keep your food crispy and aromatic until the last bite.',
    highlights: [
      { icon: '🚗', text: 'Fast pickup — ready in 15–20 minutes' },
      { icon: '📦', text: 'Fresh eco-friendly packaging that preserves crunch' },
      { icon: '💻', text: 'Easy online ordering — browse, tap, pick up' },
      { icon: '⏱️', text: 'No minimum order, no fuss' },
    ],
    cta: { label: 'Order Online', href: '/menu' },
    image: '/images/service-takeout.jpg',
    imageAlt: 'Freshly packed takeout dosa boxes',
    flip: true,
    accent: '#d4a017',
  },
  {
    id: 'catering',
    tag: 'Service 03',
    title: 'Catering for Events & Parties',
    description:
      'Make your next event truly flavorful with authentic South Indian catering. We cater for birthdays, weddings, corporate lunches, housewarmings, and community gatherings — bringing the full My Dosa Place experience directly to your venue.',
    highlights: [
      { icon: '🎉', text: 'Tailored 100% vegetarian menus for any occasion' },
      { icon: '🍛', text: 'Live dosa counters available on request' },
      { icon: '👨‍🍳', text: 'Experienced catering team — setup to cleanup' },
      { icon: '📋', text: 'Custom menu planning and dietary accommodation' },
    ],
    cta: { label: 'Get a Catering Quote', href: '/contact' },
    image: '/images/service-catering.jpg',
    imageAlt: 'South Indian catering spread for a large event',
    flip: false,
    accent: '#2d6a4f',
  },
  {
    id: 'festival',
    tag: 'Service 04',
    title: 'Festival & Special Menus',
    description:
      'Celebrate South Indian festivals with us! We offer limited-time festival menus during Pongal, Onam, Ugadi, and other special occasions — filled with traditional dishes and festive combos that honour the culture and season.',
    highlights: [
      { icon: '🪔', text: 'Special menus for Pongal, Onam, Ugadi & more' },
      { icon: '🍚', text: 'Traditional dishes not on our regular menu' },
      { icon: '🎊', text: 'Festive combos for the whole family' },
      { icon: '📅', text: 'Seasonal availability — follow us for updates' },
    ],
    cta: { label: 'See Upcoming Events', href: '/contact' },
    image: '/images/service-festival.jpg',
    imageAlt: 'Festive South Indian Pongal spread',
    flip: true,
    accent: '#d4a017',
  },
];

export default function ServicesList() {
  return (
    <section className={styles.section}>
      {services.map((svc, i) => (
        <div key={svc.id} id={svc.id} className={`${styles.service} ${svc.flip ? styles.flip : ''}`}>
          <div className={styles.serviceContainer}>
            {/* Image side */}
            <div className={styles.imageCol}>
              <div className={styles.imageFrame}>
                <Image
                  src={svc.image}
                  alt={svc.imageAlt}
                  fill
                  style={{ objectFit: 'cover' }}
                />
                <div className={styles.imageTag}>
                  <span>{svc.tag}</span>
                </div>
              </div>
            </div>

            {/* Content side */}
            <div className={styles.contentCol}>
              <span className={styles.tag}>{svc.tag}</span>
              <h2 className={styles.title}>{svc.title}</h2>
              <p className={styles.desc}>{svc.description}</p>

              <ul className={styles.highlights}>
                {svc.highlights.map((h, j) => (
                  <li key={j} className={styles.highlight}>
                    <span className={styles.highlightIcon}>{h.icon}</span>
                    <span>{h.text}</span>
                  </li>
                ))}
              </ul>

              <Link href={svc.cta.href} className={styles.cta}>
                {svc.cta.label}
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </Link>
            </div>
          </div>
        </div>
      ))}
    </section>
  );
}
