import { Link } from 'react-router-dom';
import { ArrowRight, CheckCircle } from 'lucide-react';
import Reveal from '../components/ui/Reveal';

const services = [
  {
    id: 'contracting',
    title: 'General Contracting',
    subtitle: 'Full-scope project management',
    desc: 'We serve as your single point of contact for the entire construction process — coordinating subcontractors, managing timelines, controlling costs, and ensuring quality at every stage.',
    img: 'https://images.pexels.com/photos/1216589/pexels-photo-1216589.jpeg?auto=compress&cs=tinysrgb&w=1200',
    features: ['Comprehensive project planning', 'Subcontractor coordination', 'Budget management and cost control', 'Schedule monitoring and reporting', 'Quality inspection at every milestone', 'Permit and compliance management'],
  },
  {
    id: 'renovation',
    title: 'Renovation',
    subtitle: 'Revitalise your existing space',
    desc: 'From kitchen remodels to complete structural renovations, our team has the expertise to modernise and improve your property while minimising disruption to daily life.',
    img: 'https://images.pexels.com/photos/834892/pexels-photo-834892.jpeg?auto=compress&cs=tinysrgb&w=1200',
    features: ['Kitchen & bathroom remodels', 'Structural changes and extensions', 'Occupied property renovations', 'Historic building restoration', 'Open-plan conversions', 'Energy efficiency upgrades'],
  },
  {
    id: 'finishing',
    title: 'Interior Finishing',
    subtitle: 'The detail that defines quality',
    desc: 'Interior finishing is where our craftsmanship shines. From bespoke joinery and custom millwork to plastering, tiling, and decorative treatments — we handle every detail.',
    img: 'https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&cs=tinysrgb&w=1200',
    features: ['Plastering and drywalling', 'Flooring installation (all types)', 'Tile and stonework', 'Ceiling treatments and mouldings', 'Door and window installation'],
  },
  {
    id: 'painting',
    title: 'Painting',
    subtitle: 'Professional finishes, lasting results',
    desc: 'We use premium paints and expert application techniques to deliver flawless interior and exterior finishes, from single rooms to large commercial buildings.',
    img: 'https://images.pexels.com/photos/1080721/pexels-photo-1080721.jpeg?auto=compress&cs=tinysrgb&w=1200',
    features: ['Interior and exterior painting', 'Surface preparation and priming', 'Premium paint brands', 'Commercial and industrial coatings', 'Colour consultation service', 'Post-project cleanup included'],
  },
];

export default function Services() {
  return (
    <div className="pt-24">
      {/* Header */}
      <section
        className="relative py-28 bg-cover bg-center"
        style={{ backgroundImage: 'url(https://images.pexels.com/photos/1216589/pexels-photo-1216589.jpeg?auto=compress&cs=tinysrgb&w=1920)' }}
      >
        <div className="absolute inset-0 bg-navy/82" />
        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-12">
          <span className="section-label">Our Capabilities</span>
          <h1 className="section-title-light max-w-xl">
            Contracting & Construction<br />
            <span className="text-gold italic">Services</span>
          </h1>
          <p className="font-sans text-white/55 text-sm max-w-lg mt-5 leading-relaxed">
            Four core services delivered by experienced tradespeople — under one roof, on one contract.
          </p>
        </div>
      </section>

      {/* Services */}
      {services.map((s, i) => (
        <div
          key={s.id}
          className={`flex flex-col ${i % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'} ${i % 2 !== 0 ? 'bg-cream-200' : 'bg-white'}`}
        >
          <Reveal direction={i % 2 === 0 ? 'left' : 'right'} className="lg:w-1/2 h-72 lg:h-auto overflow-hidden">
            <img src={s.img} alt={s.title} className="w-full h-full object-cover min-h-[380px]" />
          </Reveal>
          <Reveal direction={i % 2 === 0 ? 'right' : 'left'} className="lg:w-1/2 flex items-center">
            <div className="px-8 md:px-14 py-16">
              <span className="section-label">{s.subtitle}</span>
              <h2 className="font-serif text-3xl md:text-4xl text-navy mb-4">{s.title}</h2>
              <span className="gold-bar" />
              <p className="font-sans text-navy/60 text-sm leading-relaxed mb-7">{s.desc}</p>
              <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2.5 mb-10">
                {s.features.map((f) => (
                  <li key={f} className="flex items-start gap-2.5">
                    <CheckCircle size={13} className="text-gold mt-0.5 flex-shrink-0" />
                    <span className="font-sans text-sm text-navy/65">{f}</span>
                  </li>
                ))}
              </ul>
              <Link to="/inquiries" className="btn-primary">Get a Quote <ArrowRight size={13} /></Link>
            </div>
          </Reveal>
        </div>
      ))}

      {/* CTA */}
      <section className="py-20 bg-navy text-center">
        <Reveal className="max-w-xl mx-auto px-6">
          <h2 className="section-title-light mb-5">Need a Service<br /><span className="text-gold italic">Not Listed?</span></h2>
          <p className="font-sans text-white/55 text-sm leading-relaxed mb-8">
            We handle a wide range of specialist works. Contact us and we'll let you know if we can help.
          </p>
          <Link to="/contact" className="btn-primary">Talk to Us <ArrowRight size={13} /></Link>
        </Reveal>
      </section>
    </div>
  );
}
