"use client"

import { useState } from "react"
import type { SaflAboutData } from "@/lib/strapi/types"
import { SectionBadge } from "./shared"

export default function SaflAbout({ data }: { data: SaflAboutData }) {
  const [expanded, setExpanded] = useState(false)
  const hasMore = data.paragraphs.length > 1
  const paragraphs = expanded ? data.paragraphs : data.paragraphs.slice(0, 1)

  return (
    <section className="relative max-w-[1296px] mx-auto px-4 lg:px-0 py-8 lg:py-20">
      <div
        className="relative rounded-[16px] px-4 py-8 lg:p-8 overflow-hidden"
        style={{
          background:
            "radial-gradient(ellipse at 42% 84%, rgba(231,190,198,0) 0%, rgba(231,190,198,1) 100%), linear-gradient(90deg, #fff 0%, #fff 100%)",
        }}
      >
        <p
          className="font-accent absolute left-1/2 -translate-x-1/2 top-[90px] lg:top-8 text-[64px] sm:text-[96px] md:text-[128px] lg:text-[300px] leading-[0.7] tracking-[-2px] sm:tracking-[-3px] md:tracking-[-5.13px] lg:tracking-[-12px] text-[rgba(102,15,32,0.04)] whitespace-nowrap select-none pointer-events-none w-max max-w-fit font-bold"
          aria-hidden="true"
        >
          {data.watermarkText}
        </p>

        <div className="relative z-10 flex flex-col gap-[88px] lg:gap-[108px]">
          <SectionBadge label={data.badge} icon={data.badgeIcon} />

          <div className="bg-white rounded-[16px] p-6 overflow-hidden relative">
            {data.decorativeImage ? (
              <img
                src={data.decorativeImage}
                alt=""
                loading="lazy"
                className="absolute right-0 top-[-86px] w-[415px] h-[400px] hidden lg:block pointer-events-none"
                aria-hidden="true"
              />
            ) : null}

            <div className="font-sans text-[16px] text-black/60 leading-[1.5] max-w-[885px] mb-4 flex flex-col gap-4">
              {paragraphs.map((para, i) => (
                <p key={i}>{para}</p>
              ))}
            </div>
            {hasMore ? (
              <button
                onClick={() => setExpanded(!expanded)}
                className="text-[#20262b] text-[14px] leading-[22px] font-bold uppercase underline tracking-wide"
              >
                {expanded ? "read less" : "read more"}
              </button>
            ) : null}
          </div>
        </div>
      </div>
    </section>
  )
}