// === Now page — live-feeling widgets ===
function useTick(ms = 1000) {
  const [, setN] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setN(n => n + 1), ms);
    return () => clearInterval(id);
  }, [ms]);
}

function ClockWidget() {
  useTick(1000);
  const now = new Date();
  const opts = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false, timeZone: 'Australia/Brisbane' };
  const time = now.toLocaleTimeString('en-AU', opts);
  const date = now.toLocaleDateString('en-AU', { weekday: 'long', day: 'numeric', month: 'long', timeZone: 'Australia/Brisbane' });
  return (
    <div className="widget widget-clock">
      <div className="w-label mono">Brisbane · AEST</div>
      <div className="clock-time">{time}</div>
      <div className="w-sub mono">{date}</div>
    </div>
  );
}

function WeatherWidget() {
  // simulated since no network
  const conds = [
    { e: '☀', t: '27°', d: 'Clear · sunny QLD day' },
    { e: '⛅', t: '24°', d: 'Partly cloudy' },
    { e: '🌦', t: '22°', d: 'A few showers' },
    { e: '🌤', t: '26°', d: 'Warm, light breeze' },
  ];
  const [c] = useState(() => conds[Math.floor(Math.random() * conds.length)]);
  return (
    <div className="widget widget-weather">
      <div className="w-label mono">Weather · live</div>
      <div className="weather-row">
        <div className="weather-emoji">{c.e}</div>
        <div className="weather-t">{c.t}</div>
      </div>
      <div className="w-sub mono">{c.d}</div>
    </div>
  );
}

function SpotifyWidget() {
  const tracks = [
    { t: "Strobe", a: "deadmau5", d: "10:34" },
    { t: "Holocene", a: "Bon Iver", d: "5:36" },
    { t: "Heartbeats", a: "José González", d: "2:43" },
    { t: "Re: Stacks", a: "Bon Iver", d: "6:40" },
    { t: "Avril 14th", a: "Aphex Twin", d: "2:05" },
  ];
  const [i, setI] = useState(0);
  const [progress, setProgress] = useState(20);
  useEffect(() => {
    const id = setInterval(() => {
      setProgress(p => {
        if (p >= 100) { setI(x => (x + 1) % tracks.length); return 0; }
        return p + 0.4;
      });
    }, 200);
    return () => clearInterval(id);
  }, []);
  const cur = tracks[i];
  return (
    <div className="widget widget-spotify">
      <div className="spot-head">
        <div className="w-label mono">Now playing</div>
        <div className="spot-bars" aria-hidden>
          <span></span><span></span><span></span><span></span>
        </div>
      </div>
      <div className="spot-track">{cur.t}</div>
      <div className="spot-artist">{cur.a}</div>
      <div className="spot-bar"><div className="spot-fill" style={{ width: progress + '%' }}></div></div>
      <div className="w-sub mono spot-foot">
        <span>{Math.floor(progress / 100 * 60 * 4).toString().padStart(2,'0')}s played</span>
        <span>{cur.d}</span>
      </div>
    </div>
  );
}

function GitHubWidget() {
  // simulated activity grid
  const cells = Array(53 * 7).fill(0).map(() => {
    const r = Math.random();
    if (r < 0.55) return 0;
    if (r < 0.78) return 1;
    if (r < 0.92) return 2;
    if (r < 0.98) return 3;
    return 4;
  });
  return (
    <div className="widget widget-gh">
      <div className="w-label mono">Commits · 365d</div>
      <div className="gh-grid">
        {cells.map((c, i) => <span key={i} className={"gh-cell gh-l" + c}></span>)}
      </div>
      <div className="w-sub mono gh-foot">
        <span>823 contributions</span>
        <span className="gh-legend">
          <span className="gh-cell gh-l0"></span>
          <span className="gh-cell gh-l1"></span>
          <span className="gh-cell gh-l2"></span>
          <span className="gh-cell gh-l3"></span>
          <span className="gh-cell gh-l4"></span>
        </span>
      </div>
    </div>
  );
}

function ReadingWidget() {
  return (
    <div className="widget widget-reading">
      <div className="w-label mono">Currently reading</div>
      <div className="book-row">
        <div className="book-cover" aria-hidden>
          <span>📖</span>
        </div>
        <div>
          <div className="book-title">Four Thousand Weeks</div>
          <div className="book-author">Oliver Burkeman</div>
          <div className="book-progress mono">page 187 / 273</div>
        </div>
      </div>
    </div>
  );
}

function FocusWidget() {
  const focuses = [
    "Dashboards for Indigenous health research",
    "Strengthening our data-governance framework",
    "Mentoring the data ops team",
    "UQ alumni board & EDI initiatives",
    "Sharpening my Power BI & DAX",
  ];
  return (
    <div className="widget widget-focus">
      <div className="w-label mono">This week's focus</div>
      <ul className="focus-list">
        {focuses.map((f, i) => (
          <li key={i} className="focus-item">
            <span className="focus-bullet">→</span> {f}
          </li>
        ))}
      </ul>
      <div className="w-sub mono">last updated · today</div>
    </div>
  );
}

function NowSection() {
  return (
    <section id="now" data-screen-label="Now">
      <div className="wrap">
        <div className="section-header">
          <h2 data-split-words>Now — what I'm up to.</h2>
          <span className="meta-num">04 / 06</span>
        </div>
        <p className="section-lede fade-up">
          A live snapshot. Refreshed continuously, like the rest of life.
        </p>
        <div className="now-grid">
          <div className="now-cell now-cell-clock fade-up"><ClockWidget /></div>
          <div className="now-cell fade-up" style={{ transitionDelay: '60ms' }}><WeatherWidget /></div>
          <div className="now-cell now-cell-spot fade-up" style={{ transitionDelay: '120ms' }}><SpotifyWidget /></div>
          <div className="now-cell now-cell-gh fade-up" style={{ transitionDelay: '180ms' }}><GitHubWidget /></div>
          <div className="now-cell fade-up" style={{ transitionDelay: '240ms' }}><ReadingWidget /></div>
          <div className="now-cell now-cell-focus fade-up" style={{ transitionDelay: '300ms' }}><FocusWidget /></div>
        </div>
      </div>
    </section>
  );
}

window.NowSection = NowSection;