import React, { useState, useEffect } from 'react';
import { 
  TrendingUp, 
  MapPin, 
  ChevronRight, 
  Phone, 
  Mail, 
  ArrowRight, 
  Facebook,
  Award,
  BarChart3,
  Calendar,
  MessageSquare,
  Building2,
  ShieldCheck,
  Star,
  Clock
} from 'lucide-react';

const App = () => {
  const [scrolled, setScrolled] = useState(false);

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

  const stats = [
    { label: "Market Rank", value: "Top 1%", sub: "NM Sales Agents" },
    { label: "Local Expertise", value: "Albuquerque", sub: "Residential Expert" },
    { label: "Client Rating", value: "5.0", sub: "Professional Excellence" },
  ];

  const featuredAreas = [
    "North Valley", "High Desert", "Tanoan", "Placitas", "Sandia Heights", "Westside"
  ];

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans selection:bg-red-600 selection:text-white">
      {/* Premium Header */}
      <nav className={`fixed top-0 w-full z-50 transition-all duration-500 ${scrolled ? 'bg-white/95 backdrop-blur-sm shadow-xl py-3' : 'bg-transparent py-6'}`}>
        <div className="max-w-7xl mx-auto px-6 flex justify-between items-center">
          <div className="flex flex-col">
            <span className={`text-2xl font-black tracking-tighter transition-colors ${scrolled ? 'text-slate-900' : 'text-white'}`}>
              SHIVE <span className="text-red-600">REAL ESTATE GROUP</span>
            </span>
            <span className={`text-[10px] font-bold uppercase tracking-[.3em] transition-colors ${scrolled ? 'text-slate-500' : 'text-white/70'}`}>
              Jim Shive • Albuquerque, NM
            </span>
          </div>
          
          <div className="hidden lg:flex items-center gap-10">
            <div className={`flex gap-8 text-[11px] font-bold uppercase tracking-widest ${scrolled ? 'text-slate-600' : 'text-white/90'}`}>
              <a href="#about" className="hover:text-red-600 transition-colors">The Expert</a>
              <a href="#market" className="hover:text-red-600 transition-colors">NM Market</a>
              <a href="#contact" className="hover:text-red-600 transition-colors">Consultation</a>
            </div>
            <a 
              href="tel:5058038903" 
              className="bg-red-600 text-white px-6 py-2 rounded-full text-xs font-black uppercase tracking-widest hover:bg-slate-900 transition-all shadow-lg flex items-center gap-2"
            >
              <Phone size={14} /> 505.803.8903
            </a>
          </div>
        </div>
      </nav>

      {/* Hero: Authority & Presence */}
      <section className="relative h-screen flex items-center justify-center overflow-hidden bg-slate-900">
        <div className="absolute inset-0 z-0">
          <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-slate-900 z-10" />
          <img 
            src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&q=80&w=2000" 
            className="w-full h-full object-cover"
            alt="New Mexico Luxury Home"
          />
        </div>

        <div className="relative z-20 max-w-7xl mx-auto px-6 text-center text-white">
          <div className="inline-flex items-center gap-2 px-4 py-2 border border-white/20 bg-white/10 backdrop-blur-md rounded-full mb-8 animate-fade-in">
            <Award size={16} className="text-red-500" />
            <span className="text-[10px] font-bold uppercase tracking-widest">Top Sales Agent In New Mexico</span>
          </div>
          <h1 className="text-5xl md:text-8xl font-black leading-[0.9] tracking-tighter mb-8 drop-shadow-2xl">
            RESULTS DRIVEN. <br />
            <span className="text-red-600">CLIENT FOCUSED.</span>
          </h1>
          <p className="text-xl md:text-2xl text-white/80 mb-12 max-w-3xl mx-auto font-light leading-relaxed">
            The standard for residential real estate in Albuquerque. 
            Maximizing equity for sellers and finding sanctuary for buyers.
          </p>
          <div className="flex flex-wrap justify-center gap-6">
            <button className="bg-red-600 hover:bg-white hover:text-red-600 text-white px-10 py-5 rounded-full font-black text-xs uppercase tracking-[0.2em] transition-all transform hover:scale-105 shadow-2xl">
              Get Your Home Valuation
            </button>
            <button className="bg-white/10 backdrop-blur-md border border-white/30 hover:bg-white/20 text-white px-10 py-5 rounded-full font-black text-xs uppercase tracking-[0.2em] transition-all">
              Browse Albuquerque Homes
            </button>
          </div>
        </div>

        {/* Floating Stat Bar */}
        <div className="absolute bottom-0 w-full bg-white/5 backdrop-blur-xl border-t border-white/10 py-8 hidden md:block z-30">
          <div className="max-w-7xl mx-auto px-6 grid grid-cols-3 gap-12">
            {stats.map((stat, i) => (
              <div key={i} className="text-center border-r last:border-0 border-white/10 text-white">
                <p className="text-4xl font-black tracking-tighter mb-1">{stat.value}</p>
                <p className="text-[10px] font-bold uppercase tracking-[.2em] text-white/50">{stat.sub}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* The Expert Section */}
      <section id="about" className="py-32 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid lg:grid-cols-2 gap-20 items-center">
            <div className="relative">
              <div className="aspect-[4/5] bg-slate-100 rounded-3xl overflow-hidden shadow-2xl relative group">
                {/* Replace with actual high-res photo of Jim */}
                <div className="absolute inset-0 bg-slate-200 flex items-center justify-center italic text-slate-400">
                   Jim Shive • Top Sales Agent
                </div>
                <img 
                  src="https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&q=80&w=800" 
                  className="w-full h-full object-cover group-hover:scale-105 transition-all duration-700" 
                  alt="Jim Shive"
                />
              </div>
              <div className="absolute -bottom-10 -right-10 bg-red-600 text-white p-8 rounded-2xl shadow-2xl max-w-[280px]">
                <p className="text-4xl font-black mb-1">505+</p>
                <p className="text-xs font-bold uppercase tracking-widest leading-relaxed">
                  Deep Local Connections in Albuquerque & Surrounding Areas
                </p>
              </div>
            </div>
            
            <div className="space-y-8">
              <div>
                <h2 className="text-red-600 text-xs font-black tracking-[.4em] uppercase mb-4">Residential Expert</h2>
                <h3 className="text-5xl font-black tracking-tighter text-slate-900 leading-[1.1]">
                  JIM SHIVE: THE <br />ADVANTAGE YOU NEED.
                </h3>
              </div>
              <p className="text-lg text-slate-600 leading-relaxed">
                As a top-performing agent at Keller Williams Realty, I don’t just list homes—I engineer sales. 
                My approach combines aggressive digital marketing, meticulous property preparation, and the 
                negotiation skills required to navigate Albuquerque's competitive market.
              </p>
              
              <div className="grid gap-6">
                {[
                  { title: "Strategic Positioning", desc: "Customized marketing plans tailored to each property's unique DNA.", icon: <TrendingUp className="text-red-600"/> },
                  { title: "Unmatched Network", desc: "Instant access to a massive database of qualified buyers and local investors.", icon: <ShieldCheck className="text-red-600"/> },
                  { title: "Full-Service Concierge", desc: "From staging to closing, my team handles every detail.", icon: <Clock className="text-red-600"/> }
                ].map((item, i) => (
                  <div key={i} className="flex gap-4 p-6 bg-slate-50 rounded-2xl border border-slate-100 hover:border-red-200 transition-colors">
                    <div className="mt-1">{item.icon}</div>
                    <div>
                      <h4 className="font-bold text-slate-900">{item.title}</h4>
                      <p className="text-sm text-slate-500">{item.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Albuquerque Expertise */}
      <section className="py-24 bg-slate-900 text-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-black tracking-tighter mb-4">SPECIALIZING IN ALBUQUERQUE'S FINEST</h2>
            <p className="text-slate-400 uppercase tracking-widest text-xs font-bold">Deep knowledge of New Mexico's most desirable neighborhoods</p>
          </div>
          <div className="flex flex-wrap justify-center gap-4">
            {featuredAreas.map((area, i) => (
              <span key={i} className="px-6 py-3 border border-white/10 rounded-full text-sm font-bold hover:bg-white hover:text-black transition-all cursor-default">
                {area}
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-32 bg-white relative overflow-hidden">
        <div className="max-w-7xl mx-auto px-6 relative z-10">
          <div className="bg-slate-900 rounded-[3rem] p-12 md:p-20 text-white flex flex-col md:flex-row gap-16 items-center shadow-3xl">
            <div className="flex-1 space-y-8 text-center md:text-left">
              <h2 className="text-5xl md:text-6xl font-black tracking-tighter">READY TO MAKE <br /><span className="text-red-600">YOUR MOVE?</span></h2>
              <p className="text-slate-400 text-lg">
                Whether you're selling a luxury estate or looking for your first New Mexico home, 
                get the expertise of a top-tier sales agent on your side.
              </p>
              <div className="space-y-4 pt-4">
                <div className="flex items-center gap-4 justify-center md:justify-start group cursor-pointer">
                  <div className="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
                    <Phone size={20} />
                  </div>
                  <div>
                    <p className="text-[10px] font-bold uppercase tracking-widest text-slate-500">Voice & Text</p>
                    <a href="tel:5058038903" className="text-2xl font-black hover:text-red-600 transition-colors">505.803.8903</a>
                  </div>
                </div>
                <div className="flex items-center gap-4 justify-center md:justify-start">
                   <div className="w-12 h-12 bg-slate-800 rounded-full flex items-center justify-center">
                    <MapPin size={20} className="text-red-600" />
                  </div>
                  <div>
                    <p className="text-[10px] font-bold uppercase tracking-widest text-slate-500">Keller Williams Realty</p>
                    <p className="text-sm font-bold">6240 Riverside Plaza NW #100, ABQ</p>
                  </div>
                </div>
              </div>
            </div>
            
            <div className="w-full max-w-md bg-white p-10 rounded-3xl text-slate-900 shadow-2xl">
              <h3 className="text-2xl font-black mb-6 tracking-tight">Request a Consult</h3>
              <form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
                <input type="text" placeholder="Your Name" className="w-full px-6 py-4 bg-slate-100 rounded-xl focus:outline-none focus:ring-2 focus:ring-red-600 transition-all" />
                <input type="email" placeholder="Email Address" className="w-full px-6 py-4 bg-slate-100 rounded-xl focus:outline-none focus:ring-2 focus:ring-red-600 transition-all" />
                <textarea placeholder="How can I help you today?" rows="4" className="w-full px-6 py-4 bg-slate-100 rounded-xl focus:outline-none focus:ring-2 focus:ring-red-600 transition-all"></textarea>
                <button className="w-full bg-red-600 text-white font-black uppercase tracking-widest py-5 rounded-xl hover:bg-slate-900 transition-all shadow-xl">
                  Send Message
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-50 py-20 border-t border-slate-200">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex flex-col md:flex-row justify-between gap-12 mb-16">
            <div className="space-y-6">
              <div className="text-2xl font-black tracking-tighter">
                SHIVE <span className="text-red-600">REAL ESTATE GROUP</span>
              </div>
              <div className="flex gap-4">
                <a href="https://www.facebook.com/JimSellsNM" className="w-10 h-10 bg-slate-900 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors">
                  <Facebook size={18} />
                </a>
                <a href="mailto:jim@example.com" className="w-10 h-10 bg-slate-900 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors">
                  <Mail size={18} />
                </a>
              </div>
            </div>
            <div className="grid grid-cols-2 gap-20">
              <div className="space-y-4">
                <p className="font-black uppercase tracking-widest text-[10px] text-slate-400">Office</p>
                <address className="not-italic text-sm text-slate-600 leading-relaxed font-bold">
                  Keller Williams Realty<br />
                  6240 Riverside Plaza NW #100<br />
                  Albuquerque, NM 87120
                </address>
              </div>
              <div className="space-y-4">
                <p className="font-black uppercase tracking-widest text-[10px] text-slate-400">Expertise</p>
                <ul className="text-sm text-slate-600 space-y-2 font-bold">
                  <li>Luxury Residential</li>
                  <li>Investment Portfolios</li>
                  <li>Relocation Services</li>
                  <li>Seller Representation</li>
                </ul>
              </div>
            </div>
          </div>
          <div className="pt-12 border-t border-slate-200 flex flex-col md:flex-row justify-between items-center gap-6">
            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">© 2024 Shive Real Estate Group. All Rights Reserved.</p>
            <div className="flex items-center gap-8 opacity-40">
               <span className="text-[10px] font-black uppercase tracking-widest">Equal Housing Opportunity</span>
               <span className="text-[10px] font-black uppercase tracking-widest text-red-600">Keller Williams Realty</span>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;