import React from 'react'
import { Button } from './ui/button'
import { useEffect, useState, useMemo } from 'react';
import { getNodes } from '../services/drupalAPI';
import { normalizeDrupalUrl } from '../services/drupalAPI';
import { Star,Clock,Phone,MapPin } from "lucide-react";


function Hero({ section }) {

  const [items, setItems] = useState([]);

  
  

  useEffect(() => {
    getNodes(
      'about_us',
      [{ fieldName: 'field_media_image', mode: 'media', mediaSourceField: 'field_media_image' }], // single array, correct node field name
      { field_section: section }
    )
      .then(setItems)
      .catch(console.error)
  }, [section]);

  const aboutHome = useMemo(() => items.slice(0, 1), [items]);

  // if (loading) return <p>Loading...</p>;

  const getImageUrl = (item) => {
    if (!item) return null;
    const resolved = item.field_media_image_resolved; // matches fieldName above
    if (!resolved) return null;
    const url = Array.isArray(resolved)
      ? resolved[0]?.file?.attributes?.uri?.url
      : resolved?.file?.attributes?.uri?.url;
    return normalizeDrupalUrl(url);
  };

  const imageUrl = useMemo(() => getImageUrl(aboutHome[0]), [aboutHome]);

  return (
    
    <>
    
     <section className="relative h-[100vh] lg:h-[100vh] overflow-hidden">
        {/* Video Background */}
        <div className="absolute inset-0">
          <video
          autoPlay
          muted
          loop
          playsInline
          className="w-full h-full object-cover"
        >
          <source src='/videos/vecteezy_a-person-holding-a-hearing-aid-in-their-hand_50012411.mp4' type="video/mp4"/>
        </video>
          <div className="absolute inset-0 bg-gradient-to-b from-white via-white/50 to-[#00000091]"></div>
        </div>

        {/* Video Content Overlay */}
        <div className="relative z-10 h-full flex items-center">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
            <div className="max-w-2xl">
              <h1 className="text-4xl lg:text-6xl font-bold text-[#383838] leading-tight mb-6">
                Advanced Hearing
                <span className="text-[#8ac642] block">Technology</span>
              </h1>
              <p className="text-xl text-white mb-8 leading-relaxed">
                Experience crystal-clear sound with our cutting-edge hearing solutions. 
                Professional care meets innovative technology.
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Button 
                 
                  className="bg-[#8ac642] hover:bg-[#7ab536] text-white px-8 py-6 text-lg shadow-lg shadow-[#8ac642]/30"
                >
                  Get Expert Help
                </Button>
                <Button 
                  variant="outline"
                  
                  className="border-white text-black hover:bg-white hover:text-[#383838] px-8 py-6 text-lg"
                >
                  View Products
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>
    <section className="relative bg-gradient-to-br from-[#f8f9fa] to-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          {/* Content */}
          <div className="space-y-8">
            <div className="space-y-4">
             
              <div className="about-body text-lg text-gray-600 leading-relaxed">
  {aboutHome[0]?.attributes?.body?.processed 
    ? <div dangerouslySetInnerHTML={{ __html: aboutHome[0].attributes.body.processed }} />
    : 'Your trusted partner in hearing healthcare.'}
</div>
            </div>

            {/* Quick Stats */}
            <div className="flex flex-wrap gap-6">
              <div className="flex items-center space-x-2">
                <div className="w-10 h-10 bg-[#e8f5d8] rounded-full flex items-center justify-center">
                  <Star className="w-5 h-5 text-[#8ac642]" />
                </div>
                <div>
                  <p className="font-semibold text-[#383838]">15,000+</p>
                  <p className="text-sm text-gray-600">Happy Patients</p>
                </div>
              </div>
              <div className="flex items-center space-x-2">
                <div className="w-10 h-10 bg-[#e8f5d8] rounded-full flex items-center justify-center">
                  <Clock className="w-5 h-5 text-[#8ac642]" />
                </div>
                <div>
                  <p className="font-semibold text-[#383838]">12+ Years</p>
                  <p className="text-sm text-gray-600">Experience</p>
                </div>
              </div>
            </div>

            {/* CTAs */}
            <div className="flex flex-col sm:flex-row gap-4">
              <Button 
                onClick={() => window.location.href = '/about'}
                className="bg-[#8ac642] hover:bg-[#7ab536] text-white px-8 py-6 text-lg shadow-lg shadow-[#8ac642]/30 transition-all duration-300 hover:shadow-xl hover:shadow-[#8ac642]/40"
              >
                Who We Are
              </Button>
              
            </div>

            {/* Contact Info */}
            <div className="flex flex-wrap gap-6 pt-4 border-t border-gray-200">
              <div className="flex items-center space-x-2 text-gray-600">
                <Phone className="w-4 h-4" />
                <a href="tel:+96264601818" className="hover:underline">
                  (06) 460 1818
                </a>
              </div>
              <div className="flex items-center space-x-2 text-gray-600">
                <MapPin className="w-4 h-4" />
                <a href="https://maps.app.goo.gl/wtm8Q6kGo2Kx39xh8" target="_blank" rel="noopener noreferrer" className="hover:underline">
                  Vetro Medica Complex, Al-Mutanabbi St. 67, Amman
                </a>
              </div>
            </div>
          </div>

          {/* Hero Image */}
          <div className="relative">
            <div className="relative rounded-2xl overflow-hidden shadow-2xl shadow-[#8ac642]/20 transform hover:scale-105 transition-transform duration-500">
              
              <img
                src={imageUrl}
                alt="Professional audiologist helping patient with hearing aid"
                className="w-full h-[500px]"
                 crossOrigin="use-credentials"
                onError={(e) => { e.target.style.display = 'none'; }}
              />
              <div className="absolute inset-0 bg-gradient-to-t from-[#8ac642]/20 to-transparent"></div>
            </div>
            
            {/* Floating Elements */}
            <div className="absolute -top-4 -right-4 bg-white rounded-lg shadow-lg p-4 animate-bounce">
              <div className="flex items-center space-x-2">
                <div className="w-3 h-3 bg-[#8ac642] rounded-full animate-pulse"></div>
                <span className="text-sm font-medium text-[#383838]">Available Now</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    </>
   
      

      
  )
}

export default Hero