"use client";
import React, { useEffect, useState } from "react";
import Image from "next/image";
import axios from "axios";

export default function Faqs() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        setLoading(true);
        const res = await axios.get("/api/get-component-data", {
          params: { component_name: "Faqs" },
        });
        setData(res.data.data);
      } catch (err) {
        setError("获取Faqs数据失败");
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, []);

  if (loading) return <div className="text-center py-20">Loading...</div>;
  if (error || !data) return null;

  // 主表字段
  const title = data.title || "Our Products";
  const subtitle = data.subtitle || "";
  const buttonText = data.button_text || "MORE";
  const buttonLink = data.button_link || "#";
  // 子表items
  const items = Array.isArray(data.items) ? data.items.slice(0, 6) : [];

  return (
    <section id="snippet-1" className="wrapper !bg-[#ffffff] ">
    <div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
      <div className="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-stretch">
        <div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[50px] flex flex-col justify-center min-h-[420px] bg-white p-6 md:p-10">
            <figure className="m-0 p-0 flex justify-center">
            <Image
              className="w-full max-w-[380px] h-[260px] object-cover rounded-xl shadow-lg mb-6"
              srcSet="/assets/img/illustrations/i5@2x.png 2x"
              alt="image"
              width="380"
              height="260"
              src={data.image}
            />
            </figure>
            <h2 className="font-extrabold text-3xl md:text-4xl mb-4 mt-2 leading-tight text-black truncate" title={data.p1 || title}>
            {data.p1}
            </h2>
            {/* 描述 */}
            <p>
            {data.description}
            </p>
            {/* 按钮 */}
            <a
            href={buttonLink}
            className="inline-flex items-center px-5 py-2 bg-[#1fc76f] rounded shadow hover:bg-[#1e9e4a] transition-colors duration-200 text-base font-semibold w-auto self-start"
            style={{ color: "#f8fafc" }}
          >
            {buttonText}
            <span className="ml-2">
              <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 13l5-4-5-4" stroke="#f8fafc" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </span>
          </a>
        </div>
        {/*/column */}
        <div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[50px] flex flex-col justify-center min-h-[420px]">
          <h2 className="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3">
          {title}
          </h2>
          <p className="lead text-[1rem] !mb-6 xxl:!pr-10">
          {subtitle}
          </p>
          <div className="accordion accordion-wrapper" id="accordionExample-2">
            {items.map((item, idx) => {
              const headingId = `heading-${idx}`;
              const collapseId = `collapse-${idx}`;
              return (
                <div className="card plain accordion-item" key={idx}>
                  <div className="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id={headingId}>
                    <button
                      className={`hover:!text-[#1fc76f] accordion-button${idx === 0 ? "" : " collapsed"}`}
                      data-bs-toggle="collapse"
                      data-bs-target={`#${collapseId}`}
                      aria-expanded={idx === 0 ? "true" : "false"}
                      aria-controls={collapseId}
                    >
                      {item.item_title}
                    </button>
                  </div>
                  <div
                    id={collapseId}
                    className={`accordion-collapse collapse${idx === 0 ? " show" : ""}`}
                    aria-labelledby={headingId}
                    data-bs-parent="#accordionExample-2"
                  >
                    <div className="card-body flex-[1_1_auto] !pb-4">
                      <p>{item.item_description}</p>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        {/*/column */}
      </div>
      {/*/.row */}
    </div>
    {/* /.container */}

    {/* /.container */}
  </section>
  );
}