"use client";

import { useState } from "react";
import { ChevronDown, ChevronUp } from "lucide-react";
import { faqs } from "@/lib/data";

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

  return (
    <section
      id="faq"
      style={{
        padding: "5rem 1.5rem",
        background: "#111520",
        borderTop: "1px solid #2a3050",
      }}
    >
      <div style={{ maxWidth: "800px", margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: "3rem" }}>
          <span
            style={{
              display: "inline-block",
              background: "rgba(232,92,26,0.1)",
              color: "#e85c1a",
              padding: "0.35rem 1rem",
              borderRadius: "2rem",
              fontSize: "0.8rem",
              fontWeight: 700,
              textTransform: "uppercase",
              letterSpacing: "0.1em",
              marginBottom: "1rem",
            }}
          >
            Questions fréquentes
          </span>
          <h2 style={{
            fontFamily: "var(--font-playfair), var(--font-oswald)",
            fontSize: "clamp(2rem, 4vw, 2.5rem)",
            color: "white",
            marginBottom: "1rem"
          }}>Tout savoir sur la location</h2>
          <div style={{ width: "60px", height: "4px", background: "#e85c1a", margin: "0 auto" }} />
          <p style={{ marginTop: "1rem", color: "rgba(255,255,255,0.7)" }}>
            Vos questions sur l&apos;assurance, la livraison à l&apos;aéroport et la réservation.
          </p>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
          {faqs.map((faq, index) => (
            <div
              key={index}
              style={{
                background: "#1c2133",
                borderRadius: "1rem",
                border: `1px solid ${openIndex === index ? "#e85c1a" : "#2a3050"}`,
                overflow: "hidden",
                transition: "border-color 0.3s ease",
                boxShadow: openIndex === index ? "0 8px 30px rgba(232,92,26,0.15)" : "none",
              }}
            >
              <button
                id={`faq-${index}`}
                onClick={() => setOpenIndex(openIndex === index ? null : index)}
                style={{
                  width: "100%",
                  padding: "1.25rem 1.5rem",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                  background: "none",
                  border: "none",
                  cursor: "pointer",
                  textAlign: "left",
                }}
                aria-expanded={openIndex === index}
              >
                <span
                  style={{
                    fontWeight: 600,
                    color: "white",
                    fontSize: "0.95rem",
                    paddingRight: "1rem",
                  }}
                >
                  {faq.question}
                </span>
                <span
                  style={{
                    flexShrink: 0,
                    width: 28,
                    height: 28,
                    borderRadius: "50%",
                    background: openIndex === index ? "#e85c1a" : "rgba(255,255,255,0.05)",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    transition: "background 0.3s",
                  }}
                >
                  {openIndex === index ? (
                    <ChevronUp size={16} color="white" />
                  ) : (
                    <ChevronDown size={16} color="rgba(255,255,255,0.5)" />
                  )}
                </span>
              </button>

              {openIndex === index && (
                <div
                  style={{
                    padding: "0 1.5rem 1.25rem",
                    color: "rgba(255,255,255,0.7)",
                    fontSize: "0.9rem",
                    lineHeight: 1.7,
                    borderTop: "1px solid #2a3050",
                    paddingTop: "1rem",
                  }}
                >
                  {faq.answer}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}