Bloom

import { useId } from 'react';

const css = `
  .radio-bloom { --radio-bloom-sp: 5deg; --radio-bloom-sc: 0.6; --radio-bloom-c: 0.25; display: grid; justify-items: center; gap: 12px; }
  .radio-bloom:has(.radio-bloom__input[value='half']:checked) { --radio-bloom-sp: 20deg; --radio-bloom-sc: 0.85; --radio-bloom-c: 0.65; }
  .radio-bloom:has(.radio-bloom__input[value='full']:checked) { --radio-bloom-sp: 45deg; --radio-bloom-sc: 1; --radio-bloom-c: 1; }
  .radio-bloom__plant { position: relative; width: 110px; height: 104px; }
  .radio-bloom__stem { position: absolute; left: 54px; top: 44px; width: 3px; height: 60px; border-radius: 2px; background: light-dark(#cbced3, #393c41); }
  .radio-bloom__leaf { position: absolute; top: 72px; width: 18px; height: 8px; border-radius: 0 100% 0 100%; background: light-dark(#cbced3, #393c41); }
  .radio-bloom__petal {
    position: absolute;
    left: 49px;
    top: 16px;
    width: 13px;
    height: 28px;
    border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
    background: linear-gradient(light-dark(#373a40, #f1f2f3), light-dark(#5f626a, #a7abb2));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, light-dark(#6d7179, #7d8087) 50%, transparent);
    transform-origin: 50% 100%;
    transform: rotate(calc((var(--i) - 3.5) * var(--radio-bloom-sp))) scale(var(--radio-bloom-sc));
    transition: transform 0.75s cubic-bezier(0.3, 1.3, 0.5, 1) calc(var(--o) * 40ms);
  }
  .radio-bloom__heart {
    position: absolute;
    left: 49px;
    top: 38px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, light-dark(#42454c, #e5e6e9), light-dark(#6d7179, #7d8087));
    box-shadow: 0 0 10px color-mix(in oklab, light-dark(#373a40, #f1f2f3) 40%, transparent);
    transform: scale(var(--radio-bloom-c));
    transition: transform 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 0.15s;
  }
  .radio-bloom__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-bloom__opt {
    position: relative;
    padding: 5px 12px;
    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-bloom__opt:hover { color: light-dark(#42454c, #e5e6e9); }
  .radio-bloom__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
  .radio-bloom__opt:has(.radio-bloom__input:focus-visible) { outline: 2px solid light-dark(#5f626a, #a7abb2); outline-offset: 2px; }
  .radio-bloom__opt:has(.radio-bloom__input:checked) { background: light-dark(#42454c, #e5e6e9); color: light-dark(#fbfcfd, #121417); }
  @media (prefers-reduced-motion: reduce) {
    .radio-bloom * { transition-duration: 0.01s !important; transition-delay: 0s !important; }
  }
`;

const STAGES = [
  { value: 'bud', label: 'Bud' },
  { value: 'half', label: 'Opening' },
  { value: 'full', label: 'In bloom' },
];

export function BloomRadio() {
  const name = useId();
  return (
    <>
      <style>
        {css}
      </style>
      <div className="radio-bloom">
        <span className="radio-bloom__plant" aria-hidden="true">
          <span className="radio-bloom__stem" />
          <span className="radio-bloom__leaf" style={{ left: 57 }} />
          <span className="radio-bloom__leaf" style={{ left: 36, transform: 'scaleX(-1)' }} />
          {Array.from({ length: 8 }, (_, i) => (
            // The outer petals open last.
            <span key={i} className="radio-bloom__petal" style={{ '--i': i, '--o': Math.abs(i - 3.5) } as React.CSSProperties} />
          ))}
          <span className="radio-bloom__heart" />
        </span>
        <div className="radio-bloom__opts" role="radiogroup" aria-label="Stage">
          {STAGES.map((s, i) => (
            <label key={s.value} className="radio-bloom__opt">
              <input className="radio-bloom__input" type="radio" name={name} value={s.value} defaultChecked={i === 0} />
              {s.label}
            </label>
          ))}
        </div>
      </div>
    </>
  );
}