"use client";

import { useEffect, useRef, useState } from "react";

export type whatAreEwcData = {
  title?: string;
  description?: string;
};

export default function WhatAreEWCCodes({ data }: { data?: any }) {
  const sectionRef = useRef<HTMLElement>(null);
  const [inView, setInView] = useState(false);


  const title = String(data?.title ?? "").trim();
  const introIconSvg = String(data?.intro_text?.[0]?.svg ?? "")
    .replace(/\\n/g, "\n")
    .replace(/\\"/g, '"')
    .trim();
  const infoIntro = (data?.intro_text?.[0]?.value ? String(data?.intro_text?.[0]?.value).replace(/\\n/g, "\n") : "") || "";
  const infoDetailHtml = (data?.intro_text?.[0]?.label ? data?.intro_text?.[0]?.label : "") || "";


  useEffect(() => {
    const el = sectionRef.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([entry]) => setInView(!!entry.isIntersecting),
      { threshold: 0.12, rootMargin: "0px" }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  
  if (!data) return null;


  return (
    <section
      ref={sectionRef}
      className={`w-full mx-auto mb-[50px] sm:mb-12 md:mb-14 lg:mb-16 xl:mb-[70px] font-outfit  ${inView ? "what-ewc-in" : ""}`}
    >
      <style dangerouslySetInnerHTML={{
        __html: `
        .what-ewc-row1 { opacity: 0; }
        .what-ewc-row2 { opacity: 0; }
        .what-ewc-in .what-ewc-row1 {
          animation: what-ewc-from-right 0.6s ease-out forwards;
        }
        .what-ewc-in .what-ewc-row2 {
          animation: what-ewc-from-below 0.6s ease-out 0.15s forwards;
        }
        @keyframes what-ewc-from-right {
          from { opacity: 0; transform: translateX(24px); }
          to { opacity: 1; transform: translateX(0); }
        }
        @keyframes what-ewc-from-below {
          from { opacity: 0; transform: translateY(18px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}} />
        <div className="what-ewc-row1 flex flex-col xl:flex-row justify-between items-start border-b border-[#DDDDDD] mb-10 md:mb-12 pb-[50px] pb-[20px] mb-[20px] xl:pb-[30px] xl:mb-[30px]">
          {title ? (
            <h2 className="font-lexend font-light text-[#1a1a1a] leading-tight ">
              {(() => {
                const words = title ? title.split(/\s+/) : [];
                return (
                  <>
                    {words[0] ?? ""}
                    {words.length > 1 ? <span className="font-medium"> {" "}{words.slice(1).join(" ")}</span> : null}
                  </>
                );
              })()}
            </h2>
          ) : null}
          {data?.description ? (
            <div 
                className="xl:max-w-[621px] xl:text-right font-outfit text-[#424242] font-light !text-[20px] rich-text-container"
                dangerouslySetInnerHTML={{ __html: String(data?.description).replace(/\\n/g, '<br/>') }}
            />
          ) : null}
        </div>
        <div className="what-ewc-row2 rounded-[20px] border border-[#DDDDDD] bg-white p-[30px] w-full">
          <div className="flex flex-col gap-5">
            {introIconSvg ? (
              <div
                className="md:hidden flex items-center justify-start shrink-0"
                dangerouslySetInnerHTML={{ __html: introIconSvg }}
              />
            ) : null}
            <div className="space-y-5 min-w-0">
                  <div className="space-y-3">
                    {infoIntro ? (
                      <div 
                        className="font-outfit text-[#424242] font-light !text-[20px] rich-text-container"
                        dangerouslySetInnerHTML={{ __html: infoIntro.replace(/\\n/g, '<br/>') }}
                      />
                    ) : null}
                    {infoDetailHtml ? (
                      <div
                        className="font-outfit text-[#757575] font-light !text-[20px] leading-relaxed rich-text-container"
                        dangerouslySetInnerHTML={{ __html: String(infoDetailHtml) }}
                      />
                    ) : null}
                  </div>
            </div>
          </div>
        </div>
    </section>
  );
}