'use client'

import { useState } from 'react'
import Link from 'next/link'
import type { LandingContent } from '@/lib/content'

type PortfolioItem = LandingContent['portfolio']['items'][number]

function PortfolioCard({ item }: { item: PortfolioItem }) {
  const [activeIdx, setActiveIdx] = useState(0)
  const media = item.media || []
  const active = media[activeIdx]

  return (
    <div className="bg-white rounded-2xl shadow-md overflow-hidden flex flex-col">
      <div className="relative w-full bg-white overflow-hidden" style={{ aspectRatio: '9 / 16' }}>
        {active ? (
          active.type === 'video' ? (
            <video
              key={active.url}
              src={active.url}
              poster={active.poster}
              controls
              playsInline
              preload="metadata"
              className="absolute inset-0 w-full h-full object-contain"
            />
          ) : (
            <img
              key={active.url}
              src={active.url}
              alt={item.title}
              className="absolute inset-0 w-full h-full object-contain"
            />
          )
        ) : (
          <div className="absolute inset-0 flex items-center justify-center text-gray-300 bg-gray-50">
            <i className="fas fa-image text-5xl"></i>
          </div>
        )}
      </div>
      {media.length > 1 && (
        <div className="flex gap-2 p-3 overflow-x-auto bg-gray-50">
          {media.map((m, i) => (
            <button
              key={i}
              type="button"
              onClick={() => setActiveIdx(i)}
              className={`flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 transition-all ${
                i === activeIdx ? 'border-primary' : 'border-transparent opacity-70 hover:opacity-100'
              }`}
              aria-label={`View media ${i + 1}`}
            >
              {m.type === 'video' ? (
                m.poster ? (
                  <div className="relative w-full h-full">
                    <img src={m.poster} alt="" className="w-full h-full object-cover" />
                    <div className="absolute inset-0 flex items-center justify-center bg-black/30 text-white">
                      <i className="fas fa-play text-sm"></i>
                    </div>
                  </div>
                ) : (
                  <div className="w-full h-full bg-dark flex items-center justify-center text-white">
                    <i className="fas fa-play"></i>
                  </div>
                )
              ) : (
                <img src={m.url} alt="" className="w-full h-full object-cover" />
              )}
            </button>
          ))}
        </div>
      )}
      <div className="p-8 flex-1 flex flex-col">
        <h4 className="text-xl font-bold mb-3">{item.title}</h4>
        <p className="text-gray-600 mb-4 flex-1">{item.description}</p>
        <p className="text-sm text-gray-500">{item.platforms}</p>
      </div>
    </div>
  )
}

export default function LandingPage({ content, year }: { content: LandingContent; year: number }) {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const [showBookingModal, setShowBookingModal] = useState(false)

  return (
    <>
      {/* Navigation */}
      <nav className="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-md py-4 transition-all duration-300 shadow-sm">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between">
            <a className="text-2xl font-bold text-primary flex items-center" href="#home">
              <i className="fas fa-video mr-2"></i>{content.footer.companyName}
            </a>
            <button
              className="lg:hidden text-dark"
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            >
              <i className={`fas ${mobileMenuOpen ? 'fa-times' : 'fa-bars'} text-2xl`}></i>
            </button>
            <div className="hidden lg:flex">
              <ul className="flex gap-6 items-center">
                {!content.hero.hidden && <li><a className="font-medium text-dark hover:text-primary transition-colors" href="#home">Home</a></li>}
                {content.about && !content.about.hidden && <li><a className="font-medium text-dark hover:text-primary transition-colors" href="#about">About</a></li>}
                {!content.services.hidden && <li><a className="font-medium text-dark hover:text-primary transition-colors" href="#services">Services</a></li>}
                {!content.portfolio.hidden && <li><a className="font-medium text-dark hover:text-primary transition-colors" href="#portfolio">Portfolio</a></li>}
                {!content.testimonials.hidden && <li><a className="font-medium text-dark hover:text-primary transition-colors" href="#testimonials">Testimonials</a></li>}
                {!content.pricing.hidden && <li><a className="font-medium text-dark hover:text-primary transition-colors" href="#pricing">Pricing</a></li>}
                {!content.contact.hidden && <li><a className="font-medium text-dark hover:text-primary transition-colors" href="#contact">Contact</a></li>}
                <li>
                  <button
                    onClick={() => setShowBookingModal(true)}
                    className="font-medium text-dark hover:text-primary transition-colors"
                  >
                    Book
                  </button>
                </li>
                <li><Link href="/login" className="font-medium text-dark hover:text-primary transition-colors">Client Portal</Link></li>
              </ul>
            </div>
          </div>
          {mobileMenuOpen && (
            <div className="lg:hidden mt-4">
              <ul className="flex flex-col gap-4">
                {!content.hero.hidden && <li><a className="font-medium text-dark hover:text-primary transition-colors block py-2" href="#home" onClick={() => setMobileMenuOpen(false)}>Home</a></li>}
                {content.about && !content.about.hidden && <li><a className="font-medium text-dark hover:text-primary transition-colors block py-2" href="#about" onClick={() => setMobileMenuOpen(false)}>About</a></li>}
                {!content.services.hidden && <li><a className="font-medium text-dark hover:text-primary transition-colors block py-2" href="#services" onClick={() => setMobileMenuOpen(false)}>Services</a></li>}
                {!content.portfolio.hidden && <li><a className="font-medium text-dark hover:text-primary transition-colors block py-2" href="#portfolio" onClick={() => setMobileMenuOpen(false)}>Portfolio</a></li>}
                {!content.testimonials.hidden && <li><a className="font-medium text-dark hover:text-primary transition-colors block py-2" href="#testimonials" onClick={() => setMobileMenuOpen(false)}>Testimonials</a></li>}
                {!content.pricing.hidden && <li><a className="font-medium text-dark hover:text-primary transition-colors block py-2" href="#pricing" onClick={() => setMobileMenuOpen(false)}>Pricing</a></li>}
                {!content.contact.hidden && <li><a className="font-medium text-dark hover:text-primary transition-colors block py-2" href="#contact" onClick={() => setMobileMenuOpen(false)}>Contact</a></li>}
                <li><button onClick={() => { setShowBookingModal(true); setMobileMenuOpen(false); }} className="font-medium text-dark hover:text-primary transition-colors block py-2">Book</button></li>
                <li><Link href="/login" className="font-medium text-dark hover:text-primary transition-colors block py-2">Client Portal</Link></li>
              </ul>
            </div>
          )}
        </div>
      </nav>

      {/* Hero Section */}
      {!content.hero.hidden && (
      <section id="home" className="relative gradient-lovisa text-white pt-32 pb-20 lg:pt-40 lg:pb-24 overflow-hidden">
        <div className="absolute inset-0 hero-pattern opacity-20 pointer-events-none"></div>
        <div className="container mx-auto px-4 relative z-10">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <h1 className="text-4xl lg:text-5xl font-bold mb-6 leading-tight">{content.hero.title}</h1>
              <p className="text-xl mb-8 leading-relaxed">{content.hero.subtitle}</p>
              <div className="flex flex-wrap gap-4">
                <button
                  onClick={() => setShowBookingModal(true)}
                  className="px-8 py-3 bg-white text-primary font-medium rounded-lg hover:-translate-y-1 hover:shadow-xl transition-all duration-300"
                >
                  <i className="fas fa-calendar-alt mr-2"></i>{content.hero.ctaPrimary}
                </button>
                <a href="#portfolio" className="px-8 py-3 border-2 border-white text-white font-medium rounded-lg hover:bg-white hover:text-primary hover:-translate-y-1 transition-all duration-300">
                  <i className="fas fa-play mr-2"></i>{content.hero.ctaSecondary}
                </a>
              </div>
            </div>
            <div className="flex justify-center">
              {content.hero.videoUrl ? (
                <div className="relative w-full max-w-md bg-dark rounded-2xl shadow-2xl overflow-hidden" style={{ aspectRatio: '1 / 1' }}>
                  <video
                    src={content.hero.videoUrl}
                    controls
                    autoPlay
                    muted
                    loop
                    playsInline
                    preload="auto"
                    className="absolute inset-0 w-full h-full object-cover"
                  />
                </div>
              ) : (
                <div className="relative w-full max-w-md aspect-square bg-light/10 rounded-2xl overflow-hidden flex items-center justify-center border-2 border-dashed border-white/30">
                  <div className="text-center">
                    <i className="fas fa-video text-6xl text-white/50 mb-4"></i>
                    <p className="text-white/70">Demo Reel Coming Soon</p>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      )}

      {/* About Section */}
      {content.about && !content.about.hidden && (
      <section id="about" className="py-20 bg-white border-t border-gray-200">
        <div className="container mx-auto px-4">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="flex justify-center order-1 lg:order-none">
              {content.about.photoUrl ? (
                <div className="relative w-full max-w-sm aspect-square bg-gray-100 rounded-2xl shadow-2xl overflow-hidden">
                  <img
                    src={content.about.photoUrl}
                    alt={content.about.title}
                    className="absolute inset-0 w-full h-full object-cover"
                  />
                </div>
              ) : (
                <div className="relative w-full max-w-sm aspect-square bg-gray-100 rounded-2xl overflow-hidden flex items-center justify-center border-2 border-dashed border-gray-300">
                  <i className="fas fa-user text-6xl text-gray-400"></i>
                </div>
              )}
            </div>
            <div className="order-2 lg:order-none">
              {content.about.subtitle && (
                <p className="text-primary font-semibold mb-3 uppercase tracking-wide text-sm">{content.about.subtitle}</p>
              )}
              <h2 className="text-3xl lg:text-4xl font-bold mb-6 leading-tight text-dark">{content.about.title}</h2>
              <p className="text-lg text-gray-600 leading-relaxed mb-6 whitespace-pre-line">{content.about.body}</p>
              {content.about.highlights && content.about.highlights.length > 0 && (
                <ul className="space-y-3 mb-8">
                  {content.about.highlights.map((h, i) => (
                    <li key={i} className="flex items-center text-gray-700">
                      <i className={`fas fa-${h.icon} text-primary mr-3 w-5 text-center`}></i>
                      <span>{h.label}</span>
                    </li>
                  ))}
                </ul>
              )}
              {content.about.ctaLabel && content.about.ctaHref && (
                <a
                  href={content.about.ctaHref}
                  className="inline-block px-8 py-3 bg-primary text-white font-medium rounded-lg hover:-translate-y-1 hover:shadow-xl transition-all duration-300"
                >
                  {content.about.ctaLabel}
                </a>
              )}
            </div>
          </div>
        </div>
      </section>
      )}

      {/* Stats Section */}
      {!content.stats.hidden && (
      <section className="py-20 bg-white border-t border-gray-200">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-4 gap-8 text-center">
            {content.stats.items.map((stat, index) => (
              <div key={index}>
                <div className="text-5xl font-bold text-primary leading-none mb-2">{stat.number}</div>
                <p className="text-gray-600">{stat.label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      )}

      {/* Services Section */}
      {!content.services.hidden && (
      <section id="services" className="py-20 border-t border-gray-200">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center mb-12">
            <h2 className="text-4xl lg:text-5xl font-bold mb-6">{content.services.title}</h2>
            <p className="text-xl text-gray-600">{content.services.subtitle}</p>
          </div>
          <div className="grid lg:grid-cols-3 gap-8">
            {content.services.items.map((service, index) => (
              <div key={index} className="bg-white rounded-2xl p-8 shadow-md hover:-translate-y-2 hover:shadow-2xl transition-all duration-300">
                <div className="w-20 h-20 gradient-service rounded-3xl flex items-center justify-center mx-auto mb-6 text-white text-4xl">
                  <i className={`fas fa-${service.icon}`}></i>
                </div>
                <h4 className="text-2xl font-semibold mb-4">{service.title}</h4>
                <p className="text-gray-600 mb-6">{service.description}</p>
                <ul className="space-y-2">
                  {service.features.map((feature, idx) => (
                    <li key={idx} className="flex items-start">
                      <i className="fas fa-check text-green-500 mr-3 mt-1"></i>
                      <span className="text-gray-700">{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      )}

      {/* Portfolio Section */}
      {!content.portfolio.hidden && (
      <section id="portfolio" className="py-20 bg-white border-t border-gray-200">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center mb-12">
            <h2 className="text-4xl lg:text-5xl font-bold mb-6">{content.portfolio.title}</h2>
            <p className="text-xl text-gray-600">{content.portfolio.subtitle}</p>
          </div>
          <div className="grid lg:grid-cols-3 gap-8">
            {content.portfolio.items.map((item, index) => (
              <PortfolioCard key={index} item={item} />
            ))}
          </div>
        </div>
      </section>

      )}

      {/* Testimonials Section */}
      {!content.testimonials.hidden && (
      <section id="testimonials" className="py-20 border-t border-gray-200">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center mb-12">
            <h2 className="text-4xl lg:text-5xl font-bold mb-6">{content.testimonials.title}</h2>
            <p className="text-xl text-gray-600">{content.testimonials.subtitle}</p>
          </div>
          <div className="grid lg:grid-cols-3 gap-8">
            {content.testimonials.items.map((testimonial, index) => (
              <div key={index} className="bg-white rounded-2xl p-8 shadow-md hover:-translate-y-2 hover:shadow-2xl transition-all duration-300">
                <i className="fas fa-quote-left text-3xl text-primary/30 mb-4"></i>
                <p className="text-gray-700 italic mb-6 leading-relaxed">{testimonial.quote}</p>
                <div className="flex items-center">
                  <div className="w-12 h-12 gradient-lovisa rounded-full flex items-center justify-center text-white font-bold mr-4">
                    {testimonial.initials}
                  </div>
                  <div>
                    <h5 className="font-semibold text-dark">{testimonial.name}</h5>
                    <p className="text-sm text-gray-500">{testimonial.title}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      )}

      {/* Pricing Section */}
      {!content.pricing.hidden && (
      <section id="pricing" className="py-20 bg-white border-t border-gray-200">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center mb-12">
            <h2 className="text-4xl lg:text-5xl font-bold mb-6">{content.pricing.title}</h2>
            <p className="text-xl text-gray-600">{content.pricing.subtitle}</p>
          </div>
          <div className="grid lg:grid-cols-3 gap-8">
            {content.pricing.plans.map((plan, index) => (
              <div key={index} className={`bg-white rounded-2xl p-8 shadow-md hover:-translate-y-2 hover:shadow-2xl transition-all duration-300 ${plan.popular ? 'ring-4 ring-primary' : ''}`}>
                {plan.popular && (
                  <div className="bg-primary text-white text-sm font-bold py-1 px-4 rounded-full inline-block mb-4">Most Popular</div>
                )}
                <h4 className="text-2xl font-bold mb-2">{plan.name}</h4>
                <div className="text-4xl font-bold text-primary mb-2">{plan.price}<span className="text-lg text-gray-500">/mo</span></div>
                <p className="text-gray-600 mb-6">{plan.tagline}</p>
                <ul className="space-y-3 mb-8">
                  {plan.features.map((feature, idx) => (
                    <li key={idx} className="flex items-start">
                      <i className="fas fa-check text-green-500 mr-3 mt-1"></i>
                      <span className="text-gray-700">{feature}</span>
                    </li>
                  ))}
                </ul>
                <button
                  onClick={() => setShowBookingModal(true)}
                  className={`w-full py-3 px-6 font-medium rounded-lg transition-all duration-300 ${
                    plan.popular
                      ? 'gradient-lovisa text-white hover:-translate-y-0.5 hover:shadow-xl'
                      : 'border-2 border-primary text-primary hover:bg-primary hover:text-white'
                  }`}
                >
                  Get Started
                </button>
              </div>
            ))}
          </div>
        </div>
      </section>

      )}

      {/* Contact Section */}
      {!content.contact.hidden && (
      <section id="contact" className="py-20 border-t border-gray-200">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-4xl lg:text-5xl font-bold mb-6">{content.contact.title}</h2>
            <p className="text-xl text-gray-600 mb-8">{content.contact.subtitle}</p>
            <div className="flex flex-wrap gap-6 justify-center mb-8">
              <a href={`mailto:${content.contact.email}`} className="flex items-center text-lg text-gray-700 hover:text-primary transition-colors">
                <i className="fas fa-envelope mr-3 text-primary"></i>
                {content.contact.email}
              </a>
              <a href={`tel:${content.contact.phoneHref}`} className="flex items-center text-lg text-gray-700 hover:text-primary transition-colors">
                <i className="fas fa-phone mr-3 text-primary"></i>
                {content.contact.phone}
              </a>
            </div>
            <button
              onClick={() => setShowBookingModal(true)}
              className="px-8 py-3 gradient-lovisa text-white font-medium rounded-lg hover:-translate-y-1 hover:shadow-xl transition-all duration-300"
            >
              <i className="fas fa-calendar-alt mr-2"></i>{content.contact.buttonLabel}
            </button>
          </div>
        </div>
      </section>

      )}

      {/* Footer */}
      {!content.footer.hidden && (
      <footer className="bg-dark text-white py-12">
        <div className="container mx-auto px-4">
          <div className="text-center">
            <h3 className="text-2xl font-bold mb-2">{content.footer.companyName}</h3>
            <p className="text-gray-400 mb-4">{content.footer.tagline}</p>
            <p className="text-gray-500 text-sm">© {year} {content.footer.companyName}. {content.footer.copyright}</p>
          </div>
        </div>
      </footer>
      )}

      {/* Booking Modal */}
      {showBookingModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center">
          <div className="absolute inset-0 bg-black/50" onClick={() => setShowBookingModal(false)}></div>
          <div className="relative bg-white rounded-2xl p-8 max-w-md w-full mx-4 z-10">
            <button
              onClick={() => setShowBookingModal(false)}
              className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
            >
              <i className="fas fa-times text-2xl"></i>
            </button>
            <h3 className="text-2xl font-bold mb-4">Book a Consultation</h3>
            <p className="text-gray-600 mb-6">Fill out the form below and I&apos;ll get back to you within 24 hours.</p>
            <form className="space-y-4">
              <div>
                <label className="block text-sm font-medium mb-2">Name *</label>
                <input type="text" required className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none" />
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">Email *</label>
                <input type="email" required className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none" />
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">Phone</label>
                <input type="tel" className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none" />
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">Message</label>
                <textarea rows={4} className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none"></textarea>
              </div>
              <button type="submit" className="w-full py-3 gradient-lovisa text-white font-medium rounded-lg hover:shadow-xl transition-all duration-300">
                Send Message
              </button>
            </form>
          </div>
        </div>
      )}
    </>
  )
}