export default function FeaturedHero() {
  return (
    <section id="featured-hero" className="w-full bg-white border-b border-ui-border mb-12">
      <div className="max-w-[1440px] mx-auto">
        <div className="flex flex-col lg:flex-row min-h-[500px]">
          {/* Left: Content */}
          <div className="w-full lg:w-1/2 p-8 lg:p-16 flex flex-col justify-center">
            <span className="inline-block px-3 py-1 bg-brand-light text-brand-blue border border-brand-blue/20 text-xs font-semibold mb-4 w-fit" style={{ borderRadius: "6px" }}>
              Featured Research
            </span>
            <div className="blog-heading text-ui-text tracking-tight mb-6 leading-tight font-bold">
              Pioneering Sustainable Urban Development in the Heart of Paris
            </div>
            <p className="text-lg text-ui-muted mb-8 leading-relaxed">
              Our latest collaborative research initiative uncovers groundbreaking methods for integrating green infrastructure into historic urban environments, setting a new standard for European cities.
            </p>
            <div className="flex items-center gap-4 text-sm text-ui-muted mb-8 mt-4">
              <div className="flex items-center gap-2">
                <img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-1.jpg" alt="Author" className="w-8 h-8 rounded-full border border-ui-border" />
                <span className="font-medium text-ui-text">Dr. Amélie Dubois</span>
              </div>
              <span>•</span>
              <span>October 15, 2024</span>
              <span>•</span>
              <span>5 min read</span>
            </div>
            <a href="#" className="inline-flex items-center justify-center px-5 py-3 text-white font-semibold text-sm hover:bg-brand-hover transition-colors shadow-sm w-fit gap-2" style={{ borderRadius: "5px", backgroundColor: "rgb(38, 60, 111)" }}>
              Read Full Story <i className="fas fa-arrow-right text-xs"></i>
            </a>
          </div>

          {/* Right: Image */}
          <div className="w-full lg:w-1/2 bg-gray-100 relative min-h-[300px] lg:min-h-full">
            <img
              className="absolute inset-0 w-full h-full object-cover"
              src="https://storage.googleapis.com/uxpilot-auth.appspot.com/75c7c284e8-18119bca345a35938b88.png"
              alt="Aerial view of Paris with sustainable green roofs and modern eco-friendly architecture blending with historic buildings"
            />
          </div>
        </div>
      </div>
    </section>
  );
}