import React from "react";
import Link from "next/link";

export default function BlogsHero() {
  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: `
        .blogs-hero-title {
            color: #ffffff !important;
            font-family: var(--font-manrope), sans-serif !important;
            font-size: clamp(34px, 5.5vw, 68px) !important;
            font-weight: 850 !important;
            text-transform: uppercase !important;
            letter-spacing: -1.5px !important;
            margin: 0 !important;
        }
      `}} />
      <div className="custom-standard-hero-container">
        <div 
          style={{ 
            backgroundImage: "url(/images/home2-banner-1.jpg)", 
            backgroundPosition: "center center", 
            backgroundRepeat: "no-repeat", 
            backgroundSize: "cover" 
          }} 
          className="custom-standard-hero-card"
        >
          <div className="e-con-inner" style={{ position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column" }}>
            
            {/* Title / Heading for Blogs */}
            <div style={{ textAlign: "center", color: "#fff", zIndex: 5 }}>
              <h1 className="blogs-hero-title">
                Our <span style={{ color: "#C01227" }}>Blogs</span>
              </h1>
            </div>

            <div 
              className="elementor-element elementor-element-91be79f elementor-widget__width-auto elementor-absolute elementor-widget elementor-widget-logico_breadcrumbs" 
              style={{ position: "absolute", bottom: "40px", left: "50%", transform: "translateX(-50%)", zIndex: 10 }}
            >
              <div className="elementor-widget-container">
                <nav className="breadcrumbs" style={{ background: "rgba(255, 255, 255, 0.1)", backdropFilter: "blur(10px)", padding: "10px 24px", borderRadius: "30px", border: "1px solid rgba(255, 255, 255, 0.15)" }}>
                  <Link href="/" style={{ color: "#fff", fontWeight: 600 }}>Home</Link>
                  <span className="delimiter" style={{ color: "rgba(255, 255, 255, 0.6)", margin: "0 8px" }}>/</span>
                  <span className="current" style={{ color: "#C01227", fontWeight: 700 }}>Blogs</span>
                </nav>
              </div>
            </div>

          </div>
        </div>
      </div>
    </>
  );
}