// app.jsx — composition + design canvas + tweaks

const { useState, useEffect } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "mint"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(DEFAULTS);

  return (
    <>
      <DesignCanvas
        title="Gym app — liquid glass"
        subtitle="Apple-style refined glass · client iPhone + coach web · explore via Tweaks"
      >
        {/* ─── CLIENT · iPhone ─── */}
        <DCSection id="client" title="Client · iPhone" subtitle="Today's workout is the hero — fully interactive. 1RM chart, payment, profile, messaging follow.">
          <DCArtboard id="workout" label="Today's workout · interactive" width={390} height={844}>
            <ClientWorkout accent={t.accent} />
          </DCArtboard>
          <DCArtboard id="onerm" label="Estimated 1RM" width={390} height={844}>
            <ClientOneRM accent={t.accent} />
          </DCArtboard>
          <DCArtboard id="payment" label="Membership tiers" width={390} height={844}>
            <ClientPayment accent={t.accent} />
          </DCArtboard>
          <DCArtboard id="profile" label="Profile · goals + injuries" width={390} height={844}>
            <ClientProfile accent={t.accent} />
          </DCArtboard>
          <DCArtboard id="messaging" label="Coach chat · video call" width={390} height={844}>
            <ClientMessaging accent={t.accent} />
          </DCArtboard>
        </DCSection>

        {/* ─── COACH · Web ─── */}
        <DCSection id="coach" title="Coach · Web dashboard" subtitle="Dashboard headlines the overdue-program alert. Library, templates, CRM, inbox, profile follow.">
          <DCArtboard id="dashboard" label="Dashboard · interactive" width={1280} height={820}>
            <ChromeWindow tabs={[{ title: 'Gym app · Coach', active: true }]} activeIndex={0} url="app.gym.app/coach" width={1280} height={820}>
              <CoachDashboard accent={t.accent} />
            </ChromeWindow>
          </DCArtboard>
          <DCArtboard id="crm" label="CRM · paid + program status" width={1280} height={820}>
            <ChromeWindow tabs={[{ title: 'Clients · Gym app', active: true }]} activeIndex={0} url="app.gym.app/coach/clients" width={1280} height={820}>
              <CoachCRM accent={t.accent} />
            </ChromeWindow>
          </DCArtboard>
          <DCArtboard id="templates" label="Template builder" width={1280} height={820}>
            <ChromeWindow tabs={[{ title: 'Templates · Gym app', active: true }]} activeIndex={0} url="app.gym.app/coach/templates" width={1280} height={820}>
              <CoachTemplates accent={t.accent} />
            </ChromeWindow>
          </DCArtboard>
          <DCArtboard id="library" label="Exercise library" width={1280} height={820}>
            <ChromeWindow tabs={[{ title: 'Library · Gym app', active: true }]} activeIndex={0} url="app.gym.app/coach/library" width={1280} height={820}>
              <CoachLibrary accent={t.accent} />
            </ChromeWindow>
          </DCArtboard>
          <DCArtboard id="inbox" label="Inbox + thread" width={1280} height={820}>
            <ChromeWindow tabs={[{ title: 'Inbox · Gym app', active: true }]} activeIndex={0} url="app.gym.app/coach/inbox" width={1280} height={820}>
              <CoachMessaging accent={t.accent} />
            </ChromeWindow>
          </DCArtboard>
          <DCArtboard id="profile" label="Coach profile" width={1280} height={820}>
            <ChromeWindow tabs={[{ title: 'Profile · Gym app', active: true }]} activeIndex={0} url="app.gym.app/coach/me" width={1280} height={820}>
              <CoachProfile accent={t.accent} />
            </ChromeWindow>
          </DCArtboard>
        </DCSection>
      </DesignCanvas>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent color">
          <TweakRadio label="Tone" value={t.accent}
            options={['mint','teal','amber']}
            onChange={v => setTweak('accent', v)}
          />
          <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.55)', lineHeight: 1.45, marginTop: 4 }}>
            Mint is the canonical Apple-fitness green. Teal leans clinical. Amber is warmer, more gym-rat.
          </div>
        </TweakSection>
        <TweakSection label="How to use this canvas">
          <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.55)', lineHeight: 1.5 }}>
            Click any artboard to focus it fullscreen. Use ← / → to step between artboards. Drag artboards to reorder within a section.
            <br/><br/>
            <strong style={{ color: 'rgba(255,255,255,0.85)' }}>Interactive:</strong> Today's workout (tap exercises, log sets, rate difficulty) · Coach dashboard (dismiss alert, filter tabs) · Library (filter by category) · CRM (filter by status) · 1RM (switch lift).
          </div>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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