'use client';

import React, { useState } from 'react';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
import { faArrowRight } from "@fortawesome/free-solid-svg-icons";

const C = {
  dark: "#12241A",
  green: "#347b36",
  lime: "#9dc92e",
};

const DEFAULT_FAQS = [
  {
    q: "Which solutions does Ecosphere offer?",
    a: "Ecosphere provides water and wastewater treatment solutions for various industries.",
  },
  {
    q: "What is a water treatment plant used for?",
    a: "A water treatment plant is used to remove all the impurities and make it fit for the purpose.",
  },
  {
    q: "Do they offer solutions for sewage treatment?",
    a: "Yes, Ecosphere offers sewage treatment solutions based on the project's capacity and requirements.",
  },
  {
    q: "Could treatments be made based on the needs of the site?",
    a: "Yes, Ecosphere designs treatment systems depending on the wastewater type, capacity, available space and operational requirements.",
  },
];

function ChevronIcon({ open }) {
  return (
    <FontAwesomeIcon
      icon={faChevronDown}
      className={`w-5 h-5 shrink-0 transition-transform duration-300 ${open ? "rotate-180" : ""}`}
    />
  );
}

export default function FaqSection({
  eyebrow = "GOT QUESTIONS?",
  title = "Frequently Asked Questions",
  subtitle = "Everything you need to know about our products, process, and support. Can't find what you're looking for? Reach out to our team directly.",
  faqs = DEFAULT_FAQS,
}) {
  const [openIndex, setOpenIndex] = useState(0);

  const toggle = (i) => {
    setOpenIndex((prev) => (prev === i ? -1 : i));
  };

  return (
    <section
      className="relative box-border w-full max-w-[100vw] overflow-x-clip py-10 lg:py-16"
      style={{
        backgroundColor: "#FCFCFC",
        backgroundImage: `
          linear-gradient(
            to right,
            rgba(0, 0, 0, 0.04) 1px,
            transparent 1px
          )
        `,
        backgroundSize: "16px 100%",
      }}
    >
      {/* Background Soft Atmospheric Glow */}
      <div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[350px] rounded-full blur-[140px] bg-[#479530]/15 pointer-events-none" />

      {/* Large Angular Shape */}
      <div
        className="absolute -left-24 -top-32 w-[480px] h-[480px] pointer-events-none z-0"
        style={{
          background: `linear-gradient(135deg, ${C.dark}09, transparent 65%)`,
          clipPath: "polygon(0% 0%, 70% 0%, 100% 100%, 0% 100%)",
        }}
      />

      <div className="relative z-10 mx-auto box-border w-full max-w-[1100px] px-4 sm:px-6 md:px-10 lg:px-12">

        {/* ================= HEADER ================= */}
        <div className="text-center mb-14 lg:mb-16">

          <div className="flex items-center justify-center gap-2 mb-5">
            <span
              className="w-3 h-3 flex items-center justify-center"
              style={{ backgroundColor: C.green }}
            >
              <span className="w-1.5 h-1.5 bg-white" />
            </span>
            <span
              className="text-[11px] font-bold uppercase tracking-[0.25em]"
              style={{ color: C.green }}
            >
              {eyebrow}
            </span>
          </div>

          <h2
            className="font-extrabold tracking-tight mb-4 text-[30px] sm:text-[40px] lg:text-[46px] leading-[1.1]"
            style={{ color: C.dark, letterSpacing: "-0.01em" }}
          >
            {title}
          </h2>

          <p
            className="max-w-2xl mx-auto text-[15.5px] sm:text-[17px] leading-[1.8]"
            style={{ color: "#5B6B61" }}
          >
            {subtitle}
          </p>

        </div>

        {/* ================= ACCORDION LIST ================= */}
        <div className="flex flex-col gap-4">
          {faqs.map((item, i) => {
            const isOpen = openIndex === i;

            return (
              <div
                key={i}
                className="relative overflow-hidden bg-white transition-all duration-300"
                style={{
                  border: `1px solid ${isOpen ? C.green + "55" : "#12241A14"}`,
                  boxShadow: isOpen
                    ? "0 20px 45px -20px rgba(18,36,26,0.25)"
                    : "0 2px 10px -4px rgba(18,36,26,0.06)",
                }}
              >
                {/* Left accent bar, only visible when open */}
                <div
                  className="absolute top-0 left-0 h-full transition-all duration-300"
                  style={{
                    width: isOpen ? "4px" : "0px",
                    background: `linear-gradient(180deg, ${C.green}, ${C.lime})`,
                  }}
                />

                <button
                  onClick={() => toggle(i)}
                  aria-expanded={isOpen}
                  className="w-full flex items-center justify-between gap-4 text-left px-5 sm:px-7 py-5 sm:py-6 focus:outline-none"
                >
                  <span
                    className="font-bold text-[15.5px] sm:text-[17.5px] leading-snug"
                    style={{ color: isOpen ? C.green : C.dark }}
                  >
                    {item.q}
                  </span>

                  <span
                    className="flex items-center justify-center w-8 h-8 sm:w-9 sm:h-9 shrink-0 transition-colors duration-300"
                    style={{
                      backgroundColor: isOpen ? C.green : "#12241A0A",
                      color: isOpen ? "#FFFFFF" : C.dark,
                    }}
                  >
                    <ChevronIcon open={isOpen} />
                  </span>
                </button>

                <div
                  className="grid transition-all duration-300 ease-in-out"
                  style={{
                    gridTemplateRows: isOpen ? "1fr" : "0fr",
                  }}
                >
                  <div className="overflow-hidden">
                    <p
                      className="px-5 sm:px-7 pb-5 sm:pb-6 pr-10 text-[14.5px] sm:text-[16px] leading-[1.8]"
                      style={{ color: "#5B6B61" }}
                    >
                      {item.a}
                    </p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* ================= BOTTOM CTA ================= */}
          {/* <div
            className="mt-14 lg:mt-16 flex flex-col sm:flex-row items-center justify-between gap-6 px-6 sm:px-9 py-7 sm:py-8"
            style={{
              backgroundColor: C.dark,
            }}
          >
            <div>
              <p className="text-white font-bold text-[17px] sm:text-[19px] mb-1">
                Still have questions?
              </p>
              <p className="text-[14px] sm:text-[15px]" style={{ color: "#B7C4BC" }}>
                Our team is ready to help with specifications, pricing, and lead times.
              </p>
            </div>

            <button
              className="shrink-0 px-8 py-3.5 font-bold uppercase tracking-[0.15em] text-[12px] text-white shadow-md transition-all hover:opacity-90 flex items-center gap-2"
              style={{ backgroundColor: C.green }}
            >
              Contact Us

              <FontAwesomeIcon icon={faArrowRight} className="w-4 h-4" />
            </button>
          </div> */}

      </div>
    </section>
  );
}