import React from 'react';
import Link from 'next/link';

export default function ServicesSection() {
  const services = [
    {
      icon: '🎈',
      title: 'Organic Balloon Garlands & Arches',
      desc: 'Double-stuffed luxury latex balloons with custom color formulas matched to your theme. Free-flowing organic arches, demi-arches, and massive entryways.',
      features: ['Custom Color Matching', 'Matte, Chrome & Pearl Finishes', 'Indoor & Outdoor Installations'],
    },
    {
      icon: '🏛️',
      title: 'Custom Arched Backdrops & Panels',
      desc: 'Multi-tiered wooden arch backdrops, custom color painted panels, printed themes (fruits, tropicals, florals), and personalized 3D laser-cut acrylic lettering.',
      features: ['Single, Double & Triple Arches', 'Custom Decals & Names', 'Shimmer & Drape Options'],
    },
    {
      icon: '🌸',
      title: 'Floral & Greenery Embellishments',
      desc: 'Elevate your balloon installations with premium faux florals, cascading silk roses, eucalyptus sprigs, and lush tropical monstera fronds.',
      features: ['Silk & Dried Florals', 'Tropical Palm Leaves', 'Coordinated Color Schemes'],
    },
    {
      icon: '🔤',
      title: 'Giant Mosaic Numbers & Letters',
      desc: 'Stand out with 4ft–5ft towering mosaic frames filled with custom-coordinated mini balloons—perfect for milestone birthdays, graduations, and initials.',
      features: ['Initials & Full Names', 'Milestone Numbers (1, 16, 21, 50, etc.)', 'High-Impact Photo Prop'],
    },
    {
      icon: '🍾',
      title: 'Drink, Cake & Dessert Stations',
      desc: 'Make your refreshment tables a central attraction with custom framed arches, rustic wooden crates, and thematic props like our "Pop, Fizz, Fun!" display.',
      features: ['Beverage Bar Framing', 'Dessert Table Backdrops', 'Prop & Crate Rentals'],
    },
    {
      icon: '✨',
      title: 'Full-Service White-Glove Setup',
      desc: 'Enjoy your celebration with zero stress. Our team arrives on-site to professionally construct, secure, style, and strike every element seamlessly.',
      features: ['Timely On-Site Delivery', 'Professional Rigging & Weighting', 'Post-Event Breakdown (Strike)'],
    },
  ];

  return (
    <section id="services" style={{
      padding: '100px 24px',
      backgroundColor: '#0A0A0A',
      position: 'relative',
      borderBottom: '1px solid var(--border-gold)',
    }}>
      <div className="container">
        
        {/* Section Header */}
        <div style={{ textAlign: 'center', marginBottom: '60px' }}>
          <span style={{ fontSize: '0.85rem', fontWeight: 800, color: 'var(--color-gold)', letterSpacing: '0.15em', textTransform: 'uppercase', display: 'block', marginBottom: '10px' }}>
            What We Do
          </span>
          <h2 style={{ fontSize: 'clamp(2rem, 3.8vw, 2.8rem)', fontWeight: 800, marginBottom: '16px' }}>
            Our Luxury <span className="pink-gradient-text">Decor Services</span>
          </h2>
          <p style={{ fontSize: '1.1rem', color: '#94A3B8', maxWidth: '700px', margin: '0 auto', lineHeight: 1.7 }}>
            From intimate gatherings to lavish celebrations, every installation is tailored to reflect your unique vision with God-given creativity.
          </p>
        </div>

        {/* Services Grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
          gap: '24px',
          marginBottom: '60px',
        }}>
          {services.map((service, idx) => (
            <div key={idx} className="glass-panel" style={{
              padding: '36px 28px',
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-between',
              border: '1px solid rgba(255, 255, 255, 0.08)',
              transition: 'all 0.3s ease',
            }}>
              <div>
                <div style={{ fontSize: '2.4rem', marginBottom: '18px' }}>
                  {service.icon}
                </div>
                <h3 style={{ fontSize: '1.28rem', fontWeight: 700, color: '#FFFFFF', marginBottom: '12px' }}>
                  {service.title}
                </h3>
                <p style={{ fontSize: '0.94rem', lineHeight: 1.65, color: '#94A3B8', marginBottom: '20px' }}>
                  {service.desc}
                </p>
              </div>

              <div>
                <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 24px 0', display: 'flex', flexDirection: 'column', gap: '8px' }}>
                  {service.features.map((feat, fIdx) => (
                    <li key={fIdx} style={{ fontSize: '0.88rem', color: '#CBD5E1', display: 'flex', alignItems: 'center', gap: '8px' }}>
                      <span style={{ color: 'var(--color-gold)', fontWeight: 800 }}>✓</span>
                      <span>{feat}</span>
                    </li>
                  ))}
                </ul>
                <Link href="#contact" style={{ color: 'var(--color-gold-light)', textDecoration: 'none', fontSize: '0.88rem', fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
                  <span>Inquire for Pricing</span> <span>→</span>
                </Link>
              </div>
            </div>
          ))}
        </div>

        {/* Process Banner */}
        <div className="glass-panel" style={{
          padding: '40px 32px',
          borderRadius: '20px',
          border: '1.5px solid var(--border-gold)',
          background: '#0F0F0F',
        }}>
          <h3 style={{ fontSize: '1.4rem', fontWeight: 800, color: 'var(--color-gold-light)', textAlign: 'center', marginBottom: '32px' }}>
            Simple 3-Step Booking Process
          </h3>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
            gap: '24px',
            textAlign: 'center',
          }}>
            <div>
              <div style={{ width: '48px', height: '48px', borderRadius: '50%', background: 'var(--color-gold-gradient)', color: '#080808', fontWeight: 800, fontSize: '1.2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
                1
              </div>
              <h4 style={{ fontSize: '1.1rem', fontWeight: 700, marginBottom: '8px' }}>Share Your Vision</h4>
              <p style={{ fontSize: '0.9rem', color: '#94A3B8' }}>Fill out our quick inquiry form with your date, theme, and ideas.</p>
            </div>
            <div>
              <div style={{ width: '48px', height: '48px', borderRadius: '50%', background: 'var(--color-pink-gradient)', color: '#FFFFFF', fontWeight: 800, fontSize: '1.2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
                2
              </div>
              <h4 style={{ fontSize: '1.1rem', fontWeight: 700, marginBottom: '8px' }}>Design & Proposal</h4>
              <p style={{ fontSize: '0.9rem', color: '#94A3B8' }}>Receive a customized design proposal with colors and transparent pricing.</p>
            </div>
            <div>
              <div style={{ width: '48px', height: '48px', borderRadius: '50%', background: 'var(--color-gold-gradient)', color: '#080808', fontWeight: 800, fontSize: '1.2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
                3
              </div>
              <h4 style={{ fontSize: '1.1rem', fontWeight: 700, marginBottom: '8px' }}>Flawless Setup</h4>
              <p style={{ fontSize: '0.9rem', color: '#94A3B8' }}>We deliver, style, and transform your venue on time so you can enjoy.</p>
            </div>
          </div>
        </div>

      </div>
    </section>
  );
}