"use client";

import { useState } from "react";
import { regions } from "@/data/services";

interface RegionsSectionProps {
  serviceTitle: string;
}

export default function RegionsSection({ serviceTitle }: RegionsSectionProps) {
  const [openRegion, setOpenRegion] = useState<string | null>(null);

  return (
    <section
      className="py-12 px-4 bg-gray-light"
      aria-label="Regiões de atendimento">
      <div className="max-w-5xl mx-auto">
        <h2 className="text-2xl font-bold text-primary mb-6 text-center">
          Regiões onde a Kontec Engenharia atende {serviceTitle}
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
          {Object.entries(regions).map(([regionName, neighborhoods]) => (
            <div
              key={regionName}
              className="bg-white rounded-lg shadow-sm overflow-hidden">
              <button
                className="w-full px-4 py-3 text-left font-semibold text-primary hover:bg-gray-50 transition-colors flex justify-between items-center"
                onClick={() =>
                  setOpenRegion(openRegion === regionName ? null : regionName)
                }
                aria-expanded={openRegion === regionName}>
                {regionName}
                <svg
                  className={`w-4 h-4 transition-transform ${openRegion === regionName ? "rotate-180" : ""}`}
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  aria-hidden="true">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M19 9l-7 7-7-7"
                  />
                </svg>
              </button>
              {openRegion === regionName && (
                <div className="px-4 pb-3">
                  <ul className="text-sm text-text-light space-y-1">
                    {neighborhoods.map((n) => (
                      <li key={n}>{n}</li>
                    ))}
                  </ul>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}