import React from 'react'
import { Helmet } from 'react-helmet-async'

const services = [
  {
    title: 'Sabbath School',
    image: '/assets/family_entry.png',
    time: '9:30 AM',
    day: 'Saturday',
    description: 'Interactive Bible study and discussion groups for all ages. Join us for meaningful conversations about Scripture and practical Christian living.',
    tagColor: 'bg-blue-100 text-blue-800'
  },
  {
    title: 'Divine Worship',
    image: '/assets/speeking.png',
    time: '11:00 AM',
    day: 'Saturday',
    description: 'Our main worship service featuring inspiring music, prayer, and biblical messages that speak to everyday life and spiritual growth.',
    tagColor: 'bg-primary/15 text-primary'
  },
  {
    title: 'Potluck Fellowship',
    image: '/assets/potluck.png',
    time: 'After Worship',
    day: 'Saturday',
    description: 'Stay after the service for a delicious meal and warm fellowship. Visitors are especially welcome to join us for this time of community.',
    tagColor: 'bg-green-100 text-green-700'
  }
]

const additionalInfo = [
  {
    title: 'Church Bus Service',
    description: 'Transportation is available for those who need assistance getting to church. Please contact us to arrange pickup.',
    icon: '🚌'
  },
  {
    title: 'Family-Friendly Environment',
    description: 'Children are welcome in all our services. We also offer age-appropriate activities and care during worship times.',
    icon: '👨‍👩‍👧‍👦'
  },
  {
    title: 'Visitor Welcome',
    description: "First time visiting? We're excited to meet you! Greeters are available to help you feel at home.",
    icon: '🤝'
  }
]

export default function Services(){
  return (
    <>
      <Helmet>
        <title>Services - Annaville Seventh-day Adventist Church</title>
        <meta
          name="description"
          content="Join us for Sabbath School at 9:30 AM and Divine Worship at 11:00 AM every Saturday. Experience meaningful fellowship and spiritual growth in a welcoming community."
        />
        <meta
          name="keywords"
          content="worship services, Sabbath School, Divine Worship, fellowship, church services, Annaville SDA"
        />
      </Helmet>

      <section className="bg-gradient-to-br from-primary to-primaryDeep text-white py-20">
        <div className="container">
          <div className="max-w-4xl mx-auto text-center space-y-6">
            <h1 className="font-heading text-h1">Worship Services</h1>
            <p className="text-xl text-white/90 leading-relaxed">
              Join us every Saturday for inspiring worship, meaningful Bible study, and warm fellowship. All are welcome to experience the love of Christ in our community.
            </p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="font-heading text-h2 mb-6">Weekly Services</h2>
              <p className="text-body text-muted max-w-3xl mx-auto">
                The Annaville SDA Church offers worship services for members, non-members, and anyone interested in learning more about practical Christian living from the Word of God.
              </p>
            </div>

            <div className="grid lg:grid-cols-2 gap-12 items-start">
              <div className="space-y-8">
                {services.map(service => (
                  <article key={service.title} className="bg-white p-8 rounded-xl shadow-sm border border-subtle hover:shadow-level1 transition-shadow duration-300">
                    <div className="flex gap-6 items-start">
                      <div className="w-28 h-28 rounded-xl overflow-hidden border border-subtle shadow-sm">
                        <img
                          src={service.image}
                          alt={`${service.title} illustration`}
                          className="w-full h-full object-cover"
                          loading="lazy"
                        />
                      </div>
                      <div className="flex-1 space-y-4">
                        <div>
                          <h3 className="font-heading text-h3 text-ink mb-2">{service.title}</h3>
                          <div className="flex items-center gap-4">
                            <span className={`inline-flex items-center px-4 py-2 rounded-full text-sm font-medium ${service.tagColor}`}>
                              {service.time}
                            </span>
                            <span className="text-muted text-sm">{service.day}</span>
                          </div>
                        </div>
                        <p className="text-body text-muted leading-relaxed">
                          {service.description}
                        </p>
                      </div>
                    </div>
                  </article>
                ))}
              </div>

              <div className="relative">
                <div className="sticky top-8">
                  <img
                    src="/assets/family_entry.png"
                    alt="Families arriving at church"
                    className="w-full rounded-xl shadow-lg"
                  />
                  <div className="mt-6 p-6 bg-sand rounded-xl">
                    <h3 className="font-heading text-h3 mb-4 text-primary">Plan Your Visit</h3>
                    <p className="text-body text-muted mb-4">
                      We're located at 2710 Violet Road in Corpus Christi. Parking is available on-site, and our greeters will help you find your way.
                    </p>
                    <a href="/contact" className="btn w-full">
                      Get Directions
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section bg-sand">
        <div className="container">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="font-heading text-h2 mb-6">What to Expect</h2>
              <p className="text-body text-muted max-w-3xl mx-auto">
                We want your visit to be comfortable and meaningful. Here's what you can expect when you join us.
              </p>
            </div>

            <div className="grid md:grid-cols-3 gap-8">
              {additionalInfo.map(item => (
                <div key={item.title} className="text-center">
                  <div className="bg-white p-8 rounded-xl shadow-sm border border-subtle">
                    <div className="text-3xl mb-4" aria-hidden="true">{item.icon}</div>
                    <h3 className="font-heading text-h3 mb-4 text-primary">{item.title}</h3>
                    <p className="text-body text-muted leading-relaxed">
                      {item.description}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="max-w-4xl mx-auto text-center">
            <div className="bg-white p-12 rounded-xl shadow-sm border border-subtle">
              <h3 className="font-heading text-h3 mb-6">Ready to Join Us?</h3>
              <p className="text-body text-muted mb-8">
                We'd love to welcome you this Saturday! Have questions about our services or need assistance? Don't hesitate to reach out.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="/contact" className="btn">
                  Contact Us
                </a>
                <a href="/visit" className="btn-outline">
                  Plan Your Visit
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  )
}
