"use client";

import { useMemo, useState } from "react";

export default function SleepWindDown() {
  const [wake, setWake] = useState(7);
  const [cycles, setCycles] = useState(5);
  const bed = useMemo(() => {
    // 90min cycles + 15min fall asleep
    const totalMin = cycles * 90 + 15;
    let h = wake - totalMin / 60;
    while (h < 0) h += 24;
    const hh = Math.floor(h);
    const mm = Math.round((h - hh) * 60);
    return `${String(hh).padStart(2, "0")}:${String(mm).padStart(2, "0")}`;
  }, [wake, cycles]);
  return (
    <section className="section kit-section" id="sleep">
      <div className="container">
        <div className="section-header reveal">
          <span className="section-tag">😴 SLEEP</span>
          <h2>睡眠周期入睡点</h2>
          <p>按起床时间倒推，睡够完整周期少浑噩</p>
        </div>
        <div className="kit-card reveal">
          <label className="kit-field"><span>想几点起 {String(wake).padStart(2, "0")}:00</span>
            <input type="range" min={5} max={11} value={wake} onChange={(e) => setWake(+e.target.value)} />
          </label>
          <label className="kit-field"><span>睡眠周期 {cycles} × 90 分钟</span>
            <input type="range" min={3} max={6} value={cycles} onChange={(e) => setCycles(+e.target.value)} />
          </label>
          <div className="kit-hero">
            <span>🛏️</span>
            <div>
              <small>建议入睡</small>
              <strong>{bed}</strong>
              <p>含约 15 分钟入睡缓冲 · 共约 {cycles * 1.5} 小时</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}