import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { ArrowRight, Shield, Clock, Award, Plus, Minus } from 'lucide-react';
import Reveal from '../components/ui/Reveal';

const heroSlides = [
  {
    img: 'https://images.pexels.com/photos/1216589/pexels-photo-1216589.jpeg?auto=compress&cs=tinysrgb&w=1920',
    label: 'General Contracting',
    heading: 'Building Structures That Stand the Test of Time',
  },
  {
    img: 'https://images.pexels.com/photos/834892/pexels-photo-834892.jpeg?auto=compress&cs=tinysrgb&w=1920',
    label: 'Renovation & Finishing',
    heading: 'Transforming Spaces with Expert Craftsmanship',
  },
  {
    img: 'https://images.pexels.com/photos/2219024/pexels-photo-2219024.jpeg?auto=compress&cs=tinysrgb&w=1920',
    label: 'Commercial Construction',
    heading: 'Delivering Excellence on Every Commercial Project',
  },
];

const stats = [
  { value: '11+', label: 'Years in Business' },
  { value: '98%', label: 'Client Satisfaction' },
  { value: '50+', label: 'Expert Tradespeople' },
];

const services = [
  { icon: '🏗️', title: 'General Contracting', desc: 'End-to-end project management for residential and commercial builds, delivering on time and within budget.' },
  { icon: '🔨', title: 'Renovation', desc: 'Complete interior and exterior renovation services that breathe new life into existing structures.' },
  { icon: '🪟', title: 'Interior Finishing', desc: 'Bespoke joinery, plastering, tiling, flooring, and decorative treatments — every detail perfected.' },
  { icon: '🎨', title: 'Painting', desc: 'Interior and exterior painting with premium materials and expert colour consultation.' },
];

const faqs = [
  { q: 'What types of projects do you take on?', a: 'We handle residential, commercial, and industrial projects of all sizes.' },
  { q: 'Are you licensed and insured?', a: 'Yes. Panama International Contracting Company is a fully licensed general contractor with comprehensive liability insurance and workers\' compensation on all projects.' },
  { q: 'How long does a typical renovation take?', a: 'Timeline depends on scope. A bathroom renovation may take 2–3 weeks, while a full home renovation can take 3–6 months. We provide detailed schedules before work begins.' },
  { q: 'Do you provide free estimates?', a: 'Yes, we offer complimentary on-site consultations and written estimates for all projects. Contact us to schedule your site visit.' },
  { q: 'Can you work while we\'re still living in the property?', a: 'Absolutely. We plan carefully to minimise disruption to occupied properties. We establish clear work zones and maintain cleanliness throughout.' },
];

export default function Home() {
  const [slide, setSlide] = useState(0);
  const [openFaq, setOpenFaq] = useState<number | null>(null);

  useEffect(() => {
    const t = setInterval(() => setSlide((s) => (s + 1) % heroSlides.length), 6000);
    return () => clearInterval(t);
  }, []);

  return (
    <div>
      {/* Hero */}
      <section className="relative h-screen min-h-[640px] flex items-center">
        <AnimatePresence mode="wait">
          <motion.div
            key={slide}
            className="absolute inset-0 bg-cover bg-center"
            style={{ backgroundImage: `url(${heroSlides[slide].img})` }}
            initial={{ opacity: 0, scale: 1.04 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 1.1 }}
          />
        </AnimatePresence>
        <div className="absolute inset-0" style={{ background: 'linear-gradient(to right, rgba(15,25,35,0.85) 0%, rgba(15,25,35,0.5) 60%, transparent 100%)' }} />

        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-12 w-full">
          <AnimatePresence mode="wait">
            <motion.div key={slide} initial={{ opacity: 0, y: 28 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} transition={{ duration: 0.75 }} className="max-w-2xl">
              <span className="section-label">{heroSlides[slide].label}</span>
              <h1 className="font-serif text-5xl md:text-6xl lg:text-[4.5rem] text-white leading-[1.08] mb-7">
                {heroSlides[slide].heading}
              </h1>
              <p className="font-sans text-white/65 text-base leading-relaxed mb-10 max-w-lg">
                Licensed general contractors delivering quality construction, renovation, and finishing services since 2015.
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Link to="/inquiries" className="btn-primary">Request a Quote <ArrowRight size={14} /></Link>
                <Link to="/portfolio" className="btn-outline">View Portfolio</Link>
              </div>
            </motion.div>
          </AnimatePresence>
        </div>

        {/* Slide dots */}
        <div className="absolute bottom-10 left-1/2 -translate-x-1/2 flex gap-2 z-10">
          {heroSlides.map((_, i) => (
            <button key={i} onClick={() => setSlide(i)} className={`transition-all duration-300 ${i === slide ? 'w-8 h-0.5 bg-gold' : 'w-3 h-0.5 bg-white/40'}`} />
          ))}
        </div>
      </section>

      {/* Stats */}
      <section className="bg-navy py-14">
        <div className="max-w-7xl mx-auto px-6 lg:px-12 grid grid-cols-2 lg:grid-cols-4 gap-8">
          {stats.map((s, i) => (
            <Reveal key={s.label} delay={i * 0.1} className="text-center">
              <p className="font-serif text-4xl text-gold">{s.value}</p>
              <p className="font-sans text-[10px] tracking-[0.18em] uppercase text-white/55 mt-2">{s.label}</p>
            </Reveal>
          ))}
        </div>
      </section>

      {/* About Teaser */}
      <section className="py-28 bg-cream-200">
        <div className="max-w-7xl mx-auto px-6 lg:px-12 grid lg:grid-cols-2 gap-20 items-center">
          <Reveal direction="left">
            <span className="section-label">About Panama International</span>
            <h2 className="section-title mb-5">
              11 Years of Building<br />
              <span className="text-gold italic">Trust & Excellence</span>
            </h2>
            <span className="gold-bar" />
            <p className="font-sans text-navy/65 text-sm leading-relaxed mb-5">
              Founded in 2015, Panama International has grown from a small residential maintenance operation into a trusted contracting company serving residential and commercial clients across Qatar. We deliver projects on time, on budget, and built to last.
            </p>
            <p className="font-sans text-navy/65 text-sm leading-relaxed mb-10">
              Our approach is simple: treat every project as if it were our own home. We won't cut corners, we'll communicate clearly, and we'll deliver results that exceed your expectations.
            </p>
            <div className="flex flex-wrap gap-4">
              <Link to="/about" className="btn-outline-dark">Our Story <ArrowRight size={13} /></Link>
              <Link to="/inquiries" className="btn-primary">Get a Quote</Link>
            </div>
          </Reveal>

          <Reveal direction="right" className="relative">
            <div className="grid grid-cols-2 gap-4">
              <img src="https://images.pexels.com/photos/1216589/pexels-photo-1216589.jpeg?auto=compress&cs=tinysrgb&w=700" alt="Construction site" className="w-full h-56 object-cover" />
              <img src="https://images.pexels.com/photos/2219024/pexels-photo-2219024.jpeg?auto=compress&cs=tinysrgb&w=700" alt="Building exterior" className="w-full h-56 object-cover mt-8" />
            </div>
            <div className="absolute -bottom-6 -left-4 bg-gold p-5 hidden lg:block">
              <p className="font-serif text-3xl text-white">11+</p>
              <p className="font-sans text-[10px] text-white/80 tracking-widest uppercase mt-1">Years of Excellence</p>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Services */}
      <section className="py-28 bg-white">
        <div className="max-w-7xl mx-auto px-6 lg:px-12">
          <Reveal className="text-center mb-16">
            <span className="section-label">What We Do</span>
            <h2 className="section-title">Comprehensive Contracting<br /><span className="text-gold italic">& Construction Services</span></h2>
          </Reveal>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {services.map((s, i) => (
              <Reveal key={s.title} delay={i * 0.08}>
                <Link to="/services" className="group block bg-cream-100 border border-sand-200 p-8 card-lift hover:border-gold/40 transition-colors">
                  <span className="text-3xl mb-5 block">{s.icon}</span>
                  <div className="w-8 h-0.5 bg-gold mb-4 group-hover:w-14 transition-all duration-300" />
                  <h3 className="font-serif text-xl text-navy mb-3">{s.title}</h3>
                  <p className="font-sans text-sm text-navy/60 leading-relaxed mb-4">{s.desc}</p>
                  <span className="font-sans text-xs text-gold tracking-[0.14em] uppercase flex items-center gap-2 group-hover:gap-3 transition-all">
                    Learn More <ArrowRight size={12} />
                  </span>
                </Link>
              </Reveal>
            ))}
          </div>
          <Reveal className="text-center mt-12">
            <Link to="/services" className="btn-outline-dark">View All Services <ArrowRight size={13} /></Link>
          </Reveal>
        </div>
      </section>

      {/* Trust Pillars */}
      <section className="py-20 bg-navy">
        <div className="max-w-7xl mx-auto px-6 lg:px-12 grid md:grid-cols-3 gap-10">
          {[
            { icon: Shield, title: 'Fully Licensed & Insured', desc: 'All work carried out by licensed tradespeople with full liability coverage.' },
            { icon: Clock, title: 'On-Time Delivery', desc: 'We have a 96% on-time completion record across all projects.' },
            { icon: Award, title: 'Award-Winning Quality', desc: 'Recognised by the National Contractors Association for excellence.' },
          ].map(({ icon: Icon, title, desc }, i) => (
            <Reveal key={title} delay={i * 0.1} className="flex gap-5">
              <div className="w-11 h-11 border border-gold/30 flex items-center justify-center flex-shrink-0 mt-1">
                <Icon size={18} className="text-gold" />
              </div>
              <div>
                <h3 className="font-serif text-lg text-white mb-2">{title}</h3>
                <p className="font-sans text-sm text-white/50 leading-relaxed">{desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* Portfolio Link */}
      <section className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-6 lg:px-12 flex flex-col sm:flex-row items-center justify-between gap-6">
          <Reveal>
            <span className="section-label">Our Work</span>
            <h2 className="font-serif text-2xl text-navy">See what we've built</h2>
          </Reveal>
          <Reveal>
            <Link to="/portfolio" className="btn-outline-dark whitespace-nowrap">View Full Portfolio <ArrowRight size={13} /></Link>
          </Reveal>
        </div>
      </section>

      {/* CTA Banner */}
      <section
        className="relative py-32 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-2xl mx-auto px-6 text-center">
          <Reveal>
            <span className="section-label">Start Your Project</span>
            <h2 className="section-title-light mb-5">Ready to Build<br /><span className="text-gold italic">Something Great?</span></h2>
            <p className="font-sans text-white/60 text-sm leading-relaxed mb-10">
              Contact us today for a free consultation. We'll assess your project and provide a detailed, transparent quotation within 48 hours.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link to="/inquiries" className="btn-primary">Request a Quote <ArrowRight size={13} /></Link>
              <Link to="/portfolio" className="btn-outline">View Our Work</Link>
            </div>
          </Reveal>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-28 bg-cream-200">
        <div className="max-w-3xl mx-auto px-6 lg:px-12">
          <Reveal className="text-center mb-14">
            <span className="section-label">Common Questions</span>
            <h2 className="section-title">Frequently Asked<br /><span className="text-gold italic">Questions</span></h2>
          </Reveal>
          <div>
            {faqs.map((f, i) => (
              <Reveal key={i} delay={i * 0.05}>
                <div className="border-b border-sand-200">
                  <button
                    onClick={() => setOpenFaq(openFaq === i ? null : i)}
                    className="w-full flex items-center justify-between py-5 text-left group"
                  >
                    <span className="font-serif text-lg text-navy group-hover:text-gold transition-colors pr-8">{f.q}</span>
                    {openFaq === i
                      ? <Minus size={15} className="text-gold flex-shrink-0" />
                      : <Plus size={15} className="text-navy/35 group-hover:text-gold flex-shrink-0 transition-colors" />}
                  </button>
                  <AnimatePresence>
                    {openFaq === i && (
                      <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: 'auto', opacity: 1 }} exit={{ height: 0, opacity: 0 }} transition={{ duration: 0.28 }} className="overflow-hidden">
                        <p className="font-sans text-sm text-navy/60 leading-relaxed pb-5 pr-8">{f.a}</p>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}
