Details Summary Accordion With Smooth Open

// Native <details> and <summary>: works with no script. Smooth height where the browser supports interpolate-size.
const items = [
  { q: "How long does a hand-thrown mug take to reach me?", a: "Every mug is thrown, dried for a week and fired twice, so allow three to four weeks from order to doorstep. We email a photo when yours comes out of the kiln." },
  { q: "Are the glazes safe for food and the dishwasher?", a: "Yes. All of our glazes are lead free and fired to stoneware temperature. They go in the dishwasher and microwave, though hand washing keeps the matte finishes looking new for longer." },
  { q: "Can I order a set in a colour that is not listed?", a: "Sets of six or more can be glazed in any of our test colours. Write to the studio with the shade you have in mind and we will send a sample tile first." },
  { q: "What happens if a piece arrives broken?", a: "Send us a photo within seven days and we will make a replacement in the next firing. You do not need to return the broken piece." },
];

export default function DetailsSummaryAccordionWithSmoothOpenCss() {
  return (
    <section className="dsa bg-stone-100 px-5 py-16 sm:py-20">
      <style>{`
        .dsa details { interpolate-size: allow-keywords; }
        .dsa details::details-content { block-size: 0; overflow: hidden; transition: block-size .35s cubic-bezier(.2,.7,.2,1), content-visibility .35s allow-discrete; }
        .dsa details[open]::details-content { block-size: auto; }
        .dsa summary { list-style: none; }
        .dsa summary::-webkit-details-marker { display: none; }
        .dsa .dsa-chev { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
        .dsa details[open] .dsa-chev { transform: rotate(180deg); }
        @media (prefers-reduced-motion: reduce) {
          .dsa details::details-content, .dsa .dsa-chev { transition: none; }
        }
      `}</style>
      <div className="mx-auto max-w-2xl">
        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-amber-800">Saltmarsh Pottery</p>
        <h2 className="mt-2 text-2xl font-semibold tracking-tight text-stone-900 sm:text-3xl">Orders and care</h2>
        <div className="mt-8 divide-y divide-stone-300 border-y border-stone-300">
          {items.map((it, i) => (
            <details key={it.q} open={i === 0}>
              <summary className="flex min-h-[56px] cursor-pointer items-center justify-between gap-4 py-4 text-left text-base font-medium text-stone-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-700 focus-visible:ring-offset-2 focus-visible:ring-offset-stone-100">
                {it.q}
                <svg className="dsa-chev h-5 w-5 shrink-0 text-stone-500" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true"><path d="M5 7.5l5 5 5-5" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </summary>
              <p className="pb-5 pr-8 text-[15px] leading-relaxed text-stone-600">{it.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}