import React, { useState } from 'react';

export default function App() {
  const [isStickyCTAVisible, setIsStickyCTAVisible] = useState(true);

  // Handle scroll for sticky CTA
  React.useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 300) {
        setIsStickyCTAVisible(true);
      } else {
        setIsStickyCTAVisible(false);
      }
    };
    
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white">
      {/* Urgency Banner */}
      <div className="bg-red-500 text-white text-center py-2 font-bold text-lg animate-pulse">
        ⚡ სპეციალური შეთავაზება: პირველი 10 გამოძახებას მიიღებს 15% ფასდაკლებას! ⚡
      </div>

      {/* Header */}
      <header className="bg-white shadow-sm">
        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
          <div className="flex items-center space-x-2">
            <svg width="60" height="60" viewBox="0 0 100 100" className="text-blue-600">
              <path d="M30 20 L30 40 L50 40 L50 20 Z" fill="currentColor" />
              <circle cx="40" cy="15" r="5" fill="currentColor" />
              <circle cx="30" cy="40" r="8" fill="currentColor" />
              <circle cx="30" cy="55" r="7" fill="currentColor" />
              <path d="M70 15 L85 30 L70 45 L90 30 L75 15" fill="#ff9800" />
              <text x="20" y="75" font-family="Arial" font-size="10" fill="#ff9800">სანდო</text>
              <text x="55" y="75" font-family="Arial" font-size="10" fill="#1e88e5">ხელი</text>
              <text x="20" y="85" font-family="Arial" font-size="8" fill="#ff9800">TRUSTED</text>
              <text x="55" y="85" font-family="Arial" font-size="8" fill="#1e88e5">HAND</text>
            </svg>
            <h1 className="text-xl font-bold text-gray-800">სანდო ხელი</h1>
          </div>
          <nav className="hidden md:block">
            <ul className="flex space-x-6">
              <li><a href="#services" className="text-gray-600 hover:text-blue-600 font-medium">სერვისები</a></li>
              <li><a href="#testimonials" className="text-gray-600 hover:text-blue-600 font-medium">გამოხმაურებები</a></li>
              <li><a href="#gallery" className="text-gray-600 hover:text-blue-600 font-medium">გალერეა</a></li>
              <li><a href="#contact" className="text-gray-600 hover:text-blue-600 font-medium">კონტაქტი</a></li>
            </ul>
          </nav>
          <button className="md:hidden bg-blue-600 text-white px-4 py-2 rounded-lg font-medium">
            ☎️ დაგვიკავშირდით
          </button>
        </div>
      </header>

      {/* Hero Section with Psychological Triggers */}
      <section className="py-16 md:py-24 bg-gradient-to-r from-blue-50 to-orange-50">
        <div className="container mx-auto px-4 flex flex-col md:flex-row items-center">
          <div className="md:w-1/2 mb-10 md:mb-0">
            <div className="bg-yellow-100 text-yellow-800 inline-block px-3 py-1 rounded-full mb-4 font-medium">
              98% კლიენტი რეკომენდაციას აძლევს მეგობრებს
            </div>
            <h1 className="text-3xl md:text-5xl font-bold text-gray-800 mb-6 leading-tight">
              დაივიწყეთ სტრესი! ერთი ზარით მასტერი თქვენს კარზე <span className="text-blue-600">2 საათში</span>
            </h1>
            <p className="text-xl text-gray-700 mb-8">
              აღარ გჭირდებათ დალოდება, ძვირი ფასები და არაპროფესიონალები. 
              ჩვენი სერტიფიცირებული მასტერები მოდიან სახლში და ასრულებენ ნებისმიერ სამუშაოს 
              <span className="font-bold text-orange-500"> გარანტირებული ხარისხით</span>.
            </p>
            <div className="bg-white rounded-xl shadow-lg p-6 mb-8 border-l-4 border-blue-500">
              <div className="flex items-start">
                <div className="text-4xl mr-4 mt-1">🎯</div>
                <div>
                  <h3 className="font-bold text-lg text-gray-800 mb-2">რატომ არჩევენ ჩვენ 1000+ კლიენტი ყოველთვე?</h3>
                  <ul className="space-y-2 text-gray-700">
                    <li className="flex items-start">
                      <span className="text-green-500 mr-2 mt-1">✓</span>
                      <span>სწრაფი რეაგირება - მასტერი ჩამოდის <span className="font-bold">2 საათში</span></span>
                    </li>
                    <li className="flex items-start">
                      <span className="text-green-500 mr-2 mt-1">✓</span>
                      <span>ფიქსირებული ფასები - <span className="font-bold">არ არის დამალული დანახარჯები</span></span>
                    </li>
                    <li className="flex items-start">
                      <span className="text-green-500 mr-2 mt-1">✓</span>
                      <span>100% კმაყოფილების გარანტია - <span className="font-bold">თუ არ იქნებით კმაყოფილი, დავაბრუნებთ თანხას</span></span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div className="flex flex-col sm:flex-row gap-4">
              <a href="#contact" className="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-8 py-4 rounded-lg font-bold text-lg hover:from-blue-700 hover:to-blue-800 transition duration-300 text-center shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                დაგვიკავშირდით ახლა (15% ფასდაკლება)
              </a>
              <a href="#services" className="border-2 border-blue-600 text-blue-600 px-8 py-4 rounded-lg font-medium hover:bg-blue-50 transition duration-300 text-center text-lg">
                ნახეთ ჩვენი სერვისები
              </a>
            </div>
            <div className="mt-6 flex items-center">
              <div className="flex -space-x-2">
                {[...Array(5)].map((_, i) => (
                  <div key={i} className="w-10 h-10 rounded-full bg-blue-200 border-2 border-white flex items-center justify-center font-bold text-blue-700">
                    {String.fromCharCode(65 + i)}
                  </div>
                ))}
              </div>
              <p className="ml-3 text-gray-700">
                <span className="font-bold">1,247+</span> კმაყოფილი კლიენტი ბოლო 6 თვეში
              </p>
            </div>
          </div>
          <div className="md:w-1/2 flex justify-center">
            <div className="bg-white rounded-2xl shadow-xl overflow-hidden max-w-md w-full border-2 border-blue-100">
              <div className="bg-gradient-to-br from-blue-500 to-orange-500 p-6 text-center">
                <div className="text-7xl mb-3">🛠️</div>
                <h3 className="text-2xl font-bold text-white mb-2">სწრაფი გამოძახება</h3>
                <p className="text-blue-100">მასტერი ჩამოვა თქვენს მისამართზე</p>
              </div>
              <div className="p-6">
                <div className="space-y-4">
                  <div className="flex justify-between items-center p-3 bg-blue-50 rounded-lg">
                    <div className="flex items-center">
                      <div className="text-2xl mr-3">💧</div>
                      <span className="font-medium">სანტექნიკა</span>
                    </div>
                    <span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full font-bold">40₾</span>
                  </div>
                  
                  <div className="flex justify-between items-center p-3 bg-orange-50 rounded-lg">
                    <div className="flex items-center">
                      <div className="text-2xl mr-3">⚡</div>
                      <span className="font-medium">ელექტრიკა</span>
                    </div>
                    <span className="bg-orange-100 text-orange-800 px-3 py-1 rounded-full font-bold">50₾</span>
                  </div>
                  
                  <div className="flex justify-between items-center p-3 bg-amber-50 rounded-lg">
                    <div className="flex items-center">
                      <div className="text-2xl mr-3">🔨</div>
                      <span className="font-medium">ქარგარება</span>
                    </div>
                    <span className="bg-amber-100 text-amber-800 px-3 py-1 rounded-full font-bold">60₾</span>
                  </div>
                  
                  <div className="flex justify-between items-center p-3 bg-amber-50 rounded-lg">
                    <div className="flex items-center">
                      <div className="text-2xl mr-3">🪑</div>
                      <span className="font-medium">მებლის შეკრება</span>
                    </div>
                    <span className="bg-amber-200 text-amber-900 px-3 py-1 rounded-full font-bold">70₾</span>
                  </div>
                </div>
                <div className="mt-6 bg-green-50 p-4 rounded-lg border border-green-200">
                  <div className="flex items-start">
                    <div className="text-3xl mr-3 mt-1">✅</div>
                    <p className="text-gray-700">
                      <span className="font-bold text-green-700">ყველა ფასი შეიცავს:</span> მასტერის ჩამოსვლას, სამუშაოს, მცირე მასალებს და 1 წლიან გარანტიას
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Pain Points Section */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl font-bold text-gray-800 mb-6">რატომ ვიცით, რომ თქვენც გჭირდებათ ჩვენი დახმარება?</h2>
            <p className="text-xl text-gray-600">
              ჩვენ გავიგეთ თქვენი პრობლემები და შევქმენით იდეალური გადაწყვეტილება თითოეული მათგანისთვის
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            <div className="bg-red-50 rounded-2xl p-8 text-center border border-red-100">
              <div className="text-6xl mb-4">😫</div>
              <h3 className="text-xl font-bold text-gray-800 mb-3">დალოდების სტრესი</h3>
              <p className="text-gray-700 mb-4">
                რამდენჯერ დაგიყოვნებიათ მასტერებმა? რამდენი დრო დაგაკარგინეთ ტელეფონის ზარებზე?
              </p>
              <div className="bg-white p-4 rounded-lg shadow">
                <p className="font-bold text-blue-600 text-lg">ჩვენი გადაწყვეტილება:</p>
                <p className="text-gray-700 mt-2">მასტერი ჩამოდის 2 საათში ან დაგიბრუნებთ თანხას</p>
              </div>
            </div>
            
            <div className="bg-yellow-50 rounded-2xl p-8 text-center border border-yellow-100">
              <div className="text-6xl mb-4">💸</div>
              <h3 className="text-xl font-bold text-gray-800 mb-3">დამალული ხარჯები</h3>
              <p className="text-gray-700 mb-4">
                რამდენჯერ გადაუხდით მეტს, ვიდრე თავდაპირველად იყო შეთანხმებული? რამდენი დამატებითი "სასწრაფო" გადასახადი გქონიათ?
              </p>
              <div className="bg-white p-4 rounded-lg shadow">
                <p className="font-bold text-blue-600 text-lg">ჩვენი გადაწყვეტილება:</p>
                <p className="text-gray-700 mt-2">ფიქსირებული ფასები გარეშე დამალული ხარჯების</p>
              </div>
            </div>
            
            <div className="bg-blue-50 rounded-2xl p-8 text-center border border-blue-100">
              <div className="text-6xl mb-4">👎</div>
              <h3 className="text-xl font-bold text-gray-800 mb-3">არახარისხიანი მუშაობა</h3>
              <p className="text-gray-700 mb-4">
                რამდენჯერ მოგიწიათ სამუშაოს ხელახლა გაკეთება? რამდენი მასტერი არ იცის თავისი საქმე?
              </p>
              <div className="bg-white p-4 rounded-lg shadow">
                <p className="font-bold text-blue-600 text-lg">ჩვენი გადაწყვეტილება:</p>
                <p className="text-gray-700 mt-2">მხოლოდ სერტიფიცირებული მასტერები 5+ წლიანი გამოცდილებით</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold text-gray-800 mb-4">ჩვენი სერვისები</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              ერთჯერადი სამუშაოები სახლში სრული გარანტიით და ფიქსირებული ფასებით
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {/* Plumbing */}
            <div className="bg-white p-8 rounded-2xl shadow-md hover:shadow-2xl transition-all duration-300 border border-gray-100 hover:border-blue-200">
              <div className="text-6xl mb-6 text-blue-500">💧</div>
              <h3 className="text-2xl font-bold text-gray-800 mb-4">სანტექნიკა</h3>
              <p className="text-gray-700 mb-6">
                ჩვენი სერტიფიცირებული სანტექნიკოსები მოგიხსნიან ნებისმიერ პრობლემას 1 საათში. 
                გარანტირებული ხარისხი და სისუფთავე.
              </p>
              <ul className="space-y-3 mb-6">
                <li className="flex items-start">
                  <span className="text-green-500 mr-3 mt-1 text-xl">✓</span>
                  <span>წყლის გაჟონვის გამოსწორება</span>
                </li>
                <li className="flex items-start">
                  <span className="text-green-500 mr-3 mt-1 text-xl">✓</span>
                  <span>აბაზანის/საძვალის შეკეთება</span>
                </li>
                <li className="flex items-start">
                  <span className="text-green-500 mr-3 mt-1 text-xl">✓</span>
                  <span>სანტექნიკური მოწყობილობების დაყენება</span>
                </li>
              </ul>
              <div className="border-t pt-4">
                <div className="flex justify-between items-center">
                  <span className="text-2xl font-bold text-blue-600">40₾</span>
                  <a href="#contact" className="bg-blue-100 text-blue-700 px-4 py-2 rounded-lg font-medium hover:bg-blue-200 transition">დაგვიკავშირდით</a>
                </div>
                <p className="text-sm text-gray-500 mt-2">ფასი შეიცავს 1 საათ სამუშაოს + მცირე მასალებს</p>
              </div>
            </div>
            
            {/* Electricity */}
            <div className="bg-white p-8 rounded-2xl shadow-md hover:shadow-2xl transition-all duration-300 border border-gray-100 hover:border-orange-200">
              <div className="text-6xl mb-6 text-orange-500">⚡</div>
              <h3 className="text-2xl font-bold text-gray-800 mb-4">ელექტრიკა</h3>
              <p className="text-gray-700 mb-6">
                ჩვენი ელექტრიკოსები გააჩნიათ სერტიფიკატები და 10+ წლიანი გამოცდილება. 
                უსაფრთხოება და სიზუსტე ყველაზე პირველ ადგილზე.
              </p>
              <ul className="space-y-3 mb-6">
                <li className="flex items-start">
                  <span className="text-green-500 mr-3 mt-1 text-xl">✓</span>
                  <span>განათების შეკეთება/დაყენება</span>
                </li>
                <li className="flex items-start">
                  <span className="text-green-500 mr-3 mt-1 text-xl">✓</span>
                  <span>კონცენტრატორების გამოცვლა</span>
                </li>
                <li className="flex items-start">
                  <span className="text-green-500 mr-3 mt-1 text-xl">✓</span>
                  <span>ელექტრო  panel-ის რემონტი</span>
                </li>
              </ul>
              <div className="border-t pt-4">
                <div className="flex justify-between items-center">
                  <span className="text-2xl font-bold text-orange-500">50₾</span>
                  <a href="#contact" className="bg-orange-100 text-orange-700 px-4 py-2 rounded-lg font-medium hover:bg-orange-200 transition">დაგვიკავშირდით</a>
                </div>
                <p className="text-sm text-gray-500 mt-2">ფასი შეიცავს 1 საათ სამუშაოს + მცირე მასალებს</p>
              </div>
            </div>
            
            {/* Carpentry */}
            <div className="bg-white p-8 rounded-2xl shadow-md hover:shadow-2xl transition-all duration-300 border border-gray-100 hover:border-amber-200">
              <div className="text-6xl mb-6 text-amber-500">🔨</div>
              <h3 className="text-2xl font-bold text-gray-800 mb-4">ქარგარება</h3>
              <p className="text-gray-700 mb-6">
                ჩვენი ქარგრები ქმნიან ნამუშევრებს, რომლებიც გრძელდება ათწლეულობით. 
                პრემიუმ ხის მასალები და უნიკალური დიზაინი.
              </p>
              <ul className="space-y-3 mb-6">
                <li className="flex items-start">
                  <span className="text-green-500 mr-3 mt-1 text-xl">✓</span>
                  <span>კარების/ფანჯრების შეკეთება</span>
                </li>
                <li className="flex items-start">
                  <span className="text-green-500 mr-3 mt-1 text-xl">✓</span>
                  <span>იატაკის დაფების გამოცვლა</span>
                </li>
                <li className="flex items-start">
                  <span className="text-green-500 mr-3 mt-1 text-xl">✓</span>
                  <span>კედლის პანელების დაყენება</span>
                </li>
              </ul>
              <div className="border-t pt-4">
                <div className="flex justify-between items-center">
                  <span className="text-2xl font-bold text-amber-600">60₾</span>
                  <a href="#contact" className="bg-amber-100 text-amber-700 px-4 py-2 rounded-lg font-medium hover:bg-amber-200 transition">დაგვიკავშირდით</a>
                </div>
                <p className="text-sm text-gray-500 mt-2">ფასი შეიცავს 1 საათ სამუშაოს + მცირე მასალებს</p>
              </div>
            </div>
            
            {/* Furniture Assembly */}
            <div className="bg-white p-8 rounded-2xl shadow-md hover:shadow-2xl transition-all duration-300 border border-gray-100 hover:border-amber-300">
              <div className="text-6xl mb-6 text-amber-700">🪑</div>
              <h3 className="text-2xl font-bold text-gray-800 mb-4">მებლის შეკრება</h3>
              <p className="text-gray-700 mb-6">
                IKEA, JYSK და სხვა ბრენდების მებლის პროფესიონალური შეკრება. 
                არავითარი ზიანი და სრული გარანტია.
              </p>
              <ul className="space-y-3 mb-6">
                <li className="flex items-start">
                  <span className="text-green-500 mr-3 mt-1 text-xl">✓</span>
                  <span>საერთო სივრცის მებელი</span>
                </li>
                <li className="flex items-start">
                  <span className="text-green-500 mr-3 mt-1 text-xl">✓</span>
                  <span>საძინებლის კომპლექტები</span>
                </li>
                <li className="flex items-start">
                  <span className="text-green-500 mr-3 mt-1 text-xl">✓</span>
                  <span>სამზარეულოს მებელი</span>
                </li>
              </ul>
              <div className="border-t pt-4">
                <div className="flex justify-between items-center">
                  <span className="text-2xl font-bold text-amber-700">70₾</span>
                  <a href="#contact" className="bg-amber-200 text-amber-800 px-4 py-2 rounded-lg font-medium hover:bg-amber-300 transition">დაგვიკავშირდით</a>
                </div>
                <p className="text-sm text-gray-500 mt-2">ფასი შეიცავს 1 საათ სამუშაოს + დემონტაჟს</p>
              </div>
            </div>
          </div>
          
          <div className="max-w-3xl mx-auto mt-16 bg-gradient-to-r from-blue-500 to-orange-500 rounded-2xl p-8 text-center text-white">
            <h3 className="text-2xl font-bold mb-4">არ იცით რომელი სერვისი გჭირდებათ?</h3>
            <p className="text-xl mb-6 opacity-90">
              დაგვირეკეთ და ჩვენი კონსულტანტი უფასოდ დაგეხმარებათ სწორი გადაწყვეტილების მიღებაში
            </p>
            <a href="#contact" className="bg-white text-blue-600 font-bold px-8 py-4 rounded-xl text-lg hover:bg-gray-100 transition inline-block">
              უფასო კონსულტაცია
            </a>
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section id="testimonials" className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold text-gray-800 mb-4">რას ამბობენ ჩვენი კლიენტები</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              1,247+ კმაყოფილი კლიენტი ბოლო 6 თვეში. ჩვენ ვაფასებთ თითოეულ გამოხმაურებას
            </p>
            <div className="flex justify-center mt-6">
              {[...Array(5)].map((_, i) => (
                <svg key={i} className="w-8 h-8 text-yellow-400" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                </svg>
              ))}
              <span className="ml-3 text-gray-700 font-bold">4.9/5.0 (328 შეფასება)</span>
            </div>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {/* Testimonial 1 */}
            <div className="bg-gray-50 rounded-2xl p-8 shadow-md border border-gray-200">
              <div className="flex items-center mb-6">
                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center text-2xl font-bold text-blue-700 mr-4">
                  N
                </div>
                <div>
                  <div className="font-bold text-lg">ნინო გ.</div>
                  <div className="text-yellow-400 flex">
                    {[...Array(5)].map((_, i) => (
                      <svg key={i} className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                      </svg>
                    ))}
                  </div>
                </div>
              </div>
              <p className="text-gray-700 italic mb-4">
                "წყალი გაჟონდა აბაზანაში ღამით. დილით დავირეკე და 2 საათში მასტერი უკვე ჩემს კარზე იყო. 
                სწრაფად გამოასწორა პრობლემა და არც კი გააბრუნა ფასი. უკვე მესამედ ვიყენებ მათ სერვისებს!"
              </p>
              <div className="text-sm text-gray-500">თბილისი, 12 იანვარი 2026</div>
            </div>
            
            {/* Testimonial 2 */}
            <div className="bg-gray-50 rounded-2xl p-8 shadow-md border border-gray-200">
              <div className="flex items-center mb-6">
                <div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center text-2xl font-bold text-orange-700 mr-4">
                  G
                </div>
                <div>
                  <div className="font-bold text-lg">გიორგი ბ.</div>
                  <div className="text-yellow-400 flex">
                    {[...Array(5)].map((_, i) => (
                      <svg key={i} className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                      </svg>
                    ))}
                  </div>
                </div>
              </div>
              <p className="text-gray-700 italic mb-4">
                "მებლის შეკრება IKEA-დან 3 დღეა ვცდილობდი. ერთი ზარით მოვიყვანე მასტერი და 2 საათში 
                ყველაფერი იყო შეკრებული იდეალურად. ფასი ისეთივე იყო, როგორც ვთქვით. უკვე რეკომენდაციას ვაძლევ ყველას!"
              </p>
              <div className="text-sm text-gray-500">ბათუმი, 5 იანვარი 2026</div>
            </div>
            
            {/* Testimonial 3 */}
            <div className="bg-gray-50 rounded-2xl p-8 shadow-md border border-gray-200">
              <div className="flex items-center mb-6">
                <div className="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center text-2xl font-bold text-amber-700 mr-4">
                  M
                </div>
                <div>
                  <div className="font-bold text-lg">მარიამ კ.</div>
                  <div className="text-yellow-400 flex">
                    {[...Array(5)].map((_, i) => (
                      <svg key={i} className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                      </svg>
                    ))}
                  </div>
                </div>
              </div>
              <p className="text-gray-700 italic mb-4">
                "ელექტრო გაუმართლა სახლში და ბავშვები სკოლაში უნდა წასულიყვნენ. დავირეკე და 1.5 საათში 
                მასტერი უკვე აღადგენდა ელექტრო მომარაგებას. ფასი იყო 50₾ და არც ერთი დამატებითი გადასახადი. 
                ძალიან დამაკმაყოფილა!"
              </p>
              <div className="text-sm text-gray-500">ქუთაისი, 22 დეკემბერი 2025</div>
            </div>
          </div>
          
          <div className="text-center mt-16">
            <div className="inline-block bg-blue-50 text-blue-700 px-6 py-3 rounded-full font-bold text-lg mb-6">
              98.7% კლიენტი რეკომენდაციას აძლევს ჩვენს სერვისს მეგობრებს
            </div>
            <p className="text-gray-700 max-w-3xl mx-auto text-lg">
              ჩვენ ვაფასებთ თითოეულ კლიენტს და ვცდილობთ მაქსიმალურად გავაკმაყოფილოთ მათი მოთხოვნები. 
              ჩვენი მიზანია გავხდეთ ერთადერთი სერვისი, რომელსაც ენდობით თქვენი სახლის მოვლას.
            </p>
          </div>
        </div>
      </section>

      {/* Gallery Section */}
      <section id="gallery" className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold text-gray-800 mb-4">ჩვენი მუშაობის მაგალითები</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              ნახეთ რეალური ფოტოები და ვიდეოები ჩვენი მასტერების მუშაობის პროცესიდან
            </p>
          </div>
          
          {/* Video Section */}
          <div className="max-w-4xl mx-auto mb-16">
            <div className="relative pb-[56.25%] h-0 rounded-2xl overflow-hidden shadow-2xl">
              <iframe 
                src="https://www.youtube.com/embed/6uZv1ZQk5JY" 
                title="მუშაობის ვიდეო" 
                className="absolute top-0 left-0 w-full h-full"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                allowFullScreen
              ></iframe>
            </div>
            <div className="mt-4 bg-white p-4 rounded-xl shadow-md border-l-4 border-blue-500">
              <p className="font-bold text-lg text-gray-800">ვიდეო: სანტექნიკოსის მუშაობა აბაზანაში (2 საათი)</p>
              <p className="text-gray-600 mt-2">
                ნახეთ როგორ ვასწორებთ წყლის გაჟონვას და ვარემონტებთ სანტექნიკურ მოწყობილობებს 
                მხოლოდ 2 საათში. ყველა სამუშაო ხდება სრული სისუფთავით და გარანტიით.
              </p>
            </div>
          </div>
          
          {/* Photo Gallery */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {[...Array(8)].map((_, index) => (
              <div key={index} className="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-2xl transition-shadow duration-300 group cursor-pointer">
                <div className="aspect-w-1 aspect-h-1">
                  <img 
                    src={`https://placehold.co/600x400/${index % 2 === 0 ? 'e0e0e0' : 'd4e6f1'}/${index % 2 === 0 ? '000000' : '1a5276'}?text=სამუშაო+${index + 1}`} 
                    alt={`სამუშაოს ფოტო ${index + 1}`}
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                </div>
                <div className="p-3 bg-gradient-to-r from-blue-50 to-orange-50">
                  <p className="font-medium text-gray-800 text-center">
                    {index === 0 && "სანტექნიკური რემონტი"}
                    {index === 1 && "ელექტრო განათება"}
                    {index === 2 && "მებლის შეკრება"}
                    {index === 3 && "ქარგრის სამუშაოები"}
                    {index === 4 && "სანტექნიკური მოწყობილობები"}
                    {index === 5 && "ელექტრო პანელი"}
                    {index === 6 && "სამზარეულოს მებელი"}
                    {index === 7 && "საძინებლის რემონტი"}
                  </p>
                </div>
              </div>
            ))}
          </div>
          
          <div className="text-center mt-12">
            <a href="#contact" className="inline-block bg-gradient-to-r from-blue-600 to-orange-500 text-white px-8 py-4 rounded-xl font-bold text-lg hover:opacity-90 transition shadow-lg">
              დაგვიკავშირდით და ნახეთ ჩვენი მუშაობა თქვენს სახლში!
            </a>
            <p className="mt-4 text-gray-600 max-w-2xl mx-auto">
              ჩვენი მასტერები ყოველდღე ასრულებენ 100+ სამუშაოს მთელ საქართველოში. 
              შეგიძლიათ დარწმუნდეთ ჩვენი ხარისხის სიმართლეში პირადად.
            </p>
          </div>
        </div>
      </section>

      {/* Guarantee Section */}
      <section className="py-16 bg-gradient-to-r from-blue-600 to-orange-600 text-white">
        <div className="container mx-auto px-4 text-center">
          <div className="max-w-4xl mx-auto">
            <div className="text-7xl mb-6">🛡️</div>
            <h2 className="text-4xl font-bold mb-6">ჩვენი გარანტია თქვენთვის</h2>
            <p className="text-2xl mb-8 opacity-90">
              ჩვენ დარწმუნებული ვართ ჩვენი სერვისის ხარისხში, ამიტომ გთავაზობთ უნიკალურ გარანტიას
            </p>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
              <div className="bg-white/10 backdrop-blur-sm p-8 rounded-2xl border border-white/20">
                <div className="text-5xl mb-4">⏱️</div>
                <h3 className="text-2xl font-bold mb-3">2 საათში ჩამოსვლა</h3>
                <p className="text-lg opacity-90">
                  თუ მასტერი არ მოვა 2 საათში, დაგიბრუნებთ სრულ თანხას
                </p>
              </div>
              
              <div className="bg-white/10 backdrop-blur-sm p-8 rounded-2xl border border-white/20">
                <div className="text-5xl mb-4">💰</div>
                <h3 className="text-2xl font-bold mb-3">ფასის გარანტია</h3>
                <p className="text-lg opacity-90">
                  თუ დაგიკისრებენ დამატებით ხარჯებს, დაგიბრუნებთ სრულ თანხას
                </p>
              </div>
              
              <div className="bg-white/10 backdrop-blur-sm p-8 rounded-2xl border border-white/20">
                <div className="text-5xl mb-4">💯</div>
                <h3 className="text-2xl font-bold mb-3">100% კმაყოფილება</h3>
                <p className="text-lg opacity-90">
                  თუ არ იქნებით კმაყოფილი შედეგით, დაგიბრუნებთ სრულ თანხას
                </p>
              </div>
            </div>
            
            <div className="mt-16 bg-white text-gray-800 rounded-2xl p-8 max-w-3xl mx-auto shadow-2xl">
              <div className="text-4xl mb-4">✨</div>
              <h3 className="text-2xl font-bold mb-4">სპეციალური შეთავაზება ახალი კლიენტებისთვის</h3>
              <p className="text-xl mb-6">
                პირველი გამოძახებისთვის მიიღეთ <span className="font-bold text-blue-600">15% ფასდაკლება</span> ნებისმიერ სერვისზე!
              </p>
              <p className="text-lg mb-6">
                ეს შეთავაზება მხოლოდ შემდეგი 24 საათის განმავლობაშია მოქმედი. 
                მხოლოდ პირველი 10 გამოძახება მიიღებს ამ ფასდაკლებას.
              </p>
              <a href="#contact" className="inline-block bg-gradient-to-r from-blue-600 to-orange-600 text-white px-8 py-4 rounded-xl font-bold text-lg hover:opacity-90 transition">
                მიიღეთ ფასდაკლება ახლავე
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-16 bg-gradient-to-r from-blue-50 to-orange-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold text-gray-800 mb-4">დაგვიკავშირდით და მიიღეთ უფასო კონსულტაცია</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              დაგვიტოვეთ თქვენი მოთხოვნა და ჩვენი მენეჯერი დაგიკავშირდებათ 5 წუთში. 
              მასტერი ჩამოვა თქვენს მისამართზე 2 საათში.
            </p>
          </div>
          
          <div className="max-w-3xl mx-auto bg-white rounded-2xl shadow-2xl overflow-hidden">
            <div className="bg-gradient-to-r from-blue-600 to-orange-600 p-6 text-center text-white">
              <h3 className="text-2xl font-bold">გამოიყენეთ 15% ფასდაკლება პირველი გამოძახებისთვის!</h3>
              <p className="mt-2 opacity-90">შეიყვანეთ თქვენი ინფორმაცია და მიიღეთ უფასო კონსულტაცია</p>
            </div>
            
            <div className="p-6 md:p-8">
              <form className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-gray-700 font-medium mb-2">სახელი და გვარი <span className="text-red-500">*</span></label>
                    <input 
                      type="text" 
                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                      placeholder="მაგ: ნინო გიორგაძე" 
                      required 
                    />
                  </div>
                  <div>
                    <label className="block text-gray-700 font-medium mb-2">ტელეფონი <span className="text-red-500">*</span></label>
                    <input 
                      type="tel" 
                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                      placeholder="+995 555 123 456" 
                      required 
                    />
                  </div>
                </div>
                
                <div>
                  <label className="block text-gray-700 font-medium mb-2">მომსახურების ტიპი <span className="text-red-500">*</span></label>
                  <select className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="">აირჩიეთ სერვისი</option>
                    <option>სანტექნიკა (40₾)</option>
                    <option>ელექტრიკა (50₾)</option>
                    <option>ქარგარება (60₾)</option>
                    <option>მებლის შეკრება (70₾)</option>
                    <option>კომბინირებული სერვისი</option>
                  </select>
                </div>
                
                <div>
                  <label className="block text-gray-700 font-medium mb-2">მისამართი <span className="text-red-500">*</span></label>
                  <input 
                    type="text" 
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                    placeholder="მაგ: თბილისი, ვაჟა-ფშაველას გამზირი 123" 
                    required 
                  />
                </div>
                
                <div>
                  <label className="block text-gray-700 font-medium mb-2">დეტალური აღწერა</label>
                  <textarea 
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 h-32" 
                    placeholder="გთხოვთ, აღწეროთ თქვენი პრობლემა დეტალურად (მაგ: წყალი გაჟონდა აბაზანაში, გაუმართლა ელექტრო განათება საძინებელში და ა.შ.)"
                  ></textarea>
                </div>
                
                <div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
                  <div className="flex items-start">
                    <div className="text-3xl mr-3 mt-1">🔒</div>
                    <div>
                      <p className="font-bold text-blue-800">თქვენი უსაფრთხოება ჩვენთვის პრიორიტეტია</p>
                      <p className="text-blue-700 mt-1">
                        ჩვენ არ ვგამოვყენებთ თქვენს ინფორმაციას მესამე პირებისთვის. 
                        ყველა მონაცემი დაცულია და დაცული იქნება ჩვენს სერვერებზე.
                      </p>
                    </div>
                  </div>
                </div>
                
                <button 
                  type="submit" 
                  className="w-full bg-gradient-to-r from-blue-600 to-orange-600 text-white py-4 rounded-xl font-bold text-lg hover:opacity-90 transition duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1"
                >
                  გაგზავნა და მიიღეთ 15% ფასდაკლება
                </button>
                
                <p className="text-center text-gray-600 text-sm">
                  დაწკაპებით "გაგზავნა" ღილაკზე, თქვენ ეთანხმებით ჩვენს{" "}
                  <a href="#" className="text-blue-600 hover:underline">პირობებს</a> და{" "}
                  <a href="#" className="text-blue-600 hover:underline">კონფიდენციალურობის პოლიტიკას</a>
                </p>
              </form>
            </div>
            
            <div className="bg-gray-50 p-6 border-t">
              <div className="max-w-2xl mx-auto text-center">
                <div className="text-4xl mb-4">📞</div>
                <h3 className="text-xl font-bold text-gray-800 mb-2">სწრაფი დაკავშირება</h3>
                <p className="text-gray-700 mb-4">
                  თუ გსურთ უფრო სწრაფი დაკავშირება, უბრალოდ დაგვირეკეთ:
                </p>
                <a href="tel:+995321234567" className="block bg-blue-600 text-white px-8 py-3 rounded-lg font-bold text-lg hover:bg-blue-700 transition duration-300 max-w-xs mx-auto">
                  +995 32 123 45 67
                </a>
                <p className="mt-3 text-gray-600">
                  ჩვენი მენეჯერები მუშაობენ ყოველდღე 8:00-22:00
                </p>
              </div>
            </div>
          </div>
          
          <div className="mt-16 max-w-3xl mx-auto bg-white rounded-2xl shadow-lg p-6 border-l-4 border-blue-500">
            <div className="flex items-start">
              <div className="text-4xl mr-4 mt-1">❓</div>
              <div>
                <h3 className="text-xl font-bold text-gray-800 mb-3">ხშირად დასმული კითხვები</h3>
                <div className="space-y-4">
                  <div>
                    <p className="font-medium">რამდენ ხანს სჭირდება მასტერის ჩამოსვლა?</p>
                    <p className="text-gray-700">
                      ჩვენი სტანდარტია 2 საათი. 95% შემთხვევაში მასტერი ჩამოდის ამ დროის განმავლობაში. 
                      თუ არ მოვა, დაგიბრუნებთ სრულ თანხას.
                    </p>
                  </div>
                  <div>
                    <p className="font-medium">რა ფასებია და არის თუ არა დამალული ხარჯები?</p>
                    <p className="text-gray-700">
                      ყველა ფასი ფიქსირებულია და მითითებულია საიტზე. არ არის დამალული ხარჯები. 
                      თუ სამუშაო მოითხოვს დამატებით მასალებს, მასტერი განმარტებს და მხოლოდ თქვენი თანხმობის შემდეგ გამოიყენებს.
                    </p>
                  </div>
                  <div>
                    <p className="font-medium">რა გარანტია გაქვთ სამუშაოების ხარისხზე?</p>
                    <p className="text-gray-700">
                      ჩვენ ვაძლევთ 1 წლიან გარანტიას ყველა სამუშაოზე. თუ რაიმე პრობლემა გაჩნდება, 
                     უფასოდ გავასწორებთ.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Sticky CTA for Mobile */}
      {isStickyCTAVisible && (
        <div className="fixed bottom-4 right-4 md:hidden z-50 animate-bounce">
          <a 
            href="#contact" 
            className="bg-gradient-to-r from-blue-600 to-orange-600 text-white px-6 py-4 rounded-full shadow-xl flex items-center font-bold text-lg"
          >
            <span className="mr-2">☎️</span>
            <span>დაგვიკავშირდით ახლა</span>
          </a>
        </div>
      )}

      {/* Footer */}
      <footer className="py-12 bg-gray-800 text-white">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div className="md:col-span-1">
              <div className="flex items-center space-x-2 mb-6">
                <svg width="50" height="50" viewBox="0 0 100 100" className="text-blue-300">
                  <path d="M30 20 L30 40 L50 40 L50 20 Z" fill="currentColor" />
                  <circle cx="40" cy="15" r="5" fill="currentColor" />
                  <circle cx="30" cy="40" r="8" fill="currentColor" />
                  <circle cx="30" cy="55" r="7" fill="currentColor" />
                  <path d="M70 15 L85 30 L70 45 L90 30 L75 15" fill="#ff9800" />
                </svg>
                <span className="text-2xl font-bold">სანდო ხელი</span>
              </div>
              <p className="text-gray-400 mb-4">
                ერთჯერადი სამუშაოების მასტერი სახლში. 
                სანტექნიკა, ელექტრიკა, ქარგარება და მებლის შეკრება.
              </p>
              <div className="flex space-x-4">
                {[...Array(4)].map((_, i) => (
                  <div key={i} className="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center">
                    {i === 0 && "f"}
                    {i === 1 && "t"}
                    {i === 2 && "in"}
                    {i === 3 && "ig"}
                  </div>
                ))}
              </div>
            </div>
            
            <div className="md:col-span-1">
              <h3 className="text-xl font-bold mb-6">სერვისები</h3>
              <ul className="space-y-3">
                <li><a href="#services" className="text-gray-400 hover:text-white transition">სანტექნიკა</a></li>
                <li><a href="#services" className="text-gray-400 hover:text-white transition">ელექტრიკა</a></li>
                <li><a href="#services" className="text-gray-400 hover:text-white transition">ქარგარება</a></li>
                <li><a href="#services" className="text-gray-400 hover:text-white transition">მებლის შეკრება</a></li>
                <li><a href="#services" className="text-gray-400 hover:text-white transition">ყველა სერვისი</a></li>
              </ul>
            </div>
            
            <div className="md:col-span-1">
              <h3 className="text-xl font-bold mb-6">კომპანია</h3>
              <ul className="space-y-3">
                <li><a href="#why" className="text-gray-400 hover:text-white transition">რატომ ჩვენ</a></li>
                <li><a href="#testimonials" className="text-gray-400 hover:text-white transition">გამოხმაურებები</a></li>
                <li><a href="#gallery" className="text-gray-400 hover:text-white transition">გალერეა</a></li>
                <li><a href="#" className="text-gray-400 hover:text-white transition">ბლოგი</a></li>
                <li><a href="#" className="text-gray-400 hover:text-white transition">კარიერა</a></li>
              </ul>
            </div>
            
            <div className="md:col-span-1">
              <h3 className="text-xl font-bold mb-6">კონტაქტი</h3>
              <ul className="space-y-4 text-gray-400">
                <li className="flex items-start">
                  <span className="mr-3 mt-1">📍</span>
                  <span>თბილისი, საქართველო</span>
                </li>
                <li className="flex items-start">
                  <span className="mr-3 mt-1">📞</span>
                  <span>+995 32 123 45 67</span>
                </li>
                <li className="flex items-start">
                  <span className="mr-3 mt-1">✉️</span>
                  <span>info@sandoxeli.ge</span>
                </li>
                <li className="flex items-start">
                  <span className="mr-3 mt-1">🕒</span>
                  <span>ყოველდღე 8:00-22:00</span>
                </li>
              </ul>
            </div>
          </div>
          
          <div className="border-t border-gray-700 mt-12 pt-8 text-center text-gray-500">
            <p>2026 © სანდო ხელი. ყველა უფლება დაცულია.</p>
            <p className="mt-2">
              ერთჯერადი სამუშაოების მასტერი სახლში. სანტექნიკა, ელექტრიკა, ქარგარება და მებლის შეკრება.
            </p>
            <div className="mt-4 flex flex-wrap justify-center gap-6">
              <a href="#" className="text-gray-400 hover:text-white transition">კონფიდენციალურობის პოლიტიკა</a>
              <a href="#" className="text-gray-400 hover:text-white transition">გამოყენების პირობები</a>
              <a href="#" className="text-gray-400 hover:text-white transition">გარანტიები</a>
              <a href="#" className="text-gray-400 hover:text-white transition">FAQ</a>
            </div>
          </div>
          
          <div className="mt-8 bg-gradient-to-r from-blue-600 to-orange-600 rounded-xl p-6 max-w-3xl mx-auto text-center">
            <h3 className="text-xl font-bold mb-2">მზად ხართ სტრესის გარეშე სახლის შესაკეთებლად?</h3>
            <p className="mb-4 opacity-90">
              დაგვიკავშირდით და მიიღეთ 15% ფასდაკლება პირველი გამოძახებისთვის!
            </p>
            <a href="#contact" className="inline-block bg-white text-blue-600 font-bold px-8 py-3 rounded-lg hover:bg-gray-100 transition">
              დაგვიკავშირდით ახლა
            </a>
          </div>
        </div>
      </footer>
    </div>
  );
}