import React, { useState, useEffect, useRef, useMemo } from 'react';
import { 
  PhoneCall, 
  CheckCircle2, 
  MapPin, 
  Star, 
  ArrowRight, 
  Menu, 
  X, 
  ShieldCheck, 
  Wind, 
  Hammer,
  ChevronRight,
  Clock,
  Navigation,
  Search,
  Map as MapIcon,
  AlertCircle
} from 'lucide-react';

// --- CONFIG & THEME ---
const COLORS = {
  primary: '#CC211A', // Toro Red
  ink: '#0A0A0A',    // Deep Black
  paper: '#FAFAFA',  // Off-white
  accent: '#F5F5F4'  // Warm stone
};

const CATEGORIES = ['All', 'Residential', 'Commercial'];

const GALLERY_ITEMS = [
  { id: 1, category: 'Residential', title: 'Bellevue Living Room', img: 'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&q=80&w=800' },
  { id: 2, category: 'Commercial', title: 'Tacoma Office Park', img: 'https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=800' },
  { id: 3, category: 'Residential', title: 'Olympia Kitchen Remodel', img: 'https://images.unsplash.com/photo-1556912177-d517a177301c?auto=format&fit=crop&q=80&w=800' },
  { id: 4, category: 'Commercial', title: 'Seattle Retail Space', img: 'https://images.unsplash.com/photo-1582037928769-181f2644ecb7?auto=format&fit=crop&q=80&w=800' },
];

const LOCATIONS = [
  { name: 'Seattle', region: 'North Sound', description: 'Metro & Downtown' },
  { name: 'Tacoma', region: 'Pierce County', description: 'Central Operations' },
  { name: 'Olympia', region: 'South Sound', description: 'Regional Headquarters' },
  { name: 'Bellevue', region: 'Eastside', description: 'High-End Residential' },
  { name: 'Everett', region: 'North Sound', description: 'Snohomish County' },
  { name: 'Renton', region: 'South King', description: 'Residential Growth' },
  { name: 'Kent', region: 'South King', description: 'Commercial & Industrial' },
  { name: 'Federal Way', region: 'South King', description: 'South Metro' },
  { name: 'Puyallup', region: 'Pierce County', description: 'Valley Expansion' },
  { name: 'Lacey', region: 'Thurston County', description: 'Capitol Area' },
  { name: 'Auburn', region: 'South King', description: 'Valley Service Area' },
  { name: 'Gig Harbor', region: 'Peninsula', description: 'Waterfront Projects' },
];

// --- COMPONENTS ---

const MapSection = () => {
  const [selectedLoc, setSelectedLoc] = useState(LOCATIONS[1]); 
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResult, setSearchResult] = useState(null);

  const handleSearch = (e) => {
    e.preventDefault();
    const query = searchQuery.toLowerCase().trim();
    if (!query) return;

    const found = LOCATIONS.find(loc => 
      loc.name.toLowerCase().includes(query) || 
      loc.region.toLowerCase().includes(query)
    );

    if (found) {
      setSelectedLoc(found);
      setSearchResult({ success: true, message: `Yes! We service ${found.name} and the surrounding ${found.region} area.` });
    } else {
      setSearchResult({ success: false, message: "We're expanding! Call us to see if we can accommodate your project location." });
    }
  };

  return (
    <section id="coverage" className="py-32 bg-stone-50 overflow-hidden">
      <div className="max-w-7xl mx-auto px-6">
        <div className="grid lg:grid-cols-12 gap-12 items-start">
          <div className="lg:col-span-4">
            <span className="text-[#CC211A] font-bold text-xs uppercase tracking-[0.3em] mb-4 block">Regional Coverage</span>
            <h2 className="text-5xl font-bold tracking-tight mb-8 leading-tight">Where We Work.</h2>
            
            <div className="mb-10 p-6 bg-white rounded-3xl shadow-sm border border-stone-200">
              <label className="block text-[10px] font-bold uppercase tracking-widest text-stone-400 mb-3">Check Your Service Area</label>
              <form onSubmit={handleSearch} className="relative">
                <input 
                  type="text" 
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  placeholder="Enter city or zip code..."
                  className="w-full bg-stone-50 border-none rounded-xl py-4 pl-12 pr-4 text-sm focus:ring-2 focus:ring-red-600 transition-all"
                />
                <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-stone-300" />
              </form>
              {searchResult && (
                <div className={`mt-4 p-4 rounded-xl text-xs flex gap-3 animate-in fade-in slide-in-from-top-2 duration-300 ${searchResult.success ? 'bg-green-50 text-green-700' : 'bg-stone-100 text-stone-600'}`}>
                  {searchResult.success ? <CheckCircle2 className="w-4 h-4 shrink-0" /> : <AlertCircle className="w-4 h-4 shrink-0" />}
                  <p className="font-medium">{searchResult.message}</p>
                </div>
              )}
            </div>
            
            <div className="grid grid-cols-1 gap-3 max-h-[420px] overflow-y-auto pr-2 custom-scrollbar">
              {LOCATIONS.map((loc) => (
                <button
                  key={loc.name}
                  onClick={() => { setSelectedLoc(loc); setSearchResult(null); }}
                  className={`w-full flex items-center justify-between p-4 rounded-2xl border transition-all ${
                    selectedLoc.name === loc.name 
                      ? 'bg-white border-red-200 shadow-md scale-[1.01]' 
                      : 'bg-transparent border-stone-100 hover:border-stone-200 hover:bg-stone-100/50'
                  }`}
                >
                  <div className="flex items-center gap-4">
                    <div className={`w-8 h-8 rounded-lg flex items-center justify-center transition-colors ${
                      selectedLoc.name === loc.name ? 'bg-red-600 text-white' : 'bg-stone-200 text-stone-500'
                    }`}>
                      <MapPin className="w-4 h-4" />
                    </div>
                    <div className="text-left">
                      <h4 className="font-bold text-sm">{loc.name}</h4>
                      <p className="text-[10px] text-stone-400 font-bold uppercase tracking-wider">{loc.region}</p>
                    </div>
                  </div>
                  <ChevronRight className={`w-4 h-4 transition-transform ${selectedLoc.name === loc.name ? 'text-red-600 translate-x-1' : 'text-stone-300'}`} />
                </button>
              ))}
            </div>
          </div>

          <div className="lg:col-span-8 relative h-[500px] lg:h-[700px] rounded-[3rem] overflow-hidden shadow-2xl border-8 border-white group">
            <iframe
              title="Service Area Map"
              width="100%"
              height="100%"
              style={{ border: 0, filter: 'grayscale(0.3) contrast(1.1) brightness(0.95)' }}
              loading="lazy"
              allowFullScreen
              src={`https://www.google.com/maps/embed/v1/place?key=&q=${selectedLoc.name},WA&zoom=11`}
            ></iframe>
            
            <div className="absolute top-8 left-8 right-8 flex flex-col md:flex-row gap-4 items-start md:items-center justify-between pointer-events-none">
              <div className="bg-white/95 backdrop-blur-md p-5 rounded-3xl shadow-xl flex items-center gap-4 border border-white pointer-events-auto">
                 <div className="w-12 h-12 bg-red-600 rounded-2xl flex items-center justify-center text-white shadow-lg shadow-red-200">
                    <MapIcon className="w-6 h-6" />
                 </div>
                 <div>
                    <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-stone-400">Primary Hub</p>
                    <p className="font-bold text-lg">{selectedLoc.name} Division</p>
                 </div>
              </div>
            </div>

            <div className="absolute bottom-8 left-1/2 -translate-x-1/2 w-[90%] bg-white p-4 rounded-2xl shadow-2xl border border-stone-100 flex items-center justify-between pointer-events-auto">
              <div className="flex items-center gap-3">
                <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
                <span className="text-xs font-bold uppercase tracking-widest text-stone-600">Currently accepting new projects in {selectedLoc.name}</span>
              </div>
              <a href="tel:5555555555" className="bg-stone-900 text-white px-5 py-2 rounded-xl text-xs font-bold hover:bg-red-600 transition-colors">Book Now</a>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 10px; }
      `}</style>
    </section>
  );
};

const ImageSlider = () => {
  const [sliderPos, setSliderPos] = useState(50);
  const containerRef = useRef(null);

  const handleMove = (e) => {
    if (!containerRef.current) return;
    const rect = containerRef.current.getBoundingClientRect();
    const x = e.type.includes('touch') ? e.touches[0].clientX : e.clientX;
    const position = ((x - rect.left) / rect.width) * 100;
    setSliderPos(Math.min(Math.max(position, 0), 100));
  };

  return (
    <div 
      ref={containerRef}
      className="relative w-full aspect-video md:aspect-[21/9] rounded-2xl overflow-hidden cursor-ew-resize group select-none shadow-2xl"
      onMouseMove={handleMove}
      onTouchMove={handleMove}
    >
      <div className="absolute inset-0 bg-cover bg-center" style={{ backgroundImage: `url('https://images.unsplash.com/photo-1621905252507-b354bcadcabc?auto=format&fit=crop&q=80&w=1600')` }}>
        <div className="absolute bottom-6 right-6 bg-white/90 backdrop-blur px-4 py-2 rounded-full font-bold text-xs uppercase tracking-widest">Toro's Finish</div>
      </div>
      <div 
        className="absolute inset-0 bg-cover bg-center border-r-4 border-white z-10" 
        style={{ 
          backgroundImage: `url('https://images.unsplash.com/photo-1589939705384-5185138a04b9?auto=format&fit=crop&q=80&w=1600')`,
          clipPath: `inset(0 ${100 - sliderPos}% 0 0)`
        }}
      >
        <div className="absolute bottom-6 left-6 bg-black/50 text-white px-4 py-2 rounded-full font-bold text-xs uppercase tracking-widest">The Chaos</div>
      </div>
      <div className="absolute top-0 bottom-0 z-20" style={{ left: `calc(${sliderPos}% - 2px)` }}>
        <div className="h-full w-1 bg-white relative">
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center">
            <div className="flex gap-1">
              <div className="w-1 h-4 bg-stone-300 rounded-full"></div>
              <div className="w-1 h-4 bg-stone-300 rounded-full"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default function App() {
  const [activeFilter, setActiveFilter] = useState('All');
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [formStatus, setFormStatus] = useState('idle');

  const filteredGallery = activeFilter === 'All' 
    ? GALLERY_ITEMS 
    : GALLERY_ITEMS.filter(item => item.category === activeFilter);

  return (
    <div className="min-h-screen bg-[#FAFAFA] text-[#0A0A0A] selection:bg-red-100 selection:text-red-600">
      
      {/* NAV */}
      <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-stone-100">
        <div className="max-w-7xl mx-auto px-6 h-20 flex justify-between items-center">
          <div className="flex items-center gap-3 group cursor-pointer">
            <div className="w-10 h-10 bg-[#CC211A] flex items-center justify-center rounded-lg text-white font-bold transition-transform group-hover:rotate-12">T</div>
            <span className="font-bold text-xl tracking-tighter uppercase font-mono">Toro's Drywall</span>
          </div>
          
          <div className="hidden md:flex gap-10 text-[13px] font-bold uppercase tracking-[0.2em] text-stone-500">
            {['Services', 'Gallery', 'Coverage'].map(link => (
              <a key={link} href={`#${link.toLowerCase()}`} className="hover:text-[#CC211A] transition-colors">{link}</a>
            ))}
          </div>

          <a href="tel:5555555555" className="hidden md:flex bg-[#CC211A] text-white px-8 py-3 rounded-full font-bold text-sm items-center gap-2 hover:bg-black transition-all shadow-lg hover:shadow-red-100">
            <PhoneCall className="w-4 h-4" /> (555) 555-5555
          </a>

          <button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} className="md:hidden">
            {isMobileMenuOpen ? <X /> : <Menu />}
          </button>
        </div>
      </nav>

      {/* HERO SECTION WITH BACKGROUND IMAGE */}
      <header className="relative min-h-[90vh] flex items-center overflow-hidden">
        {/* Background Layer */}
        <div className="absolute inset-0 z-0">
          <img 
            src="https://images.unsplash.com/photo-1581094794329-c8112a89af12?auto=format&fit=crop&q=80&w=2000" 
            alt="Drywall construction" 
            className="w-full h-full object-cover"
          />
          {/* Overlays for contrast */}
          <div className="absolute inset-0 bg-stone-900/60 backdrop-blur-[2px]"></div>
          <div className="absolute inset-0 bg-gradient-to-r from-stone-900 via-stone-900/40 to-transparent"></div>
        </div>

        <div className="relative z-10 max-w-7xl mx-auto px-6 w-full py-24">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            
            {/* Text Side */}
            <div className="text-white">
              <div className="inline-flex items-center gap-3 mb-8 px-4 py-2 bg-white/10 border border-white/20 rounded-full backdrop-blur-md">
                <span className="relative flex h-2 w-2">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-2 w-2 bg-[#CC211A]"></span>
                </span>
                <span className="text-[11px] font-bold uppercase tracking-[0.2em]">Licensed • Bonded • Insured</span>
              </div>
              
              <h1 className="text-5xl md:text-7xl font-bold leading-[1.1] tracking-tight mb-8">
                ZERO STRESS. <br/><span className="text-[#CC211A]">Paint-Ready Walls.</span>
              </h1>
              <p className="text-xl text-stone-200 max-w-lg mb-10 leading-relaxed font-medium">
                Flawless drywall installation with unmatched precision. We show up exactly when scheduled—guaranteed across Washington State.
              </p>
              
              <div className="flex flex-col sm:flex-row gap-6">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center">
                    <Clock className="w-5 h-5 text-red-500" />
                  </div>
                  <span className="text-sm font-bold uppercase tracking-widest text-stone-300">Reliable Scheduling</span>
                </div>
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center">
                    <MapPin className="w-5 h-5 text-red-500" />
                  </div>
                  <span className="text-sm font-bold uppercase tracking-widest text-stone-300">Seattle to Olympia</span>
                </div>
              </div>
            </div>

            {/* Form Side */}
            <div className="relative">
              <div className="bg-white p-8 md:p-12 rounded-[2.5rem] shadow-2xl relative overflow-hidden">
                <h3 className="text-3xl font-bold mb-2">Request Quote</h3>
                <p className="text-stone-400 text-sm mb-8">Receive a response within 2 business hours.</p>
                
                <form className="space-y-4" onSubmit={(e) => { e.preventDefault(); setFormStatus('success'); }}>
                  {formStatus === 'success' ? (
                    <div className="bg-green-50 text-green-700 p-8 rounded-2xl border border-green-100 text-center animate-in zoom-in duration-300">
                      <CheckCircle2 className="w-12 h-12 mx-auto mb-4" />
                      <h4 className="font-bold text-xl mb-2">Request Sent!</h4>
                      <p className="text-sm opacity-90 font-medium">We've added you to our records. A project specialist will call you shortly.</p>
                    </div>
                  ) : (
                    <>
                      <div className="space-y-4">
                        <input type="text" placeholder="Full Name" className="w-full bg-stone-50 p-4 rounded-xl border-2 border-transparent focus:border-red-600 focus:bg-white outline-none transition-all" required />
                        <div className="grid grid-cols-2 gap-4">
                          <input type="tel" placeholder="Phone Number" className="w-full bg-stone-50 p-4 rounded-xl border-2 border-transparent focus:border-red-600 focus:bg-white outline-none transition-all" required />
                          <input type="text" placeholder="ZIP Code" className="w-full bg-stone-50 p-4 rounded-xl border-2 border-transparent focus:border-red-600 focus:bg-white outline-none transition-all" required />
                        </div>
                        <select className="w-full bg-stone-50 p-4 rounded-xl border-2 border-transparent focus:border-red-600 focus:bg-white outline-none appearance-none transition-all font-medium text-stone-600">
                          <option>Drywall Repair / Patching</option>
                          <option>Full Remodel / Addition</option>
                          <option>New Residential Construction</option>
                          <option>Commercial Level-5 Finish</option>
                        </select>
                      </div>
                      <button className="w-full bg-[#CC211A] text-white py-5 rounded-2xl font-bold text-lg hover:bg-black transition-all flex items-center justify-center gap-3 group shadow-xl shadow-red-100">
                        Get Your Free Estimate <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                      </button>
                      <p className="text-[10px] text-center text-stone-400 uppercase tracking-widest font-bold mt-4">
                        No obligation • Free onsite inspections
                      </p>
                    </>
                  )}
                </form>
              </div>
            </div>

          </div>
        </div>
      </header>

      {/* THE CHAOS SECTION */}
      <section className="bg-stone-900 text-white py-32 relative overflow-hidden">
        <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-24 items-center">
          <div>
            <h2 className="text-5xl font-bold leading-tight mb-8">Drywall doesn't have to be a nightmare.</h2>
            <div className="space-y-12">
              <div className="flex gap-6">
                <div className="flex-shrink-0 w-12 h-12 rounded-xl bg-red-600/10 border border-red-500/20 flex items-center justify-center text-red-500">
                  <Clock className="w-6 h-6" />
                </div>
                <div>
                  <h4 className="text-xl font-bold mb-2">Crews That Show Up</h4>
                  <p className="text-stone-400 font-medium leading-relaxed">No more "no-call, no-shows". Our project management system ensures our teams arrive on time, ready to work.</p>
                </div>
              </div>
              <div className="flex gap-6">
                <div className="flex-shrink-0 w-12 h-12 rounded-xl bg-blue-600/10 border border-blue-500/20 flex items-center justify-center text-blue-500">
                  <ShieldCheck className="w-6 h-6" />
                </div>
                <div>
                  <h4 className="text-xl font-bold mb-2">Ready-to-Paint Guarantee</h4>
                  <p className="text-stone-400 font-medium leading-relaxed">We provide a seamless, imperfection-free surface that requires zero extra sanding by your painters.</p>
                </div>
              </div>
            </div>
          </div>
          <div className="relative">
            <ImageSlider />
            <div className="mt-8 flex justify-between items-center bg-white/5 border border-white/10 p-4 rounded-xl backdrop-blur">
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 rounded-full bg-green-500"></div>
                <span className="text-xs font-bold uppercase tracking-widest text-stone-300">Active Project: Bellevue, WA</span>
              </div>
              <span className="text-xs font-bold text-stone-500 uppercase tracking-widest italic">Slide to compare finish</span>
            </div>
          </div>
        </div>
      </section>

      {/* MAP SECTION */}
      <MapSection />

      {/* PROJECT GALLERY */}
      <section id="gallery" className="py-32 max-w-7xl mx-auto px-6">
        <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-8">
          <div>
            <span className="text-[#CC211A] font-bold text-xs uppercase tracking-[0.3em] mb-4 block">Proven Portfolio</span>
            <h2 className="text-5xl font-bold tracking-tight">Recent Transformations.</h2>
          </div>
          <div className="flex bg-stone-100 p-1 rounded-full border border-stone-200">
            {CATEGORIES.map(cat => (
              <button 
                key={cat}
                onClick={() => setActiveFilter(cat)}
                className={`px-8 py-3 rounded-full text-xs font-bold uppercase tracking-widest transition-all ${activeFilter === cat ? 'bg-white text-[#0A0A0A] shadow-md' : 'text-stone-400 hover:text-stone-600'}`}
              >
                {cat}
              </button>
            ))}
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {filteredGallery.map((item) => (
            <div key={item.id} className="group relative rounded-3xl overflow-hidden aspect-[4/3] bg-stone-200 transition-all hover:shadow-2xl hover:-translate-y-2">
              <img src={item.img} alt={item.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-10">
                <span className="text-red-500 font-bold text-[10px] uppercase tracking-widest mb-2">{item.category}</span>
                <h4 className="text-white text-2xl font-bold">{item.title}</h4>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* MARQUEE */}
      <section className="bg-[#CC211A] py-10 overflow-hidden">
        <div className="flex animate-marquee whitespace-nowrap gap-20 items-center text-white/90 font-bold text-2xl uppercase tracking-tighter italic">
          {[1,2,3,4,5].map(i => (
            <div key={i} className="flex items-center gap-8">
              <span>5-STARS IN TACOMA</span>
              <Star className="fill-white" />
              <span>PAINT-READY FINISH</span>
              <Star className="fill-white" />
              <span>ON-TIME EVERY TIME</span>
              <Star className="fill-white" />
            </div>
          ))}
        </div>
      </section>

      {/* FOOTER */}
      <footer className="bg-stone-50 py-20 border-t border-stone-200">
        <div className="max-w-7xl mx-auto px-6 grid md:grid-cols-3 gap-16">
          <div>
            <div className="flex items-center gap-2 mb-6">
               <div className="w-8 h-8 bg-[#CC211A] flex items-center justify-center rounded text-white font-bold text-sm">T</div>
               <span className="font-bold text-lg tracking-tighter uppercase font-mono">Toro's Drywall</span>
            </div>
            <p className="text-stone-500 text-sm leading-relaxed max-w-xs font-medium">
              Western Washington's choice for premium drywall services. Licensed, bonded, and insured for your peace of mind.
            </p>
          </div>
          <div>
            <h5 className="font-bold uppercase tracking-widest text-xs mb-6 text-stone-400">Regional Coverage</h5>
            <ul className="space-y-4 font-bold text-sm">
              <li className="flex items-center gap-3"><MapPin className="w-4 h-4 text-[#CC211A]" /> Seattle | Tacoma | Olympia</li>
              <li className="flex items-center gap-3"><PhoneCall className="w-4 h-4 text-[#CC211A]" /> (555) 555-5555</li>
            </ul>
          </div>
          <div>
             <h5 className="font-bold uppercase tracking-widest text-xs mb-6 text-stone-400">Trust Badges</h5>
             <div className="flex gap-4 opacity-50 grayscale hover:grayscale-0 transition-all">
                <div className="w-12 h-12 bg-stone-300 rounded-lg"></div>
                <div className="w-12 h-12 bg-stone-300 rounded-lg"></div>
                <div className="w-12 h-12 bg-stone-300 rounded-lg"></div>
             </div>
          </div>
        </div>
      </footer>

      {/* MOBILE CTA */}
      <div className="fixed bottom-6 left-6 right-6 z-[60] md:hidden">
        <a href="tel:5555555555" className="flex items-center justify-between bg-black text-white p-4 rounded-2xl shadow-2xl border border-white/10 backdrop-blur-md">
          <div className="flex flex-col">
            <span className="text-[10px] uppercase tracking-widest text-stone-400 font-bold">2hr Response Time</span>
            <span className="font-bold tracking-tight">Tap to Call Toro</span>
          </div>
          <div className="w-12 h-12 bg-[#CC211A] rounded-xl flex items-center justify-center shadow-lg shadow-red-900/40">
            <PhoneCall className="w-5 h-5" />
          </div>
        </a>
      </div>

      <style>{`
        @keyframes marquee {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .animate-marquee {
          animation: marquee 40s linear infinite;
          display: flex;
          width: 200%;
        }
      `}</style>
    </div>
  );
}