"use client";

import { useState } from "react";
import type { HomeContent } from "@/lib/content";

export default function FaqSection({ content }: { content: HomeContent }) {
  const { faq } = content;
  const [open, setOpen] = useState(0);

  return (
    <section id="faq" style={{ padding: "110px 0" }}>
      <div className="container-narrow">
        <div style={{ textAlign: "center" }}>
          <div
            style={{
              fontSize: 12,
              fontWeight: 700,
              letterSpacing: ".18em",
              textTransform: "uppercase",
              color: "#7e6516",
            }}
          >
            {faq.eyebrow}
          </div>
          <h2 style={{ fontWeight: 900, fontSize: 42, letterSpacing: "-.025em", margin: "14px 0 0", color: "#182233" }}>
            {faq.titleLead}
            <span style={{ color: "#006568" }}>{faq.titleAccent}</span>
          </h2>
        </div>
        <div
          style={{
            marginTop: 40,
            background: "rgba(255,255,255,.55)",
            backdropFilter: "blur(16px)",
            WebkitBackdropFilter: "blur(16px)",
            border: "1px solid rgba(255,255,255,.75)",
            borderRadius: 24,
            overflow: "hidden",
            boxShadow: "0 20px 50px rgba(2,47,49,.10)",
          }}
        >
          {faq.items.map((item, i) => {
            const isOpen = open === i;
            return (
              <div key={item.q} style={{ borderBottom: "1px solid rgba(2,47,49,.10)" }}>
                <button
                  className="faq-toggle"
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  aria-expanded={isOpen}
                  style={{
                    width: "100%",
                    textAlign: "left",
                    background: "transparent",
                    border: 0,
                    padding: "24px 28px",
                    display: "flex",
                    justifyContent: "space-between",
                    gap: 16,
                    alignItems: "center",
                    cursor: "pointer",
                    fontWeight: 700,
                    fontSize: 17,
                    color: "#1b2023",
                  }}
                >
                  <span>{item.q}</span>
                  <span style={{ color: "#006568", fontSize: 24, flex: "0 0 auto" }}>{isOpen ? "–" : "+"}</span>
                </button>
                {isOpen && (
                  <div style={{ padding: "0 28px 26px", fontSize: 15, lineHeight: 1.65, color: "#4a4f54" }}>{item.a}</div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}