import React, { useEffect, useState } from 'react';
import { PROPERTIES, NAV_LINKS } from './constants';
import PropertyCard from './components/PropertyCard';
import AIChat from './components/AIChat';
import { MenuIcon, ArrowRightIcon } from './components/Icons';

const App: React.FC = () => {
  const [scrolled, setScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div className="min-h-screen bg-sk-light text-sk-dark selection:bg-sk-accent selection:text-white font-sans">
      {/* Decorative vertical lines for "depth" */}
      <div className="fixed inset-0 pointer-events-none z-0 flex justify-between px-6 md:px-24 opacity-5">
        <div className="w-px h-full bg-sk-dark"></div>
        <div className="w-px h-full bg-sk-dark hidden md:block"></div>
        <div className="w-px h-full bg-sk-dark hidden lg:block"></div>
        <div className="w-px h-full bg-sk-dark"></div>
      </div>

      {/* Navbar */}
      <nav 
        className={`fixed top-0 w-full z-40 transition-all duration-500 border-b ${
          scrolled ? 'bg-white/95 backdrop-blur-md py-4 border-gray-200 shadow-sm' : 'bg-transparent py-8 border-transparent'
        }`}
      >
        <div className="max-w-[1400px] mx-auto px-6 md:px-12 flex justify-between items-center">
          <div className="text-2xl md:text-3xl font-serif font-bold tracking-tight z-50 relative text-sk-dark">
            SK<span className="text-sk-accent">.</span>
          </div>

          {/* Desktop Nav */}
          <div className="hidden md:flex space-x-12">
            {NAV_LINKS.map(link => (
              <a 
                key={link.label} 
                href={link.href} 
                className={`text-xs font-bold uppercase tracking-[0.15em] hover:text-sk-accent transition-colors relative group ${scrolled ? 'text-sk-dark' : 'text-sk-dark md:text-white md:mix-blend-difference'}`}
              >
                {link.label}
                <span className="absolute -bottom-2 left-0 w-0 h-0.5 bg-sk-accent transition-all duration-300 group-hover:w-full"></span>
              </a>
            ))}
          </div>

          {/* Mobile Menu Button */}
          <button 
            className={`md:hidden z-50 ${mobileMenuOpen ? 'text-sk-dark' : (scrolled ? 'text-sk-dark' : 'text-white drop-shadow-md')}`}
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          >
            <MenuIcon />
          </button>
        </div>
        
        {/* Mobile Menu Overlay */}
        {mobileMenuOpen && (
          <div className="fixed inset-0 bg-sk-light z-40 flex flex-col justify-center items-center space-y-8 md:hidden animate-fade-in">
            {NAV_LINKS.map(link => (
              <a 
                key={link.label} 
                href={link.href}
                onClick={() => setMobileMenuOpen(false)} 
                className="text-2xl font-serif text-sk-dark hover:text-sk-accent transition-colors"
              >
                {link.label}
              </a>
            ))}
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <header className="relative min-h-screen flex items-center pt-20 overflow-hidden">
        {/* Hero Background Image */}
        <div className="absolute top-0 right-0 w-full h-full z-0">
          <img 
            src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&q=80&w=1600" 
            alt="Matinhos Sunset" 
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-black/30 md:bg-black/20"></div>
          {/* Gradient Overlay for Text Readability */}
          <div className="absolute inset-0 bg-gradient-to-r from-black/60 via-black/30 to-transparent"></div>
        </div>

        <div className="relative z-10 max-w-[1400px] mx-auto px-6 md:px-12 w-full mt-16 md:mt-0">
          <div className="max-w-2xl text-white">
            <div className="inline-block border-l-4 border-sk-accent pl-6 mb-8">
               <p className="text-xs font-bold uppercase tracking-[0.3em] text-sk-accent mb-2">Matinhos — Paraná</p>
               <p className="text-sm font-light tracking-wide text-white/90">Av. Paranaguá, 803</p>
            </div>
            
            <h1 className="text-5xl md:text-7xl font-serif leading-[1.1] mb-8 text-shadow">
              Horizonte <br/>
              <span className="italic font-light text-sk-gold">Infinito</span>
            </h1>
            
            <p className="text-white/80 font-light text-lg mb-10 leading-relaxed max-w-md border-l border-white/20 pl-6">
              A SK Imobiliária conecta você ao melhor do litoral. Imóveis de alto padrão onde o luxo encontra a natureza.
            </p>
            
            <a href="#collection" className="inline-flex items-center space-x-4 text-xs font-bold uppercase tracking-widest bg-sk-accent text-white px-10 py-5 hover:bg-white hover:text-sk-dark transition-all duration-300 shadow-2xl shadow-sk-accent/30">
              <span>Descobrir Imóveis</span>
              <ArrowRightIcon className="w-4 h-4" />
            </a>
          </div>
        </div>
        
        {/* Scroll Indicator */}
        <div className="absolute bottom-10 left-6 md:left-12 flex items-center gap-4 z-20">
            <span className="text-[10px] uppercase tracking-widest text-white/80">Explore</span>
            <div className="w-12 h-px bg-sk-gold"></div>
        </div>
      </header>

      {/* Philosophy Section */}
      <section id="about" className="py-24 md:py-32 relative z-10 bg-sk-dark text-white">
        <div className="max-w-[1400px] mx-auto px-6 md:px-12 grid grid-cols-1 md:grid-cols-2 gap-20 items-center">
          <div>
            <span className="text-sk-accent text-xs font-bold uppercase tracking-widest mb-4 block">Sobre a SK</span>
            <h2 className="text-3xl md:text-5xl font-serif mb-8 leading-tight">
              Elegância em <br/><span className="text-sk-gold italic">Cada Camada</span>
            </h2>
            <div className="space-y-6 text-white/60 font-light text-lg leading-relaxed">
              <p>
                Localizada estrategicamente na Av. Paranaguá, 803, a SK Imobiliária não vende apenas metros quadrados; curamos estilos de vida à beira-mar.
              </p>
              <p>
                Nossa paleta reflete nossa essência: o preto da profundidade e seriedade dos negócios, o dourado da valorização do seu patrimônio, e o laranja vibrante do pôr do sol de Matinhos.
              </p>
            </div>
            
            <div className="mt-12 flex gap-12">
                <div>
                    <span className="block text-3xl font-serif text-sk-gold">15+</span>
                    <span className="text-xs uppercase tracking-widest text-white/50">Anos de Litoral</span>
                </div>
                <div>
                    <span className="block text-3xl font-serif text-sk-gold">803</span>
                    <span className="text-xs uppercase tracking-widest text-white/50">Av. Paranaguá</span>
                </div>
            </div>
          </div>
          
          <div className="relative group">
             <div className="aspect-[4/5] bg-gray-800 overflow-hidden relative z-10 border border-white/10">
                <img src="https://images.unsplash.com/photo-1613490493576-7fde63acd811?auto=format&fit=crop&q=80&w=800" alt="Interior Design" className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105 opacity-80 group-hover:opacity-100"/>
             </div>
             {/* Decorative Layers */}
             <div className="absolute -bottom-6 -right-6 w-full h-full border border-sk-gold/30 z-0 transition-transform duration-500 group-hover:translate-x-4 group-hover:translate-y-4"></div>
             <div className="absolute -top-6 -left-6 w-32 h-32 bg-sk-accent/20 z-0 blur-2xl"></div>
          </div>
        </div>
      </section>

      {/* Collection Grid */}
      <section id="collection" className="py-24 bg-sk-light relative z-10">
        <div className="max-w-[1400px] mx-auto px-6 md:px-12">
          <div className="flex flex-col md:flex-row justify-between items-end mb-20 border-b border-gray-200 pb-8">
            <div>
              <p className="text-xs uppercase tracking-[0.3em] text-sk-accent mb-2">Portfólio</p>
              <h2 className="text-4xl md:text-5xl font-serif text-sk-dark">Seleção Exclusiva</h2>
            </div>
            <a href="#" className="hidden md:flex items-center gap-2 text-xs uppercase tracking-widest text-sk-dark hover:text-sk-accent transition-colors mt-6 md:mt-0">
                <span>Ver Todos os Imóveis</span>
                <ArrowRightIcon className="w-4 h-4" />
            </a>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16">
            {PROPERTIES.map((prop) => (
              <PropertyCard key={prop.id} property={prop} />
            ))}
          </div>
          
          <div className="mt-16 text-center md:hidden">
            <a href="#" className="inline-block bg-sk-dark text-white px-8 py-4 text-xs uppercase tracking-widest hover:bg-sk-accent transition-colors">Ver Todos</a>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section id="services" className="py-32 bg-sk-accent text-white relative overflow-hidden">
        <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10"></div>
        <div className="absolute top-0 right-0 w-full h-full bg-gradient-to-l from-black/20 to-transparent"></div>
        
        <div className="max-w-4xl mx-auto px-6 text-center relative z-10">
          <h2 className="text-3xl md:text-5xl font-serif mb-8">Viva o Sonho em Matinhos</h2>
          <p className="text-white/90 font-light text-lg mb-12 max-w-2xl mx-auto">
            Seja para investir ou morar, temos a chave para o seu novo horizonte.
            Visite-nos na Av. Paranaguá, 803.
          </p>
          <div className="flex flex-col md:flex-row justify-center gap-6">
            <button className="bg-sk-dark text-white border border-sk-dark px-10 py-4 text-xs font-bold uppercase tracking-[0.2em] hover:bg-white hover:text-sk-dark transition-all duration-300">
                Agendar Visita
            </button>
            <button className="bg-transparent text-white border border-white px-10 py-4 text-xs font-bold uppercase tracking-[0.2em] hover:bg-white hover:text-sk-accent transition-all duration-300">
                Falar no WhatsApp
            </button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer id="contact" className="bg-sk-dark text-white pt-24 pb-12 border-t border-white/5">
        <div className="max-w-[1400px] mx-auto px-6 md:px-12">
          <div className="grid grid-cols-1 md:grid-cols-12 gap-16 md:gap-8">
            <div className="md:col-span-5 space-y-8">
              <div className="text-3xl font-serif font-bold tracking-tight text-white">SK<span className="text-sk-accent">.</span></div>
              <p className="text-sm font-light text-white/60 max-w-sm leading-relaxed">
                Referência em imobiliária de alto padrão em Matinhos. 
                Combinamos tradição e modernidade para oferecer as melhores oportunidades do litoral paranaense.
              </p>
              <div className="flex gap-4">
                 <div className="w-10 h-10 border border-white/20 flex items-center justify-center hover:bg-sk-accent hover:border-sk-accent cursor-pointer transition-all duration-300">
                    <span className="text-xs font-bold">IG</span>
                 </div>
                 <div className="w-10 h-10 border border-white/20 flex items-center justify-center hover:bg-sk-accent hover:border-sk-accent cursor-pointer transition-all duration-300">
                    <span className="text-xs font-bold">FB</span>
                 </div>
              </div>
            </div>
            
            <div className="md:col-span-3">
              <h4 className="text-xs uppercase tracking-widest font-bold text-sk-gold mb-8">Endereço</h4>
              <address className="not-italic text-sm font-light text-white/70 space-y-4 border-l border-white/10 pl-6">
                <p className="flex flex-col">
                    <span className="font-medium text-white">Sede SK</span>
                    <span>Av. Paranaguá, 803</span>
                </p>
                <p>Matinhos - PR</p>
                <p>CEP 83260-000</p>
              </address>
            </div>

            <div className="md:col-span-4">
              <h4 className="text-xs uppercase tracking-widest font-bold text-sk-gold mb-8">Contato</h4>
              <ul className="space-y-4 text-sm font-light text-white/70 border-l border-white/10 pl-6">
                <li className="flex flex-col gap-1">
                    <span className="text-[10px] uppercase tracking-wider opacity-50">Telefone</span>
                    <span className="text-white text-lg">(41) 3453-0000</span>
                </li>
                <li className="flex flex-col gap-1">
                    <span className="text-[10px] uppercase tracking-wider opacity-50">Email</span>
                    <span className="text-white">contato@skimobiliaria.com.br</span>
                </li>
              </ul>
            </div>
          </div>
          
          <div className="border-t border-white/5 mt-20 pt-8 flex flex-col md:flex-row justify-between items-center text-xs text-white/40 font-light">
            <p>&copy; 2024 SK Imobiliária. Matinhos - PR.</p>
            <div className="flex space-x-6 mt-4 md:mt-0">
                <a href="#" className="hover:text-sk-accent transition-colors">Privacidade</a>
                <a href="#" className="hover:text-sk-accent transition-colors">Termos</a>
            </div>
          </div>
        </div>
      </footer>

      {/* AI Assistant Widget */}
      <AIChat />
    </div>
  );
};

export default App;