import { jsxs, jsx } from "react/jsx-runtime";
import "react";
const HeroSection = () => {
  const heroStyle = {
    minHeight: "85vh",
    // Added a more complex gradient to simulate the deep green overlay from image_2.png
    backgroundImage: `linear-gradient(135deg, rgba(0, 43, 22, 0.85) 0%, rgba(0, 26, 13, 0.7) 100%), url("/images/bannar/hero.png")`,
    backgroundSize: "cover",
    backgroundPosition: "center",
    backgroundAttachment: "fixed",
    position: "relative"
  };
  const ctaBarStyle = {
    backgroundColor: "#00b84d",
    color: "#ffffff",
    position: "absolute",
    bottom: "-120px",
    left: "50%",
    transform: "translateX(-50%)",
    zIndex: "10",
    width: "90%",
    maxWidth: "1200px",
    borderRadius: "15px",
    // Added the white border from your request
    border: "4px solid #ffffff",
    // Added subtle geometric pattern overlay often seen in Islamic design
    backgroundImage: "radial-gradient(circle at 2px 2px, rgba(255,255,255,0.05) 1px, transparent 0)",
    backgroundSize: "24px 24px"
  };
  return /* @__PURE__ */ jsxs("section", { className: "hero-container", style: { position: "relative", marginBottom: "100px" }, children: [
    /* @__PURE__ */ jsx("div", { style: heroStyle, className: "d-flex align-items-center justify-content-center text-center text-white pb-5", children: /* @__PURE__ */ jsxs("div", { className: "container hero-content-wrapper mt-5 pb-5", children: [
      /* @__PURE__ */ jsx("h1", { className: "display-4 fw-bold mb-3 lh-sm", style: { maxWidth: "1000px", margin: "0 auto" }, children: "সৈয়দ ফজলুল করিম ইসলামিক রিসার্চ সেন্টার (মারকাজ) ট্রাস্ট-এ স্বাগতম" }),
      /* @__PURE__ */ jsx("p", { className: "fs-5 text-white mb-2 fw-medium", children: "একসাথে একটি ভালো ভবিষ্যৎ গড়ে তুলি" }),
      /* @__PURE__ */ jsx("p", { className: "lead mb-5 fs-6 opacity-75 mx-auto", style: { maxWidth: "650px" }, children: "আমরা সম্প্রদায়ের সেবা করতে এবং ইতিবাচক প্রভাব তৈরি করতে প্রতিশ্রুতিবদ্ধ।" }),
      /* @__PURE__ */ jsxs("div", { className: "d-flex gap-3 justify-content-center mt-4", children: [
        /* @__PURE__ */ jsx("a", { href: "#", className: "btn btn-light px-5 py-2 fw-semibold rounded-pill text-dark shadow-sm", children: "দান করুন" }),
        /* @__PURE__ */ jsx("a", { href: "#", className: "btn btn-outline-light px-5 py-2 fw-semibold rounded-pill", children: "আমাদের সম্পর্কে" })
      ] })
    ] }) }),
    /* @__PURE__ */ jsx("div", { className: "donation-cta-bar shadow-lg p-4 p-md-5", style: ctaBarStyle, children: /* @__PURE__ */ jsxs("div", { className: "row align-items-center gy-3 text-start", children: [
      /* @__PURE__ */ jsxs("div", { className: "col-lg-7", children: [
        /* @__PURE__ */ jsx("h4", { className: "fw-bold mb-1", children: "আপনার অনুদান প্রদান করুন" }),
        /* @__PURE__ */ jsx("p", { className: "small mb-0 opacity-90", style: { maxWidth: "550px" }, children: "এই তহবিলে অবদান রাখার মাধ্যমে, আপনি ফাউন্ডেশনের সব কল্যাণমূলক প্রকল্পে অংশগ্রহণ করতে পারেন।" })
      ] }),
      /* @__PURE__ */ jsx("div", { className: "col-lg-5", children: /* @__PURE__ */ jsxs("div", { className: "d-flex gap-2 justify-content-lg-end justify-content-center", children: [
        /* @__PURE__ */ jsxs("button", { className: "btn btn-outline-light d-flex align-items-center gap-2 px-4 py-2 rounded-3 border-2", children: [
          /* @__PURE__ */ jsx("i", { className: "fas fa-heart small" }),
          " মাসিক দান"
        ] }),
        /* @__PURE__ */ jsxs("button", { className: "btn btn-light d-flex align-items-center gap-2 px-4 py-2 rounded-3 text-success fw-bold shadow", children: [
          /* @__PURE__ */ jsx("i", { className: "fas fa-hand-holding-heart small text-success" }),
          " একবার দান করুন"
        ] })
      ] }) })
    ] }) })
  ] });
};
export {
  HeroSection as default
};
