// Landing v5 — the scroll-bloom companion.
// A small fixed flower in the bottom-left corner that opens petal-by-petal as
// the user scrolls the whole page (bud → full bloom), wrapped in a progress
// ring. It is the spine motif of the page. Reduced motion = fully open, static.

function BloomCompanion({ p }) {
  const reduced = useReducedMotion();
  const prog = useScrollProgress();
  const open = reduced ? 1 : prog;

  // Stage label tracks the journey as the logo blooms.
  const stages = [
    { at: 0.00, label: 'trying' },
    { at: 0.40, label: 'pregnant' },
    { at: 0.66, label: 'baby' },
    { at: 0.86, label: 'family' },
    { at: 0.985, label: 'in bloom' },
  ];
  let label = stages[0].label;
  for (const s of stages) if (open >= s.at) label = s.label;

  const R = 41, C = 2 * Math.PI * R;
  const dash = C * (1 - open);

  return (
    <div aria-hidden="true" style={{
      position: 'fixed', right: 22, bottom: 22, zIndex: 90,
      display: 'flex', alignItems: 'center',
      pointerEvents: 'none',
    }}>
      <div style={{
        position: 'relative', width: 96, height: 96, flexShrink: 0,
        background: 'rgba(255,253,246,0.82)', borderRadius: '50%',
        backdropFilter: 'blur(8px)', boxShadow: '0 10px 26px -10px rgba(42,27,20,0.35)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        border: `1px solid ${p.rule}`,
      }}>
        <svg width="96" height="96" viewBox="0 0 96 96" style={{ position: 'absolute', inset: 0, transform: 'rotate(-90deg)' }}>
          <circle cx="48" cy="48" r={R} fill="none" stroke={p.sageSoft} strokeWidth="3" />
          <circle cx="48" cy="48" r={R} fill="none" stroke={p.accent} strokeWidth="3"
            strokeLinecap="round" strokeDasharray={C} strokeDashoffset={dash}
            style={{ transition: reduced ? 'none' : 'stroke-dashoffset 120ms linear' }} />
        </svg>
        <DDBloom size={62} open={0.42 + 0.58 * open} glow={open > 0.9} />
      </div>
    </div>
  );
}

Object.assign(window, { BloomCompanion });