CityCards_Customer_Flutter/lib/faq/faq_view.dart

import 'package:citycards_customer/common_packages/app_bar.dart';
import 'package:citycards_customer/common_packages/custom_expansion_tile.dart';
import 'package:citycards_customer/common_packages/custom_text.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding:  EdgeInsets.symmetric(horizontal: 20.w, vertical: 10.h),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                CommonAppBar(isWhiteLogo: false, isProfilePage: true),
                SizedBox(
                  height: 12.h,
                ),
                Divider(
                  height: 1.h,
                  color: Color(0xFFD9D9D9),
                ),
                 SizedBox(height: 22.h),

                // Back + Title
                Row(
                  children: [
                    GestureDetector(
                        onTap: (){
                          Navigator.pop(context);
                        },
                        child: Icon(Icons.arrow_back, size: 24.sp)),
                    SizedBox(width: 8.w),
                    Text(
                      "FAQ",
                      style: TextStyle(
                        fontSize: 12.sp,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 34.h),

                FAQSection(title: "🧭 General FAQs", faqs: generalFAQs),
                SizedBox(height: 20.h),
                FAQSection(title: "✈️ Booking & Planning", faqs: bookingFaq),
                SizedBox(height: 20.h),
                FAQSection(title: "🌍 Discover & Explore", faqs: discoverFAQs),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

// Model for FAQ
class FAQItem {
  final String question;
  final String answer;

  FAQItem({required this.question, required this.answer});
}

// Sample FAQ data
final List<FAQItem> generalFAQs = [
  FAQItem(
    question: "What is CityCards?",
    answer:
        "You can browse without an account, but signing up allows you to save trips, sync data, and get personalized recommendations.",
  ),
  FAQItem(
    question: "Is the app free to use?",
    answer:
        "You can browse without an account, but signing up allows you to save trips, sync data, and get personalized recommendations.",
  ),
  FAQItem(
    question: "Do I need an account to use the app?",
    answer:
        "You can browse without an account, but signing up allows you to save trips, sync data, and get personalized recommendations.",
  ),
];

final List<FAQItem> discoverFAQs = [
  FAQItem(
    question: "How does the app recommend destinations?",
    answer:
        "You can browse without an account, but signing up allows you to save trips, sync data, and get personalized recommendations.",
  ),
  FAQItem(
    question: "Can I create a custom itinerary?",
    answer:
        "You can browse without an account, but signing up allows you to save trips, sync data, and get personalized recommendations.",
  ),
  FAQItem(
    question: "Does the app work offline?",
    answer:
        "You can browse without an account, but signing up allows you to save trips, sync data, and get personalized recommendations.",
  ),
];

final List<FAQItem> bookingFaq = [
  FAQItem(
    question: "Can I modify or cancel my bookings?",
    answer:
        "You can browse without an account, but signing up allows you to save trips, sync data, and get personalized recommendations.",
  ),
  FAQItem(
    question: "Can I plan multi-city trips?",
    answer:
        "You can browse without an account, but signing up allows you to save trips, sync data, and get personalized recommendations.",
  ),
  FAQItem(
    question: "Can I book hotels through the app?",
    answer:
        "You can browse without an account, but signing up allows you to save trips, sync data, and get personalized recommendations.",
  ),
];

// Widget for FAQ section
Widget FAQSection({required String title, required List<FAQItem> faqs}) {
  return Container(
    padding: EdgeInsets.symmetric(vertical: 12.h, horizontal: 8.w),
    decoration: BoxDecoration(
      border: Border.all(color: Color(0xFFF95F62)),
      borderRadius: BorderRadius.circular(10.r),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // Section heading
        CustomText(
          text: title,
          size: 16.sp,
          weight: FontWeight.w500,
          color: Color(0xFF212121),
        ),
        SizedBox(height: 12.h),

        // Dynamic list of questions
        Column(
          children: faqs.map((faq) {
            int index = faqs.indexOf(faq);
            return Column(
              children: [
                CustomExpansionTile(
                  minTileHeight: 42.h,
                  borderRadius: BorderRadius.circular(5.r),
                  backgroundColor: Color(0xFFFEE7E7),
                  collapsedBackgroundColor: Color(0xFFFEE7E7),
                  tilePadding: EdgeInsets.symmetric(
                    horizontal: 14.w,
                    vertical: 0,
                  ),
                  childrenPadding: EdgeInsets.only(left: 12.w,right: 12.w, bottom: 12.h),
                  title: Text(faq.question, style: TextStyle(fontSize: 14.sp)),
                  children: [
                    Text(
                      faq.answer,
                      style: TextStyle(color: Color(0xFF5C5C5C), fontSize: 14.sp),
                    ),
                  ],
                ),
                if (index != faqs.length - 1) SizedBox(height: 8.h), // spacing
              ],
            );
          }).toList(),
        ),
      ],
    ),
  );
}