import React from 'react';
import type { Page, Service } from '../types';
import ServiceCard from '../components/ServiceCard';
import { CheckIcon } from '../components/Icons';

interface HomePageProps {
  navigateTo: (page: Page) => void;
  services: Service[];
}

const HomePage: React.FC<HomePageProps> = ({ navigateTo, services }) => {

  const featuredServices = services.slice(0, 3);

  return (
    <div className="bg-gray-50">
      {/* Hero Section */}
      <section className="bg-green-50 py-20 md:py-32">
        <div className="container mx-auto px-4 text-center">
          <h1 className="text-4xl md:text-6xl font-extrabold text-gray-800 leading-tight">
            অনলাইন সেবার জগতে, <br className="hidden md:block" />
            <span className="text-green-600">সবকিছু এখন এক ঠিকানায়</span>
          </h1>
          <p className="mt-6 text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
            ভূমি ও অন্যান্য সকল অনলাইন সেবা এখন একই প্ল্যাটফর্মে।
          </p>
          <div className="mt-10 flex flex-col sm:flex-row justify-center items-center gap-4">
            <button onClick={() => navigateTo('application')} className="w-full sm:w-auto text-lg bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg">
              আবেদন করুন
            </button>
            <button onClick={() => navigateTo('services')} className="w-full sm:w-auto text-lg bg-white hover:bg-gray-100 text-green-600 font-bold py-4 px-8 rounded-full transition-all duration-300 border-2 border-green-500 shadow-lg">
              আমাদের সেবাসমূহ
            </button>
          </div>
        </div>
      </section>

      {/* Featured Services Section */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl md:text-4xl font-bold text-center text-gray-800">আমাদের সর্বাধিক জনপ্রিয় সেবাসমূহ</h2>
          <p className="text-center text-gray-600 mt-4 max-w-2xl mx-auto">
            সহস্রাধিক গ্রাহকের আস্থার প্রতীক, আমাদের সর্বাধিক জনপ্রিয় সেবাসমূহ সম্পর্কে জানুন।
          </p>
          <div className="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
            {featuredServices.map(service => (
              <ServiceCard key={service.id} service={service} navigateTo={navigateTo} />
            ))}
          </div>
           <div className="text-center mt-12">
            <button onClick={() => navigateTo('services')} className="text-lg bg-transparent hover:bg-green-500 text-green-700 font-semibold hover:text-white py-3 px-8 border border-green-500 hover:border-transparent rounded-full transition-all duration-300">
                সকল সেবাসমূহ দেখুন
            </button>
        </div>
        </div>
      </section>

      {/* How It Works Section */}
      <section className="bg-white py-20">
        <div className="container mx-auto px-4">
            <h2 className="text-3xl md:text-4xl font-bold text-center text-gray-800">মাত্র ৩টি সহজ ধাপে সেবা গ্রহণ করুন</h2>
            <div className="mt-12 grid md:grid-cols-3 gap-10 text-center">
                <div className="p-6">
                    <div className="flex justify-center items-center w-20 h-20 mx-auto bg-green-100 text-green-600 rounded-full text-3xl font-bold">১</div>
                    <h3 className="mt-6 text-xl font-bold text-gray-800">আবেদনপত্র পূরণ</h3>
                    <p className="mt-2 text-gray-600">আপনার প্রয়োজনীয় সেবা নির্বাচন করে সঠিক তথ্যসহ আবেদনপত্রটি পূরণ করুন।</p>
                </div>
                 <div className="p-6">
                    <div className="flex justify-center items-center w-20 h-20 mx-auto bg-green-100 text-green-600 rounded-full text-3xl font-bold">২</div>
                    <h3 className="mt-6 text-xl font-bold text-gray-800">নথিপত্র আপলোড</h3>
                    <p className="mt-2 text-gray-600">প্রয়োজনীয় কাগজপত্রের স্ক্যান কপি বা সুস্পষ্ট ছবি আপলোড করুন।</p>
                </div>
                 <div className="p-6">
                    <div className="flex justify-center items-center w-20 h-20 mx-auto bg-green-100 text-green-600 rounded-full text-3xl font-bold">৩</div>
                    <h3 className="mt-6 text-xl font-bold text-gray-800">সেবা গ্রহণ</h3>
                    <p className="mt-2 text-gray-600">আমাদের প্রতিনিধি আপনার আবেদনটি পর্যালোচনা করে নির্দিষ্ট সময়ের মধ্যে সেবা প্রদান সম্পন্ন করবেন।</p>
                </div>
            </div>
        </div>
      </section>
      
      {/* Why Choose Us Section */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="text-center">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-800">কেন আমাদের সেবা গ্রহণ করবেন?</h2>
            <p className="mt-4 text-lg text-gray-600">আমরা আপনার অনলাইন সেবার অভিজ্ঞতাকে সহজ ও নির্বিঘ্ন করতে প্রতিজ্ঞাবদ্ধ।</p>
          </div>
          <div className="mt-12 grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div className="bg-white p-8 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold text-gray-800">দ্রুত ও নির্ভরযোগ্য সেবা</h3>
              <p className="mt-2 text-gray-600">আমরা প্রতিটি সেবা নির্দিষ্ট সময়ের মধ্যে সম্পন্ন করার নিশ্চয়তা প্রদান করি।</p>
            </div>
            <div className="bg-white p-8 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold text-gray-800">বিশেষজ্ঞ সহায়তা</h3>
              <p className="mt-2 text-gray-600">আমাদের অভিজ্ঞ দল যেকোনো জটিলতায় আপনাকে সঠিক পরামর্শ প্রদানে সর্বদা প্রস্তুত।</p>
            </div>
            <div className="bg-white p-8 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold text-gray-800">তথ্যের সুরক্ষা</h3>
              <p className="mt-2 text-gray-600">আপনার প্রদত্ত সকল ব্যক্তিগত তথ্য আমাদের কাছে শতভাগ সুরক্ষিত ও গোপনীয়।</p>
            </div>
          </div>
        </div>
      </section>

       {/* Trust Section */}
       <section className="bg-amber-100 border-t-4 border-amber-500 py-12">
           <div className="container mx-auto px-4 text-center">
                <h3 className="text-2xl font-bold text-amber-800">দাবিত্যাগ</h3>
                <p className="mt-4 text-amber-700 max-w-3xl mx-auto">
                    ‘সব সেবা .শপ’ একটি স্বতন্ত্র সহায়তাকারী প্রতিষ্ঠান। আমরা বাংলাদেশ সরকারের কোনো অঙ্গসংস্থা নই এবং কোনো সরকারি পরিচয় ব্যবহার করি না। আমাদের লক্ষ্য, সাধারণ মানুষকে সরকারি ও বেসরকারি অনলাইন সেবা গ্রহণে সহায়তা করা।
                </p>
           </div>
       </section>
    </div>
  );
};

export default HomePage;