import type { FaqBlock as FaqBlockData } from '#web-runtime/types';

export default function FaqBlock({ block }: { block: FaqBlockData }) {
  return (
    <section
      className="border-b border-[#d6d7cf] py-[clamp(4.5rem,9vw,8rem)] nth-of-type-[even]:bg-[#fffdf8]"
      data-page-block={block.type}
    >
      <div className="mx-auto grid w-[min(calc(100%-2rem),76rem)] grid-cols-[minmax(15rem,0.65fr)_minmax(0,1fr)] items-start gap-[clamp(2rem,7vw,7rem)] max-[45rem]:w-[min(calc(100%-1.25rem),76rem)] max-[45rem]:grid-cols-1">
        {block.title || block.subtitle ? (
          <header className="sticky top-8 max-w-3xl max-[45rem]:static">
            {block.title ? (
              <h2 className="text-[clamp(2rem,4vw,3.8rem)] leading-[1.04] font-semibold tracking-[-0.055em]">
                {block.title}
              </h2>
            ) : null}
            {block.subtitle ? (
              <p className="mt-4 max-w-160 text-lg leading-[1.6] text-[#5d675f]">
                {block.subtitle}
              </p>
            ) : null}
          </header>
        ) : null}

        <div className="border-t border-[#172019]">
          {block.items.map((item, index) => (
            <details
              className="group border-b border-[#d6d7cf] py-5"
              key={`${block.id}-item-${index}`}
            >
              <summary className="flex cursor-pointer list-none items-center justify-between gap-4 text-[1.05rem] leading-[1.4] font-bold marker:hidden after:shrink-0 after:font-mono after:text-[1.35rem] after:text-[#517000] after:content-['+'] group-open:after:content-['−'] [&::-webkit-details-marker]:hidden">
                {item.question}
              </summary>
              <p className="mt-4 max-w-180 leading-[1.7] text-[#5d675f]">{item.answer}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}