export default function DubaiIslamicInspiredBank() {
  return (
    <div className="min-h-screen bg-gray-50 text-gray-800">
      {/* Header */}
      <header className="bg-white shadow-sm sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-2xl bg-emerald-700 flex items-center justify-center text-white font-bold text-xl">
              IB
            </div>
            <div>
              <h1 className="font-bold text-xl">Islamic Digital Bank</h1>
              <p className="text-sm text-gray-500">Modern Banking Experience</p>
            </div>
          </div>

          <nav className="hidden md:flex items-center gap-8 text-sm font-medium">
            <a href="#" className="hover:text-emerald-700">Personal</a>
            <a href="#" className="hover:text-emerald-700">Business</a>
            <a href="#" className="hover:text-emerald-700">Cards</a>
            <a href="#" className="hover:text-emerald-700">Investments</a>
            <a href="#" className="hover:text-emerald-700">Support</a>
          </nav>

          <div className="flex items-center gap-3">
            <button className="px-5 py-2 rounded-xl border border-emerald-700 text-emerald-700 hover:bg-emerald-50 transition">
              Sign In
            </button>
            <button className="px-5 py-2 rounded-xl bg-emerald-700 text-white hover:bg-emerald-800 transition">
              Open Account
            </button>
          </div>
        </div>
      </header>

      {/* Hero */}
      <section className="relative overflow-hidden bg-gradient-to-r from-emerald-900 via-emerald-800 to-green-700 text-white">
        <div className="absolute inset-0 opacity-10 bg-[url('https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?q=80&w=1400&auto=format&fit=crop')] bg-cover bg-center"></div>

        <div className="relative max-w-7xl mx-auto px-6 py-24 grid lg:grid-cols-2 gap-12 items-center">
          <div>
            <p className="uppercase tracking-[0.3em] text-sm mb-4 text-emerald-200">
              Trusted Islamic Banking
            </p>
            <h2 className="text-5xl font-bold leading-tight mb-6">
              Banking Built for the Future
            </h2>
            <p className="text-lg text-emerald-100 mb-8 leading-relaxed">
              Experience secure digital banking, investment solutions, and Sharia-compliant financial services designed for individuals and businesses.
            </p>

            <div className="flex flex-wrap gap-4">
              <button className="bg-white text-emerald-800 px-6 py-3 rounded-2xl font-semibold hover:bg-emerald-50 transition">
                Get Started
              </button>
              <button className="border border-white px-6 py-3 rounded-2xl font-semibold hover:bg-white/10 transition">
                Learn More
              </button>
            </div>
          </div>

          <div className="flex justify-center">
            <div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-3xl p-8 w-full max-w-md shadow-2xl">
              <div className="flex justify-between items-center mb-8">
                <div>
                  <p className="text-sm text-emerald-200">Premium Account</p>
                  <h3 className="text-2xl font-bold">$24,560.89</h3>
                </div>
                <div className="w-14 h-14 bg-white/20 rounded-2xl"></div>
              </div>

              <div className="space-y-4">
                <div className="bg-white/10 rounded-2xl p-4 flex justify-between items-center">
                  <div>
                    <p className="text-sm text-emerald-200">Transfer</p>
                    <h4 className="font-semibold">International Payment</h4>
                  </div>
                  <span className="text-emerald-200">→</span>
                </div>

                <div className="bg-white/10 rounded-2xl p-4 flex justify-between items-center">
                  <div>
                    <p className="text-sm text-emerald-200">Investment</p>
                    <h4 className="font-semibold">Profit Growth</h4>
                  </div>
                  <span className="text-green-300">+18%</span>
                </div>

                <div className="bg-white/10 rounded-2xl p-4 flex justify-between items-center">
                  <div>
                    <p className="text-sm text-emerald-200">Security</p>
                    <h4 className="font-semibold">Biometric Login</h4>
                  </div>
                  <span>✓</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="max-w-7xl mx-auto px-6 py-20">
        <div className="text-center mb-14">
          <p className="text-emerald-700 font-semibold uppercase tracking-wider mb-3">
            Our Services
          </p>
          <h3 className="text-4xl font-bold mb-4">
            Everything You Need in One Bank
          </h3>
          <p className="text-gray-600 max-w-2xl mx-auto">
            Fast, secure, and user-friendly digital banking tailored for modern financial needs.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {[
            {
              title: 'Digital Banking',
              desc: 'Manage your accounts anytime with secure online banking.',
            },
            {
              title: 'Investment Plans',
              desc: 'Grow your wealth with ethical investment products.',
            },
            {
              title: 'Business Accounts',
              desc: 'Powerful banking solutions for companies and startups.',
            },
            {
              title: 'Global Transfers',
              desc: 'Send and receive money internationally with ease.',
            },
          ].map((item, index) => (
            <div
              key={index}
              className="bg-white p-7 rounded-3xl shadow-sm hover:shadow-xl transition border border-gray-100"
            >
              <div className="w-14 h-14 rounded-2xl bg-emerald-100 text-emerald-700 flex items-center justify-center text-2xl mb-5">
                ✦
              </div>
              <h4 className="text-xl font-bold mb-3">{item.title}</h4>
              <p className="text-gray-600 leading-relaxed">{item.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Mobile App Section */}
      <section className="bg-white py-20">
        <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-12 items-center">
          <div>
            <p className="text-emerald-700 font-semibold uppercase tracking-widest mb-3">
              Mobile Banking
            </p>
            <h3 className="text-4xl font-bold mb-6">
              Your Bank in Your Pocket
            </h3>
            <p className="text-gray-600 mb-8 leading-relaxed">
              Monitor transactions, transfer funds, pay bills, and manage your finances instantly from our secure mobile banking platform.
            </p>

            <div className="space-y-4">
              {[
                'Instant money transfer',
                'Biometric authentication',
                'Real-time transaction alerts',
                '24/7 customer support',
              ].map((feature, index) => (
                <div key={index} className="flex items-center gap-3">
                  <div className="w-6 h-6 rounded-full bg-emerald-700 text-white flex items-center justify-center text-xs">
                    ✓
                  </div>
                  <span>{feature}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="flex justify-center">
            <div className="bg-gradient-to-b from-emerald-700 to-emerald-900 rounded-[3rem] p-4 shadow-2xl w-[320px]">
              <div className="bg-white rounded-[2.5rem] p-6 min-h-[620px]">
                <div className="flex justify-between items-center mb-10">
                  <div>
                    <p className="text-sm text-gray-500">Welcome back</p>
                    <h4 className="font-bold text-lg">Sarah Ahmed</h4>
                  </div>
                  <div className="w-12 h-12 rounded-2xl bg-emerald-100"></div>
                </div>

                <div className="bg-emerald-700 text-white rounded-3xl p-6 mb-8">
                  <p className="text-sm text-emerald-100">Current Balance</p>
                  <h3 className="text-3xl font-bold mt-2">$48,210</h3>
                </div>

                <div className="space-y-4">
                  {[1, 2, 3].map((item) => (
                    <div key={item} className="bg-gray-100 rounded-2xl p-4 flex justify-between items-center">
                      <div>
                        <h5 className="font-semibold">Transfer Payment</h5>
                        <p className="text-sm text-gray-500">Today</p>
                      </div>
                      <span className="font-bold">-$250</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20 px-6">
        <div className="max-w-6xl mx-auto bg-gradient-to-r from-emerald-700 to-green-700 rounded-[3rem] text-white p-12 text-center shadow-2xl">
          <h3 className="text-4xl font-bold mb-4">
            Open Your Digital Account Today
          </h3>
          <p className="text-emerald-100 text-lg max-w-2xl mx-auto mb-8">
            Join thousands of customers using our secure Islamic banking platform for smarter financial management.
          </p>

          <div className="flex flex-wrap justify-center gap-4">
            <button className="bg-white text-emerald-700 px-8 py-3 rounded-2xl font-semibold hover:bg-emerald-50 transition">
              Create Account
            </button>
            <button className="border border-white px-8 py-3 rounded-2xl font-semibold hover:bg-white/10 transition">
              Contact Support
            </button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-emerald-950 text-emerald-100 py-14">
        <div className="max-w-7xl mx-auto px-6 grid md:grid-cols-4 gap-10">
          <div>
            <div className="flex items-center gap-3 mb-5">
              <div className="w-10 h-10 rounded-xl bg-emerald-700 flex items-center justify-center font-bold">
                IB
              </div>
              <span className="font-bold text-lg">Islamic Digital Bank</span>
            </div>
            <p className="text-sm text-emerald-200 leading-relaxed">
              A modern banking experience inspired by premium Islamic banking platforms.
            </p>
          </div>

          <div>
            <h4 className="font-bold mb-4">Banking</h4>
            <ul className="space-y-2 text-sm text-emerald-200">
              <li>Savings Accounts</li>
              <li>Current Accounts</li>
              <li>Financing</li>
              <li>Cards</li>
            </ul>
          </div>

          <div>
            <h4 className="font-bold mb-4">Company</h4>
            <ul className="space-y-2 text-sm text-emerald-200">
              <li>About Us</li>
              <li>Careers</li>
              <li>News</li>
              <li>Contact</li>
            </ul>
          </div>

          <div>
            <h4 className="font-bold mb-4">Support</h4>
            <ul className="space-y-2 text-sm text-emerald-200">
              <li>Help Center</li>
              <li>Security</li>
              <li>Privacy Policy</li>
              <li>Terms & Conditions</li>
            </ul>
          </div>
        </div>

        <div className="border-t border-emerald-900 mt-12 pt-6 text-center text-sm text-emerald-300">
          © 2026 Islamic Digital Bank. All rights reserved.
        </div>
      </footer>
    </div>
  );
}