// Hawk Eye — 4 view variants
// HE1: Habit (PEE) — mostly missed past months
// HE2: Countdown — 28-day countdown with one done day
// HE3: Calendar (default) — clean past/today/future
// HE4: Food (Junk Food filter) — single bad-meal marker today

function HESheet({ children }) {
  return (
    <div className="scr" style={{
      '--bg': A.bg, '--ink': A.ink, '--ink-2': A.ink2, '--ink-3': A.ink3,
      '--font-body': A.body, '--font-display': A.display,
      background: '#000',
    }}>
      <div style={{
        marginTop: 70,
        flex: 1, overflow: 'hidden',
        borderRadius: '24px 24px 0 0',
        background: A.bg,
        display: 'flex', flexDirection: 'column',
        boxShadow: '0 -2px 30px rgba(0,0,0,0.15)',
      }}>
        <HEHandle />
        <HETopBar />
        <div style={{ flex: 1, overflowY: 'auto' }}>
          {children}
        </div>
      </div>
    </div>
  );
}

const greenDot = (
  <span style={{ width: 18, height: 18, borderRadius: 9, border: '1.5px solid ' + HE_GREEN,
    background: HE_GREEN_BG, display: 'inline-flex', alignItems: 'center',
    justifyContent: 'center', color: HE_GREEN }}>
    <Iq width={10} height={10} strokeWidth="3"><path d="M4 12l6 6L20 6"/></Iq>
  </span>
);
const redDot = (
  <span style={{ width: 18, height: 18, borderRadius: 9, border: '1.5px solid ' + HE_RED,
    background: HE_RED_BG, display: 'inline-flex', alignItems: 'center',
    justifyContent: 'center', color: HE_RED }}>
    <Iq width={9} height={9} strokeWidth="2.2"><path d="M6 6l12 12M18 6L6 18"/></Iq>
  </span>
);
const futureDot = (
  <span style={{ width: 18, height: 18, borderRadius: 9, border: '1.5px solid ' + A.rule,
    background: 'transparent', display: 'inline-block' }} />
);
const todayDot = (
  <span style={{ width: 14, height: 14, borderRadius: 7, background: A.ink,
    display: 'inline-block' }} />
);
const muteDotXed = (
  <span style={{ width: 18, height: 18, borderRadius: 9, border: '1.5px solid #DCD2BB',
    background: '#EBE4D2', display: 'inline-flex', alignItems: 'center',
    justifyContent: 'center', color: '#9B9080' }}>
    <Iq width={9} height={9} strokeWidth="1.8"><path d="M6 6l12 12M18 6L6 18"/></Iq>
  </span>
);

Object.assign(window, {
  HESheet, greenDot, redDot, futureDot, todayDot, muteDotXed,
});