/* Design reminder: Practical Navy + Mint Editorial. Use direct, factual answers and clear one-question-at-a-time disclosure. */
import { useState } from "react";
import { Minus, Plus } from "lucide-react";

const questions = [
  { question: "How do you calculate a cash offer?", answer: "We review the property’s location, condition, likely repair needs, comparable local sales, and current market conditions. We then explain the offer and give you time to decide whether it works for your situation." },
  { question: "Do I need to repair, clean, or empty the house first?", answer: "No. We consider houses in their current condition, including homes with deferred maintenance, unwanted belongings, or major repair needs. Tell us what is going on with the property when you request an offer." },
  { question: "Are there agent commissions or hidden fees?", answer: "You do not pay a real-estate agent commission when you sell directly to us. We will explain the purchase terms and standard closing process before you decide whether to proceed." },
  { question: "How soon could I close?", answer: "The timing depends on the property, title work, and your circumstances. Tell us your preferred schedule, and we will discuss whether a direct sale can support it." },
  { question: "Am I required to accept an offer?", answer: "No. Requesting an offer is free and does not commit you to sell. You can review the details, ask questions, and decide what is right for you." },
];

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

  return (
    <section id="faq" className="seller-faq" aria-labelledby="faq-title">
      <div className="shell seller-faq__inner">
        <div className="seller-faq__intro">
          <span className="eyebrow eyebrow--line eyebrow--dark">SELLER QUESTIONS</span>
          <h2 id="faq-title">Clear Answers Before You Decide</h2>
          <p>Selling a property is a meaningful decision. These are some of the questions homeowners ask before requesting a direct cash offer.</p>
          <a className="text-link text-link--navy" href="/how-it-works.html">See how the process works</a>
        </div>

        <div className="seller-faq__list" data-accordion="single">
          {questions.map((item, index) => {
            const isOpen = openIndex === index;
            const panelId = `seller-faq-panel-${index}`;
            return (
              <article className={`seller-faq__item${isOpen ? " is-open" : ""}`} key={item.question}>
                <h3>
                  <button className="seller-faq__trigger" type="button" aria-expanded={isOpen} aria-controls={panelId} onClick={() => setOpenIndex(isOpen ? null : index)}>
                    <span>{item.question}</span>
                    <span className="seller-faq__toggle" aria-hidden="true">{isOpen ? <Minus size={14} /> : <Plus size={14} />}</span>
                  </button>
                </h3>
                <div id={panelId} className="seller-faq__panel" hidden={!isOpen}>
                  <p>{item.answer}</p>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}
