import { Card, CardContent } from '../components/ui/card';
import { Badge } from '../components/ui/badge';
import { Button } from '../components/ui/button';
import { useEffect, useMemo, useState } from 'react';
import { getNodes } from '../services/drupalAPI';
import { normalizeDrupalUrl } from '../services/drupalAPI';
import { Eye, Target, Headphones, Award, Settings, Stethoscope, Users } from "lucide-react";
import { getIcon } from '../utils/lucideIcon';

function AboutUs(section) {

const [stats, setStats] = useState([]);
const [aboutUsItems, setItems] = useState([]);
const [ourVisionMission, setOurVisionMission] = useState([]);
const [whyChooseReasons, setWhyChooseReasons] = useState([]);
const[hearBetter, setHearBetterLiveBetter] = useState([]);
const [loading, setLoading] = useState(true);


useEffect(() => {
  const factsPromise = getNodes('facts', []).then(setStats).catch(console.error);
  const aboutPromise = getNodes(
      'about_us',
      [{ fieldName: 'field_media_image', mode: 'media', mediaSourceField: 'field_media_image' }],
      { field_section: 'inner_page' }
    )
      .then(setItems)
      .catch(console.error);
  const visionPromise = getNodes('about_us', [], { field_section: 'vision_and_mission' })
    .then(setOurVisionMission)
    .catch(console.error);
  const whyPromise = getNodes('about_us', [], { field_section: 'cores_value_description' })
    .then(setWhyChooseReasons)
    .catch(console.error);
  const hearPromise = getNodes('about_us', [], { field_section: 'hear_better' })
    .then(setHearBetterLiveBetter)
    .catch(console.error);

  Promise.allSettled([factsPromise, aboutPromise, visionPromise, whyPromise, hearPromise])
    .finally(() => setLoading(false));
}, [section]);

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 heroItem = useMemo(() => aboutUsItems[0], [aboutUsItems]);
const heroTitle = useMemo(() => heroItem?.attributes?.title || 'About HEAREX', [heroItem]);
const heroBody = useMemo(() => heroItem?.attributes?.body?.processed, [heroItem]);
const heroImageUrl = useMemo(() => getImageUrl(heroItem), [heroItem]);
const hearBetterItem = useMemo(() => hearBetter[0], [hearBetter]);



  return (
    <>
    <div className="min-h-screen bg-white">
      {/* Hero Section */}
      <section className="relative py-8 lg:py-8 bg-gradient-to-br from-[#f8f9fa] to-[#e8f5d8]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <Badge className="bg-[#8ac642] text-white mb-6 text-sm px-4 py-2">
                Established 2011
              </Badge>
              <h1 className="text-4xl lg:text-5xl font-bold text-[#383838] mb-6">
               {heroTitle}
              </h1>
              <div className="text-xl text-gray-600 leading-relaxed mb-8">
                {heroBody
                  ? <div dangerouslySetInnerHTML={{ __html: heroBody }} />
                  : 'Your trusted partner in hearing healthcare.'}
              </div>
            </div>
            <div className="relative">
              <div className="rounded-2xl overflow-hidden shadow-2xl">
                <img
                  src={heroImageUrl}
                  alt="HEAREX Modern Clinic"
                  crossOrigin="use-credentials"
                  onError={(e) => { e.target.style.display = 'none'; }}
                  className="w-full h-96 object-cover"
                />
              </div>
              <div className="absolute -bottom-6 -left-6 bg-[#8ac642] rounded-2xl p-6 shadow-lg">
                <div className="text-white text-center">
                  <div className="text-3xl font-bold">50,000+</div>
                  <div className="text-sm">Lives Improved</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {stats.length > 0 ? stats.map((stat, index) => {
              return (
                <Card key={index} className="text-center p-8 border-0 shadow-lg hover:shadow-xl transition-all duration-300">
                  <CardContent className="space-y-4">
                    <div className="w-16 h-16 bg-[#8ac642] rounded-full flex items-center justify-center mx-auto">
                     {getIcon(stat.attributes.field_lucide_icon, {  className: 'w-8 h-8 text-white' })}
                    </div>
                    <div>
                      <div className="text-3xl font-bold text-[#383838]">{stat.attributes.field_text_1}{stat.attributes.field_text_2}</div>
                      <div className="text-gray-600">{stat.attributes.title}</div>
                    </div>
                  </CardContent>
                </Card>
              );
            }) : (
              <div className="col-span-full text-center text-gray-500 py-12">
                {loading ? 'Loading stats...' : 'No statistics available yet.'}
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Vision & Mission */}
      <section className="py-16 bg-[#f8f9fa]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold text-[#383838] mb-4">
              Our Vision & Mission
            </h2>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              Guided by our commitment to excellence and innovation in hearing healthcare
            </p>
          </div>

          <div className="grid lg:grid-cols-2 gap-12">
            {ourVisionMission.length > 0 ? ourVisionMission.map((item) => {
              return (
                 <Card className="p-8 lg:p-12 border-0 shadow-lg hover:shadow-xl transition-all duration-300">
                    <CardContent className="space-y-6">
                      <div className="w-16 h-16 bg-[#8ac642] rounded-full flex items-center justify-center">
                        {getIcon(item.attributes.field_lucide_icon, {  className: 'w-8 h-8 text-white' })}
                      </div>
                      <div>
                        <h3 className="text-2xl font-bold text-[#383838] mb-4">{item.attributes.title}</h3>
                        <div className="text-lg text-gray-600 leading-relaxed">
                          {item.attributes.body?.processed 
                            ? <div dangerouslySetInnerHTML={{ __html: item.attributes.body.processed }} />
                            : 'Our commitment to excellence and innovation in hearing healthcare.'}
                        </div>
                      </div>
                    </CardContent>
                  </Card>
              );
            }) : (
              <div className="col-span-full p-8 border-0 shadow-lg text-center text-gray-500">
                {loading ? 'Loading vision and mission...' : 'Vision and mission content is coming soon.'}
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Why Choose HEAREX Section */}
      <section className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold text-[#383838] mb-4">
              Why Choose HEAREX?
            </h2>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              Experience the difference that expert care and advanced technology can make 
              in your hearing health journey.
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {whyChooseReasons.length > 0 ? whyChooseReasons.map((reason, index) => {
              return (
                <Card key={index} className="p-8 border-0 shadow-lg hover:shadow-xl transition-all duration-300 group">
                  <CardContent className="flex items-start space-x-6">
                    <div className="w-16 h-16 bg-[#8ac642] rounded-full flex items-center justify-center flex-shrink-0 group-hover:bg-[#7ab536] transition-colors duration-300">
                      {getIcon(reason.attributes.field_lucide_icon, {  className: 'w-8 h-8 text-white' })}
                    </div>
                    <div className="space-y-3">
                      <h3 className="text-xl font-semibold text-[#383838] group-hover:text-[#8ac642] transition-colors duration-300">
                        {reason.attributes.title}
                      </h3>
                      <div className="text-gray-600 leading-relaxed">
                        {reason.attributes.body?.processed 
                          ? <div dangerouslySetInnerHTML={{ __html: reason.attributes.body.processed }} />
                          : 'Experience the difference that expert care and advanced technology can make in your hearing health journey.'}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              );
            }) : (
              <div className="col-span-full p-8 border-0 shadow-lg text-center text-gray-500">
                {loading ? 'Loading reasons to choose us...' : 'Why choose HEAREX content is coming soon.'}
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Hear Better, Live Better Section */}
      <section className="py-16 lg:py-24 bg-gradient-to-br from-[#8ac642] to-[#7ab536] relative overflow-hidden">
        {/* Background Pattern */}
        <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
        
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
          <div className="text-center">
            <div className="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-8">
              <Headphones className="w-10 h-10 text-white" />
            </div>
            
            <h2 className="text-4xl lg:text-5xl font-bold text-white mb-8">
              {hearBetterItem?.attributes?.title || 'Hear Better, Live Better'}
            </h2>
            
            <div className="max-w-4xl mx-auto mb-12">
              <div className="text-xl lg:text-2xl text-white/90 leading-relaxed">
                 {hearBetterItem?.attributes?.body?.processed 
                  ? <div dangerouslySetInnerHTML={{ __html: hearBetterItem.attributes.body.processed }} />
                  : 'Discover how improved hearing can enhance your quality of life, from reconnecting with loved ones to enjoying your favorite activities.'}
              </div>
            </div>

            {/* Call to Action */}
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button 
              onClick={() => window.location.href = '/contact'}
                variant="green"
                size="lg"
                className="bg-white text-[#8ac642] hover:bg-gray-50  px-8 py-6 text-lg font-medium shadow-lg hover:shadow-xl transition-all duration-300"
              >
                Start Your Journey Today
              </Button>
             
            </div>
          </div>
        </div>
        
        {/* Decorative Elements */}
        <div className="absolute top-10 left-10 w-20 h-20 bg-white/10 rounded-full animate-pulse"></div>
        <div className="absolute bottom-10 right-10 w-16 h-16 bg-white/10 rounded-full animate-pulse delay-300"></div>
        <div className="absolute top-1/2 left-1/4 w-12 h-12 bg-white/5 rounded-full animate-pulse delay-700"></div>
      </section>
    </div>
    </>
    
  );
}

export { AboutUs };