Recline

import { useId } from 'react';

const css = `
  .radio-recline { --radio-recline-b: -8deg; --radio-recline-l: 0deg; display: grid; justify-items: center; gap: 16px; }
  .radio-recline:has(.radio-recline__input[value='premium']:checked) { --radio-recline-b: -26deg; --radio-recline-l: -38deg; }
  .radio-recline:has(.radio-recline__input[value='business']:checked) { --radio-recline-b: -58deg; --radio-recline-l: -82deg; }
  .radio-recline__seat { position: relative; width: 120px; height: 78px; }
  .radio-recline__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: light-dark(#dbdde1, #2e3035); }
  .radio-recline__post { position: absolute; left: 44px; bottom: 2px; width: 6px; height: 20px; background: light-dark(#cbced3, #393c41); }
  .radio-recline__foot { position: absolute; left: 30px; bottom: 2px; width: 34px; height: 4px; border-radius: 2px; background: light-dark(#cbced3, #393c41); }
  .radio-recline__cushion { position: absolute; left: 30px; top: 44px; width: 46px; height: 12px; border-radius: 4px 6px 5px 4px; background: linear-gradient(light-dark(#50535b, #c6c8cd), light-dark(#6d7179, #7d8087)); }
  .radio-recline__back {
    position: absolute;
    left: 28px;
    top: 6px;
    width: 12px;
    height: 44px;
    border-radius: 6px 6px 4px 4px;
    background: linear-gradient(90deg, light-dark(#6d7179, #7d8087), light-dark(#50535b, #c6c8cd));
    transform-origin: 50% 100%;
    transform: rotate(var(--radio-recline-b));
    transition: transform 0.75s cubic-bezier(0.35, 1.3, 0.5, 1);
  }
  .radio-recline__back::before { content: ''; position: absolute; left: -1px; top: 0; width: 14px; height: 10px; border-radius: 6px; background: light-dark(#42454c, #e5e6e9); }
  .radio-recline__leg {
    position: absolute;
    left: 70px;
    top: 50px;
    width: 9px;
    height: 22px;
    border-radius: 3px 3px 5px 5px;
    background: linear-gradient(90deg, light-dark(#5f626a, #a7abb2), light-dark(#6d7179, #7d8087));
    transform-origin: 50% 0;
    transform: rotate(var(--radio-recline-l));
    transition: transform 0.75s cubic-bezier(0.35, 1.3, 0.5, 1) 0.12s;
  }
  .radio-recline__arm { position: absolute; left: 40px; top: 34px; width: 28px; height: 5px; border-radius: 3px; background: light-dark(#cbced3, #393c41); }
  .radio-recline__opts { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: light-dark(#f3f4f7, #1a1c1f); box-shadow: inset 0 0 0 1px light-dark(#dbdde1, #2e3035); }
  .radio-recline__opt {
    position: relative;
    padding: 5px 10px;
    border-radius: 7px;
    color: light-dark(#5f626a, #a7abb2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
  }
  .radio-recline__opt:hover { color: light-dark(#42454c, #e5e6e9); }
  .radio-recline__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
  .radio-recline__opt:has(.radio-recline__input:focus-visible) { outline: 2px solid light-dark(#5f626a, #a7abb2); outline-offset: 2px; }
  .radio-recline__opt:has(.radio-recline__input:checked) { background: light-dark(#42454c, #e5e6e9); color: light-dark(#fbfcfd, #121417); }
  @media (prefers-reduced-motion: reduce) {
    .radio-recline * { transition-duration: 0.01s !important; transition-delay: 0s !important; }
  }
`;

const CLASSES = [
  { value: 'economy', label: 'Economy' },
  { value: 'premium', label: 'Premium' },
  { value: 'business', label: 'Business' },
];

export function ReclineRadio() {
  const name = useId();
  return (
    <>
      <style>
        {css}
      </style>
      <div className="radio-recline">
        <span className="radio-recline__seat" aria-hidden="true">
          <span className="radio-recline__floor" />
          <span className="radio-recline__foot" />
          <span className="radio-recline__post" />
          <span className="radio-recline__back" />
          <span className="radio-recline__leg" />
          <span className="radio-recline__cushion" />
          <span className="radio-recline__arm" />
        </span>
        <div className="radio-recline__opts" role="radiogroup" aria-label="Cabin">
          {CLASSES.map((c, i) => (
            <label key={c.value} className="radio-recline__opt">
              <input className="radio-recline__input" type="radio" name={name} value={c.value} defaultChecked={i === 0} />
              {c.label}
            </label>
          ))}
        </div>
      </div>
    </>
  );
}