"use client";
import React, { useEffect, useState } from "react";
import axios from "axios";

export default function CallToAction() {
  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: "CallToAction" },
        });
        setData(res.data.data);
      } catch (err) {
        setError("获取CallToAction数据失败");
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, []);

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

  const title = data.title || "";
  const subtitle = data.subtitle || "";
  const buttonText = data.button_text || "";
  const icon = data.icon || "/files/icon.svg";
  const htmlCode = data.html_code || "";

  return (
    <section className="wrapper !bg-[#edf2fc]">
      <div className="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24 !text-center">
        <div className="flex flex-wrap mx-[-15px]">
          <div className="md:w-9/12 lg:w-7/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
            {htmlCode ? (
              <div
                style={{ display: "inline-block", width: "2.6rem", height: "2.6rem", marginBottom: "1rem"  }}
                dangerouslySetInnerHTML={{ __html: htmlCode }}
              />
            ) : (
              <img
                src={icon}
                alt="icon"
                style={{ display: "inline-block", width: "2.6rem", height: "2.6rem", marginBottom: "1rem" }}
              />
            )}
            <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-[1.05rem] !leading-[1.6] font-medium !mb-6 xl:!px-10 xxl:!px-20">
              {subtitle}
            </p>
          </div>
          {/* /column */}
        </div>
        {/* /.row */}
        <div className="flex flex-wrap mx-[-15px]">
          <div className="md:w-6/12 lg:w-5/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
            <div className="newsletter-wrapper">
              {/* Begin Mailchimp Signup Form */}
              <div id="mc_embed_signup2">
                <form
                  onSubmit={(e) => e.preventDefault()}
                  id="mc-embedded-subscribe-form2"
                  name="mc-embedded-subscribe-form"
                  className="validate"
                >
                  <div id="mc_embed_signup_scroll2">
                    <div className="!text-left input-group form-floating !relative flex flex-wrap items-stretch w-full">
                      <input
                        type="email"
                        defaultValue=""
                        name="EMAIL"
                        className="required form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:bg-[#ffffff] focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
                        placeholder=""
                        id="mce-EMAIL2"
                      />
                      <label
                        className="!ml-[0.05rem] !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none origin-[0_0] px-4 py-[0.6rem] left-0 top-0"
                        htmlFor="mce-EMAIL2"
                      >
                        Email
                      </label>
                      <input
                        type="submit"
                        value={buttonText || "Submit"}
                        name="subscribe"
                        id="mc-embedded-subscribe2"
                        className="!text-[.85rem] btn btn-primary !text-white !bg-[#1fc76f] border-[#1fc76f] hover:text-white hover:bg-[#1fc76f] hover:!border-[#1fc76f] active:text-white active:bg-[#1fc76f] active:border-[#1fc76f] disabled:text-white disabled:bg-[#1fc76f] disabled:border-[#1fc76f] !relative z-[2] focus:z-[5] hover:!transform-none hover:!translate-none border-0"
                      />
                    </div>
                    <div id="mce-responses2" className="clear">
                      <div
                        className="response"
                        id="mce-error-response2"
                        style={{ display: "none" }}
                      />
                      <div
                        className="response"
                        id="mce-success-response2"
                        style={{ display: "none" }}
                      />
                    </div>
                    {/* real people should not fill this in and expect good things - do not remove this or risk form bot signups*/}
                    <div
                      style={{ position: "absolute", left: "-5000px" }}
                      aria-hidden="true"
                    >
                      <input
                        type="text"
                        name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc"
                        tabIndex={-1}
                        defaultValue=""
                      />
                    </div>
                    <div className="clear" />
                  </div>
                </form>
              </div>
              {/*End mc_embed_signup*/}
            </div>
            {/* /.newsletter-wrapper */}
          </div>
          {/* /column */}
        </div>
        {/* /.row */}
      </div>
      {/* /.container */}
    </section>
  );
}