"use client";

import { useState } from "react";

const faqs = [
  {
    question: "Where is Splendor Onyx Blue located?",
    answer:
      "Splendor Onyx Blue is located at Plot No. 6, Sector 142, Noida, Gautam Buddha Nagar, Uttar Pradesh, near the Noida–Greater Noida Expressway.",
  },
  {
    question: "What types of properties are offered at Onyx Blue?",
    answer:
      "The project is advertised with ground-floor retail shops, first-floor retail and food court spaces, office suites and commercial office spaces.",
  },
  {
    question: "What is the price of a ground-floor retail shop?",
    answer:
      "The supplied indicative base rate is ₹35,000 per sq. ft., with a promotional discount of ₹2,000 per sq. ft. mentioned separately. Final pricing and discount eligibility must be confirmed through the current price list.",
  },
  {
    question: "What is the price of first-floor retail shops?",
    answer:
      "The supplied indicative base rate is ₹25,000 per sq. ft., with an advertised ₹2,000 per sq. ft. discount. Actual prices depend on unit selection and applicable charges.",
  },
  {
    question: "What is the price of office suites?",
    answer:
      "The supplied indicative rate for office suites is ₹11,000 per sq. ft., subject to confirmation.",
  },
  {
    question: "What is the price of office spaces?",
    answer:
      "The supplied indicative rate for office spaces is ₹10,000 per sq. ft., subject to confirmation.",
  },
  {
    question: "What are the first-floor unit sizes?",
    answer:
      "The provided first-floor drawing shows unit sizes ranging from approximately 219 to 396 sq. ft. Exact saleable areas and availability should be checked against the latest approved inventory.",
  },
  {
    question: "Is Onyx Blue RERA registered?",
    answer:
      "Yes. The project is registered with UP-RERA under registration number UPRERAPRJ920006/03/2024.",
  },
  {
    question: "Who is the developer of Onyx Blue?",
    answer:
      "Onyx Blue is promoted by Splendor Information Technology Private Limited, part of Splendor Group.",
  },
  {
    question: "How many towers are planned?",
    answer:
      "The project marketing material describes three proposed towers within an approximately 10-acre development.",
  },
  {
    question: "Is metro connectivity available?",
    answer:
      "Yes. The project is located near Sector 142 Metro Station on the Noida Metro Aqua Line.",
  },
  {
    question: "What is the declared project completion date?",
    answer:
      "The UP-RERA registered completion date is 30 June 2030. Unit-specific possession schedules should be confirmed through the developer's approved documentation.",
  },
  {
    question: "How can I get the latest price list or arrange a site visit?",
    answer:
      "Submit the enquiry form with your preferred property type and contact details. The sales team can share updated pricing, floor plans, available inventory and site-visit information.",
  },
];

export default function Faq() {
  const [openIndex, setOpenIndex] = useState<number | null>(0);

  return (
    <div className="faq-list">
      {faqs.map((item, index) => {
        const isOpen = openIndex === index;
        return (
          <div className={`faq-item${isOpen ? " is-open" : ""}`} key={item.question}>
            <button
              type="button"
              className="faq-question"
              aria-expanded={isOpen}
              onClick={() => setOpenIndex(isOpen ? null : index)}
            >
              <span>{item.question}</span>
              <span className="faq-icon" aria-hidden="true">
                {isOpen ? "−" : "+"}
              </span>
            </button>
            {isOpen ? <p className="faq-answer">{item.answer}</p> : null}
          </div>
        );
      })}
    </div>
  );
}