mobile-app/lib/features/home/presentation/widgets/hero_section.dart

import 'package:flutter/material.dart';
import 'package:real_estate_mobile/core/constants/app_colors.dart';

class HeroSection extends StatelessWidget {
  const HeroSection({super.key});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // Background image
        ClipRRect(
          borderRadius: BorderRadius.circular(0),
          child: Image.asset(
            'assets/images/hero_bg.png',
            width: double.infinity,
            height: 580,
            fit: BoxFit.cover,
          ),
        ),
        // Content overlay
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 32),
          child: Column(
            children: [
              const SizedBox(height: 40),
              const Text(
                'Discover verified, top-rated real estate professionals.',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontFamily: 'Fractul',
                  fontSize: 30,
                  fontWeight: FontWeight.w700,
                  color: AppColors.primaryDark,
                  height: 1.1,
                ),
              ),
              const SizedBox(height: 30),
              // Search Agents Card
              _buildSearchCard(),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildSearchCard() {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: AppColors.accentOrange,
        borderRadius: BorderRadius.circular(15),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Center(
            child: Text(
              'Search Agents',
              style: TextStyle(
                fontFamily: 'Fractul',
                fontSize: 16,
                fontWeight: FontWeight.w600,
                color: AppColors.primaryDark,
              ),
            ),
          ),
          const SizedBox(height: 16),
          _buildSearchField('Types'),
          const SizedBox(height: 12),
          _buildSearchField('Name or Keyword'),
          const SizedBox(height: 12),
          _buildSearchField('Location'),
          const SizedBox(height: 12),
          _buildSearchField('Categories'),
          const SizedBox(height: 12),
          // See All Agents button
          SizedBox(
            width: double.infinity,
            child: ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                backgroundColor: AppColors.primaryDark,
                foregroundColor: Colors.white,
                padding: const EdgeInsets.symmetric(vertical: 14),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
              child: const Text(
                'See All Agents',
                style: TextStyle(
                  fontFamily: 'Fractul',
                  fontSize: 16,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSearchField(String hint) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Row(
        children: [
          Expanded(
            child: Text(
              hint,
              style: const TextStyle(
                fontFamily: 'SourceSerif4',
                fontSize: 14,
                fontWeight: FontWeight.w400,
                color: AppColors.primaryDark,
              ),
            ),
          ),
          if (hint == 'Types' || hint == 'Categories')
            const Icon(
              Icons.keyboard_arrow_down,
              color: AppColors.primaryDark,
              size: 20,
            ),
        ],
      ),
    );
  }
}