// home/CreateSheet.jsx — the ✛ Create bottom sheet.
// Tabs go places; sheets act on things. The center tab is a primary action,
// not a destination: it presents this sheet (event / task / note) over the
// current tab and dismisses back to wherever it was invoked.
//
// Two presentations:
//   CreateSheet        — standalone artboard (sheet over a dimmed Today)
//   TodayWithCreate    — interactive: ✛ toggles the sheet over a live Today

function CreateSheetPanel({ dark = false, onClose }) {
  return (
    <>
      <div className="sheet-scrim" onClick={onClose}/>
      <div className="sheet">
        <div className="grabber"/>
        <div className="sheet-hd">
          <div className="ttl">Create</div>
          <div className="x" onClick={onClose}><Icon name="close" size={16} stroke={2.4}/></div>
        </div>
        <div style={{ padding: '2px 20px 6px' }}>
          <div className="fn" style={{ color: 'var(--io-label-secondary)', lineHeight: 1.4 }}>
            One place for everything you add. Pick what this is.
          </div>
        </div>

        <CreateOpt icon="calendar" color="var(--io-red)"    title="Event"
          sub="Time, place, calendar — lands on your arc."/>
        <CreateOpt icon="check"    color="var(--io-indigo)" title="Task"
          sub="A to-do, with an optional project and due date."/>
        <CreateOpt icon="pencil"   color="var(--io-orange)" title="Note"
          sub="A quick thought. File it to a project later."/>

        <div style={{ padding: '20px 16px 0' }}>
          <button style={{
            width: '100%', border: 'none', cursor: 'pointer',
            background: 'var(--io-blue)', color: '#fff',
            borderRadius: 14, padding: '15px 18px',
            fontSize: 17, fontWeight: 600, letterSpacing: -0.4,
          }}>New event</button>
        </div>
      </div>
    </>
  );
}
window.CreateSheetPanel = CreateSheetPanel;

// Standalone artboard: sheet presented over a dimmed Today.
function CreateSheet({ dark = false, palette, timeOfDay = 'Auto' }) {
  const grad = gradientFor(palette, timeOfDay);
  return (
    <FrameScreen dark={dark}>
      {/* dimmed Today underneath (static) */}
      <div style={{ filter: 'saturate(0.96)' }}>
        <TodayHero
          name="Lukas" date="Sun · Mar 16"
          greeting={greetingForTod(timeOfDay, 'Lukas')}
          narrative="Three things matter today."
          grad={grad}
          metricLabel="Tonight's bedtime" metric="10:30" metricUnit="PM"
          metricSub="Worked back from tomorrow — wake 6:15, an 8-hour night."
          stats={[
            { l: 'Next up',    v: '10:30 AM', s: 'Standup · 22m' },
            { l: 'Last night', v: '6h 12m',   s: '−1.8h vs avg' },
            { l: 'Debt · 14d', v: '4.5h',     s: 'Recover tonight' },
          ]}
        />
      </div>
      <CreateSheetPanel dark={dark} onClose={() => {}}/>
      <TabBar5 active="today"/>
    </FrameScreen>
  );
}
window.CreateSheet = CreateSheet;

// Interactive: a live Today whose ✛ toggles the Create sheet, in-frame.
function TodayInteractive({ dark = false, tint = 'blue', heroMetric = 'bedtime', palette, timeOfDay = 'Auto' }) {
  return <Today dark={dark} tint={tint} heroMetric={heroMetric} palette={palette} timeOfDay={timeOfDay} interactive/>;
}
window.TodayInteractive = TodayInteractive;