/* @component-map
 * App — Main container, header, phase switching
 * PhasePanel — Phase tabs, day grid, workout box, principles
 * ExerciseRow — Single exercise with expandable guide (cues, mistakes, video)
 * ProgressTracker — 60-day dot grid, stats display
 * @end-component-map */

import { PhasePanel } from './components/PhasePanel.jsx';
import { useState } from 'react';
import { ProgressTracker } from './components/ProgressTracker.jsx';

function App() {
  const [activePhase, setActivePhase] = useState(1);

  return (
    <div>
      <div className="hdr">
        <div className="eyebrow">Personal Training Plan</div>
        <h1>60-Day<br /><em>Recomposition</em></h1>
        <div className="pills">
          <div className="pill">Josh Byrd · 46 · 5'8" · 165lb</div>
          <div className="pill">10 min / day · AM</div>
          <div className="pill">Core + Upper Definition</div>
          <div className="pill">Stacks on Thursday Trainer</div>
        </div>
      </div>
      <div className="main">
        <div className="note-box">
          <strong>How to use:</strong> Click a phase tab then a day to load the workout. Click any exercise or the <strong>Form</strong> button to expand the guide — then hit <strong>Video</strong> to watch it embedded right here.
        </div>
        <PhasePanel activePhase={activePhase} setActivePhase={setActivePhase} />
        <div className="spacer"></div>
        <ProgressTracker />
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);