import React from 'react';
import logo from '../../../../../public/images/logo/main-logo.png';
const Footer = () => {
  const footerStyle = {
    backgroundColor: '#001a0d', // Deep dark green from image
    color: '#ffffff',
    fontSize: '0.9rem',
    // Note: You can add the geometric pattern as a background-image URL here
    backgroundImage: 'radial-gradient(#002b16 1px, transparent 1px)',
    backgroundSize: '20px 20px'
  };

  const linkStyle = {
    textDecoration: 'none',
    color: '#b0b0b0',
    display: 'block',
    marginBottom: '8px',
    transition: '0.3s'
  };

  return (
    <footer style={footerStyle} className="pt-5 pb-3">
      <div className="container">
        <div className="row gy-4">

          {/* Column 1: Branding & Social */}
          <div className="col-lg-4 col-md-6">
            <div className="d-flex align-items-center mb-3">
              <img src={logo} alt="Logo" width="50" className="me-2" />
              <div>
                <h5 className="mb-0 fw-bold">Fajlul Karim Trust</h5>
                <small style={{ fontSize: '11px' }}>Sayed Fajlul Karim Islamic Research Centre</small>
              </div>
            </div>
            <p className="small lh-lg" style={{ color: '#b0b0b0' }}>
              সৈয়দ ফজলুল করিম ইসলামিক রিসার্চ সেন্টার (মারকাজ) <br />
              ট্রাস্ট একসাথে একটি ভালো ভবিষ্যৎ গড়ে তুলি
            </p>
            <div className="d-flex gap-2 mt-3">
            {/* Note: changed 'fa fa-facebook' to 'fab fa-facebook-f' */}
            <a href="#" className="btn btn-success btn-sm rounded-circle"><i className="fab fa-facebook-f"></i></a>
            <a href="#" className="btn btn-success btn-sm rounded-circle"><i className="fab fa-youtube"></i></a>
            <a href="#" className="btn btn-success btn-sm rounded-circle"><i className="fab fa-linkedin-in"></i></a>
            </div>
          </div>

          {/* Column 2: Quick Links */}
          <div className="col-lg-2 col-md-6">
            <h6 className="fw-bold mb-4 border-bottom border-success pb-2 d-inline-block">দ্রুত লিংক</h6>
            <div className="ps-0">
              <a href="#" style={linkStyle}>হোম</a>
              <a href="#" style={linkStyle}>আমাদের সম্পর্কে</a>
              <a href="#" style={linkStyle}>প্রতিষ্ঠাতা ও উপদেষ্টা</a>
              <a href="#" style={linkStyle}>কার্যক্রম</a>
              <a href="#" style={linkStyle}>দান করুন</a>
            </div>
          </div>

          {/* Column 3: Contact Info */}
          <div className="col-lg-3 col-md-6">
            <h6 className="fw-bold mb-4 border-bottom border-success pb-2 d-inline-block">যোগাযোগ</h6>
            <p className="small mb-2" style={{ color: '#b0b0b0' }}>
              <span className="fw-bold d-block text-white">নিবন্ধিত অফিস:</span>
              ৬০/এ পুরানা পল্টন, ঢাকা-১০০০
            </p>
            <p className="small mb-2" style={{ color: '#b0b0b0' }}>
              <span className="fw-bold d-block text-white">ফোন:</span>
              +৮৮০ ১৭৪০-৯৯০১৫৭
            </p>
            <p className="small" style={{ color: '#b0b0b0' }}>
              <span className="fw-bold d-block text-white">ইমেইল:</span>
              info@fajlulkarimtrust.com
            </p>
          </div>

          {/* Column 4: Newsletter */}
          <div className="col-lg-3 col-md-6">
            <h6 className="fw-bold mb-3">নিয়মিত নিউজলেটার পেতে সাবস্ক্রাইব করুন</h6>
            <div className="input-group mb-3 bg-white rounded p-1">
              <input
                type="email"
                className="form-control border-0 shadow-none"
                placeholder="ইমেইল লিখুন"
                aria-label="Email"
              />
              <button className="btn btn-success px-3" type="button" style={{ backgroundColor: '#008542' }}>
                সাবস্ক্রাইব
              </button>
            </div>
          </div>
        </div>

        <hr className="mt-5 mb-4 border-secondary" />

        {/* Bottom Footer */}
        <div className="row text-center">
          <div className="col-12">
            <p className="small mb-0" style={{ color: '#808080', fontSize: '12px' }}>
              © 2026 Sayed Fajlul Karim Islamic Research Centre (Markaj) Trust. সব অধিকার সংরক্ষিত
            </p>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;
