import type { Metadata } from 'next';
import Image from 'next/image';
import Link from 'next/link';
import { services as defaultServices, processComponents as defaultProcess, processOpeningText, processIntro, processClosingText } from '@/lib/data/services';
import { testimonials as defaultTestimonials } from '@/lib/data/testimonials';
import { readData } from '@/lib/cms';
import type { Service, ProcessComponent } from '@/lib/data/services';
import type { Testimonial } from '@/lib/data/testimonials';

export const metadata: Metadata = {
  title: 'Services | XHIVA — One-to-One Sessions',
  description: 'Crystal Therapy, Temazcal ceremonies, Premium Transformational Sessions and Soul Portrait Art Alchemy. Somatic Healing & Ritual Integration.',
};

export const dynamic = 'force-dynamic';

export default function ServicesPage() {
  const services = readData<Service>('services', defaultServices);
  const processSteps = readData<ProcessComponent>('process-components', defaultProcess);
  const testimonials = readData<Testimonial>('testimonials', defaultTestimonials);

  return (
    <>
      {/* Page Hero */}
      <section className="page-hero relative flex flex-col items-center justify-center text-center px-6">
        <div className="absolute inset-0 z-0">
          <Image
            src="/images/services/crystal-therapy.webp"
            alt="Sessions"
            fill
            className="object-cover"
            priority
          />
          <div className="absolute inset-0 bg-gradient-to-b from-[var(--bg-cream)]/90 via-[var(--bg-cream)]/70 to-[var(--bg-cream)]/90" />
        </div>
        <div className="relative z-10 max-w-4xl mx-auto">
          <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
            OFFERINGS
          </p>
          <h1 className="text-5xl md:text-6xl font-light tracking-wider mb-4">
            One-to-One Sessions
          </h1>
          <p className="font-sans-alt text-sm tracking-widest text-[var(--text-muted)] mb-6">
            Somatic Healing & Ritual Integration
          </p>
          <div className="divider"></div>
          <p className="text-lg md:text-xl max-w-2xl mx-auto leading-relaxed opacity-80">
            My one-to-one sessions are containers of clarity, embodiment and transformation. Rooted in somatic intelligence, ancestral memory and intuitive mapping, these sessions are designed to support you through transitions, emotional release, post-ceremonial integration and the deep work of remembering who you are.
          </p>
          <p className="text-lg max-w-2xl mx-auto leading-relaxed opacity-80 mt-4">
            I work with the body, the psyche and the subtle field — helping you return to coherence, presence and truth.
          </p>
        </div>
      </section>

      {/* Service Cards */}
      {services.map((service, index) => (
        <section key={index} className={`section ${index % 2 === 0 ? 'bg-white' : ''}`}>
          <div className="max-w-6xl mx-auto">
            <div className={`grid md:grid-cols-2 gap-12 items-center ${index % 2 === 1 ? 'md:[&>*:first-child]:order-2' : ''}`}>
              <div className="relative aspect-[4/3] rounded-2xl overflow-hidden shadow-xl">
                <Image
                  src={service.image}
                  alt={service.title}
                  fill
                  className="object-cover"
                />
                {service.highlighted && (
                  <div className="absolute top-4 right-4 bg-[var(--accent-gold)] text-white px-3 py-1 rounded-full font-sans-alt text-xs tracking-widest">
                    PREMIUM
                  </div>
                )}
              </div>

              <div className="text-center">
                <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
                  {service.subtitle.toUpperCase()}
                </p>
                <h2 className="text-4xl font-light mb-4">
                  {service.title}
                </h2>
                <div className="divider"></div>
                {service.price && (
                  <p className="price-tag mb-4">{service.price}</p>
                )}
                <p className="font-sans-alt text-xs tracking-widest text-[var(--text-muted)] mb-6">
                  {service.duration}
                </p>
                <p className="text-lg leading-relaxed mb-8 opacity-80">
                  {service.longDescription || service.description}
                </p>

                {service.recommendedFor && (
                  <div className="text-left max-w-md mx-auto mb-8">
                    <p className="font-sans-alt text-xs tracking-widest text-[var(--accent-gold)] mb-3">
                      RECOMMENDED FOR
                    </p>
                    <ul className="space-y-2">
                      {service.recommendedFor.map((item, i) => (
                        <li key={i} className="text-sm leading-relaxed opacity-80 flex items-start gap-2">
                          <span className="text-[var(--accent-gold)] mt-1">&#8226;</span>
                          {item}
                        </li>
                      ))}
                    </ul>
                  </div>
                )}

                <Link href="/contact" className="btn-outline">
                  {service.buttonText || 'Book This Session'}
                </Link>
              </div>
            </div>
          </div>
        </section>
      ))}

      {/* How Sessions Work — Process Components */}
      <section className="section dark-section">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
              THE PROCESS
            </p>
            <h2 className="text-4xl font-light mb-6">
              How Sessions Work
            </h2>
            <div className="divider"></div>
          </div>

          <p className="text-lg leading-relaxed opacity-80 mb-8 text-center">
            {processOpeningText}
          </p>

          <p className="text-lg leading-relaxed opacity-80 mb-6 text-center">
            {processIntro}
          </p>

          <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
            {processSteps.map((component, index) => (
              <div key={index} className="text-center p-4 border border-white/10 rounded-lg">
                <span className="font-sans-alt text-2xl font-light text-[var(--accent-gold)] block mb-2">
                  {String(index + 1).padStart(2, '0')}
                </span>
                <h3 className="text-sm font-light tracking-wide">{component.title}</h3>
              </div>
            ))}
          </div>

          <p className="text-lg leading-relaxed opacity-80 text-center italic">
            {processClosingText}
          </p>
        </div>
      </section>

      {/* Who These Sessions Are For */}
      <section className="section bg-white">
        <div className="max-w-4xl mx-auto text-center">
          <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
            IS THIS FOR YOU?
          </p>
          <h2 className="text-4xl font-light mb-6">
            Who These Sessions Are For
          </h2>
          <div className="divider"></div>
          <p className="text-lg opacity-80 mb-8">
            These sessions are for people who are ready to:
          </p>
          <div className="grid md:grid-cols-2 gap-8 text-left mt-8">
            {[
              'Heal in Awareness & Responsibility',
              'Stabilize Their Emotions',
              'Integrate Powerful Experiences',
              'Understand Their Patterns',
              'Reconnect with Their Truth',
              'Embody Insight',
              'Return to Coherence',
              'Walk a Path of Authenticity',
            ].map((item, index) => (
              <div key={index} className="flex items-start gap-3">
                <span className="text-[var(--accent-gold)] mt-1">&#10003;</span>
                <p className="text-lg leading-relaxed opacity-80">{item}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="section">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
              TESTIMONIALS
            </p>
            <h2 className="text-4xl font-light mb-6">
              What People Say
            </h2>
            <div className="divider"></div>
            <p className="text-lg opacity-80 max-w-2xl mx-auto">
              For many years, I worked through referrals and word of mouth. Here are some voices from people who have walked this path.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {testimonials.map((testimonial, index) => (
              <div key={index} className="testimonial-card">
                <span className="quote-mark">&ldquo;</span>
                <p className="testimonial mb-6">
                  {testimonial.quote}
                </p>
                <p className="font-sans-alt text-xs tracking-widest text-[var(--accent-gold)]">
                  — {testimonial.author}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA — Ready to Begin */}
      <section className="section relative overflow-hidden">
        <div className="absolute inset-0 z-0 bg-[#0f0f0f]">
          <Image
            src="/images/art/wayra-bg.webp"
            alt="Wayra"
            fill
            className="object-contain opacity-40"
          />
        </div>
        <div className="max-w-3xl mx-auto relative z-10 text-center">
          <h2 className="text-4xl md:text-5xl font-light mb-6 text-[var(--text-light)]">
            Ready to Begin?
          </h2>
          <div className="divider"></div>
          <p className="text-lg leading-relaxed mb-12 opacity-80 max-w-2xl mx-auto text-[var(--text-light)]">
            If you feel called to work together, I welcome you with clarity, presence and commitment.
            These sessions are a space to meet yourself deeply — with honesty, grounding and compassion.
          </p>
          <Link href="/contact" className="btn-filled" style={{ background: 'var(--accent-gold)', borderColor: 'var(--accent-gold)' }}>
            Book a Session
          </Link>
        </div>
      </section>
    </>
  );
}
