'use client';
import { useState } from 'react';
import Image from 'next/image';
import styles from './AboutFAQ.module.css';

const faqs = [
  {
    q: 'Is your restaurant completely vegetarian?',
    a: 'Yes — My Dosa Place is 100% vegetarian and always has been. We serve no meat, poultry, or seafood of any kind. Our kitchen is entirely lacto-vegetarian, and we also accommodate vegan guests by preparing dishes without dairy upon request.',
  },
  {
    q: 'Do you make your batter fresh daily?',
    a: 'Every single day. Our kitchen team arrives at 5 AM to begin stone-grinding the rice and lentils that form the base of our dosa and idli batters. After grinding, the batter ferments naturally for 12 hours at room temperature before service. We never use commercial batter mixes.',
  },
  {
    q: 'Can you accommodate food allergies and intolerances?',
    a: 'We do our best to accommodate common allergies and intolerances. Please inform our staff when you arrive, and we will guide you through safe menu choices and speak with our kitchen team. While we take every precaution, please note that our kitchen handles common allergens including peanuts, tree nuts, and gluten-containing ingredients.',
  },
  // {
  //   q: 'Do you take reservations, or is it walk-in only?',
  //   a: 'We welcome both! Walk-ins are always welcome during opening hours, and we typically accommodate groups of four or fewer quickly. For larger parties (five or more), a reservation is strongly recommended, especially on weekends. You can reserve a table online, by phone, or by visiting us in person.',
  // },
  // {
  //   q: 'Where do your ingredients come from?',
  //   a: 'We source produce from local Ontario farms wherever the seasons allow. Specialty South Indian ingredients — specific lentils, tamarind, curry leaves, and select spices — are imported directly from trusted suppliers in Tamil Nadu and Kerala to maintain authenticity. Every ingredient is inspected by our head chef before use.',
  // },
  // {
  //   q: 'Do you offer catering or private dining for events?',
  //   a: 'Yes — we offer catering for corporate lunches, cultural celebrations, and private family events. Our Royal South Indian Thali package is especially popular for group dining. Contact us directly via phone or our contact form to discuss your event size, dietary requirements, and menu preferences.',
  // },
];

export default function AboutFAQ() {
  const [openIndex, setOpenIndex] = useState(0);

  return (
    <section className={styles.section}>
      <div className={styles.container}>
        {/* Left — Image */}
        <div className={styles.imageCol}>
          <div className={styles.imageWrapper}>
            <Image
              src="/images/south-indian-thali.jpeg"
              alt="South Indian Thali at My Dosa Place"
              fill
              style={{ objectFit: 'cover' }}
            />
            <div className={styles.imageBadge}>
              <span className={styles.badgeNum}>100%</span>
              <span className={styles.badgeLabel}>Authentic<br />Recipes</span>
            </div>
            <div className={styles.imageAccent} />
          </div>
        </div>

        {/* Right — Header + Accordion */}
        <div className={styles.rightCol}>
          <div className={styles.header}>
            <span className={styles.eyebrow}>
            <span className={styles.eyebrowIcon}>❓</span> FAQs
          </span>
            <h2 className={styles.title}>
            Frequently Asked <em>Questions</em>
          </h2>
            <p className={styles.lead}>
              Can't find your answer here? We're always happy to chat — call us or drop by during service hours.
            </p>
          </div>

          <div className={styles.accordion}>
            {faqs.map((faq, i) => (
              <div
                key={i}
                className={`${styles.item} ${openIndex === i ? styles.open : ''}`}
              >
                <button
                  className={styles.question}
                  onClick={() => setOpenIndex(openIndex === i ? -1 : i)}
                  aria-expanded={openIndex === i}
                >
                  <span>{faq.q}</span>
                  <span className={styles.icon}>{openIndex === i ? '−' : '+'}</span>
                </button>
                <div className={styles.answerWrapper}>
                  <p className={styles.answer}>{faq.a}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
